@sapudex/web-components 2.3.0 → 2.4.1

package/src/Contact.ts

@@ -0,0 +1,200 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ContactTemplate from "./ContactTemplate.js";
+import type UDExContactItem from "./ContactItem.js";
+import type UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
+import {
+  LOCAL_COUNTRY_NAMES, COMPLETE_LIST_OF, CALL_US_TODAY, CONTACT_US,
+} from "./generated/i18n/i18n-defaults.js";
+import i18n from "@ui5/webcomponents-base/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/i18nBundle.js";
+
+// Styles
+import ContactCss from "./generated/themes/Contact.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+
+export type ContactNumber = {
+  number: string;
+  country: string;
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-contact</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Contact.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-contact
+ * @public
+ */
+@customElement({
+  tag: "udex-contact",
+  renderer: jsxRenderer,
+  styles: ContactCss,
+  template: ContactTemplate,
+})
+
+class UDExContact extends UI5Element {
+  /**
+   * Defines the <code>text</code> for the contact button.
+   *
+   * @public
+   */
+  @property({ type: String })
+    buttonText!: string;
+
+  /**
+   * List of the contact numbers
+   *
+   * @default "[]"
+   * @public
+   */
+  @property({ type: String })
+    contactNumbers: string = "";
+
+  /**
+   * Defines the local country numbers link's href
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    localCountryNumbersLink: string = "";
+
+  /**
+   * Defines if the initial focus should be prevented.
+   * @public
+   */
+  @property({ type: Boolean })
+    preventInitialFocus!: boolean;
+
+  /**
+   * Defines if the focus should be returned to the previously focused element.
+   * @public
+   */
+  @property({ type: Boolean })
+    preventFocusRestore!: boolean;
+
+  /**
+   * Defines the accessible name of the component.
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  /**
+   * Defines the IDs of the elements that label the component.
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    accessibleNameRef?: string;
+
+  /**
+   * Slot for list items.
+   *
+   * @slot items
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExContactItem>;
+
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode: boolean = BreakpointUtils.isAtMost("M");
+
+  _screenResizeHandler: () => void;
+  _screenResizeHandlerAttached?: boolean;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  constructor() {
+    super();
+    this._screenResizeHandler = this._screenResize.bind(this);
+  }
+
+  onEnterDOM() {
+    this._attachScreenResizeHandler();
+  }
+
+  onExitDOM() {
+    this._detachScreenResizeHandler();
+  }
+
+  _openPopover(): void {
+    this._responsivePopover.open = !this._responsivePopover.open;
+  }
+
+  _closePopover(): void {
+    this._responsivePopover.open = false;
+  }
+
+  _screenResize(): void {
+    this._isMobileMode = BreakpointUtils.isAtMost("M");
+  }
+
+  _attachScreenResizeHandler(): void {
+    if (!this._screenResizeHandlerAttached) {
+      window.addEventListener("resize", this._screenResizeHandler);
+      this._screenResizeHandlerAttached = true;
+    }
+  }
+
+  _detachScreenResizeHandler(): void {
+    if (this._screenResizeHandlerAttached) {
+      window.removeEventListener("resize", this._screenResizeHandler);
+      this._screenResizeHandlerAttached = false;
+    }
+  }
+
+  get _contactNumbersArray(): ContactNumber[] {
+    return parseArrayFromString<ContactNumber>(this.contactNumbers);
+  }
+
+  get _responsivePopover(): UI5ResponsivePopover {
+    return this.shadowRoot!.querySelector<UI5ResponsivePopover>(".udex-contact__popover")!;
+  }
+
+  get _completeListTitle(): string {
+    return `${UDExContact.i18nBundle.getText(COMPLETE_LIST_OF)} `;
+  }
+
+  get _localCountryTitle(): string {
+    return UDExContact.i18nBundle.getText(LOCAL_COUNTRY_NAMES);
+  }
+
+  get _numbersTitle(): string {
+    return UDExContact.i18nBundle.getText(CALL_US_TODAY);
+  }
+
+  get _contactUsTitle(): string {
+    return UDExContact.i18nBundle.getText(CONTACT_US);
+  }
+
+  get _hasNumbersList(): boolean {
+    return this._contactNumbersArray.length > 0;
+  }
+}
+
+UDExContact.define();
+
+export default UDExContact;

package/src/ContactItem.ts

@@ -0,0 +1,119 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ContactItemTemplate from "./ContactItemTemplate.js";
+import { UDExTarget } from "./types/common.js";
+import UDExContactItemIcon from "./types/ContactItemIcon.js";
+import "@ui5/webcomponents-icons/dist/headset.js";
+import "@ui5/webcomponents-icons/dist/discussion-2.js";
+import "@ui5/webcomponents-icons/dist/email.js";
+
+// Styles
+import ContactItemCss from "./generated/themes/ContactItem.css.js";
+
+type UDExContactItemClickEventDetail = {
+  originalEvent: Event,
+  item: UDExContactItem,
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-contact-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ContactItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-contact-item
+ * @public
+ */
+@customElement({
+  tag: "udex-contact-item",
+  renderer: jsxRenderer,
+  styles: ContactItemCss,
+  template: ContactItemTemplate,
+})
+
+/**
+ * Fires when item is clicked
+ *
+ * @public
+ */
+@event("item-click", {
+  bubbles: true,
+  cancelable: true,
+})
+
+class UDExContactItem extends UI5Element {
+  eventDetails!: {
+    "item-click": UDExContactItemClickEventDetail,
+  };
+
+  /**
+   * Defines the label for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    label!: string;
+
+  /**
+   * Defines the href for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    href!: string;
+
+  /**
+   * Defines the icon name for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    icon?: `${UDExContactItemIcon}`;
+
+  /**
+   * Defines target for the item
+   *
+   * @public
+   */
+  @property({ type: String })
+    target: `${UDExTarget}` = UDExTarget._self;
+
+  /**
+   * Slot for the item content.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: Node, "default": true })
+    content!: Array<Node>;
+
+  _fireItemClickEvent(e: Event): void {
+    this.fireDecoratorEvent("item-click", {
+      item: this,
+      originalEvent: e,
+    });
+  }
+
+  get _iconName(): string | undefined {
+    if (this.icon) {
+      return UDExContactItemIcon[this.icon].toLowerCase();
+    }
+  }
+}
+
+UDExContactItem.define();
+
+export default UDExContactItem;

package/src/ContactItemTemplate.tsx

@@ -0,0 +1,22 @@
+import type ContactItem from "./ContactItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExLink from "./Link.js";
+
+export default function ContactItemTemplate(this: ContactItem) {
+  return (
+    <div class="udex-contact-item">
+      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode="Decorative"></UI5Icon>}
+      <div class="udex-contact-item__content">
+        {labelContent.call(this)}
+        <p class="udex-contact-item__description"><slot></slot></p>
+      </div>
+    </div>
+  );
+}
+
+function labelContent(this: ContactItem) {
+  if (this.href) {
+    return <UDExLink onClick={this._fireItemClickEvent} target={this.target} class="udex-contact-item__link" href={this.href}>{this.label}</UDExLink>;
+  }
+  return <span class="udex-contact-item__text">{this.label}</span>;
+}

package/src/ContactTemplate.tsx

@@ -0,0 +1,105 @@
+import type Contact from "./Contact.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButton from "./Button.js";
+import UDExLink from "./Link.js";
+import ButtonType from "@ui5/webcomponents/dist/types/ButtonType.js";
+import UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+import "@ui5/webcomponents-icons/dist/discussion-2.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function ContactTemplate(this: Contact) {
+  return (
+    <div class="udex-contact">
+      {responsivePopover.call(this)}
+      {openerButton.call(this)}
+    </div>
+  );
+}
+
+function responsivePopover(this: Contact) {
+  return (
+    <UI5ResponsivePopover
+      id={`${this._id}-popover`}
+      opener={`${this._id}-opener`}
+      class="udex-contact__popover"
+      placement={PopoverPlacement.Top}
+      horizontalAlign={PopoverHorizontalAlign.End}
+      accessible-role={PopupAccessibleRole.Dialog}
+      preventInitialFocus={this.preventInitialFocus}
+      preventFocusRestore={this.preventFocusRestore}
+      accessibleName={this.accessibleName}
+      accessibleNameRef={this.accessibleNameRef}
+      hideArrow={true}>
+      <div
+        class={{
+          "udex-contact__call-us": true,
+          "udex-contact__call-us_empty": !this._hasNumbersList,
+        }}>
+        {!this._hasNumbersList && <span class="udex-contact__call-us-heading">{this._contactUsTitle}</span>}
+        <UDExButton
+          class="udex-contact__close-btn"
+          icon="sap-icon://decline"
+          type="Button"
+          onClick={this._closePopover}
+          size={UDExButtonSize.Medium}
+          design={UDExButtonDesign.Invisible}
+          accessible-role={UDExButtonAccessibleRole.Button}
+          icon-only>
+        </UDExButton>
+        {this._hasNumbersList && callUsSection.call(this)}
+      </div>
+      <div class="udex-contact__items"><slot></slot></div>
+    </UI5ResponsivePopover>
+  );
+}
+
+function openerButton(this: Contact) {
+  return (
+    <div id={`${this._id}-opener`} class="udex-contact__opener">
+      <UDExButton
+        onClick={this._openPopover}
+        class="udex-contact__button"
+        design={UDExButtonDesign.Primary}
+        size={UDExButtonSize.Large}
+        type={ButtonType.Button}
+        accessibleName={this._isMobileMode ? this.buttonText : undefined}
+        tooltip={this._isMobileMode ? this.buttonText : undefined}
+        icon="sap-icon://discussion-2">
+        {!this._isMobileMode && this.buttonText}
+      </UDExButton>
+    </div>
+  );
+}
+
+function callUsSection(this: Contact) {
+  return (
+    <>
+      <h4 class="udex-contact__call-us-title">{this._numbersTitle}</h4>
+      <div class="udex-contact__numbers">
+        {this._contactNumbersArray.map(({ number, country }) => (
+          <div class="udex-contact__number-wrapper">
+            <span class="udex-contact__country">{country}</span>
+            <UDExLink
+              class="udex-contact__number"
+              href={"tel:".concat(number)}>
+              {number}
+            </UDExLink>
+          </div>
+        ))}
+      </div>
+      <p class="udex-contact__complete-list">
+        {this._completeListTitle}
+        <UDExLink
+          class="udex-contact__local-country-link"
+          href={this.localCountryNumbersLink}>
+          {this._localCountryTitle}
+        </UDExLink>
+      </p>
+    </>
+  );
+}

package/src/CountrySelector.ts

@@ -1,8 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
   isEscape,
@@ -273,9 +271,6 @@ class UDExCountrySelector extends UDExSearchableListBase {
   _search!: Search;
   _handleResizeBound: ResizeObserverCallback;
 
-  @i18n("@sapudex/web-components")
-  static i18nBundle: I18nBundle;
-
   constructor() {
     super();
     this._shouldFilterItems = false;

package/src/Footer.ts

@@ -16,6 +16,7 @@ import UDExLink from "./Link.js";
 import UDExDivider from "./Divider.js";
 import type { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
@@ -394,36 +395,32 @@ class UDExFooter extends UI5Element {
     window.scrollTo(0, 0);
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   get parsedRef(): string | undefined {
     return (this.logoLink && this.logoLink.length > 0) ? this.logoLink : undefined;
   }
 
   get quickLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.quickLinks);
+    return parseArrayFromString<FooterLink>(this.quickLinks);
   }
 
   get trendingLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.trendingLinks);
+    return parseArrayFromString<FooterLink>(this.trendingLinks);
   }
 
   get aboutLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.aboutLinks);
+    return parseArrayFromString<FooterLink>(this.aboutLinks);
   }
 
   get siteInformationLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.siteInformationLinks);
+    return parseArrayFromString<FooterLink>(this.siteInformationLinks);
   }
 
   get contactNumbersArray(): FooterContactNumber[] {
-    return this.parseArrayFromString<FooterContactNumber>(this.contactNumbersList);
+    return parseArrayFromString<FooterContactNumber>(this.contactNumbersList);
   }
 
   get socialLinksArray(): FooterSocialLink[] {
-    return this.parseArrayFromString<FooterSocialLink>(this.socialLinks);
+    return parseArrayFromString<FooterSocialLink>(this.socialLinks);
   }
 
   get isContactContainerVisible(): boolean {

package/src/List.ts

@@ -42,7 +42,7 @@ type UDExListSelectionChangeEventDetail = {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- *\e
+ *
  *
  * <h3>Usage</h3>
  *

package/src/MastheadCountrySelector.hbs

@@ -9,6 +9,7 @@
                 @click="{{backToRegions}}"
                 label="{{_activeRegion?.title}}"
                 type="Button"
+                part="menu-item"
                 is-back
                 icon-start>
             </udex-masthead-menu-item>
@@ -35,6 +36,7 @@
                         url="{{this.url}}"
                         label="{{this.displayTitle}}"
                         index="{{@index}}"
+                        part="menu-item"
                         is-nav-item>
                     </udex-masthead-menu-item>
                 </li>
@@ -55,6 +57,7 @@
                         aria-has-popup="true"
                         accessible-role="button"
                         type="Button"
+                        part="menu-item"
                         is-nav-item
                         has-border
                         icon-end

package/src/MastheadCountrySelector.ts

@@ -11,8 +11,8 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
-
 import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -23,6 +23,8 @@ type UDExMastheadCountrySelectorRegionClickEventDetail = {
     countries: Array<Country>,
   },
   originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 type UDExMastheadCountrySelectorItemClickEventDetail = {
@@ -32,10 +34,13 @@ type UDExMastheadCountrySelectorItemClickEventDetail = {
     url: string,
   },
   originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 type UDExMastheadCountrySelectorSearchEventDetail = {
   value: string,
+  analyticsName: AnalyticsName,
 }
 
 export type Region = {
@@ -287,6 +292,7 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._shouldFocusBackBtn = false;
     this.fireDecoratorEvent("country-selector-search", {
       value: e.detail.value,
+      analyticsName: AnalyticsName.Header,
     });
     this.refreshRendering();
   }
@@ -412,14 +418,16 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   fireEventRegionItemClick(e: CustomEvent | KeyboardEvent): void {
-    const { label } = e.target as UDExMastheadMenuItem;
+    const item = e.target as UDExMastheadMenuItem;
 
     this.fireDecoratorEvent("region-item-click", {
       item: {
-        title: label,
+        title: item.label,
         countries: this._activeRegion?.countries || [],
       },
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
     });
   }
 
@@ -434,6 +442,8 @@ class UDExMastheadCountrySelector extends UI5Element {
         url: url || "",
       },
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
     });
   }
 

package/src/MastheadItem.hbs

@@ -65,8 +65,16 @@
     {{else if image}}
         <img
             class="udex-masthead-item__image"
+            id="{{this._id}}_image-alt"
             src="{{image}}"
             alt="{{imageAlt}}"/>
+            {{#if imageAlt}}
+                <span
+                    id="image-desc"
+                    class="udex-masthead-hidden-text">
+                    {{imageAlt}}
+                </span>
+            {{/if}}
     {{else}}
         <span class="udex-masthead-item__text">
             <slot></slot>