@sapudex/web-components 2.18.0 → 2.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (172) hide show
  1. package/bundle.esm.js +3 -0
  2. package/cypress/specs/AccordionItem.cy.tsx +6 -2
  3. package/cypress/specs/BusyIndicator.cy.tsx +10 -0
  4. package/cypress/specs/FilterMenu.cy.tsx +1 -1
  5. package/cypress/specs/Footer.cy.tsx +9 -2
  6. package/cypress/specs/ImageGridTicker.cy.tsx +208 -0
  7. package/cypress/specs/ImageGridTickerItem.cy.tsx +74 -0
  8. package/cypress/specs/Table.cy.tsx +1 -1
  9. package/cypress/support/component-imports.instrumented.ts +52 -46
  10. package/cypress/support/component-imports.src.ts +53 -47
  11. package/dist/Accordion.d.ts +1 -0
  12. package/dist/Accordion.js +7 -1
  13. package/dist/Accordion.js.map +1 -1
  14. package/dist/AccordionItem.d.ts +8 -0
  15. package/dist/AccordionItem.js +11 -0
  16. package/dist/AccordionItem.js.map +1 -1
  17. package/dist/AccordionItemTemplate.js +2 -2
  18. package/dist/AccordionItemTemplate.js.map +1 -1
  19. package/dist/AccordionTemplate.js +2 -2
  20. package/dist/AccordionTemplate.js.map +1 -1
  21. package/dist/AssetsVariables.js +6 -0
  22. package/dist/AssetsVariables.js.map +1 -1
  23. package/dist/BusyIndicator.d.ts +22 -0
  24. package/dist/BusyIndicator.js +39 -0
  25. package/dist/BusyIndicator.js.map +1 -0
  26. package/dist/FilterMenu.js +2 -2
  27. package/dist/FilterMenu.js.map +1 -1
  28. package/dist/Footer.d.ts +10 -0
  29. package/dist/Footer.js +7 -0
  30. package/dist/Footer.js.map +1 -1
  31. package/dist/FooterTemplate.js +3 -3
  32. package/dist/FooterTemplate.js.map +1 -1
  33. package/dist/ImageGridTicker.d.ts +129 -0
  34. package/dist/ImageGridTicker.js +305 -0
  35. package/dist/ImageGridTicker.js.map +1 -0
  36. package/dist/ImageGridTickerItem.d.ts +50 -0
  37. package/dist/ImageGridTickerItem.js +61 -0
  38. package/dist/ImageGridTickerItem.js.map +1 -0
  39. package/dist/ImageGridTickerItemTemplate.d.ts +2 -0
  40. package/dist/ImageGridTickerItemTemplate.js +9 -0
  41. package/dist/ImageGridTickerItemTemplate.js.map +1 -0
  42. package/dist/ImageGridTickerTemplate.d.ts +2 -0
  43. package/dist/ImageGridTickerTemplate.js +14 -0
  44. package/dist/ImageGridTickerTemplate.js.map +1 -0
  45. package/dist/SelectBox.js +2 -0
  46. package/dist/SelectBox.js.map +1 -1
  47. package/dist/Table.js +2 -2
  48. package/dist/Table.js.map +1 -1
  49. package/dist/assets/{InputSuggestions-L-9bNSZM.js → InputSuggestions-DOj9B3SE.js} +2 -2
  50. package/dist/assets/{ListItemStandardExpandableTextTemplate-C2VMJfHu.js → ListItemStandardExpandableTextTemplate-C6q5EhEr.js} +3 -3
  51. package/dist/assets/{bundle.esm-D4RSd7yl.js → bundle.esm-CmHUshBw.js} +220 -212
  52. package/dist/assets/messagebundle_en-BhTYnZbC.js +1 -0
  53. package/dist/assets/parameters-bundle.css-195ykfle.js +2 -0
  54. package/dist/assets/parameters-bundle.css-2XlTf-8J.js +2 -0
  55. package/dist/assets/parameters-bundle.css-7-HTnP5E.js +2 -0
  56. package/dist/assets/parameters-bundle.css-B7OzyC0l.js +2 -0
  57. package/dist/assets/parameters-bundle.css-BJjePPyo.js +2 -0
  58. package/dist/assets/parameters-bundle.css-BVsx_KaG.js +2 -0
  59. package/dist/assets/parameters-bundle.css-BbOftqiJ.js +2 -0
  60. package/dist/assets/parameters-bundle.css-BpraBfJY.js +2 -0
  61. package/dist/assets/parameters-bundle.css-Btm09-js.js +2 -0
  62. package/dist/assets/parameters-bundle.css-BtvY__7H.js +2 -0
  63. package/dist/assets/parameters-bundle.css-CAs_WpVc.js +2 -0
  64. package/dist/assets/parameters-bundle.css-Cqg5HiU_.js +2 -0
  65. package/dist/assets/parameters-bundle.css-DIUy2Etb.js +2 -0
  66. package/dist/assets/parameters-bundle.css-Dn173v0e.js +2 -0
  67. package/dist/assets/parameters-bundle.css-QEiUG73s.js +2 -0
  68. package/dist/assets/parameters-bundle.css-VUmjvCcs.js +2 -0
  69. package/dist/css/themes/Button.css +1 -1
  70. package/dist/css/themes/CountrySelector.css +1 -1
  71. package/dist/css/themes/DatePickerPopover.css +1 -1
  72. package/dist/css/themes/ImageGridTicker.css +1 -0
  73. package/dist/css/themes/ImageGridTickerItem.css +1 -0
  74. package/dist/css/themes/Quote.css +1 -1
  75. package/dist/css/themes/RatingIndicator.css +1 -1
  76. package/dist/css/themes/Slider.css +1 -1
  77. package/dist/custom-elements-internal.json +431 -143
  78. package/dist/custom-elements.json +386 -128
  79. package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
  80. package/dist/generated/i18n/i18n-defaults.d.ts +3 -1
  81. package/dist/generated/i18n/i18n-defaults.js +3 -1
  82. package/dist/generated/i18n/i18n-defaults.js.map +1 -1
  83. package/dist/generated/templates/SearchTemplate.lit.js +1 -1
  84. package/dist/generated/templates/SearchTemplate.lit.js.map +1 -1
  85. package/dist/generated/templates/SearchableListBaseTemplate.lit.js +1 -1
  86. package/dist/generated/templates/SearchableListBaseTemplate.lit.js.map +1 -1
  87. package/dist/generated/templates/TableTemplate.lit.js +1 -1
  88. package/dist/generated/templates/TableTemplate.lit.js.map +1 -1
  89. package/dist/generated/themes/Button.css.d.ts +1 -1
  90. package/dist/generated/themes/Button.css.js +1 -1
  91. package/dist/generated/themes/Button.css.js.map +1 -1
  92. package/dist/generated/themes/CountrySelector.css.d.ts +1 -1
  93. package/dist/generated/themes/CountrySelector.css.js +1 -1
  94. package/dist/generated/themes/CountrySelector.css.js.map +1 -1
  95. package/dist/generated/themes/DatePickerPopover.css.d.ts +1 -1
  96. package/dist/generated/themes/DatePickerPopover.css.js +1 -1
  97. package/dist/generated/themes/DatePickerPopover.css.js.map +1 -1
  98. package/dist/generated/themes/ImageGridTicker.css.d.ts +2 -0
  99. package/dist/generated/themes/ImageGridTicker.css.js +8 -0
  100. package/dist/generated/themes/ImageGridTicker.css.js.map +1 -0
  101. package/dist/generated/themes/ImageGridTickerItem.css.d.ts +2 -0
  102. package/dist/generated/themes/ImageGridTickerItem.css.js +8 -0
  103. package/dist/generated/themes/ImageGridTickerItem.css.js.map +1 -0
  104. package/dist/generated/themes/Quote.css.d.ts +1 -1
  105. package/dist/generated/themes/Quote.css.js +1 -1
  106. package/dist/generated/themes/Quote.css.js.map +1 -1
  107. package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
  108. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  109. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  110. package/dist/generated/themes/Slider.css.d.ts +1 -1
  111. package/dist/generated/themes/Slider.css.js +1 -1
  112. package/dist/generated/themes/Slider.css.js.map +1 -1
  113. package/dist/messagebundle.properties +4 -0
  114. package/dist/messagebundle_en.properties +2 -0
  115. package/dist/vscode.html-custom-data.json +56 -6
  116. package/dist/web-types.json +125 -6
  117. package/package.json +8 -8
  118. package/src/Accordion.ts +9 -1
  119. package/src/AccordionItem.ts +10 -0
  120. package/src/AccordionItemTemplate.tsx +2 -2
  121. package/src/AccordionTemplate.tsx +3 -2
  122. package/src/AssetsVariables.ts +6 -0
  123. package/src/BusyIndicator.ts +33 -0
  124. package/src/FilterMenu.ts +2 -2
  125. package/src/Footer.ts +16 -0
  126. package/src/FooterTemplate.tsx +26 -11
  127. package/src/ImageGridTicker.ts +355 -0
  128. package/src/ImageGridTickerItem.ts +81 -0
  129. package/src/ImageGridTickerItemTemplate.tsx +28 -0
  130. package/src/ImageGridTickerTemplate.tsx +50 -0
  131. package/src/Search.hbs +0 -1
  132. package/src/SearchableListBase.hbs +2 -2
  133. package/src/SelectBox.ts +2 -0
  134. package/src/Table.hbs +2 -2
  135. package/src/Table.ts +2 -2
  136. package/src/generated/i18n/i18n-defaults.ts +2 -2
  137. package/src/generated/templates/SearchTemplate.lit.ts +1 -1
  138. package/src/generated/templates/SearchableListBaseTemplate.lit.ts +1 -1
  139. package/src/generated/templates/TableTemplate.lit.ts +1 -1
  140. package/src/generated/themes/Button.css.ts +1 -1
  141. package/src/generated/themes/CountrySelector.css.ts +1 -1
  142. package/src/generated/themes/DatePickerPopover.css.ts +1 -1
  143. package/src/generated/themes/ImageGridTicker.css.ts +9 -0
  144. package/src/generated/themes/ImageGridTickerItem.css.ts +9 -0
  145. package/src/generated/themes/Quote.css.ts +1 -1
  146. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  147. package/src/generated/themes/Slider.css.ts +1 -1
  148. package/src/i18n/messagebundle.properties +4 -0
  149. package/src/i18n/messagebundle_en.properties +2 -0
  150. package/src/themes/Button.css +1 -0
  151. package/src/themes/CountrySelector.css +2 -2
  152. package/src/themes/DatePickerPopover.css +3 -2
  153. package/src/themes/ImageGridTicker.css +134 -0
  154. package/src/themes/ImageGridTickerItem.css +52 -0
  155. package/src/themes/Quote.css +7 -2
  156. package/dist/assets/messagebundle_en-D6cJIiUq.js +0 -1
  157. package/dist/assets/parameters-bundle.css-7tmaWxIc.js +0 -2
  158. package/dist/assets/parameters-bundle.css-BERBdAGd.js +0 -2
  159. package/dist/assets/parameters-bundle.css-B_2Jldx4.js +0 -2
  160. package/dist/assets/parameters-bundle.css-BbhFHnRW.js +0 -2
  161. package/dist/assets/parameters-bundle.css-Bg4Huwh4.js +0 -2
  162. package/dist/assets/parameters-bundle.css-BwKgmVCr.js +0 -2
  163. package/dist/assets/parameters-bundle.css-C759-AfS.js +0 -2
  164. package/dist/assets/parameters-bundle.css-CCDcKh9J.js +0 -2
  165. package/dist/assets/parameters-bundle.css-COmXsTqR.js +0 -2
  166. package/dist/assets/parameters-bundle.css-CPZYPVEO.js +0 -2
  167. package/dist/assets/parameters-bundle.css-C_z8R1zV.js +0 -2
  168. package/dist/assets/parameters-bundle.css-CuV0KqCS.js +0 -2
  169. package/dist/assets/parameters-bundle.css-DT8OC7CO.js +0 -2
  170. package/dist/assets/parameters-bundle.css-Df2zY3XY.js +0 -2
  171. package/dist/assets/parameters-bundle.css-H0NCnWYS.js +0 -2
  172. package/dist/assets/parameters-bundle.css-pC6uofhy.js +0 -2
