@ui5/webcomponents 1.10.0 → 1.10.1

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 (303) hide show
  1. package/CHANGELOG.md +101 -0
  2. package/LICENSE.txt +201 -0
  3. package/dist/Avatar.d.ts +2 -2
  4. package/dist/Badge.d.ts +3 -3
  5. package/dist/Breadcrumbs.d.ts +5 -5
  6. package/dist/Breadcrumbs.js +1 -1
  7. package/dist/BusyIndicator.d.ts +136 -0
  8. package/dist/BusyIndicator.js +126 -208
  9. package/dist/BusyIndicator.js.map +1 -0
  10. package/dist/Button.d.ts +3 -3
  11. package/dist/Calendar.d.ts +3 -3
  12. package/dist/Calendar.js +1 -1
  13. package/dist/CalendarHeader.d.ts +2 -2
  14. package/dist/Card.d.ts +3 -3
  15. package/dist/Card.js +1 -1
  16. package/dist/CardHeader.d.ts +2 -2
  17. package/dist/Carousel.d.ts +318 -0
  18. package/dist/Carousel.js +446 -642
  19. package/dist/Carousel.js.map +1 -0
  20. package/dist/CheckBox.d.ts +3 -3
  21. package/dist/ColorPalette.d.ts +5 -5
  22. package/dist/ColorPalette.js +1 -1
  23. package/dist/ColorPaletteItem.d.ts +2 -2
  24. package/dist/ColorPalettePopover.d.ts +2 -2
  25. package/dist/ColorPicker.d.ts +2 -2
  26. package/dist/ComboBox.js +2 -2
  27. package/dist/CustomListItem.d.ts +1 -1
  28. package/dist/DatePicker.d.ts +2 -2
  29. package/dist/DateTimePicker.d.ts +1 -1
  30. package/dist/DayPicker.d.ts +2 -2
  31. package/dist/Dialog.d.ts +4 -5
  32. package/dist/FileUploader.d.ts +4 -4
  33. package/dist/GroupHeaderListItem.d.ts +1 -1
  34. package/dist/Icon.d.ts +2 -2
  35. package/dist/Input.d.ts +5 -5
  36. package/dist/Input.js +1 -1
  37. package/dist/Label.d.ts +2 -2
  38. package/dist/Link.d.ts +2 -2
  39. package/dist/List.d.ts +4 -3
  40. package/dist/List.js +1 -1
  41. package/dist/ListItem.d.ts +1 -1
  42. package/dist/Menu.d.ts +3 -3
  43. package/dist/Menu.js +1 -1
  44. package/dist/MessageStrip.d.ts +2 -2
  45. package/dist/MonthPicker.d.ts +2 -2
  46. package/dist/MultiComboBox.js +6 -2
  47. package/dist/MultiInput.js +1 -1
  48. package/dist/Panel.d.ts +2 -2
  49. package/dist/Popover.d.ts +1 -1
  50. package/dist/Popup.d.ts +3 -3
  51. package/dist/ProgressIndicator.d.ts +2 -2
  52. package/dist/RangeSlider.d.ts +1 -1
  53. package/dist/ResponsivePopover.d.ts +1 -1
  54. package/dist/SegmentedButton.js +1 -1
  55. package/dist/Select.js +1 -1
  56. package/dist/Slider.d.ts +1 -1
  57. package/dist/SplitButton.d.ts +2 -2
  58. package/dist/StandardListItem.d.ts +2 -2
  59. package/dist/StepInput.d.ts +2 -2
  60. package/dist/SuggestionListItem.d.ts +1 -1
  61. package/dist/Switch.d.ts +2 -2
  62. package/dist/TabContainer.js +1 -2
  63. package/dist/Table.d.ts +6 -4
  64. package/dist/Table.js +1 -1
  65. package/dist/TableCell.d.ts +2 -2
  66. package/dist/TableColumn.d.ts +2 -2
  67. package/dist/TableGroupRow.d.ts +2 -2
  68. package/dist/TableRow.d.ts +2 -2
  69. package/dist/TimePickerBase.d.ts +4 -4
  70. package/dist/TimeSelection.d.ts +2 -2
  71. package/dist/Title.d.ts +2 -2
  72. package/dist/Tree.js +1 -1
  73. package/dist/WheelSlider.d.ts +2 -2
  74. package/dist/YearPicker.d.ts +2 -2
  75. package/dist/api.json +1 -1
  76. package/dist/assets/test/pages/72override.html.dda35518.css +1 -0
  77. package/dist/assets/test/pages/AnimanitionOff.html.b7566ecc.css +1 -0
  78. package/dist/assets/test/pages/Avatar.html.62cc0573.css +1 -0
  79. package/dist/assets/test/pages/AvatarGroup.html.20647fe1.css +1 -0
  80. package/dist/assets/test/pages/Badge.html.bcc1c9a3.css +1 -0
  81. package/dist/assets/test/pages/Breadcrumbs.html.5753069f.css +1 -0
  82. package/dist/assets/test/pages/BusyIndicator.html.ce95c23c.css +1 -0
  83. package/dist/assets/test/pages/Button.html.957848f0.css +1 -0
  84. package/dist/assets/test/pages/Calendar.html.9ff42e30.css +1 -0
  85. package/dist/assets/test/pages/Card.html.8c5e4756.css +1 -0
  86. package/dist/assets/test/pages/Carousel.html.fcdd32a7.css +1 -0
  87. package/dist/assets/test/pages/CheckBox.html.08ae630d.css +1 -0
  88. package/dist/assets/test/pages/ColorPalette.html.8c4c4ca3.css +1 -0
  89. package/dist/assets/test/pages/ColorPalettePopover.html.727f90e2.css +1 -0
  90. package/dist/assets/test/pages/ColorPicker.html.cc0c0d29.css +1 -0
  91. package/dist/assets/test/pages/ComboBox.html.14fbc3aa.css +1 -0
  92. package/dist/assets/test/pages/ComboBox.html.c091a8e7.js +1 -0
  93. package/dist/assets/test/pages/Components.html.b41617c5.css +1 -0
  94. package/dist/assets/test/pages/CoreControls.html.dabd050c.css +1 -0
  95. package/dist/assets/test/pages/CoreControls_exp.html.46ab2dc9.css +1 -0
  96. package/dist/assets/test/pages/CustomCSS.html.4d6e9b1f.css +1 -0
  97. package/dist/assets/test/pages/DatePicker.html.e667d0b8.css +1 -0
  98. package/dist/assets/test/pages/DatePicker_test_page.html.882ab55e.css +1 -0
  99. package/dist/assets/test/pages/DateRangePicker.html.1b5072fd.css +1 -0
  100. package/dist/assets/test/pages/DateTimePicker.html.eff0e2e0.css +1 -0
  101. package/dist/assets/test/pages/DayPicker.html.5700622a.css +1 -0
  102. package/dist/assets/test/pages/Dialog.html.329cb1dc.css +1 -0
  103. package/dist/assets/test/pages/DialogLifecycle.html.e4ac6ba2.css +1 -0
  104. package/dist/assets/test/pages/DialogSemantic.html.f61ec13d.css +1 -0
  105. package/dist/assets/test/pages/DurationPicker.html.92ecf486.css +1 -0
  106. package/dist/assets/test/pages/Eventing.html.cd934528.css +1 -0
  107. package/dist/assets/test/pages/FileUploader.html.30b8cbbd.css +1 -0
  108. package/dist/assets/test/pages/FormSupport.html.4e02207b.css +1 -0
  109. package/dist/assets/test/pages/HCB.html.d458990b.css +1 -0
  110. package/dist/assets/test/pages/Icon.html.5f0fd46d.js +1 -0
  111. package/dist/assets/test/pages/Icon.html.be3b1acc.css +1 -0
  112. package/dist/assets/test/pages/Input.html.85ce57b4.css +1 -0
  113. package/dist/assets/test/pages/Input_quickview.html.86df3de3.css +1 -0
  114. package/dist/assets/test/pages/InputsAlignment.html.5c5593c2.css +1 -0
  115. package/dist/assets/test/pages/ItemNavigation.html.f5758aae.css +1 -0
  116. package/dist/assets/test/pages/Kitchen.html.d0d90fc6.css +1 -0
  117. package/dist/assets/test/pages/Kitchen.openui5.html.910e3d52.css +1 -0
  118. package/dist/assets/test/pages/Label.html.26cf5a3e.js +4 -0
  119. package/dist/assets/test/pages/Label.html.e994dc8e.css +1 -0
  120. package/dist/assets/test/pages/Link.html.d4c480d9.css +1 -0
  121. package/dist/assets/test/pages/List.html.65a3c4b3.css +1 -0
  122. package/dist/assets/test/pages/ListGrowing_Button.html.49bbaf80.css +1 -0
  123. package/dist/assets/test/pages/ListGrowing_Scroll.html.841dd1ed.css +1 -0
  124. package/dist/assets/test/pages/List_keyboard_support.html.a7297baf.css +1 -0
  125. package/dist/assets/test/pages/List_test_page.html.356d4e16.css +1 -0
  126. package/dist/assets/test/pages/LitKeyFunction.html.f3f9d649.css +1 -0
  127. package/dist/assets/test/pages/MemoryLeak.html.35d77e5e.css +1 -0
  128. package/dist/assets/test/pages/Menu.html.a758a26d.css +1 -0
  129. package/dist/assets/test/pages/MessagePage.html.30ffc162.css +1 -0
  130. package/dist/assets/test/pages/MessageStrip.html.8c2c85d5.css +1 -0
  131. package/dist/assets/test/pages/MultiComboBox.html.9ede2c74.css +1 -0
  132. package/dist/assets/test/pages/MultiInput.html.1c75cdc2.css +1 -0
  133. package/dist/assets/test/pages/MultiInput_Suggestions.html.79cd0348.css +1 -0
  134. package/dist/assets/test/pages/OpenUI5.html.cf1daa05.css +1 -0
  135. package/dist/assets/test/pages/Panel.html.399730d1.css +1 -0
  136. package/dist/assets/test/pages/Popover.html.6d4f19ad.css +1 -0
  137. package/dist/assets/test/pages/PopoverArrowBounds.html.c1e5feb1.css +1 -0
  138. package/dist/assets/test/pages/Popups.html.0d7c434f.js +1 -0
  139. package/dist/assets/test/pages/Popups.html.bb021765.css +1 -0
  140. package/dist/assets/test/pages/ProgressIndicator.html.d61b0c53.css +1 -0
  141. package/dist/assets/test/pages/RTL.html.dbeca857.css +1 -0
  142. package/dist/assets/test/pages/RadioButton.html.ccfd1850.css +1 -0
  143. package/dist/assets/test/pages/RangeSlider.html.437a9174.css +1 -0
  144. package/dist/assets/test/pages/RatingIndicator.html.737cd73b.css +1 -0
  145. package/dist/assets/test/pages/ResizeHandler.html.ed7c5d20.css +1 -0
  146. package/dist/assets/test/pages/ResponsivePopover.html.6f67ae07.css +1 -0
  147. package/dist/assets/test/pages/SegmentedButton.html.8678479b.css +1 -0
  148. package/dist/assets/test/pages/Select.html.9c98a470.css +1 -0
  149. package/dist/assets/test/pages/Simple.html.8f2ddb30.css +1 -0
  150. package/dist/assets/test/pages/Slider.html.8ea10965.css +1 -0
  151. package/dist/assets/test/pages/SplitButton.html.5c992973.css +1 -0
  152. package/dist/assets/test/pages/StepInput.html.f22c112d.css +1 -0
  153. package/dist/assets/test/pages/Switch.html.a4f3262f.css +1 -0
  154. package/dist/assets/test/pages/TabContainer.html.7f2ade15.css +1 -0
  155. package/dist/assets/test/pages/Table-perf-pure.html.fce52e4b.css +1 -0
  156. package/dist/assets/test/pages/Table-perf.html.88634378.css +1 -0
  157. package/dist/assets/test/pages/Table.html.c43386f4.css +1 -0
  158. package/dist/assets/test/pages/Table2.html.aca0c111.css +1 -0
  159. package/dist/assets/test/pages/TableAllPopin.html.ad586de4.css +1 -0
  160. package/dist/assets/test/pages/TableCustomStyling.html.a85167d6.css +1 -0
  161. package/dist/assets/test/pages/TableGrouping.html.602ae2ad.css +1 -0
  162. package/dist/assets/test/pages/TableGrowingWithButton.html.5a39b2bf.css +1 -0
  163. package/dist/assets/test/pages/TableGrowingWithScroll.html.8ef93d31.css +1 -0
  164. package/dist/assets/test/pages/TableSelection.html.dba2d678.css +1 -0
  165. package/dist/assets/test/pages/TextArea.html.f8e10fd6.css +1 -0
  166. package/dist/assets/test/pages/TimePicker.html.9a4bb300.css +1 -0
  167. package/dist/assets/test/pages/TimeSelection.html.8ad57759.css +1 -0
  168. package/dist/assets/test/pages/Title.html.7bb51811.css +1 -0
  169. package/dist/assets/test/pages/Toast.html.47a93be2.css +1 -0
  170. package/dist/assets/test/pages/ToggleButton.html.3b7dbb8c.css +1 -0
  171. package/dist/assets/test/pages/Tree.html.74fe2a1d.css +1 -0
  172. package/dist/assets/test/pages/WheelSlider_Test_Page.html.8a9a5e49.css +1 -0
  173. package/dist/assets/test/pages/form.html.f0f82118.css +1 -0
  174. package/dist/assets/test/pages/i18n-defaultLang.html.b9d79c6b.css +1 -0
  175. package/dist/assets/test/pages/i18n-demo.html.c6751b5c.css +1 -0
  176. package/dist/generated/templates/CarouselTemplate.lit.js +2 -2
  177. package/dist/test/pages/72override.html +33 -0
  178. package/dist/test/pages/AnimanitionOff.html +52 -0
  179. package/dist/test/pages/Avatar.html +265 -0
  180. package/dist/test/pages/AvatarGroup.html +376 -0
  181. package/dist/test/pages/Badge.html +75 -0
  182. package/dist/test/pages/Breadcrumbs.html +239 -0
  183. package/dist/test/pages/BusyIndicator.html +255 -0
  184. package/dist/test/pages/Button.html +267 -0
  185. package/dist/test/pages/Calendar.html +96 -0
  186. package/dist/test/pages/Card.html +347 -0
  187. package/dist/test/pages/Carousel.html +584 -0
  188. package/dist/test/pages/CheckBox.html +76 -0
  189. package/dist/test/pages/ColorPalette.html +126 -0
  190. package/dist/test/pages/ColorPalettePopover.html +141 -0
  191. package/dist/test/pages/ColorPicker.html +66 -0
  192. package/dist/test/pages/ComboBox.html +279 -0
  193. package/dist/test/pages/Components.html +106 -0
  194. package/dist/test/pages/CoreControls.html +203 -0
  195. package/dist/test/pages/CoreControls_exp.html +203 -0
  196. package/dist/test/pages/CustomCSS.html +55 -0
  197. package/dist/test/pages/DatePicker.html +193 -0
  198. package/dist/test/pages/DatePicker_test_page.html +97 -0
  199. package/dist/test/pages/DateRangePicker.html +64 -0
  200. package/dist/test/pages/DateTimePicker.html +190 -0
  201. package/dist/test/pages/DayPicker.html +37 -0
  202. package/dist/test/pages/Dialog.html +706 -0
  203. package/dist/test/pages/DialogLifecycle.html +62 -0
  204. package/dist/test/pages/DialogSemantic.html +58 -0
  205. package/dist/test/pages/DurationPicker.html +76 -0
  206. package/dist/test/pages/Eventing.html +33 -0
  207. package/dist/test/pages/FileUploader.html +138 -0
  208. package/dist/test/pages/FormSupport.html +59 -0
  209. package/dist/test/pages/HCB.html +45 -0
  210. package/dist/test/pages/Icon.html +269 -0
  211. package/dist/test/pages/Icon_custom.html +26 -0
  212. package/dist/test/pages/Input.html +722 -0
  213. package/dist/test/pages/InputFieldMinWidth.html +158 -0
  214. package/dist/test/pages/InputIcons.html +80 -0
  215. package/dist/test/pages/Input_quickview.html +204 -0
  216. package/dist/test/pages/InputsAlignment.html +131 -0
  217. package/dist/test/pages/InputsLazyLoading.html +244 -0
  218. package/dist/test/pages/ItemNavigation.html +94 -0
  219. package/dist/test/pages/Kitchen.html +638 -0
  220. package/dist/test/pages/Kitchen.openui5.html +570 -0
  221. package/dist/test/pages/Label.html +161 -0
  222. package/dist/test/pages/Link.html +201 -0
  223. package/dist/test/pages/List.html +465 -0
  224. package/dist/test/pages/ListGrowing_Button.html +64 -0
  225. package/dist/test/pages/ListGrowing_Scroll.html +93 -0
  226. package/dist/test/pages/List_keyboard_support.html +130 -0
  227. package/dist/test/pages/List_test_page.html +356 -0
  228. package/dist/test/pages/LitKeyFunction.html +40 -0
  229. package/dist/test/pages/MemoryLeak.html +78 -0
  230. package/dist/test/pages/Menu.html +145 -0
  231. package/dist/test/pages/MessagePage.html +39 -0
  232. package/dist/test/pages/MessageStrip.html +55 -0
  233. package/dist/test/pages/MultiComboBox.html +477 -0
  234. package/dist/test/pages/MultiInput.html +409 -0
  235. package/dist/test/pages/MultiInput_Suggestions.html +161 -0
  236. package/dist/test/pages/OpenUI5.html +83 -0
  237. package/dist/test/pages/Panel.html +226 -0
  238. package/dist/test/pages/Popover.html +586 -0
  239. package/dist/test/pages/PopoverArrowBounds.html +52 -0
  240. package/dist/test/pages/Popups.html +131 -0
  241. package/dist/test/pages/ProgressIndicator.html +151 -0
  242. package/dist/test/pages/RTL.html +118 -0
  243. package/dist/test/pages/RadioButton.html +201 -0
  244. package/dist/test/pages/RangeSlider.html +85 -0
  245. package/dist/test/pages/RatingIndicator.html +97 -0
  246. package/dist/test/pages/ResizeHandler.html +74 -0
  247. package/dist/test/pages/ResponsivePopover.html +244 -0
  248. package/dist/test/pages/SegmentedButton.html +116 -0
  249. package/dist/test/pages/Select.html +240 -0
  250. package/dist/test/pages/Simple.html +25 -0
  251. package/dist/test/pages/Slider.html +79 -0
  252. package/dist/test/pages/SplitButton.html +100 -0
  253. package/dist/test/pages/StepInput.html +164 -0
  254. package/dist/test/pages/Switch.html +88 -0
  255. package/dist/test/pages/TabContainer.html +904 -0
  256. package/dist/test/pages/Table-perf-pure.html +73 -0
  257. package/dist/test/pages/Table-perf.html +76 -0
  258. package/dist/test/pages/Table.html +2808 -0
  259. package/dist/test/pages/Table2.html +53 -0
  260. package/dist/test/pages/TableAllPopin.html +228 -0
  261. package/dist/test/pages/TableCustomStyling.html +89 -0
  262. package/dist/test/pages/TableGrouping.html +109 -0
  263. package/dist/test/pages/TableGrowingWithButton.html +805 -0
  264. package/dist/test/pages/TableGrowingWithScroll.html +801 -0
  265. package/dist/test/pages/TableSelection.html +445 -0
  266. package/dist/test/pages/TextArea.html +222 -0
  267. package/dist/test/pages/TimePicker.html +81 -0
  268. package/dist/test/pages/TimeSelection.html +31 -0
  269. package/dist/test/pages/Title.html +37 -0
  270. package/dist/test/pages/Toast.html +111 -0
  271. package/dist/test/pages/ToggleButton.html +69 -0
  272. package/dist/test/pages/Tree.html +294 -0
  273. package/dist/test/pages/WheelSlider_Test_Page.html +26 -0
  274. package/dist/test/pages/base/DOMObserver.html +20 -0
  275. package/dist/test/pages/base/InvisibleMessage.html +44 -0
  276. package/dist/test/pages/form.html +123 -0
  277. package/dist/test/pages/i18n-defaultLang.html +31 -0
  278. package/dist/test/pages/i18n-demo.html +79 -0
  279. package/global.d.ts +2 -2
  280. package/package.json +10 -9
  281. package/src/Badge.ts +1 -1
  282. package/src/Breadcrumbs.ts +1 -1
  283. package/src/{BusyIndicator.js → BusyIndicator.ts} +95 -100
  284. package/src/Calendar.ts +1 -1
  285. package/src/Card.ts +1 -1
  286. package/src/Carousel.hbs +3 -3
  287. package/src/{Carousel.js → Carousel.ts} +242 -234
  288. package/src/CheckBox.ts +1 -1
  289. package/src/ColorPalette.ts +1 -1
  290. package/src/ComboBox.js +2 -2
  291. package/src/Dialog.ts +2 -2
  292. package/src/Input.ts +1 -1
  293. package/src/List.ts +1 -1
  294. package/src/ListItem.ts +1 -1
  295. package/src/Menu.ts +1 -1
  296. package/src/MultiComboBox.js +6 -2
  297. package/src/MultiInput.js +1 -1
  298. package/src/SegmentedButton.js +1 -1
  299. package/src/Select.js +1 -1
  300. package/src/TabContainer.js +1 -2
  301. package/src/Table.ts +1 -1
  302. package/src/Tree.hbs +1 -1
  303. package/src/Tree.js +1 -1
