@sapudex/web-components 2.15.0 → 2.16.1

package/cypress/specs/HeroBanner.cy.tsx

@@ -8,9 +8,9 @@ const backgroundImageLabel = "Hero Banner background image label";
 const backgroundImageSrc = "./stories/hero-banner/bg1.png";
 const backgroundVideoSrc = "./stories/hero-banner-bg-video.mp4";
 const mediaContentImage = "./stories/hero-banner/bg6.jpg";
-const linearGradient = "linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%)";
+const linearGradient = "linear-gradient(rgb(30, 87, 153) 0%, rgb(125, 185, 232) 100%)";
 const contentText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere in massa id fringilla. Nunc rutrum turpis purus, et dignissim arcu gravida ut. Morbi sed sem ac magna consectetur tincidunt dapibus sed ipsum.";
-const backgroundColor = "#fbdab9";
+const backgroundColor = "rgb(251, 218, 185)";
 
 const heroBanner = <>
   <UDExHeroBanner
@@ -115,7 +115,7 @@ describe("Hero Banner component", () => {
     });
 
     it("tests if correct background color is applied", () => {
-      cy.get("@heroBannerDefault").find(".udex-hero-banner").should("have.attr", "style", `background-color: ${backgroundColor}; `);
+      cy.get("@heroBannerDefault").find(".udex-hero-banner").should("have.attr", "style", `background-color: ${backgroundColor};`);
     });
 
     it("tests if correct breadcrumbs is applied", () => {
@@ -143,14 +143,14 @@ describe("Hero Banner component", () => {
     });
 
     it("tests if correct background video label is applied", () => {
-      cy.get("@videoBackground").find("video.udex-hero-banner__background-video").should("have.attr", "alt", backgroundVideoLabel);
+      cy.get("@videoBackground").find("video.udex-hero-banner__background-video").should("have.attr", "aria-label", backgroundVideoLabel);
     });
   });
 
   describe("Hero Banner with gradient", () => {
     it("tests if correct gradient background is applied", () => {
       cy.mount(heroBannerWithGradient);
-      cy.get("#heroBannerWithGradient").shadow().find(".udex-hero-banner").should("have.attr", "style", `background-color: transparent; background-image:${linearGradient}`);
+      cy.get("#heroBannerWithGradient").shadow().find(".udex-hero-banner").should("have.attr", "style", `background-color: transparent; background-image: ${linearGradient};`);
     });
   });
 