package/bundle.esm.js CHANGED
@@ -30,6 +30,7 @@ import "./dist/Badge.js";
30
30
  import "./dist/Breadcrumbs.js";
31
31
  import "./dist/BreadcrumbsItem.js";
32
32
  import "./dist/Button.js";
33
+ import "./dist/BusyIndicator.js";
33
34
  import "./dist/Carousel.js";
34
35
  import "./dist/Checkbox.js";
35
36
  import "./dist/Contact.js";
@@ -46,6 +47,8 @@ import "./dist/FilterMenuItem.js";
46
47
  import "./dist/FilterMenuSelectAll.js";
47
48
  import "./dist/Footer.js";
48
49
  import "./dist/HeroBanner.js";
50
+ import "./dist/ImageGridTicker.js";
51
+ import "./dist/ImageGridTickerItem.js";
49
52
  import "./dist/InputGroup.js";
50
53
  import "./dist/Link.js";
51
54
  import "./dist/LinkList.js";
@@ -1,7 +1,7 @@
1
1
  import { UDExAccordionItemTitleSize } from "../../instrumented/AccordionItem.js";
2
2
  import { UDExAccordionItem } from "../support/component-imports.js";
3
3
 
4
- const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72">
4
+ const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72" number-badge-design="Red">
5
5
  <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>