package/dist/test/pages/Popover.html ADDED
@@ -0,0 +1,586 @@
1
+ <!DOCTYPE html>
2
+ <html class="popover1auto">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
+ <title>Popover</title>
8
+
9
+ <script data-ui5-config type="application/json">
10
+ {
11
+ "language": "EN",
12
+ "libs": "sap.ui.webc.main"
13
+ }
14
+ </script>
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+ <script>
23
+ // delete Document.prototype.adoptedStyleSheets
24
+ </script>
25
+ <script type="module" crossorigin src="/assets/bundle.common.33be618c.js"></script>
26
+ <link rel="stylesheet" href="/assets/test/pages/Popover.html.6d4f19ad.css">
27
+ </head>
28
+
29
+ <body class="popover2auto">
30
+ <iframe id="clickThisIframe" src="//localhost:8080"></iframe>
31
+
32
+ <ui5-button id="btn">Click me !</ui5-button>
33
+
34
+ <ui5-popover id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
35
+ <div slot="header">
36
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
37
+ </div>
38
+
39
+ <ui5-list>
40
+ <ui5-li>Hello</ui5-li>
41
+ <ui5-li>World</ui5-li>
42
+ <ui5-li>Again</ui5-li>
43
+ </ui5-list>
44
+
45
+ <br>
46
+ <br>
47
+
48
+ <ui5-button id="popbtn">Open Popover</ui5-button>
49
+
50
+ <ui5-popover placement-type="Bottom" hide-arrow id="danger">
51
+
52
+ <ui5-list>
53
+ <ui5-li>Hello</ui5-li>
54
+ <ui5-li>World</ui5-li>
55
+ <ui5-li>Again</ui5-li>
56
+ </ui5-list>
57
+
58
+ <br>
59
+ <br>
60
+
61
+ <ui5-button id="bigDanger">Super Danger !</ui5-button>
62
+
63
+ <ui5-popover id="bigDangerPop">
64
+ <ui5-list>
65
+ <ui5-li>Hello</ui5-li>
66
+ <ui5-li>World</ui5-li>
67
+ <ui5-li>Again</ui5-li>
68
+ </ui5-list>
69
+ </ui5-popover>
70
+ </ui5-popover>
71
+
72
+ <br>
73
+ <br>
74
+
75
+ <ui5-select>
76
+ <ui5-option>Hello</ui5-option>
77
+ <ui5-option>World</ui5-option>
78
+ </ui5-select>
79
+
80
+ <br>
81
+ <br>
82
+
83
+ <div slot="footer">
84
+ <ui5-button>I am in the footer</ui5-button>
85
+ </div>
86
+ </ui5-popover>
87
+
88
+ <br>
89
+ <br>
90
+ <ui5-button id="btnOpenWithAttr">Open with Attribute</ui5-button>
91
+ <ui5-popover id="popoverAttr" opener="btnOpenWithAttr">
92
+ <ui5-button id="btnCloseWithMethod">Close with Method</ui5-button>
93
+ <ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
94
+ </ui5-popover>
95
+
96
+ <br>
97
+ <br>
98
+
99
+ <ui5-select>
100
+ <ui5-option>Hello</ui5-option>
101
+ <ui5-option>World</ui5-option>
102
+ </ui5-select>
103
+
104
+ <br>
105
+ <br>
106
+
107
+ <ui5-date-picker id="field"></ui5-date-picker>
108
+
109
+ <br>
110
+ <br>
111
+
112
+ <ui5-multi-combobox>
113
+ <ui5-cb-item text="Hello"></ui5-cb-item>
114
+ <ui5-cb-item text="World"></ui5-cb-item>
115
+ </ui5-multi-combobox>
116
+
117
+ <br>
118
+ <br>
119
+
120
+ <ui5-select id="many-items"></ui5-select>
121
+
122
+ <br>
123
+ <br>
124
+
125
+ <ui5-button id="big-popover-button">
126
+ Open Big Popover
127
+ </ui5-button>
128
+
129
+ <ui5-popover placement-type="Bottom" id="big-popover" header-text="hello world">
130
+ <ui5-list id="bigList"></ui5-list>
131
+ </ui5-popover>
132
+
133
+ <ui5-button id="btnPopModal">Opens modal popover!</ui5-button>
134
+
135
+ <ui5-popover id="modalPopover" modal header-text="Modal popover">
136
+ <ui5-list>
137
+ <ui5-li>Hello</ui5-li>
138
+ <ui5-li>Again</ui5-li>
139
+ <ui5-li>Wooooooooooooooooooooooooooooorld</ui5-li>
140
+ </ui5-list>
141
+
142
+ <div slot="footer">
143
+ <ui5-button id="modalPopoverClose">Close</ui5-button>
144
+ </div>
145
+ </ui5-popover>
146
+
147
+ <ui5-button id="btnPopModalNoLayer">Opens modal popover with no block layer!</ui5-button>
148
+
149
+ <ui5-popover id="modalPopoverNoLayer" modal header-text="Modal popover" hide-backdrop>
150
+ <ui5-list>
151
+ <ui5-li>Hello</ui5-li>
152
+ <ui5-li>Again</ui5-li>
153
+ <ui5-li>Wooooooooooooooooooooooooooooorld</ui5-li>
154
+ </ui5-list>
155
+
156
+ <div slot="footer">
157
+ <ui5-button id="modalPopoverNoLayerClose">Close</ui5-button>
158
+ </div>
159
+ </ui5-popover>
160
+
161
+ <ui5-button id="btnPopFocus">Opens popover with initial focus!</ui5-button>
162
+
163
+ <ui5-popover id="popFocus" initial-focus="focusMe" header-text="Popover header">
164
+ <ui5-list>
165
+ <ui5-li>Hello</ui5-li>
166
+ <ui5-li>Again</ui5-li>
167
+ <ui5-li>Wold</ui5-li>
168
+ </ui5-list>
169
+
170
+ <div slot="footer">
171
+ <ui5-button id="focusMe">Close</ui5-button>
172
+ </div>
173
+ </ui5-popover>
174
+
175
+ <br>
176
+ <br>
177
+ <ui5-title>Test open popup and hide opener</ui5-title>
178
+ <ui5-button id="btnQuickViewCardOpener">Open popup and hide myself</ui5-button>
179
+ <ui5-button id="btnMoveFocus">focusable element</ui5-button>
180
+ <br>
181
+ <br>
182
+ <ui5-title>placement-type="Right" (default)</ui5-title>
183
+ <p>No space on the Right, try Left, Bottom, Top</p>
184
+ <ui5-button id="btnFullWidth" class="popover7auto">Click me !</ui5-button>
185
+ <ui5-button id="btnNormalWidth">Click me !</ui5-button>
186
+ <br>
187
+ <br>
188
+ <ui5-title>placement-type="Right" (default) and allow-target-overlap=true </ui5-title>
189
+ <p>No space on the right, try Left, Bottom, Top and if nothing works, the target will be overlapped</p>
190
+ <ui5-button id="btnFullWidthTargetOverlap" class="popover7auto">Click me !</ui5-button>
191
+ <ui5-button id="btnNormalWidthTargetOverlap">Click me !</ui5-button>
192
+
193
+ <br>
194
+ <br>
195
+ <ui5-title>placement-type="Left"</ui5-title>
196
+ <p>No space on the Left, try Right, Bottom, Top</p>
197
+ <ui5-button id="btnFullWidthLeft" class="popover7auto">Click me !</ui5-button>
198
+ <div class="popover13auto">
199
+ <ui5-button id="btnNormalWidthLeft">Click me !</ui5-button>
200
+ </div>
201
+
202
+ <br>
203
+ <br>
204
+ <ui5-title>placement-type="Left" and allow-target-overlap=true</ui5-title>
205
+ <p>No space on the right, try Roght, Bottom, Top and if nothing works, the target will be overlapped</p>
206
+ <ui5-button id="btnFullWidthLeftTargetOverlap" class="popover7auto">Click me !</ui5-button>
207
+ <div class="popover13auto">
208
+ <ui5-button id="btnNormalWidthLeftTargetOverlap">Click me !</ui5-button>
209
+ </div>
210
+
211
+ <br>
212
+ <br>
213
+ <ui5-title>placement-type="Top"</ui5-title>
214
+ <ui5-button id="btnFullWidthTop" class="popover7auto">Click me !</ui5-button>
215
+
216
+ <br>
217
+ <br>
218
+ <ui5-title>placement-type="Bottom"</ui5-title>
219
+ <ui5-button id="btnFullWidthBottom" class="popover7auto">Click me !</ui5-button>
220
+
221
+ <ui5-popover header-text="My Heading" id="popFullWidth" class="popover6auto">
222
+ <div slot="header">
223
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
224
+ </div>
225
+
226
+ <ui5-list>
227
+ <ui5-li>Hello</ui5-li>
228
+ <ui5-li>World</ui5-li>
229
+ <ui5-li>Again</ui5-li>
230
+ </ui5-list>
231
+ </ui5-popover>
232
+
233
+ <ui5-popover allow-target-overlap header-text="My Heading" id="popFullWidthTargetOverlap" class="popover6auto" >
234
+ <div slot="header">
235
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
236
+ </div>
237
+
238
+ <ui5-list>
239
+ <ui5-li>Hello</ui5-li>
240
+ <ui5-li>World</ui5-li>
241
+ <ui5-li>Again</ui5-li>
242
+ </ui5-list>
243
+ </ui5-popover>
244
+
245
+
246
+ <ui5-popover header-text="My Heading" id="popFullWidthLeft" class="popover6auto" placement-type="Left">
247
+ <div slot="header">
248
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
249
+ </div>
250
+
251
+ <ui5-list>
252
+ <ui5-li>Hello</ui5-li>
253
+ <ui5-li>World</ui5-li>
254
+ <ui5-li>Again</ui5-li>
255
+ </ui5-list>
256
+ </ui5-popover>
257
+
258
+ <ui5-popover header-text="My Heading" id="popFullWidthLeftTargetOverlap" class="popover6auto" placement-type="Left" allow-target-overlap>
259
+ <div slot="header">
260
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
261
+ </div>
262
+
263
+ <ui5-list>
264
+ <ui5-li>Hello</ui5-li>
265
+ <ui5-li>World</ui5-li>
266
+ <ui5-li>Again</ui5-li>
267
+ </ui5-list>
268
+ </ui5-popover>
269
+
270
+
271
+ <ui5-popover header-text="My Heading" id="popFullWidthTop" class="popover6auto" placement-type="Top">
272
+ <div slot="header">
273
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
274
+ </div>
275
+
276
+ <ui5-list>
277
+ <ui5-li>Hello</ui5-li>
278
+ <ui5-li>World</ui5-li>
279
+ <ui5-li>Again</ui5-li>
280
+ </ui5-list>
281
+ </ui5-popover>
282
+
283
+ <ui5-popover header-text="My Heading" id="popFullWidthBottom" class="popover6auto" placement-type="Bottom">
284
+ <div slot="header">
285
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
286
+ </div>
287
+
288
+ <ui5-list>
289
+ <ui5-li>Hello</ui5-li>
290
+ <ui5-li>World</ui5-li>
291
+ <ui5-li>Again</ui5-li>
292
+ </ui5-list>
293
+ </ui5-popover>
294
+
295
+
296
+ <ui5-popover id="quickViewCard" placement-type="Right" height="500px">
297
+ <ui5-input id="searchInput" class="popover6auto">
298
+ <ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
299
+ </ui5-input>
300
+ <ui5-list class="popover8auto">
301
+ <ui5-li-groupheader>Actions</ui5-li-groupheader>
302
+ <ui5-li>Delete Product</ui5-li>
303
+ <ui5-li>Audit Log Settings</ui5-li>
304
+ <ui5-li>OData API Audit</ui5-li>
305
+ <ui5-li-groupheader>Products</ui5-li-groupheader>
306
+ <ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Error">Laptop Lenovo</ui5-li>
307
+ <ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Error">IPhone 3</ui5-li>
308
+ <ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Reuqired" additional-text-state="Error">HP Monitor 24</ui5-li>
309
+ </ui5-list>
310
+ </ui5-popover>
311
+
312
+ <br>
313
+ <br>
314
+ <div id="targetOpener" class="popover9auto"></div>
315
+
316
+ <ui5-button id="btnOpenXLeft">Open Popup Left aligned</ui5-button>
317
+
318
+ <ui5-popover
319
+ header-text="My Heading"
320
+ id="popXLeft" horizontal-align="Left"
321
+ class="popover6auto">
322
+ <div slot="header">
323
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
324
+ </div>
325
+ <div>
326
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
327
+ </div>
328
+ <div>
329
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
330
+ </div>
331
+ </ui5-popover>
332
+
333
+ <div id="targetOpener2" class="popover10auto"></div>
334
+
335
+ <ui5-button id="btnOpenXRight">Open Popup Right aligned</ui5-button>
336
+
337
+ <ui5-popover
338
+ header-text="My Heading"
339
+ id="popXRight" horizontal-align="Right"
340
+ class="popover6auto">
341
+ <div slot="header">
342
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
343
+ </div>
344
+ <div>
345
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
346
+ </div>
347
+ <div>
348
+ <ui5-button id="first-focusable">I am in the header</ui5-button>
349
+ </div>
350
+ </ui5-popover>
351
+
352
+ <div class="popover11auto">
353
+ <p>Right-aligned Popover, wider than button, arrow should be centered on the button</p>
354
+ <ui5-button id="btnOpenXRightWide">Open</ui5-button>
355
+ </div>
356
+
357
+ <ui5-popover id="popXRightWide" placement-type="Bottom" horizontal-align="Right">
358
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni architecto tenetur quia nam reprehenderit quas eveniet possimus similique quisquam culpa distinctio ex doloremque molestiae maxime sed harum, in exercitationem! Incidunt?
359
+ </ui5-popover>
360
+
361
+ <br>
362
+ <br>
363
+
364
+ <ui5-button id="firstBtn">First button</ui5-button>
365
+ <ui5-button id="secondBtn">Second button</ui5-button>
366
+ <ui5-popover id="popNoFocusableContent" placement-type="Bottom">Sample text for the ui5-popover</ui5-popover>
367
+
368
+ <br>
369
+ <br>
370
+
371
+ <div class="popover12auto">
372
+ <ui5-button id="btnOpenDynamic" icon="overflow"></ui5-button>
373
+ </div>
374
+
375
+ <br>
376
+
377
+ <ui5-button id="btnOpenPopoverWithDiv">Open Popover with div Inside</ui5-button>
378
+
379
+ <ui5-popover id="popWithDiv" header-text="Newsletter subscription" modal>
380
+ <div id="divContent">I'm a div, which can't get focus. Click me and see where focus goes.</div>
381
+ <div slot="footer" class="popover-footer">
382
+ <ui5-button design="Emphasized">Subscribe</ui5-button>
383
+ </div>
384
+ </ui5-popover>
385
+
386
+ <div class="popover13auto">
387
+ <ui5-button id="btnRightEdge">Popover on right edge of screen</ui5-button>
388
+ </div>
389
+
390
+ <ui5-popover header-text="Header" id="popoverRightEdge" placement-type="Top">
391
+ <ui5-label>Input field: </ui5-label>
392
+ <ui5-input></ui5-input>
393
+ </ui5-popover>
394
+
395
+ <br>
396
+ <br>
397
+
398
+ <ui5-button id="btnAccNameRef">Popover with accessibleNameRef</ui5-button>
399
+ <ui5-label id="lblAccNameRef">Some label</ui5-label>
400
+ <ui5-popover id="popAccNameRef" accessible-name-ref="lblAccNameRef" header-text="Header text">
401
+ <span>Hello world</span>
402
+ </ui5-popover>
403
+
404
+ <br>
405
+ <br>
406
+
407
+ <ui5-button id="openChainedPopover1">Open chained popover 1</ui5-button>
408
+ <ui5-popover id="chainedPopover1">
409
+ Chained Popover 1
410
+ <ui5-list id="openChainedPopover2List">
411
+ <ui5-li>Open chained popover 2</ui5-li>
412
+ </ui5-list>
413
+ </ui5-popover>
414
+ <ui5-popover id="chainedPopover2" placement-type="Bottom">
415
+ Chained Popover 2
416
+ <ui5-button id="closeChainedPopover2">Close chained popover 2</ui5-button>
417
+ </ui5-popover>
418
+
419
+ <script>
420
+ btn.addEventListener("click", function (event) {
421
+ pop.showAt(btn);
422
+ });
423
+
424
+ btnOpenWithAttr.addEventListener("click", function () {
425
+ popoverAttr.setAttribute("open", "");
426
+ });
427
+
428
+ btnCloseWithMethod.addEventListener("click", function () {
429
+ popoverAttr.close();
430
+ });
431
+
432
+ btnCloseWithAttr.addEventListener("click", function () {
433
+ popoverAttr.removeAttribute("open");
434
+ });
435
+
436
+ popbtn.addEventListener("click", function (event) {
437
+ danger.showAt(popbtn);
438
+ });
439
+
440
+ bigDanger.addEventListener("click", function (event) {
441
+ bigDangerPop.showAt(bigDanger);
442
+ });
443
+
444
+ btnPopModal.addEventListener("click", function (event) {
445
+ modalPopover.showAt(btnPopModal);
446
+ });
447
+
448
+ btnPopModalNoLayer.addEventListener("click", function() {
449
+ modalPopoverNoLayer.showAt(btnPopModalNoLayer);
450
+ });
451
+
452
+ modalPopoverNoLayerClose.addEventListener("click", function() {
453
+ modalPopoverNoLayer.close();
454
+ });
455
+
456
+ modalPopoverClose.addEventListener("click", function (event) {
457
+ modalPopover.close();
458
+ });
459
+
460
+ btnPopFocus.addEventListener("click", function (event) {
461
+ popFocus.showAt(btnPopFocus);
462
+ });
463
+
464
+ document.getElementById("many-items").innerHTML = [].map.call("Ullamco ea ad fugiat enim elit dolore ullamco ad magna excepteur cupidatat.", function (item, index) {
465
+ return "<ui5-option>" + item + "</ui5-option>";
466
+ }).join("");
467
+
468
+ document.getElementById("bigList").innerHTML = [].map.call("Ullamco ea ad fugiat enim elit dolore ullamco ad magna excepteur cupidatat.", function (item, index) {
469
+ return "<ui5-li>" + item + "</ui5-li>";
470
+ }).join("");
471
+
472
+ document.getElementById("big-popover-button").addEventListener("click", function (event) {
473
+ document.getElementById("big-popover").showAt(event.target);
474
+ });
475
+
476
+ btnFullWidth.addEventListener("click", function (event) {
477
+ popFullWidth.showAt(btnFullWidth);
478
+ });
479
+ btnNormalWidth.addEventListener("click", function (event) {
480
+ popFullWidth.showAt(btnNormalWidth);
481
+ });
482
+
483
+ btnFullWidthTargetOverlap.addEventListener("click", function (event) {
484
+ popFullWidthTargetOverlap.showAt(btnFullWidthTargetOverlap);
485
+ });
486
+ btnNormalWidthTargetOverlap.addEventListener("click", function (event) {
487
+ popFullWidthTargetOverlap.showAt(btnNormalWidthTargetOverlap);
488
+ });
489
+
490
+ btnFullWidthLeft.addEventListener("click", function (event) {
491
+ popFullWidthLeft.showAt(btnFullWidthLeft);
492
+ });
493
+ btnNormalWidthLeft.addEventListener("click", function (event) {
494
+ popFullWidthLeft.showAt(btnNormalWidthLeft);
495
+ });
496
+
497
+ btnFullWidthLeftTargetOverlap.addEventListener("click", function (event) {
498
+ popFullWidthLeftTargetOverlap.showAt(btnFullWidthLeftTargetOverlap);
499
+ });
500
+ btnNormalWidthLeftTargetOverlap.addEventListener("click", function (event) {
501
+ popFullWidthLeftTargetOverlap.showAt(btnNormalWidthLeftTargetOverlap);
502
+ });
503
+
504
+ btnFullWidthTop.addEventListener("click", function (event) {
505
+ popFullWidthTop.showAt(btnFullWidthTop);
506
+ });
507
+
508
+ btnFullWidthBottom.addEventListener("click", function (event) {
509
+ popFullWidthBottom.showAt(btnFullWidthBottom);
510
+ });
511
+
512
+ btnQuickViewCardOpener.addEventListener("click", function (event) {
513
+ quickViewCard.showAt(btnQuickViewCardOpener);
514
+
515
+ btnQuickViewCardOpener.setAttribute("hidden", true);
516
+ })
517
+ btnOpenXLeft.addEventListener("click", function (event) {
518
+ popXLeft.showAt(targetOpener);
519
+ });
520
+ btnOpenXRight.addEventListener("click", function (event) {
521
+ popXRight.showAt(targetOpener2);
522
+ });
523
+
524
+ firstBtn.addEventListener("click", function (event) {
525
+ popNoFocusableContent.innerHTML = "First button is clicked";
526
+ popNoFocusableContent.showAt(event.target);
527
+ });
528
+
529
+ secondBtn.addEventListener("click", function (event) {
530
+ popNoFocusableContent.innerHTML = "Second button is clicked";
531
+ popNoFocusableContent.showAt(event.target);
532
+ });
533
+
534
+ btnOpenDynamic.addEventListener("click", function () {
535
+ var popover = document.createElement("ui5-popover"),
536
+ button = document.createElement("ui5-button");
537
+
538
+ button.textContent = "Focusable element";
539
+ popover.appendChild(button);
540
+ popover.setAttribute("id", "dynamic-popover");
541
+ popover.setAttribute("placement-type", "Bottom");
542
+
543
+ document.body.appendChild(popover);
544
+
545
+ popover.showAt(btnOpenDynamic);
546
+ });
547
+
548
+ btnOpenPopoverWithDiv.addEventListener("click", function (event) {
549
+ popWithDiv.showAt(event.target);
550
+ });
551
+
552
+ btnOpenXRightWide.addEventListener("click", function () {
553
+ popXRightWide.showAt(btnOpenXRightWide);
554
+ });
555
+
556
+ btnRightEdge.addEventListener("click", function () {
557
+ popoverRightEdge.showAt(btnRightEdge);
558
+ });
559
+
560
+ btnAccNameRef.addEventListener("click", function () {
561
+ popAccNameRef.showAt(btnAccNameRef);
562
+ });
563
+
564
+ openChainedPopover1.addEventListener("click", function () {
565
+ chainedPopover1.showAt(openChainedPopover1);
566
+ });
567
+
568
+ openChainedPopover2List.addEventListener("ui5-item-click", function () {
569
+ chainedPopover1.close();
570
+ chainedPopover2.showAt(openChainedPopover1);
571
+ });
572
+
573
+ closeChainedPopover2.addEventListener("click", function () {
574
+ chainedPopover2.close();
575
+ });
576
+
577
+ chainedPopover2.addEventListener("after-close", function () {
578
+ var toast = document.createElement("ui5-toast");
579
+ toast.appendChild(document.createTextNode("Closed chained popover 2"));
580
+ document.body.appendChild(toast);
581
+ toast.show();
582
+ });
583
+ </script>
584
+ </body>
585
+
586
+ </html>
package/dist/test/pages/PopoverArrowBounds.html ADDED
@@ -0,0 +1,52 @@
1
+ <!DOCTYPE html>
2
+ <html class="popover1auto">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
+ <title>PopoverArrowBounds</title>
8
+
9
+ <script data-ui5-config type="application/json">
10
+ {
11
+ "language": "EN"
12
+ }
13
+ </script>
14
+
15
+
16
+
17
+
18
+ <script type="module" crossorigin src="/assets/bundle.common.33be618c.js"></script>
19
+ <link rel="stylesheet" href="/assets/test/pages/PopoverArrowBounds.html.c1e5feb1.css">
20
+ </head>
21
+
22
+ <body class="sapUiSizeCompact">
23
+ <ui5-button id="myBtn1" data-placement-type="Left" class="myBtn">1</ui5-button>
24
+ <ui5-button id="myBtn2" data-placement-type="Left" data-vertical-align="Top" class="myBtn">2</ui5-button>
25
+ <ui5-button id="myBtn3" data-placement-type="Bottom" class="myBtn">3</ui5-button>
26
+ <ui5-button id="myBtn4" data-placement-type="Top" class="myBtn">4</ui5-button>
27
+ <ui5-button id="myBtn5" data-placement-type="Left" class="myBtn">5</ui5-button>
28
+ <ui5-button id="myBtn6" data-placement-type="Left" class="myBtn">6</ui5-button>
29
+
30
+ <ui5-toggle-button id="customSizeBtn">Bigger Popover</ui5-toggle-button>
31
+
32
+ <ui5-popover id="myPopover">My Popover</ui5-popover>
33
+
34
+ <script>
35
+ var myPopover = document.getElementById("myPopover");
36
+
37
+ Array.from(document.querySelectorAll(".myBtn")).forEach(function (btn) {
38
+ btn.addEventListener("click", function() {
39
+ myPopover.placementType = btn.dataset.placementType;
40
+ myPopover.verticalAlign = btn.dataset.verticalAlign;
41
+ myPopover.showAt(btn);
42
+ });
43
+ });
44
+
45
+ var customSizeBtn = document.getElementById("customSizeBtn");
46
+ customSizeBtn.addEventListener("click", function (event) {
47
+ myPopover.classList.toggle("customSize");
48
+ })
49
+ </script>
50
+ </body>
51
+
52
+ </html>