@@ -164,7 +164,7 @@ describe("Hero Banner component", () => {
     });
 
     it("tests if defaults for properties are correctly applied", () => {
-      cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner").should("have.attr", "style", "background-color: transparent; ");
+      cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner").should("have.attr", "style", "background-color: transparent;");
 
       cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner__background-image").should("not.exist");
 

package/cypress/specs/PasswordField.cy.tsx

@@ -0,0 +1,91 @@
+import { UDExPasswordField } from "../support/component-imports.js";
+
+const fieldAutocomplete = "on";
+const fieldValue = "test";
+const fieldMaxLength = 5;
+const fieldLabel = "Label";
+const fieldState = "Error";
+const fieldText = "Supporting Text";
+const fieldIcon = "show";
+const fieldTooltip = "Tooltip";
+const fieldACCName = "Accessible Name";
+const fieldACCNameRef = "Accessible Name Ref";
+
+const defaultPasswordField = <UDExPasswordField></UDExPasswordField>
+const customPasswordField = <UDExPasswordField 
+  autocomplete={fieldAutocomplete}  
+  value={fieldValue} 
+  maxlength={fieldMaxLength} 
+  label={fieldLabel} 
+  show-asterisk 
+  value-state={fieldState} 
+  supporting-text={fieldText} 
+  show-button-enabled
+  show-button-tooltip={fieldTooltip}
+  accessible-name={fieldACCName}
+  accessible-name-ref={fieldACCNameRef}></UDExPasswordField>
+const disabledPasswordField = <UDExPasswordField id="disabled" label={fieldLabel} disabled></UDExPasswordField>
+const readonlyPasswordField = <UDExPasswordField id="readonly" label={fieldLabel} readonly></UDExPasswordField>
+const displayonlyPasswordField = <UDExPasswordField id="displayonly" label={fieldLabel} displayonly></UDExPasswordField>
+
+describe("Password Field", () => {
+  beforeEach(() => {
+    cy.mount(defaultPasswordField);
+  });
+  it("renders password field", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").should("be.visible");
+  });
+
+  it("renders with default attributes", () => {
+    cy.get("[udex-password-field]").should("have.attr", "value-state", "Standard");
+    cy.get("[udex-password-field]").should("have.attr", "autocomplete", "off");
+  });
+});
+
+describe("Attributes propagation", () => {
+  beforeEach(() => {
+    cy.mount(customPasswordField);
+  });
+
+  it("renders with autocomplete on", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container input").should("have.attr", "autocomplete", fieldAutocomplete);
+  });
+
+  it("renders with custom value", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container input").should("have.value", fieldValue);
+  });
+
+  it("renders as required with label", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container label").should("have.text", `${fieldLabel} *`);
+  });
+
+  it("renders with error stare", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").should("have.attr", "value-state", fieldState);
+  });
+
+  it("renders with supporting text", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-status-message]").should("have.attr", "supporting-text", fieldText);
+  });
+
+  it("renders with enabled button", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-control-button]").should("have.attr", "icon", fieldIcon);
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-control-button]").should("have.attr", "accessible-name", fieldTooltip);
+  });
+
+  it("renders with acessible name", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find(".udex-text-field__container input").should("have.attr", "aria-label", fieldACCName);
+  });
+  
+});
+
+describe("General interaction",  () => {
+  beforeEach(() => {
+    cy.mount(customPasswordField);
+  });
+
+  it("change icon and type on click", () => {
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-control-button]").click();
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").should("have.attr", "icon", "hide");
+  });
+});
+

package/cypress/specs/RatingBar.cy.tsx

@@ -0,0 +1,41 @@
+import { UDExRatingBar } from "../support/component-imports.js";
+
+const ratingBar = <UDExRatingBar id="rating-bar1" percentage={50} rating={4}></UDExRatingBar>
+
+const ratingBarWithPercentage = <UDExRatingBar id="rating-bar2" percentage={50} rating={4} show-percentage></UDExRatingBar>
+
+const ratingBarWithHighRating = <UDExRatingBar id="rating-bar3" percentage={120} rating={400}></UDExRatingBar>
+
+const ratingBarWithNegativeRating = <UDExRatingBar id="rating-bar4" percentage={30} rating={-400}></UDExRatingBar>
+
+describe("RatingBar", () => {
+  it("Tests basic rating bar rendering specified progress", () => {
+    cy.mount(ratingBar);
+    cy.get("#rating-bar1").shadow().find(".udex-rating-bar__track").invoke("width").then((trackWidth) => {
+      const expectedWidth = Math.round(0.5 * trackWidth);
+      const width = cy.get("#rating-bar1").shadow().find(".udex-rating-bar__progress").invoke("width");
+      const widthRounded = width.then((w) => Math.round(w as number));
+      widthRounded.should("equal", expectedWidth);
+    });
+  });
+
+  it("Tests basic rating bar rendering rating", () => {
+    cy.mount(ratingBar);
+    cy.get("#rating-bar1").shadow().find(".udex-rating-bar__rating").should("have.text", "4");
+  });
+
+  it("Tests basic rating bar rendering breakdown", () => {
+    cy.mount(ratingBarWithPercentage);
+    cy.get("#rating-bar2").shadow().find(".udex-rating-bar__percentage").should("have.text", "50%");
+  });
+
+  it("Tests rating bar rendering maximum rating when rating exceeds it", () => {
+    cy.mount(ratingBarWithNegativeRating);
+    cy.get("#rating-bar4").shadow().find(".udex-rating-bar__rating").should("have.text", "0");
+  });
+
+  it("Tests rating bar rendering minimum rating when rating exceeds it", () => {
+    cy.mount(ratingBarWithHighRating);
+    cy.get("#rating-bar3").shadow().find(".udex-rating-bar__rating").should("have.text", "5");
+  });
+});

package/cypress/specs/Tooltip.cy.tsx

