@sapudex/web-components 0.111.0 → 0.114.2

package/src/InputGroup.ts

@@ -0,0 +1,136 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExCheckbox from "./Checkbox.js";
+import UDExRadioButton from "./RadioButton.js";
+import UDExStatusMessage from "./StatusMessage.js";
+import InputGroupTemplate from "./generated/templates/InputGroupTemplate.lit.js";
+import {
+  VALUE_STATE_ERROR,
+  VALUE_STATE_SUCCESS,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import InputGroupCss from "./generated/themes/InputGroup.css.js";
+
+export enum GroupValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
+
+export enum Orientation {
+  Vertical = "Vertical",
+  Horizontal = "Horizontal",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-input-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/InputGroup.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+
+@customElement({
+  tag: "udex-input-group",
+  renderer: litRender,
+  styles: InputGroupCss,
+  template: InputGroupTemplate,
+  dependencies: [Icon, UDExStatusMessage],
+})
+
+class UDExInputGroup extends UI5Element {
+  /**
+   * Defines the group name of the component.
+   *
+   * @public
+   */
+  @property({ type: String })
+  groupName?: string;
+
+  /**
+   * Defines the orientation of the component.
+   *
+   * @default "Vertical"
+   * @public
+   */
+  @property({ type: Orientation, defaultValue: Orientation.Vertical })
+  orientation!: `${Orientation}`;
+
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "Standard"
+   * @public
+   */
+  @property({ type: GroupValueState, defaultValue: GroupValueState.Standard })
+  valueState!: `${GroupValueState}`;
+
+  /**
+   * Defines supporting text under the Input Group.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+  supportingText!: string;
+
+  /**
+   * Slot for input elements items.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true, individualSlots: true }) items!: Array<UDExCheckbox | UDExRadioButton>;
+
+  static i18nBundle: I18nBundle;
+
+  static async onDefine() {
+    UDExInputGroup.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
+  get _items() {
+    return this.items.map(el => {
+      if (this.groupName) { el.name = this.groupName; }
+      return {
+        item: el,
+      };
+    });
+  }
+
+  get valueStateTypeMappings(): Record<string, string> {
+    return {
+      "Success": UDExInputGroup.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      "Error": UDExInputGroup.i18nBundle.getText(VALUE_STATE_ERROR),
+    };
+  }
+
+  get hasValueState(): boolean {
+    return this.valueState !== GroupValueState.Standard;
+  }
+
+  get valueStateText(): string | undefined {
+    return this.supportingText || this.valueStateTypeMappings[this.valueState];
+  }
+}
+
+UDExInputGroup.define();
+
+export default UDExInputGroup;

package/src/MastheadMobileMenu.hbs

@@ -1,8 +1,10 @@
 <nav class="udex-masthead-mobile-menu" @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-mobile-menu__nav-holder">
-        <div class="udex-masthead-mobile-menu__list-search">
-            <slot name="search"></slot>
-        </div>
+        {{#if hasSearchSlot}}
+            <div class="udex-masthead-mobile-menu__list-search">
+                <slot name="search"></slot>
+            </div>
+        {{/if}}
         <ul class="udex-masthead-mobile-menu__list" role="menu">
             {{#if showNavigation}}
                 {{>nav-items}}
@@ -33,15 +35,6 @@
                         back-to-categories>
                     </udex-masthead-menu-item>
                 </li>
-                {{#if _category.url}}
-                    <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
-                        <udex-masthead-menu-item
-                            url="{{this._category.url}}"
-                            label="{{categoryLinkText}}"
-                            has-border>
-                        </udex-masthead-menu-item>
-                    </li>
-                {{/if}}
                 {{>category-items}}
             {{/if}}
         </ul>
@@ -64,13 +57,7 @@
 {{#*inline "nav-items"}}
     {{#each items}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
-            {{#if this.href}}
-                <udex-masthead-menu-item
-                    url="{{this.href}}"
-                    label="{{this.innerText}}"
-                    has-border>
-                </udex-masthead-menu-item>
-            {{else}}
+            {{#if this.subItems}}
                 <udex-masthead-menu-item
                     @click="{{../handleMenuItemClick}}"
                     label="{{this.innerText}}"
@@ -80,29 +67,65 @@
                     icon-end
                     first-level>
                 </udex-masthead-menu-item>
+            {{else}}
+                <udex-masthead-menu-item
+                    url="{{this.href}}"
+                    label="{{this.innerText}}"
+                    has-border>
+                </udex-masthead-menu-item>
             {{/if}}
         </li>
     {{/each}}
 {{/inline}}
 
 {{#*inline "categories"}}
-    {{#each _categories}}
+    {{#if _clickedItem.href}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
-                @click="{{../handleMenuCategoryClick}}"
-                url="{{this.url}}"
-                id="{{@index}}"
-                label="{{this.category}}"
-                type="Button"
-                second-level
-                has-border
-                icon-end>
+                url="{{_clickedItem.href}}"
+                label="{{overviewLinkText}}"
+                has-border>
             </udex-masthead-menu-item>
         </li>
+    {{/if}}
+    {{#each _categories}}
+        {{#if this.category}}
+            <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <udex-masthead-menu-item
+                    @click="{{../handleMenuCategoryClick}}"
+                    url="{{this.url}}"
+                    id="{{@index}}"
+                    label="{{this.category}}"
+                    type="Button"
+                    second-level
+                    has-border
+                    icon-end>
+                </udex-masthead-menu-item>
+            </li>
+        {{else}}
+            {{#each this.items}}
+                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                    <udex-masthead-menu-item
+                        url="{{this.url}}"
+                        label="{{this.title}}"
+                        has-border>
+                    </udex-masthead-menu-item>
+                </li>
+            {{/each}}
+        {{/if}}
     {{/each}}
 {{/inline}}
 
 {{#*inline "category-items"}}
+    {{#if _category.url}}
+        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <udex-masthead-menu-item
+                url="{{this._category.url}}"
+                label="{{overviewLinkText}}"
+                has-border>
+            </udex-masthead-menu-item>
+        </li>
+    {{/if}}
     {{#each _category.items}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item

package/src/MastheadMobileMenu.ts

@@ -230,13 +230,13 @@ class UDExMastheadMobileMenu extends UI5Element {
     const item = this.getItemByList(e.target as UDExMastheadItem);
     this._clickedItem = item;
     this._categories = this.getCategories(item.getSubItems());
+    this.setCategoryByItem(item);
     this._showCategories = true;
   }
 
   openCategoryItems(e: Event) {
     const item = e.target as UDExMastheadMenuItem;
-    const index = Number(item.getAttribute("id"));
-    this._category = this._categories[index];
+    this.setCategoryByItem(item);
     this._showCategories = false;
     this._showCategoryItems = true;
   }
@@ -252,6 +252,11 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._showCategoryItems = false;
   }
 
+  setCategoryByItem(item: UDExMastheadMenuItem | UDExMastheadItem) {
+    const index = Number(item.getAttribute("id"));
+    this._category = this._categories[index];
+  }
+
   getItemByList(el: UDExMastheadItem): UDExMastheadItem {
     const items = [
       ...this.items,
@@ -291,7 +296,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     return !this._showCategories && !this._showCategoryItems;
   }
 
-  get categoryLinkText(): string {
+  get overviewLinkText(): string {
     return UDExMastheadMobileMenu.i18nBundle.getText(OVERVIEW);
   }
 
@@ -306,6 +311,10 @@ class UDExMastheadMobileMenu extends UI5Element {
   get hasExploreBtnSlot(): boolean {
     return !!this.getSlottedNodes("exploreSapMobileButton").length;
   }
+
+  get hasSearchSlot(): boolean {
+    return !!this.search.length;
+  }
 }
 
 UDExMastheadMobileMenu.define();

package/src/MastheadProfileMenu.hbs

@@ -24,7 +24,7 @@
     {{#if logoutLink}}
         <div class="udex-masthead-profile-menu__actions" @click={{userLogout}}>
             <udex-masthead-menu-item
-                url="#"
+                url="{{logoutUrl}}"
                 label="{{logoutText}}">
             </udex-masthead-menu-item>
         </div>

package/src/PhoneNumberField.ts

@@ -6,6 +6,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
 import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExDropdown from "./Dropdown.js";
@@ -258,6 +259,8 @@ class UDExPhoneNumberField extends UI5Element {
     previousKey!: string;
 
   static i18nBundle: I18nBundle;
+  _dropdown!: UDExDropdown;
+  _handleResizeBound: ResizeObserverCallback
 
   static async onDefine() {
     UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
@@ -273,6 +276,23 @@ class UDExPhoneNumberField extends UI5Element {
 
   countriesList: ExtendedCountriesListPhoneNumberData[] = CountryListDB;
 
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this._dropdown = this.getDropdown();
+  }
+
   onClick(): void {
     if (this.isButtonDisabled) {
       return;
@@ -287,6 +307,10 @@ class UDExPhoneNumberField extends UI5Element {
     }
   }
 
+  _handleResize() {
+    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+  }
+
   handleInput(e: InputEvent) {
     this.value = (e.target as HTMLInputElement)?.value.trim();
 
@@ -309,11 +333,11 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   handleKeyDown = (e: KeyboardEvent) => {
-    const isKeyAllowed = e.key?.match(/[\d+-]/g)
+    const isKeyAllowed = e.key.match(/\d/)
       || this.allowedKeys.includes(e.key)
       || e.metaKey
-      || e.ctrlKey
-      || (e.key === " " && this.previousKey !== " ");
+      || e.ctrlKey;
+
     if (!isKeyAllowed) {
       e.preventDefault();
     }

package/src/Search.hbs

@@ -1,4 +1,26 @@
-<div class="udex-search__root">
+<div class="udex-search__root {{classWithPrefix}}">
+    {{#if isShowSearchHomePrefix}}
+        <div class="udex-search__prefix">
+            <button type="button"
+                    aria-haspopup="true"
+                    aria-controls="udex-search-prefix"
+                    class="udex-search__prefix-button"
+                    @click="{{handleDropdownClick}}">
+                <span class="udex-search__prefix-label">{{labelPrefix}}</span>
+                <ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon>
+            </button>
+            <ui5-popover
+                id="udex-search-prefix"
+                class="udex-search__prefix-popover"
+                hide-arrow
+                placement-type="Bottom"
+	            horizontal-align="Left"
+                style="{{prefixPopoverStyles}}"
+                @after-close="{{handleAfterClosePrefixPopover}}">
+                <slot></slot>
+            </ui5-popover>
+        </div>
+    {{/if}}
     <form role="search" class="udex-search__container {{focusClasses}} {{isNotEmptyClass}}">
         {{#if labelAnimationDisabled}}
             <input