@ui5/webcomponents-fiori 1.10.0 → 1.10.2

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 (181) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/LICENSE.txt +201 -0
  3. package/dist/Bar.d.ts +2 -2
  4. package/dist/DynamicSideContent.d.ts +2 -2
  5. package/dist/IllustratedMessage.d.ts +2 -2
  6. package/dist/MediaGallery.js +1 -1
  7. package/dist/NotificationListGroupItem.js +1 -1
  8. package/dist/NotificationListItem.js +1 -1
  9. package/dist/NotificationListItemBase.js +1 -1
  10. package/dist/Page.d.ts +2 -2
  11. package/dist/ProductSwitch.d.ts +3 -3
  12. package/dist/ProductSwitch.js +1 -1
  13. package/dist/ProductSwitchItem.d.ts +2 -2
  14. package/dist/ShellBar.js +1 -1
  15. package/dist/SideNavigation.js +1 -1
  16. package/dist/Timeline.d.ts +3 -3
  17. package/dist/Timeline.js +1 -1
  18. package/dist/TimelineItem.d.ts +2 -2
  19. package/dist/UploadCollection.d.ts +3 -3
  20. package/dist/UploadCollection.js +1 -1
  21. package/dist/UploadCollectionItem.d.ts +2 -2
  22. package/dist/ViewSettingsDialog.d.ts +3 -3
  23. package/dist/ViewSettingsDialog.js +1 -1
  24. package/dist/Wizard.js +2 -2
  25. package/dist/api.json +1 -1
  26. package/dist/assets/{AddColumn.73a436e3.js → AddColumn.d3ff8c6a.js} +1 -1
  27. package/dist/assets/{AddDimensions.cad41601.js → AddDimensions.c4ef6936.js} +1 -1
  28. package/dist/assets/{AddPeople.26bc6aef.js → AddPeople.98eec2ab.js} +1 -1
  29. package/dist/assets/{BalloonSky.119c58c2.js → BalloonSky.b9369db9.js} +1 -1
  30. package/dist/assets/{ChartArea.f4119780.js → ChartArea.375b7448.js} +1 -1
  31. package/dist/assets/{ChartArea2.1730306a.js → ChartArea2.5befac27.js} +1 -1
  32. package/dist/assets/{ChartBPMNFlow.f8286a51.js → ChartBPMNFlow.182a24f5.js} +1 -1
  33. package/dist/assets/{ChartBar.c2b751ca.js → ChartBar.df332b6c.js} +1 -1
  34. package/dist/assets/{ChartBullet.f84e31d4.js → ChartBullet.ae3b38b6.js} +1 -1
  35. package/dist/assets/{ChartDoughnut.a79f79ea.js → ChartDoughnut.04f6e580.js} +1 -1
  36. package/dist/assets/{ChartFlow.0200d961.js → ChartFlow.7dc5696d.js} +1 -1
  37. package/dist/assets/{ChartGantt.8a232e14.js → ChartGantt.94dab13a.js} +1 -1
  38. package/dist/assets/{ChartOrg.17df3374.js → ChartOrg.d07cdb68.js} +1 -1
  39. package/dist/assets/{ChartPie.63fc5637.js → ChartPie.d7d3c538.js} +1 -1
  40. package/dist/assets/{CodePlaceholder.a77d7a2b.js → CodePlaceholder.2720ec8b.js} +1 -1
  41. package/dist/assets/{Company.74d9ee7b.js → Company.b5f7263d.js} +1 -1
  42. package/dist/assets/{Components.51b6a811.js → Components.0f443177.js} +1 -1
  43. package/dist/assets/{Connection.692aef08.js → Connection.61e39cc2.js} +1 -1
  44. package/dist/assets/{EmptyCalendar.7c06b20b.js → EmptyCalendar.1f17c099.js} +1 -1
  45. package/dist/assets/{EmptyList.39248da6.js → EmptyList.9958b125.js} +1 -1
  46. package/dist/assets/{EmptyPlanningCalendar.497c51fa.js → EmptyPlanningCalendar.3bdf0525.js} +1 -1
  47. package/dist/assets/{ErrorScreen.116c8ba0.js → ErrorScreen.86fead7f.js} +1 -1
  48. package/dist/assets/{ExternalLink.0111d3f6.js → ExternalLink.86052831.js} +1 -1
  49. package/dist/assets/{FaceID.460e24fb.js → FaceID.51a0cca2.js} +1 -1
  50. package/dist/assets/{FilterTable.7fc46e0d.js → FilterTable.9ad4f53b.js} +1 -1
  51. package/dist/assets/{Fingerprint.aee858e6.js → Fingerprint.763c13d6.js} +1 -1
  52. package/dist/assets/{GroupTable.4f9630a8.js → GroupTable.4e38872f.js} +1 -1
  53. package/dist/assets/{Lock.9e61c278.js → Lock.63c8baa5.js} +1 -1
  54. package/dist/assets/{Mission.84dc8dd7.js → Mission.627e6429.js} +1 -1
  55. package/dist/assets/{NoActivities.a14c6f30.js → NoActivities.3dda19c3.js} +1 -1
  56. package/dist/assets/{NoApplications.58ac89ac.js → NoApplications.dc2ebc84.js} +1 -1
  57. package/dist/assets/{NoData.edd65084.js → NoData.dec57485.js} +1 -1
  58. package/dist/assets/{NoDimensionsSet.1d017c60.js → NoDimensionsSet.29ee1e08.js} +1 -1
  59. package/dist/assets/{NoEntries.4b9731dc.js → NoEntries.6d23004a.js} +1 -1
  60. package/dist/assets/{NoFilterResults.36de7171.js → NoFilterResults.f1aea7fd.js} +1 -1
  61. package/dist/assets/{NoFlows.a6978b26.js → NoFlows.0b6a90c2.js} +1 -1
  62. package/dist/assets/{NoMail.455f3af7.js → NoMail.9bcf5210.js} +1 -1
  63. package/dist/assets/{NoMail_v1.f04dea6a.js → NoMail_v1.1c416ad3.js} +1 -1
  64. package/dist/assets/{NoNotifications.f5353b50.js → NoNotifications.4e4bbdc9.js} +1 -1
  65. package/dist/assets/{NoSavedItems.7c2f2310.js → NoSavedItems.81c77168.js} +1 -1
  66. package/dist/assets/{NoSavedItems_v1.5ec4a875.js → NoSavedItems_v1.a0621e18.js} +1 -1
  67. package/dist/assets/{NoSearchResults.ced2219a.js → NoSearchResults.fcbb2868.js} +1 -1
  68. package/dist/assets/{NoTasks.c84b4042.js → NoTasks.d7fe5b40.js} +1 -1
  69. package/dist/assets/{NoTasks_v1.59d233e1.js → NoTasks_v1.bebede95.js} +1 -1
  70. package/dist/assets/{NoUsers.e92bda78.js → NoUsers.7a9c5851.js} +1 -1
  71. package/dist/assets/{PageNotFound.fb450002.js → PageNotFound.b6463879.js} +1 -1
  72. package/dist/assets/{Radar.b52ab752.js → Radar.4cec973c.js} +1 -1
  73. package/dist/assets/{ReloadScreen.291a3693.js → ReloadScreen.b8b8e83e.js} +1 -1
  74. package/dist/assets/{ResizeColumn.8c0a6bbb.js → ResizeColumn.93885b3c.js} +1 -1
  75. package/dist/assets/{SearchEarth.b6d2e0be.js → SearchEarth.9888e196.js} +1 -1
  76. package/dist/assets/{SearchFolder.ca4de59d.js → SearchFolder.f4172e33.js} +1 -1
  77. package/dist/assets/{Secrets.0337a653.js → Secrets.147ac1a5.js} +1 -1
  78. package/dist/assets/{Services.4f64bc16.js → Services.a336c748.js} +1 -1
  79. package/dist/assets/{SessionExpired.d388a270.js → SessionExpired.e34e90c7.js} +1 -1
  80. package/dist/assets/{SessionExpiring.127dfb51.js → SessionExpiring.1ca19956.js} +1 -1
  81. package/dist/assets/{SimpleBalloon.2f8d3bdc.js → SimpleBalloon.b098bbbd.js} +1 -1
  82. package/dist/assets/{SimpleBell.12354c64.js → SimpleBell.fb55d9b4.js} +1 -1
  83. package/dist/assets/{SimpleCalendar.56a5f506.js → SimpleCalendar.86adc059.js} +1 -1
  84. package/dist/assets/{SimpleCheckMark.6b578af4.js → SimpleCheckMark.a4bf89de.js} +1 -1
  85. package/dist/assets/{SimpleConnection.8e1d7b15.js → SimpleConnection.a28a6308.js} +1 -1
  86. package/dist/assets/{SimpleEmptyDoc.f6fde102.js → SimpleEmptyDoc.b7c61269.js} +1 -1
  87. package/dist/assets/{SimpleEmptyList.8477836b.js → SimpleEmptyList.77228d8e.js} +1 -1
  88. package/dist/assets/{SimpleError.7e42c4f2.js → SimpleError.e2340f16.js} +1 -1
  89. package/dist/assets/{SimpleMagnifier.74ef096e.js → SimpleMagnifier.c951ab5b.js} +1 -1
  90. package/dist/assets/{SimpleMail.21643581.js → SimpleMail.b8fae792.js} +1 -1
  91. package/dist/assets/{SimpleNoSavedItems.efab6715.js → SimpleNoSavedItems.c979cb2c.js} +1 -1
  92. package/dist/assets/{SimpleNotFoundMagnifier.80a92048.js → SimpleNotFoundMagnifier.64d8a287.js} +1 -1
  93. package/dist/assets/{SimpleReload.17e4ac1b.js → SimpleReload.ca9850e0.js} +1 -1
  94. package/dist/assets/{SimpleTask.f751d56f.js → SimpleTask.ff5b3ea3.js} +1 -1
  95. package/dist/assets/{SleepingBell.31cd73a9.js → SleepingBell.c006bb30.js} +1 -1
  96. package/dist/assets/{SortColumn.610e1396.js → SortColumn.bae46080.js} +1 -1
  97. package/dist/assets/{Success.3bb6fe61.js → Success.71efc8ec.js} +1 -1
  98. package/dist/assets/{SuccessBalloon.ddf0179f.js → SuccessBalloon.e17421b2.js} +1 -1
  99. package/dist/assets/{SuccessCheckMark.82ab30f3.js → SuccessCheckMark.d4eeb4a1.js} +1 -1
  100. package/dist/assets/{SuccessHighFive.614e6cfb.js → SuccessHighFive.11d23d24.js} +1 -1
  101. package/dist/assets/{SuccessScreen.c3504205.js → SuccessScreen.3633dfb0.js} +1 -1
  102. package/dist/assets/{SuccessfulAuth.dcb76211.js → SuccessfulAuth.9ba54523.js} +1 -1
  103. package/dist/assets/{Systems.7b6a2343.js → Systems.3d3a9fe0.js} +1 -1
  104. package/dist/assets/{Teams.443deb21.js → Teams.d2bf7839.js} +1 -1
  105. package/dist/assets/{Tent.18d73682.js → Tent.1b156301.js} +1 -1
  106. package/dist/assets/{Tools.87a57695.js → Tools.1d19128f.js} +1 -1
  107. package/dist/assets/{UnableToLoad.18bc8a54.js → UnableToLoad.a55ee9d5.js} +1 -1
  108. package/dist/assets/{UnableToLoad.2e5b97f7.js → UnableToLoad.c3679477.js} +1 -1
  109. package/dist/assets/{UnableToLoadImage.975ec284.js → UnableToLoadImage.04524288.js} +1 -1
  110. package/dist/assets/{UnableToUpload.4d8b68a6.js → UnableToUpload.a94dc412.js} +1 -1
  111. package/dist/assets/{Unlock.659b0617.js → Unlock.16c28541.js} +1 -1
  112. package/dist/assets/{UnsuccessfulAuth.cb93496a.js → UnsuccessfulAuth.8b9cdd80.js} +1 -1
  113. package/dist/assets/{UploadCollection.c2c597c2.js → UploadCollection.6ebe4b5f.js} +1 -1
  114. package/dist/assets/{UploadToCloud.f319e19a.js → UploadToCloud.636359e5.js} +1 -1
  115. package/dist/assets/{User2.e967d841.js → User2.c04a700a.js} +1 -1
  116. package/dist/assets/test/pages/Bar.html.a5046c13.css +1 -0
  117. package/dist/assets/test/pages/BarcodeScannerDialog.html.b8919118.css +1 -0
  118. package/dist/assets/test/pages/Components.html.b41617c5.css +1 -0
  119. package/dist/assets/test/pages/DynamicSideContent.html.9b81aa24.css +1 -0
  120. package/dist/assets/test/pages/FCL.html.6763e066.css +1 -0
  121. package/dist/assets/test/pages/FCLApp.html.4d2da1a7.css +1 -0
  122. package/dist/assets/test/pages/FCLCustom.html.1af2df31.css +1 -0
  123. package/dist/assets/test/pages/IllustratedMessage.html.ebec5a1c.css +1 -0
  124. package/dist/assets/test/pages/MediaGallery.html.dee36218.css +1 -0
  125. package/dist/assets/test/pages/NotificationListGroupItem.html.5c7fb00c.css +1 -0
  126. package/dist/assets/test/pages/NotificationListItem.html.01df347d.css +1 -0
  127. package/dist/assets/test/pages/NotificationList_test_page.html.883d5b51.css +1 -0
  128. package/dist/assets/test/pages/Page.html.b165889d.css +1 -0
  129. package/dist/assets/test/pages/ProductSwitch.html.6253dac2.css +1 -0
  130. package/dist/assets/test/pages/ProductSwitchItem.html.51a96d28.css +1 -0
  131. package/dist/assets/test/pages/ShellBar.html.a08df365.css +1 -0
  132. package/dist/assets/test/pages/SideNavigation.html.835d71ad.css +1 -0
  133. package/dist/assets/test/pages/Timeline.html.aa1e8833.css +1 -0
  134. package/dist/assets/test/pages/UploadCollection.html.078191be.css +1 -0
  135. package/dist/assets/test/pages/UploadCollection.html.1fde3214.js +1 -0
  136. package/dist/assets/test/pages/ViewSettingsDialog.html.1d108f2f.css +1 -0
  137. package/dist/assets/test/pages/Wizard_test.html.3d4fc1a9.css +1 -0
  138. package/dist/assets/test/pages/Wizard_test_mobile.html.9216347a.css +1 -0
  139. package/dist/i18n/messagebundle.properties +0 -1
  140. package/dist/i18n/messagebundle_en_US_saprigi.properties +0 -1
  141. package/dist/test/pages/Bar.html +88 -0
  142. package/dist/test/pages/BarcodeScannerDialog.html +51 -0
  143. package/dist/test/pages/Components.html +29 -0
  144. package/dist/test/pages/DynamicSideContent.html +134 -0
  145. package/dist/test/pages/F6TestPage.html +475 -0
  146. package/dist/test/pages/F6TestPage_2.html +43 -0
  147. package/dist/test/pages/FCL.html +965 -0
  148. package/dist/test/pages/FCLApp.html +238 -0
  149. package/dist/test/pages/FCLCustom.html +293 -0
  150. package/dist/test/pages/IllustratedMessage.html +191 -0
  151. package/dist/test/pages/MediaGallery.html +278 -0
  152. package/dist/test/pages/NotificationListGroupItem.html +315 -0
  153. package/dist/test/pages/NotificationListItem.html +277 -0
  154. package/dist/test/pages/NotificationList_test_page.html +195 -0
  155. package/dist/test/pages/Page.html +67 -0
  156. package/dist/test/pages/ProductSwitch.html +67 -0
  157. package/dist/test/pages/ProductSwitchItem.html +32 -0
  158. package/dist/test/pages/ShellBar.html +328 -0
  159. package/dist/test/pages/SideNavigation.html +115 -0
  160. package/dist/test/pages/Timeline.html +146 -0
  161. package/dist/test/pages/UploadCollection.html +208 -0
  162. package/dist/test/pages/ViewSettingsDialog.html +126 -0
  163. package/dist/test/pages/Wizard.html +774 -0
  164. package/dist/test/pages/WizardScrolling.html +52 -0
  165. package/dist/test/pages/Wizard_test.html +382 -0
  166. package/dist/test/pages/Wizard_test_mobile.html +104 -0
  167. package/global.d.ts +2 -2
  168. package/package.json +10 -9
  169. package/src/MediaGallery.js +1 -1
  170. package/src/NotificationListGroupItem.js +1 -1
  171. package/src/NotificationListItem.js +1 -1
  172. package/src/NotificationListItemBase.js +1 -1
  173. package/src/ProductSwitch.ts +1 -1
  174. package/src/ShellBar.js +1 -1
  175. package/src/SideNavigation.js +1 -1
  176. package/src/Timeline.ts +1 -1
  177. package/src/UploadCollection.ts +1 -1
  178. package/src/ViewSettingsDialog.ts +1 -1
  179. package/src/Wizard.js +2 -2
  180. package/src/i18n/messagebundle.properties +0 -1
  181. package/src/i18n/messagebundle_en_US_saprigi.properties +0 -1