@@ -80,21 +80,16 @@ describe("Tooltip", () => {
         </>
       );
 
-      cy.get('#udex-tooltip').as("tooltip")
-      .invoke('attr', 'open', 'true');
+      cy.get('#udex-tooltip').shadow().find(".udex-tooltip__pane").as("tooltip").invoke('attr', 'open', 'true');
     
-      cy.get("@tooltip")
-          .should("have.attr", "open");
+      cy.get("@tooltip").should("have.attr", "open");
 
       cy.get("body").realClick();
 
-      cy.get("@tooltip")
-          .should("not.have.attr", "open");
+      cy.get("@tooltip").should("not.have.attr", "open");
 
-      cy.get('#udex-tooltip').as("tooltip")
-      .invoke('attr', 'open', 'true');
+      cy.get('#udex-tooltip').as("tooltip").invoke('attr', 'open', 'true');
     
-      cy.get("@tooltip")
-          .should("have.attr", "open");
+      cy.get("@tooltip").should("have.attr", "open");
   });
-});
+});

package/cypress/support/component-imports.instrumented.ts

@@ -59,6 +59,7 @@ import UDExMessageStrip from "../../instrumented/MessageStrip.js";
 import UDExHeroBanner from "../../instrumented/HeroBanner.js";
 import UDExCheckbox from "../../instrumented/Checkbox.js";
 import UDExInputGroup from "../../instrumented/InputGroup.js";
