@sapudex/web-components 0.225.0 → 2.0.0

package/src/Footer.ts

@@ -2,17 +2,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 
-import "@ui5/webcomponents-icons/dist/headset.js";
-import "@ui5/webcomponents-icons/dist/email.js";
-import "@ui5/webcomponents-icons/dist/back-to-top.js";
-import "@ui5/webcomponents-icons/dist/discussion-2.js";
-import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExAccordionItem from "./AccordionItem.js";
@@ -20,14 +14,16 @@ import UDExButton from "./Button.js";
 import UDExAccordion from "./Accordion.js";
 import UDExLink from "./Link.js";
 import UDExDivider from "./Divider.js";
-import { Target } from "./types/common.js";
+import type { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
 
 // Styles
-import FooterCss from "./generated/themes/Footer.css";
+import FooterCss from "./generated/themes/Footer.css.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   ABOUT_SAP,
   CHAT_WITH_US,
@@ -44,19 +40,24 @@ import {
   PUBLIC_SECURITY_NETWORK_NUMBER,
   ICP_NUMBER,
 } from "./generated/i18n/i18n-defaults.js";
+import "@ui5/webcomponents-icons/dist/headset.js";
+import "@ui5/webcomponents-icons/dist/email.js";
+import "@ui5/webcomponents-icons/dist/back-to-top.js";
+import "@ui5/webcomponents-icons/dist/discussion-2.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 
 export const chineseICPDefaultLink = "https://beian.miit.gov.cn/";
 
 export type FooterLink = {
   title: string;
   url: string;
-  target: Target;
+  target: UDExTarget;
 };
 
 export type FooterSocialLink = {
   url: string;
   iconUrl: string;
-  target: Target;
+  target: UDExTarget;
 };
 
 export type FooterContactNumber = {
@@ -64,31 +65,20 @@ export type FooterContactNumber = {
   country: string;
 };
 
-export type FooterDetailedClickEvent = {
-  originalEvent: Event,
-  name: string;
+type UDExFooterDetailedClickEventDetail = {
+  originalEvent: PointerEvent,
+  name: string | undefined;
   id?: string;
   sourceNode: HTMLElement;
 }
 
-export type FooterBaseEventEvent = {
-  originalEvent: Event,
+type UDExFooterBaseEventDetail = {
+  originalEvent: PointerEvent,
 }
 
-export const FooterBaseEvent = {
-  detail: {
-    originalEvent: { type: Event },
-  },
-};
+type BaseEvents = "contact-chat-click" | "contact-phone-local-numbers-click" | "contact-email-click" | "contact-phone-click" | "logo-click" | "back-to-top-click";
 
-export const FooterDetailedEvent = {
-  detail: {
-    originalEvent: { type: Event },
-    name: { type: String },
-    id: { type: String },
-    sourceNode: { type: HTMLElement },
-  },
-};
+type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click" | "site-information-click" | "social-media-link-click";
 
 /**
  * @class
@@ -122,77 +112,90 @@ export const FooterDetailedEvent = {
  * @public
  * @allowPreventDefault
  */
-@event<FooterBaseEventEvent>("logo-click", FooterBaseEvent)
+@event("logo-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Back to Top" button
  * @public
  * @allowPreventDefault
  */
-@event<FooterBaseEventEvent>("back-to-top-click", FooterBaseEvent)
+@event("back-to-top-click", { bubbles: true })
 /**
  * Triggered on click interaction with phone number link in footer
  * @public
  * @allowPreventDefault
  */
-@event<FooterBaseEventEvent>("contact-phone-click", FooterBaseEvent)
+@event("contact-phone-click", { bubbles: true })
 /**
  * Triggered on click interaction with local country numbers list link
  * @public
  * @allowPreventDefault
  */
-@event<FooterBaseEventEvent>("contact-phone-local-numbers-click", FooterBaseEvent)
+@event("contact-phone-local-numbers-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Contact us by email" link
  * @public
  * @allowPreventDefault
  */
-@event<FooterBaseEventEvent>("contact-email-click", FooterBaseEvent)
+@event("contact-email-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Contact us by chat" link
  * @public
  * @allowPreventDefault
  */
-@event<FooterBaseEventEvent>("contact-chat-click", FooterBaseEvent)
+@event("contact-chat-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Quick Links" category
  * @public
  * @allowPreventDefault
  */
-@event<FooterDetailedClickEvent>("quick-links-click", FooterDetailedEvent)
+@event("quick-links-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Trending" category
  * @public
  * @allowPreventDefault
  */
-@event<FooterDetailedClickEvent>("trending-click", FooterDetailedEvent)
+@event("trending-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "About SAP" category
  * @public
  * @allowPreventDefault
  */
-@event<FooterDetailedClickEvent>("about-sap-click", FooterDetailedEvent)
+@event("about-sap-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Site Information" category
  * @public
  * @allowPreventDefault
  */
-@event<FooterDetailedClickEvent>("site-information-click", FooterDetailedEvent)
+@event("site-information-click", { bubbles: true })
 /**
  * Triggered on click interaction with any of the social media links within footer
  * @public
  * @allowPreventDefault
  */
-@event<FooterDetailedClickEvent>("social-media-link-click", FooterDetailedEvent)
+@event("social-media-link-click", { bubbles: true })
 
 class UDExFooter extends UI5Element {
+  eventDetails!: {
+    "logo-click": UDExFooterBaseEventDetail,
+    "back-to-top-click": UDExFooterBaseEventDetail,
+    "contact-chat-click": UDExFooterBaseEventDetail,
+    "contact-phone-local-numbers-click": UDExFooterBaseEventDetail,
+    "contact-email-click": UDExFooterBaseEventDetail,
+    "contact-phone-click": UDExFooterBaseEventDetail,
+    "quick-links-click": UDExFooterDetailedClickEventDetail,
+    "trending-click": UDExFooterDetailedClickEventDetail,
+    "about-sap-click": UDExFooterDetailedClickEventDetail,
+    "site-information-click":UDExFooterDetailedClickEventDetail,
+    "social-media-link-click": UDExFooterDetailedClickEventDetail,
+  };
   /**
    * Defines the Logo default title
    *
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    logoTitle!: string;
+  @property({ type: String })
+    logoTitle: string = "";
 
   /**
    * Defines the Logo URL
@@ -200,8 +203,8 @@ class UDExFooter extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    logoUrl!: string;
+  @property({ type: String })
+    logoUrl: string = "";
 
   /**
    * Defines the optional component href link for the logo.
@@ -209,8 +212,8 @@ class UDExFooter extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    logoLink?: string;
+  @property({ type: String })
+    logoLink: string = "";
 
   /**
    * List of the Quick links
@@ -218,8 +221,8 @@ class UDExFooter extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    quickLinks!: string;
+  @property({ type: String })
+    quickLinks: string = "[]";
 
   /**
    * List of the Trending links
@@ -227,8 +230,8 @@ class UDExFooter extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    trendingLinks!: string;
+  @property({ type: String })
+    trendingLinks: string = "[]";
 
   /**
    * List of the About SAP links
@@ -236,8 +239,8 @@ class UDExFooter extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    aboutLinks!: string;
+  @property({ type: String })
+    aboutLinks: string = "[]";
 
   /**
    * List of the Site Information links
@@ -245,8 +248,8 @@ class UDExFooter extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    siteInformationLinks!: string;
+  @property({ type: String })
+    siteInformationLinks: string = "[]";
 
   /**
    * List of the contact numbers
@@ -254,8 +257,8 @@ class UDExFooter extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    contactNumbersList!: string;
+  @property({ type: String })
+    contactNumbersList: string = "[]";
 
   /**
    * Defines the local country numbers link's href
@@ -263,8 +266,8 @@ class UDExFooter extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    localCountryNumbersLink!: string;
+  @property({ type: String })
+    localCountryNumbersLink: string = "";
 
   /**
    * Defines the Contact us link's href
@@ -272,8 +275,8 @@ class UDExFooter extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    contactUsLink!: string;
+  @property({ type: String })
+    contactUsLink: string = "";
 
   /**
    * Defines the Chat with us link's href
@@ -281,8 +284,8 @@ class UDExFooter extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    chatWithUsLink!: string;
+  @property({ type: String })
+    chatWithUsLink: string = "";
 
   /**
    * List of the Social links and their icons
@@ -290,8 +293,8 @@ class UDExFooter extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    socialLinks!: string;
+  @property({ type: String })
+    socialLinks: string = "[]";
 
   /**
    * Alt for Logo
@@ -299,16 +302,17 @@ class UDExFooter extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    logoAlt!: string;
+  @property({ type: String })
+    logoAlt: string = "";
 
   /**
    * Defines an aria label for the logo link
    *
+   * @default ""
    * @public
    */
   @property({ type: String })
-    logoAriaLabel!: string;
+    logoAriaLabel: string = "";
 
   /**
    * Defines an quick links column title
@@ -347,8 +351,8 @@ class UDExFooter extends UI5Element {
    *
    * @public
    */
-  @property({ type: String, defaultValue: chineseICPDefaultLink })
-    chineseIcpNumberLink!: string;
+  @property({ type: String })
+    chineseIcpNumberLink: string = chineseICPDefaultLink;
 
   /**
    * Defines should render the mobile navigation.
@@ -359,12 +363,9 @@ class UDExFooter extends UI5Element {
   @property({ type: Boolean })
     _shouldRenderMobileMenu!: boolean;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine(): Promise<void> {
-    UDExFooter.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {
@@ -387,8 +388,8 @@ class UDExFooter extends UI5Element {
     this._shouldRenderMobileMenu = this.isMobile;
   }
 
-  onBackToTopClick(e: Event): void {
-    this.fireEvent("back-to-top-click", { originalEvent: e }, true);
+  onBackToTopClick(e: PointerEvent): void {
+    this.fireFooterBaseEvent(e, "back-to-top-click");
 
     window.scrollTo(0, 0);
   }
@@ -496,57 +497,57 @@ class UDExFooter extends UI5Element {
     return getLanguage()?.toLowerCase() === "zh_cn";
   }
 
-  _onLogoClick(e: Event): void {
+  _onLogoClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }
 
-  _onContactPhoneClick(e: Event): void {
+  _onContactPhoneClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "contact-phone-click");
   }
-  _onContactPhoneLocalNumbersClick(e: Event): void {
+  _onContactPhoneLocalNumbersClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "contact-phone-local-numbers-click");
   }
-  _onContactEmailClick(e: Event): void {
+  _onContactEmailClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "contact-email-click");
   }
-  _onContactChatClick(e: Event): void {
+  _onContactChatClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "contact-chat-click");
   }
 
-  _onQuickLinksClick(e: Event): void {
+  _onQuickLinksClick(e: PointerEvent): void {
     this.fireFooterDetailedClickEvent(e, "quick-links-click");
   }
 
-  _onTrendingClick(e: Event): void {
+  _onTrendingClick(e: PointerEvent): void {
     this.fireFooterDetailedClickEvent(e, "trending-click");
   }
 
-  _onAboutSapClick(e: Event): void {
+  _onAboutSapClick(e: PointerEvent): void {
     this.fireFooterDetailedClickEvent(e, "about-sap-click");
   }
 
-  _onSiteInformationClick(e: Event): void {
+  _onSiteInformationClick(e: PointerEvent): void {
     this.fireFooterDetailedClickEvent(e, "site-information-click");
   }
 
-  _onSocialMediaLinkClick(e: Event): void {
+  _onSocialMediaLinkClick(e: PointerEvent): void {
     this.fireFooterDetailedClickEvent(e, "social-media-link-click");
   }
 
-  fireFooterBaseEvent(e: Event, eventName: string): void {
-    this.fireEvent(eventName, { originalEvent: e }, true);
+  fireFooterBaseEvent(e: PointerEvent, eventName: BaseEvents): void {
+    this.fireDecoratorEvent(eventName, { originalEvent: e });
   }
 
-  fireFooterDetailedClickEvent(e: Event, eventName: string): void {
+  fireFooterDetailedClickEvent(e: PointerEvent, eventName: DetailedEvents): void {
     const sourceNode = e.composedPath()[0] as HTMLElement;
     const { innerText, dataset: { id, name } } = sourceNode;
 
-    this.fireEvent(eventName, {
+    this.fireDecoratorEvent(eventName, {
       ...(!!id?.length && { id }),
       name: innerText.length ? innerText : name,
       originalEvent: e,
       sourceNode,
-    }, true);
+    });
   }
 }
 

package/src/HeroBanner.ts

@@ -13,9 +13,9 @@ import HeroBannerTemplate from "./generated/templates/HeroBannerTemplate.lit.js"
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
 
-export enum imageLoadingStrategies {
-  eager = "eager",
-  lazy = "lazy",
+export enum UDExImageLoadingStrategies {
+  Eager = "eager",
+  Lazy = "lazy",
 }
 
 /**
@@ -47,11 +47,8 @@ class UDExHeroBanner extends UI5Element {
    *
    * @public
    */
-  @property({
-    type: imageLoadingStrategies,
-    defaultValue: imageLoadingStrategies.eager,
-  })
-    backgroundImageLoadingStrategy?: `${imageLoadingStrategies}`;
+  @property()
+    backgroundImageLoadingStrategy: `${UDExImageLoadingStrategies}` = UDExImageLoadingStrategies.Eager;
 
   /**
    * Used as the label for background image.
@@ -185,7 +182,7 @@ class UDExHeroBanner extends UI5Element {
   }
 
   _calculateMediaButtonState() {
-    this._isVideoRunning = !this._video?.paused ?? false;
+    this._isVideoRunning = this._video ? !this._video.paused : false;
   }
 
   _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {

package/src/InputGroup.ts

@@ -5,27 +5,24 @@ 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 type UDExCheckbox from "./Checkbox.js";
+import type UDExRadioButton from "./RadioButton.js";
 import UDExStatusMessage from "./StatusMessage.js";
 import InputGroupTemplate from "./generated/templates/InputGroupTemplate.lit.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   VALUE_STATE_ERROR,
   VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
+import type UDExValueState from "./types/common.js";
 
 // Styles
 import InputGroupCss from "./generated/themes/InputGroup.css.js";
 
-export enum GroupValueState {
-  Standard = "Standard",
-  Error = "Error",
-  Success = "Success",
-}
+export type UDExGroupValueState = Exclude<UDExValueState, "Warning">
 
-export enum Orientation {
+export enum UDExOrientation {
   Vertical = "Vertical",
   Horizontal = "Horizontal",
 }
@@ -71,8 +68,8 @@ class UDExInputGroup extends UI5Element {
    * @default "Vertical"
    * @public
    */
-  @property({ type: Orientation, defaultValue: Orientation.Vertical })
-    orientation!: `${Orientation}`;
+  @property()
+    orientation: `${UDExOrientation}` = UDExOrientation.Vertical;
 
   /**
    * Defines the value state of the component.
@@ -80,17 +77,17 @@ class UDExInputGroup extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: GroupValueState, defaultValue: GroupValueState.Standard })
-    valueState!: `${GroupValueState}`;
+  @property()
+    valueState: `${UDExGroupValueState}` = "Standard";
 
   /**
    * Defines supporting text under the Input Group.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property({ type: String })
-    supportingText!: string;
+    supportingText?: string;
 
   /**
    * Slot for input elements items.
@@ -101,12 +98,9 @@ class UDExInputGroup extends UI5Element {
   @slot({ type: HTMLElement, "default": true, individualSlots: true })
     items!: Array<UDExCheckbox | UDExRadioButton>;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
-    UDExInputGroup.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   get _items() {
     return this.items.map(el => {
       if (this.groupName) { el.name = this.groupName; }
@@ -124,7 +118,7 @@ class UDExInputGroup extends UI5Element {
   }
 
   get hasValueState(): boolean {
-    return this.valueState !== GroupValueState.Standard;
+    return this.valueState !== "Standard";
   }
 
   get valueStateText(): string | undefined {

package/src/Link.ts

@@ -1,15 +1,10 @@
 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 Link from "@ui5/webcomponents/dist/Link.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-
-import linkCss from "@ui5/webcomponents/dist/generated/themes/Link.css.js";
-import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import UI5Link from "@ui5/webcomponents/dist/Link.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
 // Styles
 import LinkCss from "./generated/themes/Link.css.js";
-import IconPlacement from "./types/IconPlacement.js";
 
 export type AttributeValuePair = {
   attribute: string,
@@ -31,54 +26,29 @@ export type AttributeValuePair = {
  *
  * @constructor
  * @author SAP SE
- * @extends Link
+ * @extends UI5Link
  * @tagname udex-link
  * @public
  */
 @customElement({
   tag: "udex-link",
-  renderer: litRender,
-  styles: [linkCss, LinkCss],
-  template: LinkTemplate,
-  dependencies: [Icon],
+  renderer: jsxRenderer,
+  styles: [UI5Link.styles, LinkCss],
 })
 
-class UDExLink extends Link {
-    /**
-     * Used as the label for background image.
-     *
-     * @public
-    */
-    @property({ type: String })
-      icon?: string;
-
-    /**
-     * Used as the label for background image.
-     *
-     * @public
-     * @default "End"
-    */
-    @property({ type: IconPlacement, defaultValue: IconPlacement.End })
-      iconPlacement?: `${IconPlacement}`;
-
-    _setCustomAttributes(attributes: AttributeValuePair[]): void {
-      if (attributes) {
-        const link = this.shadowRoot!.querySelector("a")!;
-        attributes.forEach(pair => link.setAttribute(pair.attribute, pair.value));
-      }
-    }
-
-    get hasStartIcon(): boolean {
-      return !!this.icon && this.iconPlacement === IconPlacement.Start;
-    }
-
-    get hasEndIcon(): boolean {
-      return !!this.icon && this.iconPlacement === IconPlacement.End;
+class UDExLink extends UI5Link {
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
     }
+  }
 
-    get linkClass(): string {
-      return this.icon ? "udex-link udex-link--with-icon" : "udex-link";
+  _setCustomAttributes(attributes: AttributeValuePair[]) {
+    if (attributes) {
+      const link = this.shadowRoot!.querySelector("a")!;
+      attributes.forEach(pair => link.setAttribute(pair.attribute, pair.value));
     }
+  }
 }
 
 UDExLink.define();