6
6
  </UDExAccordionItem>
7
7
 
@@ -68,6 +68,10 @@ describe('AccordionItem', () => {
68
68
  it("has a badge", () => {
69
69
  cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("exist").and("be.visible")
70
70
  });
71
+
72
+ it("has a badge with number badge design", () => {
73
+ cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("have.attr", "number-design", "Red")
74
+ });
71
75
 
72
76
  it("click on accordion adjust content height for animations", () => {
73
77
  cy.mount(accordionItemWithAccordion)
@@ -83,4 +87,4 @@ describe('AccordionItem', () => {
83
87
  cy.get("[udex-accordion-item]").click().realPress("Tab")
84
88
  cy.get("@itemFocus").should("have.been.called")
85
89
  });
86
- });
90
+ });
@@ -0,0 +1,10 @@
1
+ import { UDExBusyIndicator } from "../support/component-imports.js";
2
+
3
+ const busyIndicator = <UDExBusyIndicator></UDExBusyIndicator>
4
+
5
+ describe("Busy Indicator", () => {
6
+ it("renders busy indicator", () => {
7
+ cy.mount(busyIndicator)
8
+ cy.get("[udex-busy-indicator]").shadow().find(".ui5-busy-indicator-root").should("be.visible")
9
+ });
10
+ });
@@ -153,7 +153,7 @@ describe("Filter Menu component", () => {
153
153
  const element = $el[0] as UDExFilterMenu;
154
154
  element.busy = true;
155
155
  });