+import UDExPasswordField from "../../instrumented/PasswordField.js";
 
 export {
   UDExAccordion,
@@ -121,5 +122,6 @@ export {
   UDExMessageStrip,
   UDExHeroBanner,
   UDExCheckbox,
-  UDExInputGroup
+  UDExInputGroup,
+  UDExPasswordField
 };

package/cypress/support/component-imports.src.ts

@@ -59,6 +59,7 @@ import UDExMessageStrip from "../../src/MessageStrip.js";
 import UDExHeroBanner from "../../src/HeroBanner.js";
 import UDExCheckbox from "../../src/Checkbox.js";
 import UDExInputGroup from "../../src/InputGroup.js";
+import UDExPasswordField from "../../src/PasswordField.js";
 
 export {
   UDExAccordion,
@@ -121,5 +122,6 @@ export {
   UDExMessageStrip,
   UDExHeroBanner,
   UDExCheckbox,
-  UDExInputGroup
+  UDExInputGroup,
+  UDExPasswordField
 };

package/dist/Accordion.js

@@ -13,7 +13,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, isSpace, isUp, isDown, isEnd, isHome, isTabPrevious, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
 import AccordionTemplate from "./AccordionTemplate.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
 // Styles
@@ -79,40 +79,54 @@ let UDExAccordion = UDExAccordion_1 = class UDExAccordion extends UI5Element {
         }
     }
     keydownHandler(e) {
-        if (e.key !== "Tab") {
-            e.preventDefault();
-        }
-        const len = this._items.length;
+        const activeItem = this._items[this._activeItemIndex];
+        const previousItem = this._items[this._activeItemIndex - 1];
+        const isLastItem = this._activeItemIndex === this._items.length - 1;
+        const isFirstItem = this._activeItemIndex === 0;
+        const lastItem = this._items[this._items.length - 1];
+        const updateTabIndex = (elements, value) => {
+            elements.forEach(element => element.setAttribute("tabindex", value));
+        };
+        const getInteractiveElements = (item) => {
+            const selectors = ["button", "a[href]", "input", "select", "textarea", "[tabindex]"];
+            return item.querySelectorAll(selectors.join(","));
+        };
+        const handleTabNavigation = (keyboardEvent) => {
+            if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {
+                updateTabIndex(getInteractiveElements(activeItem), "-1");
+                return true;
+            }
+            if ((activeItem?.expanded && isTabNext(e))
+                || (previousItem?.expanded && isTabPrevious(e))
+                || (isFirstItem && isTabPrevious(e))) {
+                return true;
+            }
+            if (isEnter(e) && isLastItem) {
+                updateTabIndex(getInteractiveElements(activeItem), "0");
+            }
+            return false;
+        };
         const focusOnItem = (itemIndex) => {
             const item = this._items[itemIndex];
             this._activeItemIndex = itemIndex;
             item?.shadowRoot?.querySelector(".udex-accordion-item__header")?.focus();
         };
-        switch (e.key) {
-            case "Home":
-                focusOnItem(0);
-                break;
-            case "End":
-                focusOnItem(len - 1);
-                break;
-            case "ArrowUp":
-                if (this._activeItemIndex > 0) {
-                    focusOnItem(this._activeItemIndex - 1);
-                }
-                else if (this._activeItemIndex === 0) {
-                    focusOnItem(len - 1);
-                }
-                break;
-            case "ArrowDown":
-                if (this._activeItemIndex < len - 1) {
-                    focusOnItem(this._activeItemIndex + 1);
-                }
-                else if (this._activeItemIndex === len - 1) {
-                    focusOnItem(0);
-                }
-                break;
-            default:
-                break;
+        if (handleTabNavigation(e)) {
+            return;
+        }
+        e.preventDefault();
+        const len = this._items.length;
+        if (isHome(e)) {
+            focusOnItem(0);
+        }
+        if (isEnd(e)) {
+            focusOnItem(len - 1);
+        }
+        if (isTabPrevious(e) || isUp(e)) {
+            focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);
+        }
+        if (isTabNext(e) || isDown(e)) {
+            focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);
         }
     }
     itemFocusHandler(e) {

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n    const len = this._items.length;\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    switch (e.key) {\n    case \"Home\":\n      focusOnItem(0);\n      break;\n    case \"End\":\n      focusOnItem(len - 1);\n      break;\n    case \"ArrowUp\":\n      if (this._activeItemIndex > 0) {\n        focusOnItem(this._activeItemIndex - 1);\n      } else if (this._activeItemIndex === 0) {\n        focusOnItem(len - 1);\n      }\n      break;\n    case \"ArrowDown\":\n      if (this._activeItemIndex < len - 1) {\n        focusOnItem(this._activeItemIndex + 1);\n      } else if (this._activeItemIndex === len - 1) {\n        focusOnItem(0);\n      }\n      break;\n    default:\n      break;\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter, isSpace, isUp, isDown, isEnd, isHome, isTabPrevious, isTabNext,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    const activeItem = this._items[this._activeItemIndex];\n    const previousItem = this._items[this._activeItemIndex - 1];\n    const isLastItem = this._activeItemIndex === this._items.length - 1;\n    const isFirstItem = this._activeItemIndex === 0;\n    const lastItem = this._items[this._items.length - 1];\n\n    const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n      elements.forEach(element => element.setAttribute(\"tabindex\", value));\n    };\n\n    const getInteractiveElements = (item: HTMLElement) => {\n      const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n      return item.querySelectorAll(selectors.join(\",\"));\n    };\n\n    const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n      if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n        updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n        return true;\n      }\n\n      if ((activeItem?.expanded && isTabNext(e))\n        || (previousItem?.expanded && isTabPrevious(e))\n        || (isFirstItem && isTabPrevious(e))) {\n        return true;\n      }\n\n      if (isEnter(e) && isLastItem) {\n        updateTabIndex(getInteractiveElements(activeItem), \"0\");\n      }\n\n      return false;\n    };\n\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    if (handleTabNavigation(e)) {\n      return;\n    }\n\n    e.preventDefault();\n    const len = this._items.length;\n\n    if (isHome(e)) {\n      focusOnItem(0);\n    }\n\n    if (isEnd(e)) {\n      focusOnItem(len - 1);\n    }\n\n    if (isTabPrevious(e) || isUp(e)) {\n      focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n    }\n\n    if (isTabNext(e) || isDown(e)) {\n      focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}

package/dist/AvatarGroup.d.ts

@@ -24,5 +24,6 @@ declare class UDExAvatarGroup extends AvatarGroup {
     _onHover(hover: boolean): void;
     _onfocusin(e: FocusEvent): void;
     _prepareAvatars(): void;
+    get _isIndividual(): boolean;
 }
 export default UDExAvatarGroup;

package/dist/AvatarGroup.js

@@ -57,9 +57,9 @@ let UDExAvatarGroup = class UDExAvatarGroup extends AvatarGroup {
         super();
         this._itemNavigation = new ItemNavigation(this, {
             getItemsCallback: () => {
-                return this._isGroup
-                    ? []
-                    : this.items.slice(0, this._hiddenStartIndex).map(item => item.shadowRoot?.firstElementChild);
+                return this._isIndividual
+                    ? this.items.slice(0, this._hiddenStartIndex).map(item => item.shadowRoot?.firstElementChild)
+                    : [];
             },
         });
     }
@@ -102,10 +102,14 @@ let UDExAvatarGroup = class UDExAvatarGroup extends AvatarGroup {
                 avatar.setAttribute("color-scheme", visibleColors[this._colorIndex]);
             }
             if (index !== this._itemsCount - 1 || this._customOverflowButton) {
-                avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];
+                const avatarSize = avatar.effectiveSize || UDExAvatarSize.S;
+                avatar.style.marginInlineEnd = avatarOffsets[avatarSize][this.type];
             }
         });
     }