package/dist/test/pages/IllustratedMessage.html ADDED
@@ -0,0 +1,191 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <meta charset="utf-8">
7
+
8
+ <title>IllustratedMessage</title>
9
+
10
+ <script>// delete Document.prototype.adoptedStyleSheets</script>
11
+
12
+
13
+
14
+
15
+ <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
16
+ <link rel="stylesheet" href="/assets/test/pages/IllustratedMessage.html.ebec5a1c.css">
17
+ </head>
18
+
19
+ <body class="illustratedmessage1auto">
20
+ Illustration:
21
+ <ui5-select id="illustrationSelect">
22
+ <ui5-option>AddColumn</ui5-option>
23
+ <ui5-option>AddPeople</ui5-option>
24
+ <ui5-option>AddDimensions</ui5-option>
25
+ <ui5-option>BalloonSky</ui5-option>
26
+ <ui5-option>BeforeSearch</ui5-option>
27
+ <ui5-option>Connection</ui5-option>
28
+ <ui5-option>EmptyCalendar</ui5-option>
29
+ <ui5-option>EmptyList</ui5-option>
30
+ <ui5-option>EmptyPlanningCalendar</ui5-option>
31
+ <ui5-option>ErrorScreen</ui5-option>
32
+ <ui5-option>FilterTable</ui5-option>
33
+ <ui5-option>GroupTable</ui5-option>
34
+ <ui5-option>NoActivities</ui5-option>
35
+ <ui5-option>NoData</ui5-option>
36
+ <ui5-option>NoEntries</ui5-option>
37
+ <ui5-option>NoFilterResults</ui5-option>
38
+ <ui5-option>NoMail_v1</ui5-option>
39
+ <ui5-option>NoMail</ui5-option>
40
+ <ui5-option>NoNotifications</ui5-option>
41
+ <ui5-option>NoSavedItems_v1</ui5-option>
42
+ <ui5-option>NoSavedItems</ui5-option>
43
+ <ui5-option>NoSearchResults</ui5-option>
44
+ <ui5-option>NoTasks_v1</ui5-option>
45
+ <ui5-option>NoTasks</ui5-option>
46
+ <ui5-option>NoDimensionsSet</ui5-option>
47
+ <ui5-option>PageNotFound</ui5-option>
48
+ <ui5-option>ReloadScreen</ui5-option>
49
+ <ui5-option>ResizeColumn</ui5-option>
50
+ <ui5-option>SearchEarth</ui5-option>
51
+ <ui5-option>SearchFolder</ui5-option>
52
+ <ui5-option>SimpleBalloon</ui5-option>
53
+ <ui5-option>SimpleBell</ui5-option>
54
+ <ui5-option>SimpleCalendar</ui5-option>
55
+ <ui5-option>SimpleCheckMark</ui5-option>
56
+ <ui5-option>SimpleConnection</ui5-option>
57
+ <ui5-option>SimpleEmptyDoc</ui5-option>
58
+ <ui5-option>SimpleEmptyList</ui5-option>
59
+ <ui5-option>SimpleError</ui5-option>
60
+ <ui5-option>SimpleMagnifier</ui5-option>
61
+ <ui5-option>SimpleMail</ui5-option>
62
+ <ui5-option>SimpleNoSavedItems</ui5-option>
63
+ <ui5-option>SimpleNotFoundMagnifier</ui5-option>
64
+ <ui5-option>SimpleReload</ui5-option>
65
+ <ui5-option>SimpleTask</ui5-option>
66
+ <ui5-option>SleepingBell</ui5-option>
67
+ <ui5-option>SortColumn</ui5-option>
68
+ <ui5-option>SuccessBalloon</ui5-option>
69
+ <ui5-option>SuccessCheckMark</ui5-option>
70
+ <ui5-option>SuccessHighFive</ui5-option>
71
+ <ui5-option>SuccessScreen</ui5-option>
72
+ <ui5-option>Tent</ui5-option>
73
+ <ui5-option>UnableToLoad</ui5-option>
74
+ <ui5-option>UnableToLoadImage</ui5-option>
75
+ <ui5-option>UnableToUpload</ui5-option>
76
+ <ui5-option>UploadToCloud</ui5-option>
77
+ <ui5-option>UploadCollection</ui5-option>
78
+ <ui5-option>TntChartArea</ui5-option>
79
+ <ui5-option>TntChartArea2</ui5-option>
80
+ <ui5-option>TntChartBar</ui5-option>
81
+ <ui5-option>TntChartBPMNFlow</ui5-option>
82
+ <ui5-option>TntChartBullet</ui5-option>
83
+ <ui5-option>TntChartDoughnut</ui5-option>
84
+ <ui5-option>TntChartFlow</ui5-option>
85
+ <ui5-option>TntChartGantt</ui5-option>
86
+ <ui5-option>TntChartOrg</ui5-option>
87
+ <ui5-option>TntChartPie</ui5-option>
88
+ <ui5-option>TntCodePlaceholder</ui5-option>
89
+ <ui5-option>TntCompany</ui5-option>
90
+ <ui5-option>TntComponents</ui5-option>
91
+ <ui5-option>TntExternalLink</ui5-option>
92
+ <ui5-option>TntFaceID</ui5-option>
93
+ <ui5-option>TntFingerprint</ui5-option>
94
+ <ui5-option>TntLock</ui5-option>
95
+ <ui5-option>TntMission</ui5-option>
96
+ <ui5-option>TntNoApplications</ui5-option>
97
+ <ui5-option>TntNoFlows</ui5-option>
98
+ <ui5-option>TntNoUsers</ui5-option>
99
+ <ui5-option>TntRadar</ui5-option>
100
+ <ui5-option>TntSecrets</ui5-option>
101
+ <ui5-option>TntServices</ui5-option>
102
+ <ui5-option>TntSessionExpired</ui5-option>
103
+ <ui5-option>TntSessionExpiring</ui5-option>
104
+ <ui5-option>TntSuccess</ui5-option>
105
+ <ui5-option>TntSuccessfulAuth</ui5-option>
106
+ <ui5-option>TntSystems</ui5-option>
107
+ <ui5-option>TntTeams</ui5-option>
108
+ <ui5-option>TntTools</ui5-option>
109
+ <ui5-option>TntUnableToLoad</ui5-option>
110
+ <ui5-option>TntUnlock</ui5-option>
111
+ <ui5-option>TntUnsuccessfulAuth</ui5-option>
112
+ <ui5-option>TntUser2</ui5-option>
113
+ </ui5-select>
114
+ Size:
115
+ <ui5-select id="sizeSelect">
116
+ <ui5-option>base</ui5-option>
117
+ <ui5-option>spot</ui5-option>
118
+ <ui5-option>dialog</ui5-option>
119
+ <ui5-option selected>scene</ui5-option>
120
+ </ui5-select>
121
+ <ui5-illustrated-message id="illustratedMsg1" class="border">
122
+ <ui5-button>Action 1</ui5-button>
123
+ </ui5-illustrated-message>
124
+
125
+ <ui5-button id="openDialogButton">Open Dialog</ui5-button>
126
+
127
+ <ui5-dialog id="hello-dialog" header-text="Error" resizable>
128
+ <ui5-illustrated-message name="UnableToLoad"></ui5-illustrated-message>
129
+ <ui5-bar design="Footer" slot="footer">
130
+ <ui5-button id="closeDialogButton" design="Emphasized" slot="endContent">Close</ui5-button>
131
+ </ui5-bar>
132
+ </ui5-dialog>
133
+
134
+ <ui5-illustrated-message id="illustratedMsg2" name="UnableToUpload" title="Something went wrong..." accessible-name-ref="lbl">
135
+ <div slot="subtitle">Please try again or contact us at <ui5-link>example@example.com</ui5-link> <br><label id="lbl">Text from aria-labelledby</label></div>
136
+ <ui5-button icon="refresh">Try again</ui5-button>
137
+ </ui5-illustrated-message>
138
+
139
+ <ui5-illustrated-message id="illustratedMsg3" name="UnableToUpload">
140
+ <ui5-title slot="title" level="H1">This is a slotted title</ui5-title>
141
+ </ui5-illustrated-message>
142
+
143
+ <ui5-panel id="panel1" accessible-role="Complementary" no-animation>
144
+
145
+ <!-- Panel header -->
146
+ <div slot="header" class="header">
147
+ <ui5-title id="p1-title">Expandable panel title</ui5-title>
148
+ </div>
149
+
150
+ <ui5-illustrated-message
151
+ name="AddColumn"
152
+ titleText="No milestones yet."
153
+ id="illustratedMsg4"
154
+ ></ui5-illustrated-message>
155
+ </ui5-panel>
156
+
157
+ <script>
158
+ const illustrationSelect = document.getElementById("illustrationSelect");
159
+ const sizeSelect = document.getElementById("sizeSelect");
160
+ const illustratedMessage = document.querySelector("ui5-illustrated-message");
161
+ const dialogOpener = document.getElementById("openDialogButton");
162
+ const dialog = document.getElementById("hello-dialog");
163
+ const dialogCloser = document.getElementById("closeDialogButton");
164
+ const sizes = {
165
+ base: 250,
166
+ spot: 300,
167
+ dialog: 650,
168
+ scene: 1100,
169
+ }
170
+
171
+ illustratedMessage.style.width = `${sizes.scene}px`;
172
+
173
+ illustrationSelect.addEventListener("change", (event) => {
174
+ illustratedMessage.setAttribute("name", event.detail.selectedOption.textContent);
175
+ });
176
+
177
+ sizeSelect.addEventListener("change", (event) => {
178
+ illustratedMessage.style.width = `${sizes[event.detail.selectedOption.textContent]}px`;
179
+ });
180
+
181
+ dialogOpener.addEventListener("click", () => {
182
+ dialog.show();
183
+ });
184
+
185
+ dialogCloser.addEventListener("click", () => {
186
+ dialog.close();
187
+ });
188
+ </script>
189
+ </body>
190
+
191
+ </html>
package/dist/test/pages/MediaGallery.html ADDED
@@ -0,0 +1,278 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>ui5-media-gallery</title>
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+ <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
15
+ <link rel="stylesheet" href="/assets/test/pages/MediaGallery.html.dee36218.css">
16
+ </head>
17
+
18
+ <body style="background-color: var(--sapBackgroundColor);">
19
+ <div class="controls layout">
20
+ <ui5-label>Switch theme: </ui5-label>
21
+ <ui5-select id="selectTheme">
22
+ <ui5-option value="sap_fiori_3">Fiori 3</ui5-option>
23
+ <ui5-option value="sap_fiori_3_dark">Fiori 3 Dark</ui5-option>
24
+ <ui5-option value="sap_fiori_3_hcb">Fiori 3 HCB</ui5-option>
25
+ <ui5-option value="sap_fiori_3_hcw">Fiori 3 HCW</ui5-option>
26
+ <ui5-option value="sap_belize">Belize</ui5-option>
27
+ <ui5-option value="sap_belize_hcb">Belize HCB</ui5-option>
28
+ <ui5-option value="sap_belize_hcw">Belize HCW</ui5-option>
29
+ <ui5-option value="sap_horizon">Horizon</ui5-option>
30
+ </ui5-select>
31
+ </div>
32
+
33
+ <div class="controls layout">
34
+ <ui5-title level="H1">Layout preferences:</ui5-title>
35
+
36
+ <div>
37
+ <ui5-label>Layout: </ui5-label>
38
+ <ui5-select id="layout">
39
+ <ui5-option selected>Auto</ui5-option>
40
+ <ui5-option>Vertical</ui5-option>
41
+ <ui5-option>Horizontal</ui5-option>
42
+ </ui5-select>
43
+ </div>
44
+ <ui5-title level="H3">Thumbnails menu:</ui5-title>
45
+ <div>
46
+ <ui5-checkbox id="selectMenuDesign" text="Show all thumbnails"></ui5-checkbox>
47
+ </div>
48
+ <div>
49
+ <ui5-label>Menu horizontal align: </ui5-label>
50
+ <ui5-select id="selectHorizontalAlign">
51
+ <ui5-option>Right</ui5-option>
52
+ <ui5-option selected>Left</ui5-option>
53
+ </ui5-select>
54
+ </div>
55
+ <div>
56
+ <ui5-label>Menu vertical align: </ui5-label>
57
+ <ui5-select id="selectVerticalAlign">
58
+ <ui5-option>Top</ui5-option>
59
+ <ui5-option selected>Bottom</ui5-option>
60
+ </ui5-select>
61
+ </div>
62
+ </div>
63
+ <div class="content">
64
+ <ui5-media-gallery id="mGallery1">
65
+ <ui5-media-gallery-item>
66
+ <img src="/assets/HT-1000.59a0ea5a.jpg">
67
+ <img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
68
+ </ui5-media-gallery-item>
69
+ <ui5-media-gallery-item selected>
70
+ <img src="/assets/HT-1010.7b05e4f5.jpg">
71
+ <img src="/assets/HT-1010.7b05e4f5.jpg" slot="thumbnail">
72
+ </ui5-media-gallery-item>
73
+ <ui5-media-gallery-item>
74
+ <img src="/assets/HT-1022.6fa171f0.jpg">
75
+ <img src="/assets/HT-1022.6fa171f0.jpg" slot="thumbnail">
76
+ </ui5-media-gallery-item>
77
+ <ui5-media-gallery-item layout="Wide">
78
+ <iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
79
+ <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYWFRgSFRUZGBgYGBgYGBgcHBgaGBgYGBgZGRgYGBgcIS4lHB4rHxgYJjgmKy8xNTU1GiQ7QDszPy40NTEBDAwMEA8QGBESHzcrISQ0NjQ2NDQ0NzE0NDQxPzoxNDQ3NDQ2MTQ0NzExNjQ0NDQxNDQ0MTY0NDQ0NDQ0NDQxMf/AABEIAKgBLAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAgEDBQQGB//EAD0QAAIBAgMCDAMGBgMBAQAAAAECAAMRBBIhMVEFBhMiQVJTYYGRodFxovAWMkKSseEUFVRigsEjcvHCsv/EABkBAQEBAQEBAAAAAAAAAAAAAAABAgMEBf/EACURAQACAgICAQQDAQAAAAAAAAABEQISA1ETITEEQWGBIjKhI//aAAwDAQACEQMRAD8A+MwhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCB9OXgDDdivze8ccX8N2K/N7zQURwJ9DTHp49su2d9n8N2C/N7xhxdw3YJ83vNIRxGmPRtl2zRxdwvYL83vGHFvC9gvze80hHEmmPRtl2zBxbwnYL83vHHFrCdgvze80hHWNMejbLtmjizg+wX5veH2Zwn9Onze80wY15Ncel2y7ZX2Ywn9Onze8PszhP6dPm95rCEaY9JtPbJ+zGE/p0+b3k/ZjCf06fN7zWk3jTHpdp7ZI4sYPsF+b3k/ZjB/06/N7zXheTTHo2ntkfZfB/wBOvze8Psvg/wCnX5vea95IjTHo2ntkfZfB9gvze8Psvg+wX5vebEJNcejae2P9l8H2C/N7w+y+D7Bfm95r3gTLpj0m09sY8V8J/Tp83vEbixhOwX5vebZMRhLrj0bZdsQ8WsJ2CfN7xDxbwvYJ83vNl4pl1x6Nsu2MeLmF7Bfm94p4u4XsF+b3mwYhjTHo2y7ZB4u4bsF+b3ini7huwX5vebBEUiNMejbLtjni9huxX5veKeAMN2K/N7zXIlZEumPSbZdso8AYfsV+b3iHgHD9ivze81yIhEumPRtl2yTwFh+yX194p4Dw/ZL6+81SIhEaY9G2XbKPAmH7JfX3kfyWh2S+vvNMiRGmPS7Zdu4RxFUSwLCJEYQCyQIsTJEgCMBAYRhIAjWksSDC8AIWgTeTeQBJtAm8m8W0kQHBk3kARgJASVkWjAQGikRrQtItEIkWlhi2iyiwMcJLDRiynK6yplnSyyspLZTmIikS9lilZbRzkSCJeUiFYspSREKy4rIlsVqsVwJYRFKRY5mEQy9klbLLYpMS0tYRLRY0wsaSIBZi1pAEYCMFjhIsogEcLJCxwsllFAkxwsYJFlKxGtLAkkLJa0rAkx8spr6EDfN4RGU1LlzZZY4TOPyfSAImhhuLuIcXyqoPWNj5AEjxtGr8WsQouFVvg2vkwE3/AMrq/wDXl3+pq9f8Z4YSc4nNVDKSrAqw0IIIIPwm0OLWI3J+b9pcsePH5lMeXnyvWLr8M7OIZxOaqCrFG0KkqRuINjNr7M4jcn5v2jLHjx+ZMeXnyvWLr8M7lBJ5QTsq8XcSovkDf9WW/raZNQMpKsCrDaCCCPiDGOPHl/WbTPm58f7RX6dJcQzicvKR6Klj3dJmp48Yi5TD6jmzmodaODsloMQLbQQM801M+n0MIyiI2+Uuo2iVMseQYaUuJUVnQREZZLFDxDLysrKy2lKWEQidBSVlZbKVSbRisiLKKUlT0jul95KtFlOI04vJzRygycgjZAqRxT+tIiPLOUmLdahISMqRQ8dXMWUYJGCQDyQ8WUAkYJDNJzSWUkJG5OQGjB4soBJo8XsMrYkFh91Cyj+7MBfwuZn5px1+EWoVkqqdQDodjAnVT3SxE5XEfeHPOYiImfiJh77hzGVqaBqNPOb67TlFtuUanwnm6XHRxcPSW9jbKSLG2l1N9L981ODuOGHqABzyTdIb7vgw0t8bTSx3BtHELdlVrjR1tm7irD/yc8dcPXJj+2s4yz98eX6eH4vUWr4lS2tiajHfY3HmxE+jZxcLfUgkDpsLAn1HnMPizwIcPyuY3LPZTvRRzT3E3N/hOPF4uqOEUtTqGmoFMsFbKc4uWzWtYNkuf7ZrlnyZTXxEJw4+LCNo9zLJ454Xk6+cDm1Bm/yXRv8A5PjPeYmplRm6qk+QJmHx0wWfDlwOdTOcfAfe9NfCb1VAylTsIIPwIsZnPPbDC/tbXHx658lfepeZ4B40NXqCk6BSwJBBNrgXsQe4HWJx5w65Eq21DZCf7SrHX4EepmxwfwLh6BLouU2sWLMSB8WOk87xlx64hlo0zdEbM7jYWsQEU9OhNzs1E1hlHljLCKiGMscvFOOc3M/DzuEw7OdPujaf9DvmotLKLAWEdECgKNAOiTedc+Scp/DPFwY4R+VeWBSPeBfvnO3WlRWKVlmeQzRZSoiKRLS0gtLZSgiKRLmeKWiylBikS/NEdospSRKyJcWiMZbKUkQjkxCYtKAMnPIhJZSj+Oo9sn5l94HhCl2qfmWeYFP4SRTPd6y0zb0v8yp9on5hGHCVPtE/MJ5paR7o3J94il2emHCdPtE8xGXhOn2iec8yKfeIwpHul1g2el/mlPtF84w4Tp9ovrPNrSO/68o3Jn6/8jWDZ6QcJU+0X1jjhKn2izzXJd8nk++NYNnpv5inXXzlvBlJK+JpqzJlALMCRzrHRRfaSbabrzywSQ5tNYYXNRLOWXr2+pYriRh2bMrOl/wqVK+GYEjzm1wfg0w9JaSk5QbAsRcljfu1JOwT5BQ4bxCjKteoo3Bmt4C8qrcJ1mYO1V2ZdVYsxKnepvp4Rl9NnlFZZelx5cMZvGPb7bisQqI1RtiKzH4KLn9J50cecLa//ID1cmvobes+aVOFKzAq1aoynQgu5BG4gnWc+aXH6OIj+UmX1E/aH2/BYpK9Jai6pUXYdtjoQRv2gx+ET/xVP+j/AP5M+K0eEqqDKlV1UbFV3UC+psAZ34DE16h59eqE2Mc7m9/wjW1zOeX0uv8AK/TUc9+q9pwGFqV9pYoNpJJHwF+mb9PCsoCqtgNg0l9LEU0UIoyqNALW2C52/qZDcJJvPhl95M+Scp+PRhxxjH5VGk+79JU+YbZa/CaEGwY/l10J013Azlr41Tbmm+vSCdoF7DXpmYmW6hDVwOmQcUN/6zibFKdhF/UDd3dE4qmIvv3d36zVMTLUfHp1h6+0T+Zp1x6+0wa1Q/v9GcbMTNawm0vUnhSn1x6xf5pS66zyLgypj3/pGsG0vYnhOn11inhKn118544oe6IUP1aNYNns/wCZU+uvmIp4Rp9dfMTxZQ/RikGNYNnszwgnXT8wh/Gp10/MPeeJIO+I15KNnuP4un2ifmEYYqn01E/MJ4K5iFj3xRb6IMVS7RPzCH8XS66fmX3nznOfoxcxii5bgv8ARjW+rygMOt6iSWXrypS0SxT3/pOZWXr+pkiqvQx/Mf0vBTqDfWkYPOUVAdjere8tWou8n83vCOhX7vUe8YHu/SUhlOzXzMkEfQPvAvzHdDNKgbbfrwklr/uIF6t3SSwPRKh4eQjAn6tFh7L9CSoX6H7Rc53Rlc7gJdsuyoXIibh5ftOj+GTXRdPXW2hGk5VfTYL+k66TrbUEadFh8QdCddB4yb5drEQvGFpdQE9Ootpttbo0Os60RVsoQINbc47B0G5039HjOZOSuwzGxBtp3grfUX/ae5V3/wCILVRaS0KTPSYBqhQffJXKTbLYadN5zzzn7umOMPJquwAAXOUHNmW9rEA20NrEeEgC4X8O0g3XLc63ItpoBtHrNVsFRY0cqMFxDkgWHNTlAoAA1Vcuu4dN47cFYdeTVuVBqVKiArbQo+QXJOzS9rG+szsurDqqAl8wa+2xPNNrG9u6+um0ThdgFvYHYQbsND0WB3keXfNvDcFIa1SiWZcheyqEQ1GUrlVGJyAm17HXm9151UsFcYinaugLYUMrLTBIeoy2BUG4U3NwfOa2pNXk61M9IynU6kk23WJve4PmNNk5nOyx2gbATtv6z1GK4Nwx5fn174Zlz6IQwZmUKgJuCCLZmPTe1tlVbgTDqtSsz1VprQw9dRzC4FZnUqwta/NGvf02l3hnWXlKlYbL2+tsod+8+U9zheC1FGscPULU8TQTky9swblghDWFrXI19pwcNcV1pUqrqaoaiAS78lydUXAbIASykXuM220sZxZOMvIE93oYhbXpkNfbm/Q/CVs39+nhNMG5T4/XjK3fffyilr7Gv8QIuY7/AEECWf4+UQn4+Qks3x8ADE5T6tFtIJ+PpEcjugzt0XiO7bbHzPvBRWcb/wBIpbvHywzN1G87/wC5Bd+ofSS1oeEm8TO/VNv8ZHKt1W9PeLKaQqjv9I3Kjv8ASV8om/0hnTrDy/aLSlgqd36e8nlDu9B7xBUTrRhUXrfrBRuUPw8FjKRu9F9tIoqjpJPhLVrL/dAdSO/zH+hGzjv/ANSkON7ecsFRd/naBYrfVzHFe20geMoFQbxBnXcJUp0mvutAYnvA8P8Ac5hVA6F8/wBpJqjaQPAmQp2JW01IPh+kdaoJ18pxcou2w0Fzr32lqONTZQVsCL2Ykm1gp1PwhaddKqNgNhvtOlHGljckDXZY7r/7nFWzhshH3dPvAgDaQGByjb4XmhgcKXXMite2ZecNRmKabOm3wt8JJlYxlfhuioVGUA/5HUDS99pE3l4YCtTqc0NTpogIGbMgBDIQG0uLanTadNJlfyR1N9L6EI5AvvBs19pA8tk76PBfXVdedlBF1fMvN2aLp62+OJmJbiJhdhuG3AREooVRsysSW5MM9ypFwD+IDpHxlWL4VZgj8koai71BmUm+d8z2UDTn63v0DXWSeDUQEEd4UEDUFmXMdL6i3T0bpD8F09i2Y5tVJU6XbYDqNl7X/B8ZPR/JwJwlnqVKj0EqBwc6shtlz5jbn81ubpvtL6nGhhzRTphQlIBbFlU0TyiKLnZmPeRfunDiaDC/3gLhbAc8oQC6so2OCt7HQjXcTi4ivzxkAIAXaNCNozA67CFI7jvmqiWbmGnW4wOwr2SmGxDKWIzfhYtYagjU9N/9ztwfGK1CslRKTsKOGo0kK1CtRKbuWz2JsQHJvcajpnmqWKdH0sbXIKtYixN8pOw6X7xvvKMVjHzXOhI1Gy3da2nh4S6wly26/GbEEOqqiKUWmiKrBaSowcFDc3YnaTfYJz4rjEXbO2Cw5qFlZ3NM5mKkHUFrLmtziLXuZhGux118PGVGs23M3w/8jWC5XYis7MzBFXMzNlUWVcxvZR0AXsJWeU3D677xGqDpLRC43t5zSHOf+zylTh/7R4Q0PS3jaLk7/UwEYvsunhJ53SR4RSg6G9DDJvYesKjK+3NaQwbrHwHvJKL1h9eMrdF6T5QIZT129LxQx6xMYqu+4+H7yDk7/IyKV3bd6gxeWfvks6d0jOu6FdWYbhDON0qVY4t3SFJ5QD8N/CSKx6FPpBTAyoYVW3RgzRVbuj5j3D9YE2Y98BTPdJUtvliud8IhaR2x+TPTJQxswgKtP4SxVG8SFAPRJCDeID0gBzgwFjoem43e8AoJvm/eIyDyjimPgYHbRqoLcwGw2MTbSxO7TRvPfrOg4gMWa4B5oAA2aHUdC6kWA/1OAYY2BINje2h1sbE+ek6MNhSxA1sSbGx1IW4Gm3o2b5FalHHNplzHLmCgG4zsLBtmp5pb4j437l4RrOCVUDIobmjU5xkudd922TLwwdM7BlAprfW5GYrlW29rEtu1v0zQw2LdDSKZDlQISvQGsxBJOpsm22kkrC3JUfJTZSmZVDDKwJVWBzG+thlHO323y98MT/zFeZVZr86zZDd2uTsJynTvA6TK8Rwi+Y1CRzkdAV1FgGe4YtuDftskNwlZ0zEOosSuhUhlTJZRuzC3wMntVRoqb5S5Co75yLsjqAGDLt+5YFT07JzV3eoFKujMqE5gLOUVls6ta552m/m95E1cS1LOKYZ0qOGuy6gvdsqvb7y2LjUbAN0zcNwk5polFA5VDnXKCwyMuckadBA785OlotKYmJxpLHMik2sxIFybk5tLWJB6PaJVpWXNr0dVl5w01BuNQejpt0G6Y/DMP+Qc9LI2a1vvjYRtFmV1/wATKeFMSge9G6oyqStybNl566km177d82lBiVFyQCdQNdR0G/T0+m3W1DVybA2trb/2czVrkFySNpsRfXbbaL9MoeptA110Oy/h0RaU63c30I8REao3QROUvvlWY74tad5ZrdHkIhfcbTgLmKS26LKdrE7x4SoVAfx2PiPQziLkRTXktdXY4B/FeLyC9b/c5RU7o3jFlLxhh1pBojefCc7Dvleo6ZLWnRkXrecmw3yjlDE5U/QktalpCvS649Y38RS649Z5+E5+SW9IeiGKpdf9ZH8XS6w9Z56EeSTxw9D/ABlPrD1guMp9Yes89CPJJ44ejOOTrD1gManXX1nnIR5JTxw9KuPTrj1h/MKfWHrPNQjySeOHpTjqZ/GPWA4QQahx6+081CPJK+OHqFx9LLcvzr6DWwA6Tca/D4915pcJU1N84vfbr57J5aEeSTSHuE4xqBlzr9zIDY6KdDpbbYW8T0m8vrcZle2esAADYKoAuVyg6DdbXoyi08BCXySaQ98OFsMzqrVRk6TZtSwGY2A0F/QTtocYcKrsy1LZkABIYgOxGdrNs0LC+5jPmkJPJJpD6tjOMeDWkiJUUsjhjbMFI1zdGtwbbOkzkxXDmGZQi10UB2e4z5tWZtDl07v+3RPmkJN5XSH0jg/hzDq4q1MQCxdWsA5YEXCsTbozOLa6ETmo8O00cPTrhWzNcgGxVmNwbj7ugP8Ake6eAhHklNIe2xPDFPO5StzH5zJzrEkqxVgRtzKNRuuLTlxOLw5YsrgA6gWbTZofeeThL5JNIemr4uhc5W0NjrtGmo0H1YbJQ9WloQ4O2410t4dIt67pgQjySaQ3WxFPrD1lfL0+sPWY0I8kmkNfl0B0Yesn+KTrTHhHkk0hqnErvEjlk3iZcJPJJpDV/iE3iI1VD0/rM2EvkldId/Krvkcss4YSbyaw7eUXfF5Qb5yQjeTWBCEJhoQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCB//2Q==" slot="thumbnail">
80
+ </ui5-media-gallery-item>
81
+ <ui5-media-gallery-item layout="Wide">
82
+ <iframe allowfullscreen src="https://www.youtube.com/embed/r2-XOMtsbT0?rel=0&showinfo=0&autoplay=1"></iframe>
83
+ <img src="https://www.plustechnologies.com/wp-content/uploads/2019/03/SAP.jpg" slot="thumbnail">
84
+ </ui5-media-gallery-item>
85
+ <ui5-media-gallery-item>
86
+ <img src="/assets/HT-1030.7ead454a.jpg">
87
+ <img src="/assets/HT-1030.7ead454a.jpg" slot="thumbnail">
88
+ </ui5-media-gallery-item>
89
+ <ui5-media-gallery-item>
90
+ <img src="/assets/Overlayed mask.eb7a3287.png">
91
+ <img src="/assets/Overlayed mask.eb7a3287.png" slot="thumbnail">
92
+ </ui5-media-gallery-item>
93
+ <ui5-media-gallery-item>
94
+ <img src="/assets/HT-2002.0e49d270.jpg">
95
+ <img src="/assets/HT-2002.0e49d270.jpg" slot="thumbnail">
96
+ </ui5-media-gallery-item>
97
+ <ui5-media-gallery-item>
98
+ <img src="/assets/HT-2026.8d3d321d.jpg">
99
+ <img src="/assets/HT-2026.8d3d321d.jpg" slot="thumbnail">
100
+ </ui5-media-gallery-item>
101
+ </ui5-media-gallery>
102
+ </div>
103
+ <div id="events" class="controls events">
104
+ <ui5-title level="H1">Events:</ui5-title>
105
+ <div>
106
+ <ui5-checkbox id="isDisplayAreaInteractive" text="Interactive display area"></ui5-checkbox>
107
+ </div>
108
+ <div>
109
+ <ui5-label>Last selected index: </ui5-label>
110
+ <ui5-label class="resultLabel" id="selectedIndexLabel"></ui5-label>
111
+ </div>
112
+ <div>
113
+ <ui5-label>Call count "selection-change": </ui5-label>
114
+ <ui5-label class="resultLabel" id="selectionChangeCallCountLabel"></ui5-label>
115
+ <button id="clearBtn">Clear</button>
116
+ </div>
117
+ <div>
118
+ <ui5-label>Call count "overflow-click": </ui5-label>
119
+ <ui5-label class="resultLabel" id="overflowClickCallCountLabel"></ui5-label>
120
+ </div>
121
+ <div>
122
+ <ui5-label>Call count "display-area-click": </ui5-label>
123
+ <ui5-label class="resultLabel" id="displayAreaClickCallCountLabel"></ui5-label>
124
+ </div>
125
+ </div>
126
+ <div class="content">
127
+ <ui5-media-gallery id="mGallery2">
128
+ <ui5-media-gallery-item>
129
+ <img src="/assets/HT-1000.59a0ea5a.jpg">
130
+ <img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
131
+ </ui5-media-gallery-item>
132
+ <ui5-media-gallery-item>
133
+ <img src="/assets/HT-1010.7b05e4f5.jpg">
134
+ <img src="/assets/HT-1010.7b05e4f5.jpg" slot="thumbnail">
135
+ </ui5-media-gallery-item>
136
+ <ui5-media-gallery-item>
137
+ <img src="/assets/HT-1022.6fa171f0.jpg">
138
+ <img src="/assets/HT-1022.6fa171f0.jpg" slot="thumbnail">
139
+ </ui5-media-gallery-item>
140
+ <ui5-media-gallery-item layout="Wide">
141
+ <iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
142
+ <img src="data:image/jpeg;base64,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" slot="thumbnail">
143
+ </ui5-media-gallery-item>
144
+ <ui5-media-gallery-item>
145
+ <img src="/assets/HT-2002.0e49d270.jpg">
146
+ <img src="/assets/HT-2002.0e49d270.jpg" slot="thumbnail">
147
+ </ui5-media-gallery-item>
148
+ <ui5-media-gallery-item>
149
+ <img src="/assets/HT-1030.7ead454a.jpg">
150
+ <img src="/assets/HT-1030.7ead454a.jpg" slot="thumbnail">
151
+ </ui5-media-gallery-item>
152
+ </ui5-media-gallery>
153
+ </div>
154
+ <div id="disableditems" class="controls">
155
+ <ui5-title level="H2">MediaGallery with disabled items:</ui5-title>
156
+ </div>
157
+ <div class="content">
158
+ <ui5-media-gallery>
159
+ <ui5-media-gallery-item disabled>
160
+ <img src="/assets/HT-1000.59a0ea5a.jpg">
161
+ <img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
162
+ </ui5-media-gallery-item>
163
+ <ui5-media-gallery-item>
164
+ <img src="/assets/HT-1010.7b05e4f5.jpg">
165
+ <img src="/assets/HT-1010.7b05e4f5.jpg" slot="thumbnail">
166
+ </ui5-media-gallery-item>
167
+ <ui5-media-gallery-item>
168
+ <img src="/assets/HT-1022.6fa171f0.jpg">
169
+ <img src="/assets/HT-1022.6fa171f0.jpg" slot="thumbnail">
170
+ </ui5-media-gallery-item>
171
+ <ui5-media-gallery-item layout="Wide">
172
+ <iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
173
+ <img src="data:image/jpeg;base64,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" slot="thumbnail">
174
+ </ui5-media-gallery-item>
175
+ </ui5-media-gallery>
176
+ </div>
177
+ <div id="notfoundcontent" class="controls">
178
+ <ui5-title level="H2">Not found content:</ui5-title>
179
+ </div>
180
+ <div class="content">
181
+ <ui5-media-gallery>
182
+ <ui5-media-gallery-item>
183
+ <img src="./img/Tool1.png">
184
+ <img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
185
+ </ui5-media-gallery-item>
186
+ <ui5-media-gallery-item layout="Wide">
187
+ <iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
188
+ <img src="data:image/jpeg;base64,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" slot="thumbnail">
189
+ </ui5-media-gallery-item>
190
+ </ui5-media-gallery>
191
+ </div>
192
+ <div id="notfoundthumbnail" class="controls">
193
+ <ui5-title level="H2">Not found thumbnail and content:</ui5-title>
194
+ </div>
195
+ <div class="content">
196
+ <ui5-media-gallery>
197
+ <ui5-media-gallery-item>
198
+ <img src="./img/HT-10001.jpg">
199
+ <img src="./img/Tool1.png" slot="thumbnail">
200
+ </ui5-media-gallery-item>
201
+ </ui5-media-gallery>
202
+ </div>
203
+
204
+ <div class="controls">
205
+ <ui5-title level="H2">Narrow container</ui5-title>
206
+ </div>
207
+ <div class="narrowContainer">
208
+ <ui5-media-gallery id="galleryInNarrowContainer">
209
+ <ui5-media-gallery-item>
210
+ <img src="/assets/HT-1000.59a0ea5a.jpg">
211
+ </ui5-media-gallery-item>
212
+ <ui5-media-gallery-item>
213
+ <img src="/assets/HT-1010.7b05e4f5.jpg">
214
+ </ui5-media-gallery-item>
215
+ </ui5-media-gallery>
216
+ </div>
217
+
218
+ <script>
219
+
220
+ let selectionChangeCallCount = 0,
221
+ overflowClickCallCount = 0,
222
+ displayAreaClickCallCount = 0;
223
+
224
+ layout.addEventListener("ui5-change", function(event) {
225
+ let newValue = event.detail.selectedOption.innerText;
226
+ mGallery1.layout = newValue;
227
+ });
228
+
229
+ selectHorizontalAlign.addEventListener("ui5-change", function(event) {
230
+ let newValue = event.detail.selectedOption.innerText;
231
+ mGallery1.menuHorizontalAlign = newValue;
232
+ });
233
+
234
+ selectVerticalAlign.addEventListener("ui5-change", function(event) {
235
+ let newValue = event.detail.selectedOption.innerText;
236
+ mGallery1.menuVerticalAlign = newValue;
237
+ });
238
+
239
+ isDisplayAreaInteractive.addEventListener("ui5-change", function(event) {
240
+ mGallery2.interactiveDisplayArea = isDisplayAreaInteractive.checked;
241
+ });
242
+
243
+ mGallery2.addEventListener("ui5-selection-change", function(event) {
244
+ const item = event.detail.item,
245
+ index = mGallery2.items.indexOf(item);
246
+ selectedIndexLabel.innerText = index;
247
+ selectionChangeCallCountLabel.innerText = ++selectionChangeCallCount;
248
+ });
249
+
250
+ mGallery2.addEventListener("ui5-overflow-click", function(event) {
251
+ overflowClickCallCountLabel.innerText = ++overflowClickCallCount;
252
+ });
253
+
254
+ mGallery2.addEventListener("ui5-display-area-click", function(event) {
255
+ displayAreaClickCallCountLabel.innerText = ++displayAreaClickCallCount;
256
+ });
257
+
258
+ selectMenuDesign.addEventListener("ui5-change", function(event) {
259
+ mGallery1.showAllThumbnails = selectMenuDesign.checked;
260
+ });
261
+
262
+ clearBtn.addEventListener("click", function() {
263
+ selectedIndexLabel.innerText = "";
264
+ selectionChangeCallCountLabel.innerText = "";
265
+ overflowClickCallCountLabel.innerText = "";
266
+ displayAreaClickCallCountLabel.innerText = "";
267
+ });
268
+
269
+ selectTheme.addEventListener("ui5-change", function(event) {
270
+ var theme = event.detail.selectedOption.value;
271
+ var Conf = window["sap-ui-webcomponents-bundle"].configuration;
272
+ Conf.setTheme(theme);
273
+ });
274
+
275
+ </script>
276
+ </body>
277
+
278
+ </html>