@sapudex/web-components 2.10.0 → 2.11.0

package/bundle.esm.js

@@ -72,6 +72,7 @@ import "./dist/Pagination.js";
 import "./dist/PasswordField.js";
 import "./dist/PhoneNumberField.js";
 import "./dist/ProgressBar.js";
+import "./dist/PromoTile.js";
 import "./dist/Quote.js";
 import "./dist/RadioButton.js";
 import "./dist/RangeSlider.js";

package/cypress/specs/Accordion.cy.tsx

@@ -1,4 +1,5 @@
 import { UDExAccordion, UDExAccordionItem } from "../support/component-imports.js";
+import {UDExAccordionHeadlineLevel} from "../../src/Accordion.js";
 
 const defaultAccordion = <UDExAccordion headline="Test headline" id="accordionComponent">
   <UDExAccordionItem label="Some label for item 1" numberBadge="72">
@@ -44,6 +45,24 @@ describe("Accordion", () => {
     cy.get("[udex-accordion]").find("udex-accordion-item").should("have.length", 5);
   });
 
+  it("renders default tag of the accordion headline", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__headline").then($el => {
+      expect($el.get(0).tagName).to.equal("H3")
+    })
+  });
+
+  it("renders right tag of the accordion headline", () => {
+    cy.mount(<UDExAccordion headline="Test headline" headlineLevel={UDExAccordionHeadlineLevel.H1}>
+      <UDExAccordionItem label="Some label for item 1" numberBadge="72">
+        <div>Lorem ipsum dolor sit amet</div>
+      </UDExAccordionItem>
+    </UDExAccordion>)
+
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__headline").then($el => {
+      expect($el.get(0).tagName).to.equal("H1")
+    });
+  });
+
   it("clicking on expand all btn shows hidden", () => {
     cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click()
 

package/cypress/specs/AccordionItem.cy.tsx

@@ -8,6 +8,10 @@ const expandedAccordionItem = <UDExAccordionItem label="Some label for item 1" n
     <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
 </UDExAccordionItem>
 
+const accordionItemLarge = <UDExAccordionItem label="Some label for item 1" labelSize="Large">
+    <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+</UDExAccordionItem>
+
 describe('AccordionItem', () => {
 
   beforeEach(() => {
@@ -26,6 +30,11 @@ describe('AccordionItem', () => {
     cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__content").should("exist").and("be.visible")
   });
 
+  it("render different headline size", () => {
+    cy.mount(accordionItemLarge);
+    cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__content").should("exist");
+  });
+
   it("click on accordion item add necessary class and change aria-expanded to true", () => {
     cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__header").should("have.attr", "aria-expanded")
   });

package/cypress/specs/Footer.cy.tsx

@@ -2,12 +2,18 @@ import { UDExFooter } from "../support/component-imports.js";
 import { quickLinks, trendingLinks, aboutLinks, siteInformationLinks, socialLinks } from "../fixtures/footer-links.js";
 import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 
+const taglineAlt = "SAP tagline alt";
+const chineseLogoUrl = "./stories/footer/chinese-logo.svg";
+const chineseLogoLink = "https://www.sap.cn/index.html";
+const taglineUrl = "./stories/footer/tagline.svg";
+const chineseTaglineUrl = "./stories/footer/chinese-tagline.svg";
+
 const defaultFooter = <UDExFooter
   id="footer"
   logoLink="#test"
   logoTitle="SAP Title"
   logoAriaLabel="SAP Homepage"
-  logoUrl='./assets/sap-logo.svg'
+  logoUrl='https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg'
   contactNumbersList='[{"country":"France","number":"400-619-0727"},{"country":"United State","number":"1-800-872-1727"}]'
   localCountryNumbersLink='#'
   chatWithUsLink='#'
@@ -16,7 +22,12 @@ const defaultFooter = <UDExFooter
   aboutLinks = {JSON.stringify(aboutLinks)}
   siteInformationLinks = {JSON.stringify(siteInformationLinks)}
   socialLinks = {JSON.stringify(socialLinks)}
-  contactUsLink='#'>
+  contactUsLink='#'
+  tagline-alt={taglineAlt}
+  tagline-url={taglineUrl}
+  chinese-tagline-url={chineseTaglineUrl}
+  chinese-logo-url={chineseLogoUrl}
+  chinese-logo-link={chineseLogoLink}>
 </UDExFooter>
 
 describe("Footer", () => {
@@ -70,16 +81,17 @@ describe("Footer", () => {
   });
 
   it("sets data-id attribute to social links", () => {
-      cy.get("#footer").shadow().find(".udex-footer__social-container [udex-social-media-button]").each(($socialLink, index) => {
-        expect($socialLink[0]).attr("data-id").eqls(socialLinks[index].id)
-      })
-    });
+    cy.get("#footer").shadow().find(".udex-footer__social-container [udex-social-media-button]").each(($socialLink, index) => {
+      expect($socialLink[0]).attr("data-id").eqls(socialLinks[index].id)
+    })
+  });
 
-  it("renders chinese text when specified in url", () => {
-    setLanguage("zh_cn")
-    cy.mount(defaultFooter)
-    cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-text").should("have.text", "ICP_NUMBER PUBLIC_SECURITY_NETWORK_NUMBER")
-    cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-link").should("have.attr", "href", "https://beian.miit.gov.cn/")
+  it("renders tagline image", () => {
+    cy.get("#footer").shadow().find(".udex-footer__tagline-image").should("have.attr", "src", taglineUrl);
+  });
+
+  it("renders tagline image alt", () => {
+    cy.get("#footer").shadow().find(".udex-footer__tagline-image").should("have.attr", "alt", taglineAlt);
   });
 
   describe("Desktop tests", () => {
@@ -309,4 +321,29 @@ describe("Footer", () => {
       cy.get("#footer").shadow().find("udex-accordion-item.udex-footer__action-item").should("exist")
     });
   });
+
+  describe("Footer chinese", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      setLanguage("zh_cn");
+      cy.get("#footer").shadow().as("footer");
+    });
+
+    it("renders chinese text when specified in url", () => {
+      cy.get("@footer").find(".udex-footer__copyright-chinese-text").should("have.text", "ICP_NUMBER PUBLIC_SECURITY_NETWORK_NUMBER")
+      cy.get("@footer").find(".udex-footer__copyright-chinese-link").should("have.attr", "href", "https://beian.miit.gov.cn/")
+    });
+
+    it("renders chinese logo", () => {
+      cy.get("@footer").find(".udex-footer__logo-image-chinese").should("have.attr", "src", chineseLogoUrl);
+    });
+
+    it("renders chinese logo link", () => {
+      cy.get("@footer").find(".udex-footer__logo a").should("have.attr", "href", chineseLogoLink);
+    });
+
+    it("renders chinese tagline image", () => {
+      cy.get("@footer").find(".udex-footer__tagline-image-chinese").should("have.attr", "src", chineseTaglineUrl);
+    });
+  });
 });

package/cypress/specs/PromoTile.cy.tsx

@@ -0,0 +1,124 @@
+import { UDExPromoTile } from "../support/component-imports.js";
+
+const eyebrow = "Eyebrow";
+const header = "Header";
+const iconName = "add";
+const imageLabel = "image label";
+const logoUrl = "http://test.com";
+const buttonLabel = "Button";
+const design = "Tertiary";
+const colorScheme = "Grey9";
+const promoTile = <UDExPromoTile>Text</UDExPromoTile>;
+const simplePromoTile = <UDExPromoTile eyebrow={eyebrow} header={header}>Text</UDExPromoTile>;
+const iconPromoTile = <UDExPromoTile icon={iconName} image-label={imageLabel}>Text</UDExPromoTile>;
+const logoPromoTile = <UDExPromoTile logoUrl={logoUrl} image-label={imageLabel}>Text</UDExPromoTile>;
+const buttonPromoTile = <UDExPromoTile button={buttonLabel} button-design={design}>Text</UDExPromoTile>;
+const horizontalPromoTile = <UDExPromoTile orientation="Horizontal" button={buttonLabel}>Text</UDExPromoTile>;
+const darkPromoTile = <UDExPromoTile color-scheme={colorScheme} button={buttonLabel}>Text</UDExPromoTile>;
+
+describe("Promo Tile", () => {
+  it("renders simple promo tile", () => {
+    cy.mount(promoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("be.visible");
+  });
+
+  it("renders promo tile with default classes", () => {
+    cy.mount(promoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--vertical");
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--light");
+  });
+
+  it("renders promo tile with default aria label", () => {
+    cy.mount(promoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.attr", "aria-label", "Promo Tile");
+  });
+
+  it("renders promo tile without footer", () => {
+    cy.mount(promoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__footer").should("not.exist");
+  });
+ 
+  it("renders promo tile in horizontal orientation", () => {
+    cy.mount(horizontalPromoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--horizontal");
+  });
+
+  it("renders promo tile with eyebrow", () => {
+    cy.mount(simplePromoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__eyebrow").should("have.text", eyebrow);
+  });
+
+  it("renders promo tile with header", () => {
+    cy.mount(simplePromoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.attr", "aria-label", header);
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__header").should("have.text", header);
+  });
+
+  it("renders promo tile with UI5 icon", () => {
+    cy.mount(iconPromoTile)
+    cy.get("[udex-promo-tile]").shadow().find("[ui5-icon]").should("have.attr", "name", iconName);
+    cy.get("[udex-promo-tile]").shadow().find("[ui5-icon]").should("have.attr", "accessible-name", imageLabel);
+  });
+
+  it("renders promo tile with custom logo", () => {
+    cy.mount(logoPromoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__pictogram").should("have.class", "udex-promo-tile__pictogram--logo");
+    cy.get("[udex-promo-tile]").shadow().find("img").should("have.attr", "src", logoUrl);
+    cy.get("[udex-promo-tile]").shadow().find("img").should("have.attr", "alt", imageLabel);
+  });
+
+  it("renders promo tile with dark color scheme", () => {
+    cy.mount(darkPromoTile)
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--dark");
+    cy.get("[udex-promo-tile]").shadow().find("[udex-button]").should("have.attr", "design", "Secondary");
+  });
+});
+
+describe("Promo Tile - CTA button", () => {
+  beforeEach(() => {
+    cy.mount(buttonPromoTile)
+  })
+
+  it("renders promo tile with CTA button", () => {
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__footer").should("be.visible");
+    cy.get("[udex-promo-tile]").shadow().find("[udex-button]").shadow().find("button").should("have.attr", "aria-label", buttonLabel);
+  });
+
+  it("renders promo tile with CTA default desktop size", () => {
+    cy.get("[udex-promo-tile]").shadow().find("[udex-button]").should("have.attr", "size", "Large");
+  });
+
+  it("renders promo tile with CTA button Tertiary design", () => {
+    cy.get("[udex-promo-tile]").shadow().find("[udex-button]").should("have.attr", "design", design);
+  });
+
+  it("button click emits \"button-click\" event", () => {
+    const stub = cy.stub();
+    cy.get("[udex-promo-tile]").then($tiles => {
+      $tiles.get(0).addEventListener("button-click", stub);
+    });
+    cy.get("[udex-promo-tile]").shadow().find("[udex-button]").click()
+      .then(() => {
+        expect(stub).to.have.been.called;
+      });
+  });
+});
+
+describe("Promo Tile - Mobile tests", () => {
+  beforeEach(() => {
+      cy.simulateDevice();
+      cy.mount(horizontalPromoTile);
+  });
+
+  it("renders promo tile with smaller CTA button size", () => {
+    cy.get("[udex-promo-tile]").shadow().find("[udex-button]").should("have.attr", "size", "Medium");
+  });
+
+  it("renders promo tile with mobile design", () => {
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").then($tiles => {
+      const tileStyles = window.getComputedStyle($tiles[0]);
+      expect(tileStyles.padding).eqls("24px");
+      expect(tileStyles.flexDirection).eqls("column");
+    })
+  });
+});

package/cypress/specs/Quote.cy.tsx

@@ -0,0 +1,65 @@
+import {UDExFilterMenu, UDExQuote} from "../support/component-imports.js";
+import { UDExLink } from "../support/component-imports.js";
+import { UDExMaskType, UDExSizeType, UDExImagePlacement } from "../../src/Quote.js";
+
+
+const componentQuote = <UDExQuote
+  image-size={UDExSizeType.large}
+  text-size={UDExSizeType.large}
+  mask={UDExMaskType.avatar}>
+  <img
+    alt="John Ford avatar"
+    slot="image"
+    style="border-radius: 100px;"
+    src="https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg"
+  />
+  It is great for data management and comparing data. It does analysis of data
+  and compares old data and new data as well. Data is easily stored and easily
+  editable.
+  <span slot="author">John Ford, Job Title, Company, Inc.</span>
+  <UDExLink
+    slot="link"
+    design="Default"
+    interactive-area-size="Normal"
+    wrapping-type="Normal">
+    Read more
+  </UDExLink>
+</UDExQuote>
+
+describe("Quote", () => {
+  beforeEach(() => {
+    cy.mount(componentQuote)
+  })
+
+  it("Default slot content renders correctly", () => {
+    cy.get("[udex-quote]").shadow().find(".content-container__text").should("exist");
+  });
+
+  it("Image slot content renders correctly", () => {
+    cy.get("[udex-quote]").shadow().find("[slot=image]").should("exist");
+  });
+
+  it("Author slot content renders correctly", () => {
+    cy.get("[udex-quote]").shadow().find("[slot=author]").should("exist");
+  });
+
+  it("Link slot content renders correctly", () => {
+    cy.get("[udex-quote]").shadow().find("[slot=link]").should("exist");
+  });
+
+  it("Updates image placement to 'right' correctly", () => {
+    cy.get("[udex-quote]").then($quote => {
+      const quote = $quote[0] as UDExQuote;
+      quote.imagePlacement = UDExImagePlacement.right;
+    });
+    cy.get("[udex-quote]").should("have.attr", "image-placement", "right");
+  });
+
+  it("Updates image size correctly", () => {
+    cy.get("[udex-quote]").then($quote => {
+      const quote = $quote[0] as UDExQuote;
+      quote.imageSize = UDExSizeType.small;
+    });
+    cy.get("[udex-quote]").should("have.attr", "image-size", "small");
+  });
+});

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

@@ -52,6 +52,8 @@ import UDExFilterMenuItem from "../../instrumented/FilterMenuItem.js";
 import UDExFilterMenuGroupHeader from "../../instrumented/FilterMenuGroupHeader.js";
 import UDExFilterMenuSelectAll from "../../instrumented/FilterMenuSelectAll.js";
 import UDExSocialMediaButton from "../../instrumented/SocialMediaButton.js";
+import UDExPromoTile from "../../instrumented/PromoTile.js";
+import UDExQuote from "../../instrumented/Quote.js";
 
 export {
   UDExAccordion,
@@ -77,6 +79,7 @@ export {
   UDExLinkListItem,
   UDExListItem,
   UDExPhoneNumberField,
+  UDExPromoTile,
   UDExRatingBar,
   UDExRatingIndicator,
   UDExReview,
@@ -108,4 +111,5 @@ export {
   UDExUploadItem,
   UDExWizard,
   UDExWizardStep,
+  UDExQuote,
 };

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

@@ -52,6 +52,8 @@ import UDExFilterMenuItem from "../../src/FilterMenuItem.js";
 import UDExFilterMenuGroupHeader from "../../src/FilterMenuGroupHeader.js";
 import UDExFilterMenuSelectAll from "../../src/FilterMenuSelectAll.js";
 import UDExSocialMediaButton from "../../src/SocialMediaButton.js";
+import UDExPromoTile from "../../src/PromoTile.js";
+import UDExQuote from "../../src/Quote.js";
 
 export {
   UDExAccordion,
@@ -77,6 +79,7 @@ export {
   UDExLinkListItem,
   UDExListItem,
   UDExPhoneNumberField,
+  UDExPromoTile,
   UDExRatingBar,
   UDExRatingIndicator,
   UDExReview,
@@ -107,5 +110,6 @@ export {
   UDExUpload,
   UDExUploadItem,
   UDExWizard,
-  UDExWizardStep
+  UDExWizardStep,
+  UDExQuote,
 };

package/dist/Accordion.d.ts

@@ -5,6 +5,14 @@ import type UDExAccordionItem from "./AccordionItem.js";
 type UDExAccordionToggleItemsEventDetail = {
     isOpen: boolean;
 };
+export declare enum UDExAccordionHeadlineLevel {
+    H1 = "H1",
+    H2 = "H2",
+    H3 = "H3",
+    H4 = "H4",
+    H5 = "H5",
+    H6 = "H6"
+}
 /**
  * @class
  *
@@ -54,6 +62,13 @@ declare class UDExAccordion extends UI5Element {
      * @public
      */
     headline: string;
+    /**
+     * Defines the semantic level of the headline.
+     *
+     * @default UDExAccordionHeadlineLevel.h3
+     * @public
+     */
+    headlineLevel: UDExAccordionHeadlineLevel;
     /**
      * Slot for accordion items.
      *

package/dist/Accordion.js

@@ -18,6 +18,15 @@ import AccordionTemplate from "./AccordionTemplate.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import AccordionCss from "./generated/themes/Accordion.css.js";
+export var UDExAccordionHeadlineLevel;
+(function (UDExAccordionHeadlineLevel) {
+    UDExAccordionHeadlineLevel["H1"] = "H1";
+    UDExAccordionHeadlineLevel["H2"] = "H2";
+    UDExAccordionHeadlineLevel["H3"] = "H3";
+    UDExAccordionHeadlineLevel["H4"] = "H4";
+    UDExAccordionHeadlineLevel["H5"] = "H5";
+    UDExAccordionHeadlineLevel["H6"] = "H6";
+})(UDExAccordionHeadlineLevel || (UDExAccordionHeadlineLevel = {}));
 /**
  * @class
  *
@@ -40,6 +49,13 @@ import AccordionCss from "./generated/themes/Accordion.css.js";
 let UDExAccordion = UDExAccordion_1 = class UDExAccordion extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines the semantic level of the headline.
+         *
+         * @default UDExAccordionHeadlineLevel.h3
+         * @public
+         */
+        this.headlineLevel = UDExAccordionHeadlineLevel.H3;
         this._allExpanded = false;
         this._activeItemIndex = -1;
     }
@@ -133,6 +149,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UDExAccordion.prototype, "headline", void 0);
+__decorate([
+    property()
+], UDExAccordion.prototype, "headlineLevel", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true, individualSlots: true })
 ], UDExAccordion.prototype, "_items", void 0);

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\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\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   * 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;\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 { 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\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\n}\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\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;\n"]}

package/dist/AccordionItem.d.ts

@@ -1,4 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+export declare enum UDExAccordionItemTitleSize {
+    Standard = "Standard",
+    Large = "Large"
+}
 /**
  * @class
  *
@@ -37,6 +41,20 @@ declare class UDExAccordionItem extends UI5Element {
      * @public
      */
     label: string;
+    /**
+     * Defines the size of label.
+     *
+     * @default UDExAccordionItemTitleSize.Standard
+     * @public
+     */
+    labelSize: UDExAccordionItemTitleSize;
+    /**
+     * Defines icon name to be display with title.
+     *
+     * @default ""
+     * @public
+     */
+    labelIcon: string;
     /**
      * Defines if the accordion item is expanded by default
      *
@@ -67,6 +85,7 @@ declare class UDExAccordionItem extends UI5Element {
     constructor();
     onAfterRendering(): void;
     onEnterDOM(): void;
+    setContentHeight(): void;
     contentKeydown(e: KeyboardEvent): void;
     itemClickHandler(e: Event): void;
     focusHandler(): void;

package/dist/AccordionItem.js

@@ -15,6 +15,11 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import AccordionItemTemplate from "./AccordionItemTemplate.js";
 // Styles
 import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
+export var UDExAccordionItemTitleSize;
+(function (UDExAccordionItemTitleSize) {
+    UDExAccordionItemTitleSize["Standard"] = "Standard";
+    UDExAccordionItemTitleSize["Large"] = "Large";
+})(UDExAccordionItemTitleSize || (UDExAccordionItemTitleSize = {}));
 /**
  * @class
  *
@@ -37,6 +42,13 @@ import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
 let UDExAccordionItem = class UDExAccordionItem extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines the size of label.
+         *
+         * @default UDExAccordionItemTitleSize.Standard
+         * @public
+         */
+        this.labelSize = UDExAccordionItemTitleSize.Standard;
         /**
          * Defines if the accordion item is expanded by default
          *
@@ -54,18 +66,23 @@ let UDExAccordionItem = class UDExAccordionItem extends UI5Element {
     }
     onAfterRendering() {
         this.handleDirection();
+        this.setContentHeight();
     }
     onEnterDOM() {
         if (isDesktop()) {
             this.setAttribute("desktop", "");
         }
     }
+    setContentHeight() {
+        this.style.setProperty("--udex-accordion-item-content-max-height", `${this.shadowRoot?.querySelector(".udex-accordion-item__content")?.scrollHeight}px`);
+    }
     contentKeydown(e) {
         e.stopPropagation();
     }
     itemClickHandler(e) {
         e.preventDefault();
         this.expanded = !this.expanded;
+        this.setContentHeight();
         this.fireDecoratorEvent("accordion-item-click");
     }
     focusHandler() {
@@ -94,6 +111,12 @@ __decorate([
 __decorate([
     property()
 ], UDExAccordionItem.prototype, "label", void 0);
+__decorate([
+    property()
+], UDExAccordionItem.prototype, "labelSize", void 0);
+__decorate([
+    property()
+], UDExAccordionItem.prototype, "labelIcon", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExAccordionItem.prototype, "expanded", void 0);

package/dist/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.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 jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\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-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-item\",\n  renderer: jsxRenderer,\n  styles: AccordionItemCss,\n  template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n  eventDetails!: {\n    \"accordion-item-focus\": void,\n    \"accordion-item-click\": void,\n  };\n  /**\n   * Defines the Badge at the end of the label item.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    numberBadge!: string;\n\n  /**\n   * Defines the label of the accordion item component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines if the accordion item is expanded by default\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Used internally to understand the component's open or closed state.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isOpen = false;\n\n  /**\n   * Defines direction of the accordion item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Slot for accordion item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  constructor() {\n    super();\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  contentKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n  }\n\n  itemClickHandler(e: Event) {\n    e.preventDefault();\n    this.expanded = !this.expanded;\n    this.fireDecoratorEvent(\"accordion-item-click\");\n  }\n\n  focusHandler() {\n    this.fireDecoratorEvent(\"accordion-item-focus\");\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.itemClickHandler(e);\n    }\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\n"]}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.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 jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n  Standard = \"Standard\",\n  Large = \"Large\"\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-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-item\",\n  renderer: jsxRenderer,\n  styles: AccordionItemCss,\n  template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n  eventDetails!: {\n    \"accordion-item-focus\": void,\n    \"accordion-item-click\": void,\n  };\n  /**\n   * Defines the Badge at the end of the label item.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    numberBadge!: string;\n\n  /**\n   * Defines the label of the accordion item component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines the size of label.\n   *\n   * @default UDExAccordionItemTitleSize.Standard\n   * @public\n   */\n  @property()\n    labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;\n\n  /**\n   * Defines icon name to be display with title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    labelIcon!: string;\n\n  /**\n   * Defines if the accordion item is expanded by default\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Used internally to understand the component's open or closed state.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isOpen = false;\n\n  /**\n   * Defines direction of the accordion item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Slot for accordion item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  constructor() {\n    super();\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n    this.setContentHeight();\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  setContentHeight() {\n    this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.shadowRoot?.querySelector(\".udex-accordion-item__content\")?.scrollHeight}px`);\n  }\n\n  contentKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n  }\n\n  itemClickHandler(e: Event) {\n    e.preventDefault();\n    this.expanded = !this.expanded;\n    this.setContentHeight();\n    this.fireDecoratorEvent(\"accordion-item-click\");\n  }\n\n  focusHandler() {\n    this.fireDecoratorEvent(\"accordion-item-focus\");\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.itemClickHandler(e);\n    }\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\n"]}