@sapudex/web-components 0.117.1 → 0.127.6

package/src/AvatarGroup.ts

@@ -0,0 +1,135 @@
+import AvatarGroup, { IAvatarGroupItem } from "@ui5/webcomponents/dist/AvatarGroup.js";
+import AvatarGroupType from "@ui5/webcomponents/dist/types/AvatarGroupType.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+// Styles
+import UI5AvatarGroupCss from "@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js";
+
+import UDExAvatar, { AvatarColorScheme, AvatarSize } from "./Avatar.js";
+
+const avatarOffsets = {
+  [AvatarSize.XS]: {
+    [AvatarGroupType.Individual]: "0.0625rem",
+    [AvatarGroupType.Group]: "-0.75rem",
+  },
+  [AvatarSize.S]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-1.25rem",
+  },
+  [AvatarSize.M]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-1.625rem",
+  },
+  [AvatarSize.L]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-2rem",
+  },
+  [AvatarSize.XL]: {
+    [AvatarGroupType.Individual]: "0.25rem",
+    [AvatarGroupType.Group]: "-2.75rem",
+  },
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-avatar-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/AvatarGroup.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends AvatarGroup
+ * @public
+ */
+@customElement({
+  tag: "udex-avatar-group",
+  renderer: litRender,
+  styles: [UI5AvatarGroupCss],
+  dependencies: [UDExAvatar],
+})
+
+class UDExAvatarGroup extends AvatarGroup {
+  constructor() {
+    super();
+
+    this._itemNavigation = new ItemNavigation(this, {
+      getItemsCallback: () => {
+        return this._isGroup
+          ? []
+          : this.items.slice(0, this._hiddenStartIndex).map(
+            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
+          );
+      },
+    });
+  }
+  onEnterDOM(): void {
+    super.onEnterDOM();
+    const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
+    container?.addEventListener("mouseenter", this._onHover.bind(this, true));
+    container?.addEventListener("mouseleave", this._onHover.bind(this, false));
+  }
+
+  onExitDOM(): void {
+    super.onExitDOM();
+    const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
+    container?.removeEventListener("mouseenter", this._onHover.bind(this, true));
+    container?.removeEventListener("mouseleave", this._onHover.bind(this, false));
+  }
+
+  _onHover(hover: boolean) {
+    if (this._isGroup) {
+      this.items.every(avatar => {
+        avatar.toggleAttribute("hover", hover);
+        return !avatar.hidden;
+      });
+    }
+  }
+
+  _onfocusin(e: FocusEvent) {
+    const targetItem = this._isGroup
+      ? e.currentTarget
+      : (e.target as HTMLElement).shadowRoot?.firstElementChild;
+    this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);
+  }
+
+  _prepareAvatars() {
+    this._colorIndex = 0;
+    const visibleColors = Object.values(AvatarColorScheme);
+    let avatarInitials = "";
+
+    this.items.forEach((avatar, index) => {
+      if (++this._colorIndex > visibleColors.length - 3) {
+        this._colorIndex = 1;
+      }
+      avatar.interactive = !this._isGroup;
+      avatar.toggleAttribute("ui5-avatar", true);
+      avatarInitials += this._isGroup && avatar.hasAttribute("initials") && !avatar.shadowRoot?.firstElementChild?.hasAttribute("_has-image")
+        ? `${avatar.getAttribute("initials")} ` : "";
+
+      if (!avatar.getAttribute("color-scheme")) {
+        avatar.setAttribute("color-scheme", visibleColors[this._colorIndex]);
+      }
+
+      if (index !== this._itemsCount - 1 || this._customOverflowButton) {
+        avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];
+      }
+    });
+
+    if (avatarInitials) {
+      this.shadowRoot?.querySelector(".ui5-avatar-group-items")?.setAttribute("aria-label", `${avatarInitials}${this._ariaLabelText}`);
+    }
+  }
+}
+
+UDExAvatarGroup.define();
+
+export default UDExAvatarGroup;

package/src/DatePicker.hbs

@@ -16,7 +16,6 @@
         ?readonly="{{readonly}}"
         value="{{value}}"
         icon="appointment-2"
-        tabindex="0"
         value-state="{{valueState}}"
     >
     </udex-text-field>

package/src/Dropdown.hbs