+    get _isIndividual() {
+        return this.type === AvatarGroupType.Individual;
+    }
 };
 UDExAvatarGroup = __decorate([
     customElement({

package/dist/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import type { IAvatarGroupItem } from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroup from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroupType from \"@ui5/webcomponents/dist/types/AvatarGroupType.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\n// Styles\nimport UI5AvatarGroupCss from \"@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js\";\n\nimport UDExAvatar, { UDExAvatarColorScheme, UDExAvatarSize } from \"./Avatar.js\";\n\nconst avatarOffsets = {\n  [UDExAvatarSize.XS]: {\n    [AvatarGroupType.Individual]: \"0.0625rem\",\n    [AvatarGroupType.Group]: \"-0.75rem\",\n  },\n  [UDExAvatarSize.S]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.25rem\",\n  },\n  [UDExAvatarSize.M]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.625rem\",\n  },\n  [UDExAvatarSize.L]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-2rem\",\n  },\n  [UDExAvatarSize.XL]: {\n    [AvatarGroupType.Individual]: \"0.25rem\",\n    [AvatarGroupType.Group]: \"-2.75rem\",\n  },\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar-group</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AvatarGroup.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends AvatarGroup\n * @public\n */\n@customElement({\n  tag: \"udex-avatar-group\",\n  renderer: jsxRenderer,\n  styles: [UI5AvatarGroupCss],\n  dependencies: [UDExAvatar],\n})\n\nclass UDExAvatarGroup extends AvatarGroup {\n  constructor() {\n    super();\n\n    this._itemNavigation = new ItemNavigation(this, {\n      getItemsCallback: () => {\n        return this._isGroup\n          ? []\n          : this.items.slice(0, this._hiddenStartIndex).map(\n            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,\n          );\n      },\n    });\n  }\n  onEnterDOM(): void {\n    super.onEnterDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.addEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.addEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  onExitDOM(): void {\n    super.onExitDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.removeEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.removeEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  _onHover(hover: boolean) {\n    if (this._isGroup) {\n      this.items.every(avatar => {\n        avatar.toggleAttribute(\"hover\", hover);\n        return !avatar.hidden;\n      });\n    }\n  }\n\n  _onfocusin(e: FocusEvent) {\n    const targetItem = this._isGroup\n      ? e.currentTarget\n      : (e.target as HTMLElement).shadowRoot?.firstElementChild;\n    this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);\n  }\n\n  _prepareAvatars() {\n    this._colorIndex = 0;\n    const visibleColors = Object.values(UDExAvatarColorScheme);\n\n    this.items.forEach((avatar, index) => {\n      if (++this._colorIndex > visibleColors.length - 3) {\n        this._colorIndex = 1;\n      }\n      avatar.interactive = !this._isGroup;\n      avatar.toggleAttribute(\"ui5-avatar\", true);\n\n      if (!avatar.getAttribute(\"color-scheme\")) {\n        avatar.setAttribute(\"color-scheme\", visibleColors[this._colorIndex]);\n      }\n\n      if (index !== this._itemsCount - 1 || this._customOverflowButton) {\n        avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];\n      }\n    });\n  }\n}\n\nUDExAvatarGroup.define();\n\nexport default UDExAvatarGroup;\n"]}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import type { IAvatarGroupItem } from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroup from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroupType from \"@ui5/webcomponents/dist/types/AvatarGroupType.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\n// Styles\nimport UI5AvatarGroupCss from \"@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js\";\n\nimport UDExAvatar, { UDExAvatarColorScheme, UDExAvatarSize } from \"./Avatar.js\";\n\nconst avatarOffsets = {\n  [UDExAvatarSize.XS]: {\n    [AvatarGroupType.Individual]: \"0.0625rem\",\n    [AvatarGroupType.Group]: \"-0.75rem\",\n  },\n  [UDExAvatarSize.S]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.25rem\",\n  },\n  [UDExAvatarSize.M]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.625rem\",\n  },\n  [UDExAvatarSize.L]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-2rem\",\n  },\n  [UDExAvatarSize.XL]: {\n    [AvatarGroupType.Individual]: \"0.25rem\",\n    [AvatarGroupType.Group]: \"-2.75rem\",\n  },\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar-group</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AvatarGroup.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends AvatarGroup\n * @public\n */\n@customElement({\n  tag: \"udex-avatar-group\",\n  renderer: jsxRenderer,\n  styles: [UI5AvatarGroupCss],\n  dependencies: [UDExAvatar],\n})\n\nclass UDExAvatarGroup extends AvatarGroup {\n  constructor() {\n    super();\n\n    this._itemNavigation = new ItemNavigation(this, {\n      getItemsCallback: () => {\n        return this._isIndividual\n          ? this.items.slice(0, this._hiddenStartIndex).map(\n            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,\n          )\n          : [];\n      },\n    });\n  }\n  onEnterDOM(): void {\n    super.onEnterDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.addEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.addEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  onExitDOM(): void {\n    super.onExitDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.removeEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.removeEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  _onHover(hover: boolean) {\n    if (this._isGroup) {\n      this.items.every(avatar => {\n        avatar.toggleAttribute(\"hover\", hover);\n        return !avatar.hidden;\n      });\n    }\n  }\n\n  _onfocusin(e: FocusEvent) {\n    const targetItem = this._isGroup\n      ? e.currentTarget\n      : (e.target as HTMLElement).shadowRoot?.firstElementChild;\n    this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);\n  }\n\n  _prepareAvatars() {\n    this._colorIndex = 0;\n    const visibleColors = Object.values(UDExAvatarColorScheme);\n\n    this.items.forEach((avatar, index) => {\n      if (++this._colorIndex > visibleColors.length - 3) {\n        this._colorIndex = 1;\n      }\n      avatar.interactive = !this._isGroup;\n      avatar.toggleAttribute(\"ui5-avatar\", true);\n\n      if (!avatar.getAttribute(\"color-scheme\")) {\n        avatar.setAttribute(\"color-scheme\", visibleColors[this._colorIndex]);\n      }\n\n      if (index !== this._itemsCount - 1 || this._customOverflowButton) {\n        const avatarSize = avatar.effectiveSize || UDExAvatarSize.S;\n        avatar.style.marginInlineEnd = avatarOffsets[avatarSize][this.type];\n      }\n    });\n  }\n\n  get _isIndividual() {\n    return this.type === AvatarGroupType.Individual;\n  }\n}\n\nUDExAvatarGroup.define();\n\nexport default UDExAvatarGroup;\n"]}