156
- cy.get("[udex-filter-menu]").shadow().find("ui5-busy-indicator").should("exist");
156
+ cy.get("[udex-filter-menu]").shadow().find("udex-busy-indicator").should("exist");
157
157
  });
158
158
 
159
159
  it('renders the search input if "showSearchInput" property is set', () => {
@@ -1,4 +1,4 @@
1
- import { UDExFooter } from "../support/component-imports.js";
1
+ import { UDExFooter, UDExSocialMediaButton } from "../support/component-imports.js";
2
2
  import { quickLinks, trendingLinks, aboutLinks, siteInformationLinks, socialLinks } from "../fixtures/footer-links.js";
3
3
  import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
4
4
 
@@ -7,6 +7,7 @@ const chineseLogoUrl = "./stories/footer/chinese-logo.svg";
7
7
  const chineseLogoLink = "https://www.sap.cn/index.html";
8
8
  const taglineUrl = "./stories/footer/tagline.svg";
9
9
  const chineseTaglineUrl = "./stories/footer/chinese-tagline.svg";
10
+ const url = 'http://test.com';
10
11
 
11
12
  const defaultFooter = <UDExFooter
12
13
  id="footer"
@@ -28,6 +29,7 @@ const defaultFooter = <UDExFooter
28
29
  chinese-tagline-url={chineseTaglineUrl}
29
30
  chinese-logo-url={chineseLogoUrl}
30
31
  chinese-logo-link={chineseLogoLink}>
32
+ <UDExSocialMediaButton slot="customSocialLinks" url={url}></UDExSocialMediaButton>
31
33
  </UDExFooter>
32
34
 
33
35
  describe("Footer", () => {
@@ -76,8 +78,13 @@ describe("Footer", () => {
76
78
  cy.get("#footer").shadow().find(".udex-footer__social-container [udex-social-media-button]").should("have.length", 6)
77
79
  });
78
80
 
81
+ it("renders all social links from slot", () => {
82
+ cy.get("#footer").find("[udex-social-media-button]").should("have.length", 1)
83
+ });
84
+
79
85
  it("renders copyright", () => {
80
- cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", "© 2025 SAP SE or an SAP affiliate company. All rights reserved.")
86
+ const currentYear = new Date().getFullYear();
87
+ cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", `© ${currentYear} SAP SE or an SAP affiliate company. All rights reserved.`);
81
88
  });
82
89
 
83
90
  it("sets data-id attribute to social links", () => {
@@ -0,0 +1,208 @@
1
+ import { UDExImageGridTicker, UDExImageGridTickerItem } from "../support/component-imports.js";
2
+
3
+ const imageGridTicker = <UDExImageGridTicker>
4
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/chiesi-customer-logo.svg" alt="chiesi logo"></UDExImageGridTickerItem>
5
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/embecta-customer-logo.png" alt="embecta logo"></UDExImageGridTickerItem>
6
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/mj-quinn-customer-logo.svg" alt="mj quinn logo"></UDExImageGridTickerItem>
7
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/mk-group-logo.png" alt="mk group logo"></UDExImageGridTickerItem>
8
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/natura-and-co-customer-logo.svg" alt="natura and co logo"></UDExImageGridTickerItem>
9
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/banco-galicia-customer-logo.png" alt="galicia logo"></UDExImageGridTickerItem>
10
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/kind-customer-logo.svg" alt="kind logo"></UDExImageGridTickerItem>
11
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/resonac-customer-logo.png" alt="resonac logo"></UDExImageGridTickerItem>
12
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/lion-customer-logo.png" alt="lion logo"></UDExImageGridTickerItem>
13
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/puretech-scientific-customer-logo.svg" alt="puretech scientific logo"></UDExImageGridTickerItem>
14
+ <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/BSH-customer-logo.png" alt="bsh logo"></UDExImageGridTickerItem>
15
+ </UDExImageGridTicker>
16
+
17
+ describe("Image Grid Ticker", () => {
18
+ beforeEach(() => {
19
+ cy.viewport(1400, 800);
20
+ cy.mount(imageGridTicker);
21
+ cy.get("[udex-image-grid-ticker]").shadow().as("image-grid-ticker");
22
+ });
23
+
24
+ it("is correctly rendered", () => {
25
+ cy.get("@image-grid-ticker")
26
+ .find(".udex-image-grid-ticker")
27
+ .should("be.visible");
28
+ });
29
+
30
+ it("renders the correct number of items", () => {
31
+ cy.viewport(1920, 800);
32
+ cy.get("@image-grid-ticker")
33
+ .find("[udex-image-grid-ticker-item]")
34
+ .should("have.length", 11);
35
+ });
36
+
37
+ it("duplicates items when scrollable", () => {
38
+ cy.get("[udex-image-grid-ticker]")
39
+ .invoke("attr", "_is-scrollable")
40
+ .should("exist");
41
+
42
+ cy.get("@image-grid-ticker")
43
+ .find(".udex-image-grid-ticker__track")
44
+ .children()
45
+ .should("have.length", 22);
46
+ });
47
+
48
+ it("animation is running initially when scrollable", () => {
49
+ cy.get("[udex-image-grid-ticker]")
50
+ .should("have.attr", "_is-scrollable");
51
+
52
+ cy.get("[udex-image-grid-ticker]")
53
+ .should("not.have.attr", "_is-paused");
54
+ });
55
+
56
+ it("toggles play/pause button state", () => {
57
+ cy.get("@image-grid-ticker")
58
+ .find(".udex-image-grid-ticker__play-button")
59
+ .click();
60
+
61
+ cy.get("udex-image-grid-ticker")
62
+ .should("have.attr", "_is-paused");
63
+
64
+ cy.get("@image-grid-ticker")
65
+ .find(".udex-image-grid-ticker__play-button")
66
+ .click();
67
+
68
+ cy.get("udex-image-grid-ticker")
69
+ .should("not.have.attr", "_is-paused");
70
+ });
71
+
72
+ it("supports keyboard right arrow navigation", () => {
73
+ cy.get("@image-grid-ticker")
74
+ .find("udex-image-grid-ticker-item")
75
+ .eq(3)
76
+ .shadow()
77
+ .find(".udex-image-grid-ticker-item__link")
78
+ .focus()
79
+ .type("{rightarrow}");
80
+
81
+ cy.get("@image-grid-ticker")
82
+ .find("udex-image-grid-ticker-item")
83
+ .eq(4)
84
+ .shadow()
85
+ .find(".udex-image-grid-ticker-item__link")
86
+ .should("be.focused")
87
+ });
88
+
89
+ it("supports keyboard left arrow navigation", () => {
90
+ cy.get("@image-grid-ticker")
91
+ .find("udex-image-grid-ticker-item")
92
+ .eq(3)
93
+ .shadow()
94
+ .find(".udex-image-grid-ticker-item__link")
95
+ .focus()
96
+ .type("{leftarrow}");
97
+
98
+ cy.get("@image-grid-ticker")
99
+ .find("udex-image-grid-ticker-item")
100
+ .eq(2)
101
+ .shadow()
102
+ .find(".udex-image-grid-ticker-item__link")
103
+ .should("be.focused")
104
+ });
105
+
106
+
107
+ it("pauses animation on mouseenter", () => {
108
+ cy.get("@image-grid-ticker")
109
+ .find(".udex-image-grid-ticker__track")
110
+ .trigger("mouseenter", { force: true });
111
+
112
+ cy.get("udex-image-grid-ticker")
113
+ .should("have.attr", "_is-paused");
114
+ });
115
+
116
+ it("resumes animation on mouseleave", () => {
117
+ cy.get("@image-grid-ticker")
118
+ .find(".udex-image-grid-ticker__track")
119
+ .trigger("mouseenter", { force: true })
120
+ .trigger("mouseleave", { force: true });
121
+
122
+ cy.get("udex-image-grid-ticker")
123
+ .should("not.have.attr", "_is-paused");
124
+ });
125
+
126
+ it("pauses when an item receives focus", () => {
127
+ cy.get("@image-grid-ticker")
128
+ .find("udex-image-grid-ticker-item")
129
+ .eq(2)
130
+ .shadow()
131
+ .find(".udex-image-grid-ticker-item__link")
132
+ .focus();
133
+
134
+ cy.get("udex-image-grid-ticker")
135
+ .should("have.attr", "_is-paused");
136
+ });
137
+
138
+ it("resumes animation when focus leaves", () => {
139
+ cy.get("@image-grid-ticker")
140
+ .find("udex-image-grid-ticker-item")
141
+ .eq(2)
142
+ .shadow()
143
+ .find(".udex-image-grid-ticker-item__link")
144
+ .focus()
145
+ .blur();
146
+
147
+ cy.get("udex-image-grid-ticker")
148
+ .should("not.have.attr", "_is-paused");
149
+ });
150
+
151
+ it("respects RTL direction", () => {
152
+ cy.get("[udex-image-grid-ticker]")
153
+ .invoke("attr", "dir", "rtl");
154
+
155
+ cy.get("[udex-image-grid-ticker]")
156
+ .should("have.attr", "dir", "rtl");
157
+ });
158
+
159
+ it("renders images in grayscale when enabled", () => {
160
+ cy.get("[udex-image-grid-ticker]")
161
+ .invoke("attr", "grayscale", "");
162
+
163
+ cy.get("@image-grid-ticker")
164
+ .find("udex-image-grid-ticker-item")
165
+ .first()
166
+ .shadow()
167
+ .find('.udex-image-grid-ticker-item__img')
168
+ .should("have.css", "filter")
169
+ .and("include", "grayscale");
170
+ });
171
+
172
+ it("does not duplicate items when not scrollable (mobile)", () => {
173
+ cy.viewport(600, 800);
174
+
175
+ cy.get("[udex-image-grid-ticker]")
176
+ .invoke("attr", "_is-scrollable")
177
+ .should("not.exist");
178
+
179
+ cy.get("@image-grid-ticker")
180
+ .find(".udex-image-grid-ticker__track")
181
+ .children()
182
+ .should("have.length", 11);
183
+ });
184
+
185
+ it("emits play-button-click event with correct isPaused detail", () => {
186
+ cy.get("udex-image-grid-ticker").then($el => {
187
+ const playSpy = cy.spy();
188
+
189
+ $el[0].addEventListener("play-button-click", playSpy);
190
+
191
+ cy.get("@image-grid-ticker")
192
+ .find(".udex-image-grid-ticker__play-button")
193
+ .click()
194
+ .then(() => {
195
+ const event = playSpy.getCall(0).args[0] as CustomEvent;
196
+ expect(event.detail.isPaused).to.eq(true);
197
+ });
198
+
199
+ cy.get("@image-grid-ticker")
200
+ .find(".udex-image-grid-ticker__play-button")
201
+ .click()
202
+ .then(() => {
203
+ const event = playSpy.getCall(1).args[0] as CustomEvent;
204
+ expect(event.detail.isPaused).to.eq(false);
205
+ });
206
+ });
207
+ });
208
+ });
@@ -0,0 +1,74 @@
1
+ import { UDExImageGridTickerItem } from "../support/component-imports.js";
2
+
3
+ const itemHref = "https://www.sap.com";
4
+ const itemSrc = "./stories/image-grid/chiesi-customer-logo.svg";
5
+ const itemAlt = "chiesi logo";
6
+ const tooltip = "Chiesi";
7
+
8
+ const imageGridTickerItem = <UDExImageGridTickerItem
9
+ href={itemHref}
10
+ src={itemSrc}
11
+ alt={itemAlt}
12
+ tooltip={tooltip}>
13
+ </UDExImageGridTickerItem>
14
+
15
+ describe("Image Grid Ticker Item", () => {
16
+ beforeEach(() => {
17
+ cy.mount(imageGridTickerItem);
18
+ cy.get("[udex-image-grid-ticker-item]").shadow().as("image-grid-ticker-item");
19
+ });
20
+
21
+ it("is correctly rendered", () => {
22
+ cy.get("@image-grid-ticker-item")
23
+ .find(".udex-image-grid-ticker-item")
24
+ .should("be.visible");
25
+ });
26
+
27
+
28
+ it("renders an image element with correct attributes", () => {
29
+ cy.get("@image-grid-ticker-item")
30
+ .find(".udex-image-grid-ticker-item__img")
31
+ .should("have.attr", "src", itemSrc)
32
+ .and("have.attr", "alt", itemAlt)
33
+ .and("have.attr", "title", tooltip);
34
+ });
35
+
36
+ it("renders a link when href is provided", () => {
37
+ cy.get("@image-grid-ticker-item")
38
+ .find(".udex-image-grid-ticker-item__link")
39
+ .should("have.attr", "href", itemHref);
40
+ });
41
+
42
+ it("does not render link when href is empty", () => {
43
+ const noLinkItem = (
44
+ <UDExImageGridTickerItem src={itemSrc} alt={itemAlt}/>
45
+ );
46
+ cy.mount(noLinkItem);
47
+
48
+ cy.get("@image-grid-ticker-item")
49
+ .find(".udex-image-grid-ticker-item__link")
50
+ .should("not.exist");
51
+
52
+ cy.get("@image-grid-ticker-item")
53
+ .find(".udex-image-grid-ticker-item__img")
54
+ .should("exist");
55
+ });
56
+
57
+ it("defines the hover scale for the link", () => {
58
+ cy.get("@image-grid-ticker-item")
59
+ .find(".udex-image-grid-ticker-item__link")
60
+ .should("have.css", "transition")
61
+ .and("include", "transform");
62
+ });
63
+
64
+ it("renders image wrapper with correct default size", () => {
65
+ cy.get("@image-grid-ticker-item")
66
+ .find(".udex-image-grid-ticker-item__link")
67
+ .then($el => {
68
+ const rect = $el[0].getBoundingClientRect();
69
+
70
+ expect(Math.round(rect.width)).to.eq(120);
71
+ expect(Math.round(rect.height)).to.eq(76);
72
+ });
73
+ });
74
+ });
@@ -262,7 +262,7 @@ describe("Table", () => {
262
262
 
263
263
  it("renders the loading indicator", () => {
264
264
  cy.mount(loadingTable)
265
- cy.get("#table-loading").shadow().find("ui5-busy-indicator").should("be.visible")
265
+ cy.get("#table-loading").shadow().find("udex-busy-indicator").should("be.visible")
266
266
  });
267
267
 
268
268
  it("renders accessible name", () => {
@@ -3,18 +3,55 @@ import UDExAccordionItem from "../../instrumented/AccordionItem.js";
3
3
  import UDExAvatar from "../../instrumented/Avatar.js";
4
4
  import UDExAvatarGroup from "../../instrumented/AvatarGroup.js";
5
5
  import UDExBadge from "../../instrumented/Badge.js";
6
+ import UDExBreadcrumbs from "../../instrumented/Breadcrumbs.js";
7
+ import UDExBreadcrumbsItem from "../../instrumented/BreadcrumbsItem.js";
8
+ import UDExBusyIndicator from "../../instrumented/BusyIndicator.js";
9
+ import UDExButton from "../../instrumented/Button.js";
10
+ import UDExCheckbox from "../../instrumented/Checkbox.js";
11
+ import UDExContact from "../../instrumented/Contact.js";
12
+ import UDExContactItem from "../../instrumented/ContactItem.js";
6
13
  import UDExCountrySelector from "../../instrumented/CountrySelector.js";
14
+ import UDExDivider from "../../instrumented/Divider.js";
15
+ import UDExEventRibbon from "../../instrumented/EventRibbon.js";
16
+ import UDExFilterMenu from "../../instrumented/FilterMenu.js";
17
+ import UDExFilterMenuGroupHeader from "../../instrumented/FilterMenuGroupHeader.js";
18
+ import UDExFilterMenuItem from "../../instrumented/FilterMenuItem.js";
19
+ import UDExFilterMenuSelectAll from "../../instrumented/FilterMenuSelectAll.js";
7
20
  import UDExFooter from "../../instrumented/Footer.js";
21
+ import UDExHeroBanner from "../../instrumented/HeroBanner.js";
22
+ import UDExImageGridTicker from "../../instrumented/ImageGridTicker.js";
23
+ import UDExImageGridTickerItem from "../../instrumented/ImageGridTickerItem.js";
24
+ import UDExInputGroup from "../../instrumented/InputGroup.js";
25
+ import UDExLink from "../../instrumented/Link.js";
26
+ import UDExLinkList from "../../instrumented/LinkList.js";
27
+ import UDExLinkListItem from "../../instrumented/LinkListItem.js";
8
28
  import UDExListItem from "../../instrumented/ListItem.js";
29
+ import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
30
+ import UDExMessageStrip from "../../instrumented/MessageStrip.js";
31
+ import UDExPasswordField from "../../instrumented/PasswordField.js";
9
32
  import UDExPhoneNumberField from "../../instrumented/PhoneNumberField.js";
33
+ import UDExPromoTile from "../../instrumented/PromoTile.js";
34
+ import UDExQuote from "../../instrumented/Quote.js";
35
+ import UDExRatingBar from "../../instrumented/RatingBar.js";
36
+ import UDExRatingIndicator from "../../instrumented/RatingIndicator.js";
10
37
  import UDExReview from "../../instrumented/Review.js";
11
38
  import UDExReviewItem from "../../instrumented/ReviewItem.js";
12
39
  import UDExSecondaryNavigation from "../../instrumented/SecondaryNavigation.js";
13
40
  import UDExSelectBox from "../../instrumented/SelectBox.js";
41
+ import UDExSelectBoxGroupHeader from "../../instrumented/SelectBoxGroupHeader.js";
42
+ import UDExSelectBoxItem from "../../instrumented/SelectBoxItem.js";
43
+ import UDExSelectBoxSelectAll from "../../instrumented/SelectBoxSelectAll.js";
14
44
  import UDExSlider from "../../instrumented/Slider.js";
45
+ import UDExSocialMediaButton from "../../instrumented/SocialMediaButton.js";
15
46
  import UDExStatusBadge from "../../instrumented/StatusBadge.js";
16
47
  import UDExStatusMessage from "../../instrumented/StatusMessage.js";
17
48
  import UDExSwitch from "../../instrumented/Switch.js";
49
+ import UDExTable from "../../instrumented/Table.js";
50
+ import UDExTableCell from "../../instrumented/TableCell.js";
51
+ import UDExTableGroupRow from "../../instrumented/TableGroupRow.js";
52
+ import UDExTableHeaderCell from "../../instrumented/TableHeaderCell.js";
53
+ import UDExTableHeaderRow from "../../instrumented/TableHeaderRow.js";
54
+ import UDExTableRow from "../../instrumented/TableRow.js";
18
55
  import UDExTag from "../../instrumented/Tag.js";
19
56
  import UDExTagGroup from "../../instrumented/TagGroup.js";
20
57
  import UDExTextArea from "../../instrumented/TextArea.js";
@@ -26,40 +63,6 @@ import UDExUpload from "../../instrumented/Upload.js";
26
63
  import UDExUploadItem from "../../instrumented/UploadItem.js";
27
64
  import UDExWizard from "../../instrumented/Wizard.js";
28
65
  import UDExWizardStep from "../../instrumented/WizardStep.js";
29
- import UDExButton from "../../instrumented/Button.js";
30
- import UDExRatingBar from "../../instrumented/RatingBar.js";
31
- import UDExBreadcrumbs from "../../instrumented/Breadcrumbs.js";
32
- import UDExBreadcrumbsItem from "../../instrumented/BreadcrumbsItem.js";
33
- import UDExTable from "../../instrumented/Table.js";
34
- import UDExTableHeaderRow from "../../instrumented/TableHeaderRow.js";
35
- import UDExTableHeaderCell from "../../instrumented/TableHeaderCell.js";
36
- import UDExTableRow from "../../instrumented/TableRow.js";
37
- import UDExTableGroupRow from "../../instrumented/TableGroupRow.js";
38
- import UDExTableCell from "../../instrumented/TableCell.js";
39
- import UDExLink from "../../instrumented/Link.js";
40
- import UDExLinkList from "../../instrumented/LinkList.js";
41
- import UDExLinkListItem from "../../instrumented/LinkListItem.js";
42
- import UDExRatingIndicator from "../../instrumented/RatingIndicator.js";
43
- import UDExSelectBoxSelectAll from "../../instrumented/SelectBoxSelectAll.js";
44
- import UDExSelectBoxGroupHeader from "../../instrumented/SelectBoxGroupHeader.js";
45
- import UDExSelectBoxItem from "../../instrumented/SelectBoxItem.js";
46
- import UDExContact from "../../instrumented/Contact.js";
47
- import UDExContactItem from "../../instrumented/ContactItem.js";
48
- import UDExEventRibbon from "../../instrumented/EventRibbon.js";
49
- import UDExDivider from "../../instrumented/Divider.js";
50
- import UDExFilterMenu from "../../instrumented/FilterMenu.js";
51
- import UDExFilterMenuItem from "../../instrumented/FilterMenuItem.js";
52
- import UDExFilterMenuGroupHeader from "../../instrumented/FilterMenuGroupHeader.js";
53
- import UDExFilterMenuSelectAll from "../../instrumented/FilterMenuSelectAll.js";
54
- import UDExSocialMediaButton from "../../instrumented/SocialMediaButton.js";
55
- import UDExPromoTile from "../../instrumented/PromoTile.js";
56
- import UDExQuote from "../../instrumented/Quote.js";
57
- import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
58
- import UDExMessageStrip from "../../instrumented/MessageStrip.js";
59
- import UDExHeroBanner from "../../instrumented/HeroBanner.js";
60
- import UDExCheckbox from "../../instrumented/Checkbox.js";
61
- import UDExInputGroup from "../../instrumented/InputGroup.js";
62
- import UDExPasswordField from "../../instrumented/PasswordField.js";
63
66
 
64
67
  export {
65
68
  UDExAccordion,
@@ -69,47 +72,57 @@ export {
69
72
  UDExBadge,
70
73
  UDExBreadcrumbs,
71
74
  UDExBreadcrumbsItem,
75
+ UDExBusyIndicator,
72
76
  UDExButton,
77
+ UDExCheckbox,
73
78
  UDExContact,
74
79
  UDExContactItem,
75
80
  UDExCountrySelector,
76
81
  UDExDivider,
77
82
  UDExEventRibbon,
78
83
  UDExFilterMenu,
79
- UDExFilterMenuItem,
80
84
  UDExFilterMenuGroupHeader,
85
+ UDExFilterMenuItem,
81
86
  UDExFilterMenuSelectAll,
82
87
  UDExFooter,
88
+ UDExHeroBanner,
89
+ UDExImageGridTicker,
90
+ UDExImageGridTickerItem,
91
+ UDExInputGroup,
83
92
  UDExLink,
84
93
  UDExLinkList,
85
94
  UDExLinkListItem,
86
95
  UDExListItem,
96
+ UDExMastheadProfileMenu,
97
+ UDExMessageStrip,
98
+ UDExPasswordField,
87
99
  UDExPhoneNumberField,
88
100
  UDExPromoTile,
101
+ UDExQuote,
89
102
  UDExRatingBar,
90
103
  UDExRatingIndicator,
91
104
  UDExReview,
92
105
  UDExReviewItem,
93
106
  UDExSecondaryNavigation,
94
107
  UDExSelectBox,
108
+ UDExSelectBoxGroupHeader,
95
109
  UDExSelectBoxItem,
96
110
  UDExSelectBoxSelectAll,
97
111
  UDExSlider,
112
+ UDExSocialMediaButton,
98
113
  UDExStatusBadge,
99
114
  UDExStatusMessage,
100
115
  UDExSwitch,
101
116
  UDExTable,
102
- UDExSelectBoxGroupHeader,
103
- UDExSocialMediaButton,
104
- UDExTableGroupRow,
105
117
  UDExTableCell,
118
+ UDExTableGroupRow,
106
119
  UDExTableHeaderCell,
107
120
  UDExTableHeaderRow,
108
121
  UDExTableRow,
109
122
  UDExTag,
110
123
  UDExTagGroup,
111
- UDExTextField,
112
124
  UDExTextArea,
125
+ UDExTextField,
113
126
  UDExToast,
114
127
  UDExTooltip,
115
128
  UDExTruncatedText,
@@ -117,11 +130,4 @@ export {
117
130
  UDExUploadItem,
118
131
  UDExWizard,
119
132
  UDExWizardStep,
120
- UDExQuote,
121
- UDExMastheadProfileMenu,
122
- UDExMessageStrip,
123
- UDExHeroBanner,
124
- UDExCheckbox,
125
- UDExInputGroup,
126
- UDExPasswordField
127
133
  };