@@ -2,14 +2,17 @@
     {{#if hasTriggerSlot}}
         <div
             class="udex-dropdown__opener"
+            role="{{triggerAccessibleRole}}"
+            aria-label="{{triggerAccessibleName}}"
+            aria-expanded="{{open}}"
             aria-haspopup="true"
-            aria-controls="udex-dropdown"
+            aria-controls="{{this._id}}_udex-dropdown"
             @click="{{onTriggerClick}}">
             <slot slot="trigger" name="trigger"></slot>
         </div>
     {{/if}}
     <ui5-popover
-        id="udex-dropdown"
+        id="{{this._id}}_udex-dropdown"
         class="udex-dropdown__pane"
         ?allow-target-overlap="{{disableAllowTargetOverlap}}"
         hide-arrow

package/src/Dropdown.ts

@@ -7,8 +7,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import DropdownTemplate from "./generated/templates/DropdownTemplate.lit.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
+import { TRIGGER } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import DropdownCss from "./generated/themes/Dropdown.css";
@@ -120,12 +123,20 @@ class UDExDropdown extends UI5Element {
 
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
-  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })
     accessibleRole!: `${PopupAccessibleRole}`;
 
+  /**
+   * Allows setting a custom role for dropdown trigger.
+   * @default "combobox"
+   * @public
+   */
+  @property({ type: String, defaultValue: "combobox" })
+    triggerAccessibleRole!: string;
+
   /**
    * Defines the content of the Dropdown.
    *
@@ -188,6 +199,12 @@ class UDExDropdown extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExDropdown.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
   onAfterRendering() {
     this.handleDirection();
   }
@@ -283,9 +300,13 @@ class UDExDropdown extends UI5Element {
     return !!this.footer.length;
   }
 
-  get disableAllowTargetOverlap() {
+  get disableAllowTargetOverlap(): boolean {
     return this.disableTargetOverlap?.toString() !== "true";
   }
+
+  get triggerAccessibleName(): string {
+    return UDExDropdown.i18nBundle.getText(TRIGGER);
+  }
 }
 
 UDExDropdown.define();

package/src/FilterMenu.hbs

@@ -1,4 +1,5 @@
 <udex-dropdown
+    id="{{this._id}}_dropdown-menu"
     class="udex-filter-menu"
     ?disable-target-overlap="{{disableTargetOverlap}}"
     placement-type="{{placementType}}"
@@ -30,6 +31,8 @@
         aria-label="{{accessibleName}}"
         aria-expanded="{{_open}}"
         aria-haspopup="true"
+        role="{{triggerAccessibleRole}}"
+        aria-controls="{{this._id}}_dropdown-menu"
         ?disabled="{{disabled}}"
         class="udex-filter-menu__trigger"
         slot="trigger"

package/src/FilterMenu.ts

@@ -269,12 +269,20 @@ class UDExFilterMenu extends UDExSearchableListBase {
 
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
-  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })
     accessibleRole!: `${PopupAccessibleRole}`;
 
+  /**
+   * Allows setting a custom role for dropdown trigger.
+   * @default "combobox"
+   * @public
+   */
+  @property({ type: String, defaultValue: "combobox" })
+    triggerAccessibleRole!: string;
+
   _dropdown!: UDExDropdown;
   _search!: UDExSearch;
   _hasFooterButtons!: boolean;

package/src/Footer.hbs

@@ -1,11 +1,10 @@
 <footer class="udex-footer">
   <div class="udex-footer__content">
     <div class="udex-footer__contact-social">
-      <div class="udex-footer__contact-wrapper">
         {{#if logoUrl}}
           <div class="udex-footer__logo">
             {{#if logoLink}}
-            <a href="{{parsedRef}}" @click="{{_onLogoClick}}">
+            <a href="{{parsedRef}}" @click="{{_onLogoClick}}" title="{{logoTitle}}" aria-label="{{logoAriaLabel}}">
               <img id="udex-footer__logo-image" src="{{logoUrl}}" class="udex-footer__logo-image" alt="{{logoAlt}}"/>
             </a>
             {{else}}
@@ -16,7 +15,6 @@
         {{#if isContactContainerVisible}}
         <div class="udex-footer__contact">
           {{#if contactNumbersArray.length}}
-          <div>
             <div class="udex-footer__numbers">
               <div class="udex-footer__icon-container">
                 <ui5-icon class="udex-footer__icon" name="headset"></ui5-icon>
@@ -43,10 +41,8 @@
                 {{/if}}
               </div>
             </div>
-          </div>
           {{/if}}
           {{#if contactUsLink}}
-          <div>
               <div class="udex-footer__contact-us">
                 <div class="udex-footer__icon-container">
                   <ui5-icon class="udex-footer__icon" name="email"></ui5-icon>
@@ -59,45 +55,17 @@
                   @click="{{_onContactEmailClick}}"
                 >{{contactUsAccessibleName}}</a>
               </div>
-          </div>
           {{/if}}
           {{#if chatWithUsLink}}
-          <div>
             <div class="udex-footer__chat-with-us">
               <div class="udex-footer__icon-container">
                 <ui5-icon class="udex-footer__icon" name="discussion-2"></ui5-icon>
               </div>
               <a href="{{chatWithUsLink}}" class="udex-footer__chat-with-us-link" @click="{{_onContactChatClick}}">{{chatWithUsAccessibleName}}</a>
             </div>
-          </div>
           {{/if}}
         </div>
         {{/if}}
-      </div>
-
-      {{#if socialLinksArray.length}}
-        <div class="udex-footer__social udex-footer__links-list--desktop">
-          <div class="udex-footer__social-container">
-            {{#each socialLinksArray}}
-              <div>
-                <a
-                  href="{{this.url}}"
-                  class="udex-footer__social-icon"
-                  data-name="{{this.name}}"
-                  @click="{{../_onSocialMediaLinkClick}}"
-                >
-                  <img
-                    alt="{{this.name}} {{../socialIconAccessibleName}}"
-                    title="{{this.name}}"
-                    src="{{this.iconUrl}}"
-                    loading="lazy"
-                  />
-                </a>
-              </div>
-            {{/each}}
-          </div>
-        </div>
-      {{/if}}
     </div>
 
     {{#if isContactContainerVisible}}
@@ -113,26 +81,25 @@
     <udex-divider class="udex-footer__divider"></udex-divider>
 
     {{#if socialLinksArray.length}}
-      <div class="udex-footer__social udex-footer__links-list--mobile">
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
-            <div>
               <a
                 href="{{this.url}}"
                 class="udex-footer__social-icon"
                 data-name="{{this.name}}"
+                data-id="{{this.id}}"
                 @click="{{../_onSocialMediaLinkClick}}"
               >
                 <img
+                  data-name="{{this.name}}"
+                  data-id="{{this.id}}"
                   alt="{{this.name}} {{../socialIconAccessibleName}}"
                   src="{{this.iconUrl}}"
                   loading="lazy"
                 />
               </a>
-            </div>
           {{/each}}
         </div>
-      </div>
     {{/if}}
   </div>
 
@@ -156,6 +123,7 @@
                   <a
                     aria-describedby="udex-footer__quick-links"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onQuickLinksClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -174,6 +142,7 @@
                     aria-describedby="udex-footer__footer__trending"
                     href="{{this.url}}"
                     @click="{{../_onTrendingClick}}"
+                    data-id="{{this.id}}"
                   >{{this.title}}</a>
                 </li>
               {{/each}}
@@ -190,6 +159,7 @@
                   <a
                     aria-describedby="udex-footer__about"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onAboutSapClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -207,6 +177,7 @@
                   <a
                     aria-describedby="udex-footer__site-information"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onSiteInformationClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -228,6 +199,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__quick-links"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onQuickLinksClick}}"
                       >{{this.title}}</a>
@@ -244,6 +216,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__footer__trending"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onTrendingClick}}"
                       >{{this.title}}</a>
@@ -260,6 +233,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__about"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onAboutSapClick}}"
                       >{{this.title}}</a>
@@ -276,6 +250,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__site-information"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onSiteInformationClick}}"
                       >{{this.title}}</a>

package/src/Footer.ts

@@ -51,6 +51,17 @@ export type FooterContactNumber = {
   country: string;
 };
 
+export type FooterDetailedClickEvent = {
+  originalEvent: PointerEvent,
+  name: string;
+  id?: string;
+  sourceNode: HTMLElement;
+}
+
+export type FooterBaseEventEvent = {
+  originalEvent: PointerEvent,
+}
+
 export const FooterBaseEvent = {
   detail: {
     originalEvent: { type: PointerEvent },
@@ -61,6 +72,7 @@ export const FooterDetailedEvent = {
   detail: {
     originalEvent: { type: PointerEvent },
     name: { type: String },
+    id: { type: String },
     sourceNode: { type: HTMLElement },
   },
 };
@@ -96,71 +108,81 @@ export const FooterDetailedEvent = {
  * @public
  * @allowPreventDefault
  */
-@event("logo-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("logo-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with "Back to Top" button
  * @public
  * @allowPreventDefault
  */
-@event("back-to-top-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("back-to-top-click", FooterBaseEvent)
 
 /**
  * Triggered on click interaction with phone number link in footer
  * @public
  * @allowPreventDefault
  */
-@event("contact-phone-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-phone-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with local country numbers list link
  * @public
  * @allowPreventDefault
  */
-@event("contact-phone-local-numbers-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-phone-local-numbers-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with "Contact us by email" link
  * @public
  * @allowPreventDefault
  */
-@event("contact-email-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-email-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with "Contact us by chat" link
  * @public
  * @allowPreventDefault
  */
-@event("contact-chat-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-chat-click", FooterBaseEvent)
 
 /**
  * Triggered on click interaction with a link within "Quick Links" category
  * @public
  * @allowPreventDefault
  */
-@event("quick-links-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("quick-links-click", FooterDetailedEvent)
 /**
  * Triggered on click interaction with a link within "Trending" category
  * @public
  * @allowPreventDefault
  */
-@event("trending-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("trending-click", FooterDetailedEvent)
 /**
  * Triggered on click interaction with a link within "About SAP" category
  * @public
  * @allowPreventDefault
  */
-@event("about-sap-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("about-sap-click", FooterDetailedEvent)
 /**
  * Triggered on click interaction with a link within "Site Information" category
  * @public
  * @allowPreventDefault
  */
-@event("site-information-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("site-information-click", FooterDetailedEvent)
 
 /**
  * Triggered on click interaction with any of the social media links within footer
  * @public
  * @allowPreventDefault
  */
-@event("social-media-link-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("social-media-link-click", FooterDetailedEvent)
+
 class UDExFooter extends UI5Element {
+  /**
+   * Defines the Logo default title
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    logoTitle!: string;
+
   /**
    * Defines the Logo URL
    *
@@ -269,6 +291,14 @@ class UDExFooter extends UI5Element {
   @property({ type: String, defaultValue: "" })
     logoAlt!: string;
 
+  /**
+   * Defines an aria label for the logo link
+   *
+   * @public
+   */
+  @property({ type: String })
+    logoAriaLabel!: string;
+
   /**
    * Defines should render the mobile navigation.
    *
@@ -295,7 +325,7 @@ class UDExFooter extends UI5Element {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
-  onEnterDOM() {
+  onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
@@ -316,7 +346,7 @@ class UDExFooter extends UI5Element {
     return string ? JSON.parse(string) as T[] : [];
   }
 
-  get parsedRef() {
+  get parsedRef(): string | undefined {
     return (this.logoLink && this.logoLink.length > 0) ? this.logoLink : undefined;
   }
 
@@ -400,70 +430,53 @@ class UDExFooter extends UI5Element {
   }
 
   _onLogoClick(e: Event): void {
-    this.fireEvent("logo-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "logo-click");
   }
 
   _onContactPhoneClick(e: Event): void {
-    this.fireEvent("contact-phone-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-phone-click");
   }
   _onContactPhoneLocalNumbersClick(e: Event): void {
-    this.fireEvent("contact-phone-local-numbers-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-phone-local-numbers-click");
   }
   _onContactEmailClick(e: Event): void {
-    this.fireEvent("contact-email-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-email-click");
   }
   _onContactChatClick(e: Event): void {
-    this.fireEvent("contact-chat-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-chat-click");
   }
 
   _onQuickLinksClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("quick-links-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "quick-links-click");
   }
 
   _onTrendingClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("trending-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "trending-click");
   }
 
   _onAboutSapClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("about-sap-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "about-sap-click");
   }
 
   _onSiteInformationClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("site-information-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "site-information-click");
   }
 
   _onSocialMediaLinkClick(e: Event): void {
-    const nodes = e.composedPath() as HTMLElement[];
-    let sourceNode = nodes[0];
+    this.fireFooterDetailedClickEvent(e, "social-media-link-click");
+  }
+
+  fireFooterBaseEvent(e: Event, eventName: string): void {
+    this.fireEvent(eventName, { originalEvent: e }, true);
+  }
 
-    if (nodes[0] instanceof HTMLImageElement) { sourceNode = nodes[1]; }
+  fireFooterDetailedClickEvent(e: Event, eventName: string): void {
+    const sourceNode = e.composedPath()[0] as HTMLElement;
+    const { innerText, dataset: { id, name } } = sourceNode;
 
-    this.fireEvent("social-media-link-click", {
-      name: sourceNode?.dataset?.name,
+    this.fireEvent(eventName, {
+      ...(!!id?.length && { id }),
+      name: innerText.length ? innerText : name,
       originalEvent: e,
       sourceNode,
     }, true);