package/dist/Footer.d.ts

@@ -1,15 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { UDExSocialMediaButtonType } from "./types/SocialMediaButtonType.js";
 import type { UDExTarget } from "./types/common.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.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 declare const chineseICPDefaultLink = "https://beian.miit.gov.cn/";
 export type FooterLink = {
+    id: string;
     title: string;
     url: string;
     target: UDExTarget;
@@ -26,13 +22,13 @@ export type FooterContactNumber = {
     country: string;
 };
 type UDExFooterDetailedClickEventDetail = {
-    originalEvent: PointerEvent;
+    originalEvent: MouseEvent;
     name: string | undefined;
     id?: string;
     sourceNode: HTMLElement;
 };
 type UDExFooterBaseEventDetail = {
-    originalEvent: PointerEvent;
+    originalEvent: MouseEvent | Event;
 };
 type BaseEvents = "contact-chat-click" | "contact-phone-local-numbers-click" | "contact-email-click" | "contact-phone-click" | "logo-click" | "back-to-top-click";
 type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click" | "site-information-click" | "social-media-link-click";
@@ -245,7 +241,7 @@ declare class UDExFooter extends UI5Element {
     onExitDOM(): void;
     onEnterDOM(): void;
     _handleResize(): void;
-    onBackToTopClick(e: PointerEvent): void;
+    onBackToTopClick(e: Event): void;
     get quickLinksArray(): FooterLink[];
     get trendingLinksArray(): FooterLink[];
     get aboutLinksArray(): FooterLink[];
@@ -276,18 +272,18 @@ declare class UDExFooter extends UI5Element {
     get currentTaglineUrl(): string | undefined;
     get taglineClass(): string;
     get logoClass(): string;
-    _onLogoClick(e: PointerEvent): void;
-    _onContactPhoneClick(e: PointerEvent): void;
-    _onContactPhoneLocalNumbersClick(e: PointerEvent): void;
-    _onContactEmailClick(e: PointerEvent): void;
-    _onContactChatClick(e: PointerEvent): void;
-    _onQuickLinksClick(e: PointerEvent): void;
-    _onTrendingClick(e: PointerEvent): void;
-    _onAboutSapClick(e: PointerEvent): void;
-    _onSiteInformationClick(e: PointerEvent): void;
-    _onSocialMediaLinkClick(e: PointerEvent): void;
-    fireFooterBaseEvent(e: PointerEvent, eventName: BaseEvents): void;
-    fireFooterDetailedClickEvent(e: PointerEvent, eventName: DetailedEvents): void;
+    _onLogoClick(e: MouseEvent): void;
+    _onContactPhoneClick(e: MouseEvent): void;
+    _onContactPhoneLocalNumbersClick(e: Event): void;
+    _onContactEmailClick(e: MouseEvent): void;
+    _onContactChatClick(e: MouseEvent): void;
+    _onQuickLinksClick(e: MouseEvent): void;
+    _onTrendingClick(e: MouseEvent): void;
+    _onAboutSapClick(e: MouseEvent): void;
+    _onSiteInformationClick(e: MouseEvent): void;
+    _onSocialMediaLinkClick(e: MouseEvent): void;
+    fireFooterBaseEvent(e: MouseEvent | Event, eventName: BaseEvents): void;
+    fireFooterDetailedClickEvent(e: MouseEvent, eventName: DetailedEvents): void;
 }
 export default UDExFooter;
 export type { UDExFooterBaseEventDetail, UDExFooterDetailedClickEventDetail };

package/dist/Footer.js

@@ -6,13 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var UDExFooter_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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-strict.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
@@ -22,17 +23,10 @@ import UDExDivider from "./Divider.js";
 import UDExSocialMediaButton from "./SocialMediaButton.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
-// Template
-import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
+import FooterTemplate from "./FooterTemplate.js";
+import { ABOUT_SAP, CHAT_WITH_US, CONTACT_US, EMAIL, LOCAL_COUNTRY_NAMES, PHONE_NUMBER, QUICK_LINKS, SEE_COMPLETE_LIST, SITE_INFORMATION, TRENDING, COPYRIGHT, PUBLIC_SECURITY_NETWORK_NUMBER, ICP_NUMBER, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import FooterCss from "./generated/themes/Footer.css.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { ABOUT_SAP, CHAT_WITH_US, CONTACT_US, EMAIL, LOCAL_COUNTRY_NAMES, PHONE_NUMBER, QUICK_LINKS, SEE_COMPLETE_LIST, SITE_INFORMATION, TRENDING, COPYRIGHT, 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/";
 /**
  * @class
@@ -385,7 +379,7 @@ UDExFooter = UDExFooter_1 = __decorate([
     customElement({
         languageAware: true,
         tag: "udex-footer",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [FooterCss],
         template: FooterTemplate,
         dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink, UDExSocialMediaButton],