@ui5/webcomponents 0.0.0-bef62af04 → 0.0.0-c638668a1

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 (1073) hide show
  1. package/CHANGELOG.md +332 -0
  2. package/README.md +144 -50
  3. package/customI18n.js +50 -0
  4. package/dist/Assets-static.js +1 -1
  5. package/dist/Assets.js +1 -1
  6. package/dist/Avatar.js +12 -15
  7. package/dist/AvatarGroup.js +9 -11
  8. package/dist/Badge.js +18 -9
  9. package/dist/Breadcrumbs.js +25 -10
  10. package/dist/BreadcrumbsItem.js +4 -10
  11. package/dist/BusyIndicator.js +5 -8
  12. package/dist/Button.js +36 -12
  13. package/dist/Calendar.js +109 -8
  14. package/dist/CalendarHeader.js +51 -15
  15. package/dist/Card.js +37 -24
  16. package/dist/CardHeader.js +30 -14
  17. package/dist/Carousel.js +18 -12
  18. package/dist/CheckBox.js +81 -9
  19. package/dist/ColorPalette.js +223 -17
  20. package/dist/ColorPaletteItem.js +22 -4
  21. package/dist/ColorPalettePopover.js +244 -0
  22. package/dist/ColorPicker.js +15 -10
  23. package/dist/ComboBox.js +287 -78
  24. package/dist/ComboBoxGroupItem.js +1 -0
  25. package/dist/DateComponentBase.js +22 -13
  26. package/dist/DatePicker.js +35 -10
  27. package/dist/DateRangePicker.js +23 -1
  28. package/dist/DateTimePicker.js +7 -9
  29. package/dist/DayPicker.js +43 -7
  30. package/dist/Dialog.js +17 -26
  31. package/dist/DurationPicker.js +2 -2
  32. package/dist/FileUploader.js +33 -20
  33. package/dist/GroupHeaderListItem.js +7 -11
  34. package/dist/Icon.js +30 -20
  35. package/dist/Input.js +259 -87
  36. package/dist/Interfaces.js +10 -0
  37. package/dist/Label.js +1 -1
  38. package/dist/Link.js +36 -19
  39. package/dist/List.js +77 -27
  40. package/dist/ListItem.js +29 -12
  41. package/dist/MessageStrip.js +56 -19
  42. package/dist/MultiComboBox.js +283 -78
  43. package/dist/MultiComboBoxItem.js +4 -10
  44. package/dist/MultiInput.js +57 -11
  45. package/dist/Option.js +15 -10
  46. package/dist/Panel.js +33 -13
  47. package/dist/Popover.js +137 -66
  48. package/dist/Popup.js +40 -27
  49. package/dist/ProgressIndicator.js +21 -10
  50. package/dist/RadioButton.js +69 -9
  51. package/dist/RangeSlider.js +19 -21
  52. package/dist/RatingIndicator.js +44 -15
  53. package/dist/ResponsivePopover.js +20 -38
  54. package/dist/SegmentedButton.js +25 -9
  55. package/dist/SegmentedButtonItem.js +8 -11
  56. package/dist/Select.js +89 -62
  57. package/dist/Slider.js +20 -21
  58. package/dist/SliderBase.js +13 -13
  59. package/dist/SplitButton.js +425 -0
  60. package/dist/StepInput.js +13 -11
  61. package/dist/SuggestionItem.js +2 -2
  62. package/dist/Switch.js +33 -10
  63. package/dist/Tab.js +40 -17
  64. package/dist/TabContainer.js +495 -118
  65. package/dist/TabSeparator.js +42 -3
  66. package/dist/Table.js +23 -11
  67. package/dist/TableGroupRow.js +12 -5
  68. package/dist/TableRow.js +8 -14
  69. package/dist/TextArea.js +40 -22
  70. package/dist/TimePicker.js +3 -3
  71. package/dist/TimePickerBase.js +12 -7
  72. package/dist/TimeSelection.js +9 -10
  73. package/dist/Toast.js +11 -0
  74. package/dist/ToggleButton.js +15 -0
  75. package/dist/Token.js +25 -11
  76. package/dist/Tokenizer.js +151 -21
  77. package/dist/Tree.js +38 -0
  78. package/dist/TreeItem.js +21 -0
  79. package/dist/TreeListItem.js +22 -21
  80. package/dist/WheelSlider.js +9 -9
  81. package/dist/YearPicker.js +1 -0
  82. package/dist/api.json +514 -129
  83. package/dist/css/themes/Avatar.css +1 -0
  84. package/dist/css/themes/AvatarGroup.css +1 -0
  85. package/dist/css/themes/Badge.css +1 -0
  86. package/dist/css/themes/Breadcrumbs.css +1 -0
  87. package/dist/css/themes/BreadcrumbsPopover.css +1 -0
  88. package/dist/css/themes/BrowserScrollbar.css +1 -0
  89. package/dist/css/themes/BusyIndicator.css +1 -0
  90. package/dist/css/themes/Button.css +1 -0
  91. package/dist/css/themes/Button.ie11.css +1 -0
  92. package/dist/css/themes/Calendar.css +1 -0
  93. package/dist/css/themes/CalendarHeader.css +1 -0
  94. package/dist/css/themes/Card.css +1 -0
  95. package/dist/css/themes/CardHeader.css +1 -0
  96. package/dist/css/themes/Carousel.css +1 -0
  97. package/dist/css/themes/CheckBox.css +1 -0
  98. package/dist/css/themes/ColorPalette.css +1 -0
  99. package/dist/css/themes/ColorPaletteItem.css +1 -0
  100. package/dist/css/themes/ColorPalettePopover.css +1 -0
  101. package/dist/css/themes/ColorPaletteStaticArea.css +1 -0
  102. package/dist/css/themes/ColorPicker.css +1 -0
  103. package/dist/css/themes/ComboBox.css +1 -0
  104. package/dist/css/themes/ComboBoxPopover.css +1 -0
  105. package/dist/css/themes/CustomListItem.css +1 -0
  106. package/dist/css/themes/DatePicker.css +1 -0
  107. package/dist/css/themes/DatePickerPopover.css +1 -0
  108. package/dist/css/themes/DateRangePicker.css +1 -0
  109. package/dist/css/themes/DateTimePicker.css +1 -0
  110. package/dist/css/themes/DateTimePickerPopover.css +1 -0
  111. package/dist/css/themes/DayPicker.css +1 -0
  112. package/dist/css/themes/Dialog.css +1 -0
  113. package/dist/css/themes/FileUploader.css +1 -0
  114. package/dist/css/themes/GroupHeaderListItem.css +1 -0
  115. package/dist/css/themes/GrowingButton.css +1 -0
  116. package/dist/css/themes/Icon.css +1 -0
  117. package/dist/css/themes/Input.css +1 -0
  118. package/dist/css/themes/InputIcon.css +1 -0
  119. package/dist/css/themes/InvisibleTextStyles.css +1 -0
  120. package/dist/css/themes/Label.css +1 -0
  121. package/dist/css/themes/Link.css +1 -0
  122. package/dist/css/themes/List.css +1 -0
  123. package/dist/css/themes/ListItem.css +1 -0
  124. package/dist/css/themes/ListItemBase.css +1 -0
  125. package/dist/css/themes/MessageStrip.css +1 -0
  126. package/dist/css/themes/MonthPicker.css +1 -0
  127. package/dist/css/themes/MultiComboBox.css +1 -0
  128. package/dist/css/themes/MultiInput.css +1 -0
  129. package/dist/css/themes/Panel.css +1 -0
  130. package/dist/css/themes/Popover.css +1 -0
  131. package/dist/css/themes/Popup.css +1 -0
  132. package/dist/css/themes/PopupGlobal.css +1 -0
  133. package/dist/css/themes/PopupStaticAreaStyles.css +1 -0
  134. package/dist/css/themes/PopupsCommon.css +1 -0
  135. package/dist/css/themes/ProgressIndicator.css +1 -0
  136. package/dist/css/themes/RadioButton.css +1 -0
  137. package/dist/css/themes/RatingIndicator.css +1 -0
  138. package/dist/css/themes/ResponsivePopover.css +1 -0
  139. package/dist/css/themes/ResponsivePopoverCommon.css +1 -0
  140. package/dist/css/themes/SegmentedButton.css +1 -0
  141. package/dist/css/themes/Select.css +1 -0
  142. package/dist/css/themes/SelectPopover.css +1 -0
  143. package/dist/css/themes/SliderBase.css +1 -0
  144. package/dist/css/themes/SplitButton.css +1 -0
  145. package/dist/css/themes/StepInput.css +1 -0
  146. package/dist/css/themes/Suggestions.css +1 -0
  147. package/dist/css/themes/Switch.css +1 -0
  148. package/dist/css/themes/Tab.css +1 -0
  149. package/dist/css/themes/TabContainer.css +1 -0
  150. package/dist/css/themes/TabInOverflow.css +1 -0
  151. package/dist/css/themes/TabInStrip.css +1 -0
  152. package/dist/css/themes/TabSeparatorInOverflow.css +1 -0
  153. package/dist/css/themes/TabSeparatorInStrip.css +1 -0
  154. package/dist/css/themes/Table.css +1 -0
  155. package/dist/css/themes/TableCell.css +1 -0
  156. package/dist/css/themes/TableColumn.css +1 -0
  157. package/dist/css/themes/TableGroupRow.css +1 -0
  158. package/dist/css/themes/TableRow.css +1 -0
  159. package/dist/css/themes/TapHighlightColor.css +1 -0
  160. package/dist/css/themes/TextArea.css +1 -0
  161. package/dist/css/themes/TimePicker.css +1 -0
  162. package/dist/css/themes/TimePickerPopover.css +1 -0
  163. package/dist/css/themes/TimeSelection.css +1 -0
  164. package/dist/css/themes/Title.css +1 -0
  165. package/dist/css/themes/Toast.css +1 -0
  166. package/dist/css/themes/ToggleButton.css +1 -0
  167. package/dist/css/themes/ToggleButton.ie11.css +1 -0
  168. package/dist/css/themes/Token.css +1 -0
  169. package/dist/css/themes/Tokenizer.css +1 -0
  170. package/dist/css/themes/Tree.css +1 -0
  171. package/dist/css/themes/TreeListItem.css +1 -0
  172. package/dist/css/themes/ValueStateMessage.css +1 -0
  173. package/dist/css/themes/WheelSlider.css +1 -0
  174. package/dist/css/themes/YearPicker.css +1 -0
  175. package/dist/css/themes/sap_belize/parameters-bundle.css +1 -0
  176. package/dist/css/themes/sap_belize_hcb/parameters-bundle.css +1 -0
  177. package/dist/css/themes/sap_belize_hcw/parameters-bundle.css +1 -0
  178. package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -0
  179. package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -0
  180. package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -0
  181. package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -0
  182. package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -0
  183. package/dist/css/themes/sap_horizon_exp/parameters-bundle.css +1 -0
  184. package/dist/features/ColorPaletteMoreColors.js +7 -7
  185. package/dist/features/InputSuggestions.js +200 -49
  186. package/dist/generated/assets/i18n/messagebundle_ar.json +1 -1
  187. package/dist/generated/assets/i18n/messagebundle_bg.json +1 -1
  188. package/dist/generated/assets/i18n/messagebundle_ca.json +1 -1
  189. package/dist/generated/assets/i18n/messagebundle_cs.json +1 -1
  190. package/dist/generated/assets/i18n/messagebundle_cy.json +1 -1
  191. package/dist/generated/assets/i18n/messagebundle_da.json +1 -1
  192. package/dist/generated/assets/i18n/messagebundle_de.json +1 -1
  193. package/dist/generated/assets/i18n/messagebundle_el.json +1 -1
  194. package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
  195. package/dist/generated/assets/i18n/messagebundle_en_GB.json +1 -1
  196. package/dist/generated/assets/i18n/messagebundle_en_US_sappsd.json +1 -1
  197. package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
  198. package/dist/generated/assets/i18n/messagebundle_en_US_saptrc.json +1 -1
  199. package/dist/generated/assets/i18n/messagebundle_es.json +1 -1
  200. package/dist/generated/assets/i18n/messagebundle_es_MX.json +1 -1
  201. package/dist/generated/assets/i18n/messagebundle_et.json +1 -1
  202. package/dist/generated/assets/i18n/messagebundle_fi.json +1 -1
  203. package/dist/generated/assets/i18n/messagebundle_fr.json +1 -1
  204. package/dist/generated/assets/i18n/messagebundle_fr_CA.json +1 -1
  205. package/dist/generated/assets/i18n/messagebundle_hi.json +1 -1
  206. package/dist/generated/assets/i18n/messagebundle_hr.json +1 -1
  207. package/dist/generated/assets/i18n/messagebundle_hu.json +1 -1
  208. package/dist/generated/assets/i18n/messagebundle_it.json +1 -1
  209. package/dist/generated/assets/i18n/messagebundle_iw.json +1 -1
  210. package/dist/generated/assets/i18n/messagebundle_ja.json +1 -1
  211. package/dist/generated/assets/i18n/messagebundle_kk.json +1 -1
  212. package/dist/generated/assets/i18n/messagebundle_ko.json +1 -1
  213. package/dist/generated/assets/i18n/messagebundle_lt.json +1 -1
  214. package/dist/generated/assets/i18n/messagebundle_lv.json +1 -1
  215. package/dist/generated/assets/i18n/messagebundle_ms.json +1 -1
  216. package/dist/generated/assets/i18n/messagebundle_nl.json +1 -1
  217. package/dist/generated/assets/i18n/messagebundle_no.json +1 -1
  218. package/dist/generated/assets/i18n/messagebundle_pl.json +1 -1
  219. package/dist/generated/assets/i18n/messagebundle_pt.json +1 -1
  220. package/dist/generated/assets/i18n/messagebundle_pt_PT.json +1 -1
  221. package/dist/generated/assets/i18n/messagebundle_ro.json +1 -1
  222. package/dist/generated/assets/i18n/messagebundle_ru.json +1 -1
  223. package/dist/generated/assets/i18n/messagebundle_sh.json +1 -1
  224. package/dist/generated/assets/i18n/messagebundle_sk.json +1 -1
  225. package/dist/generated/assets/i18n/messagebundle_sl.json +1 -1
  226. package/dist/generated/assets/i18n/messagebundle_sv.json +1 -1
  227. package/dist/generated/assets/i18n/messagebundle_th.json +1 -1
  228. package/dist/generated/assets/i18n/messagebundle_tr.json +1 -1
  229. package/dist/generated/assets/i18n/messagebundle_uk.json +1 -1
  230. package/dist/generated/assets/i18n/messagebundle_vi.json +1 -1
  231. package/dist/generated/assets/i18n/messagebundle_zh_CN.json +1 -1
  232. package/dist/generated/assets/i18n/messagebundle_zh_TW.json +1 -1
  233. package/dist/generated/assets/themes/sap_belize/parameters-bundle.css.json +1 -1
  234. package/dist/generated/assets/themes/sap_belize_hcb/parameters-bundle.css.json +1 -1
  235. package/dist/generated/assets/themes/sap_belize_hcw/parameters-bundle.css.json +1 -1
  236. package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
  237. package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
  238. package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
  239. package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
  240. package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -0
  241. package/dist/generated/assets/themes/sap_horizon_exp/parameters-bundle.css.json +1 -0
  242. package/dist/generated/i18n/i18n-defaults.js +2 -2
  243. package/dist/generated/json-imports/Themes-static.js +6 -2
  244. package/dist/generated/json-imports/Themes.js +3 -1
  245. package/dist/generated/templates/BadgeTemplate.lit.js +1 -1
  246. package/dist/generated/templates/BreadcrumbsPopoverTemplate.lit.js +1 -1
  247. package/dist/generated/templates/BreadcrumbsTemplate.lit.js +1 -1
  248. package/dist/generated/templates/BusyIndicatorTemplate.lit.js +2 -2
  249. package/dist/generated/templates/ButtonTemplate.lit.js +1 -1
  250. package/dist/generated/templates/CalendarHeaderTemplate.lit.js +3 -1
  251. package/dist/generated/templates/CalendarTemplate.lit.js +1 -1
  252. package/dist/generated/templates/CardHeaderTemplate.lit.js +2 -2
  253. package/dist/generated/templates/CardTemplate.lit.js +1 -1
  254. package/dist/generated/templates/CarouselTemplate.lit.js +1 -1
  255. package/dist/generated/templates/CheckBoxTemplate.lit.js +1 -1
  256. package/dist/generated/templates/ColorPaletteItemTemplate.lit.js +1 -1
  257. package/dist/generated/templates/ColorPalettePopoverTemplate.lit.js +8 -0
  258. package/dist/generated/templates/ColorPaletteTemplate.lit.js +6 -5
  259. package/dist/generated/templates/ColorPickerTemplate.lit.js +1 -1
  260. package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js +3 -3
  261. package/dist/generated/templates/ComboBoxTemplate.lit.js +4 -3
  262. package/dist/generated/templates/CustomListItemTemplate.lit.js +5 -5
  263. package/dist/generated/templates/DatePickerPopoverTemplate.lit.js +1 -1
  264. package/dist/generated/templates/DateTimePickerPopoverTemplate.lit.js +2 -2
  265. package/dist/generated/templates/DayPickerTemplate.lit.js +9 -8
  266. package/dist/generated/templates/DialogTemplate.lit.js +1 -1
  267. package/dist/generated/templates/FileUploaderPopoverTemplate.lit.js +1 -1
  268. package/dist/generated/templates/FileUploaderTemplate.lit.js +1 -1
  269. package/dist/generated/templates/GroupHeaderListItemTemplate.lit.js +1 -1
  270. package/dist/generated/templates/InputPopoverTemplate.lit.js +4 -4
  271. package/dist/generated/templates/InputTemplate.lit.js +6 -5
  272. package/dist/generated/templates/LinkTemplate.lit.js +1 -1
  273. package/dist/generated/templates/ListItemTemplate.lit.js +5 -5
  274. package/dist/generated/templates/ListTemplate.lit.js +3 -3
  275. package/dist/generated/templates/MessageStripTemplate.lit.js +4 -4
  276. package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js +13 -10
  277. package/dist/generated/templates/MultiComboBoxTemplate.lit.js +4 -3
  278. package/dist/generated/templates/MultiInputTemplate.lit.js +7 -6
  279. package/dist/generated/templates/PanelTemplate.lit.js +1 -1
  280. package/dist/generated/templates/PopupBlockLayerTemplate.lit.js +1 -1
  281. package/dist/generated/templates/ProgressIndicatorTemplate.lit.js +9 -5
  282. package/dist/generated/templates/RadioButtonTemplate.lit.js +1 -1
  283. package/dist/generated/templates/RangeSliderTemplate.lit.js +1 -1
  284. package/dist/generated/templates/RatingIndicatorTemplate.lit.js +3 -1
  285. package/dist/generated/templates/ResponsivePopoverTemplate.lit.js +10 -9
  286. package/dist/generated/templates/SegmentedButtonTemplate.lit.js +1 -1
  287. package/dist/generated/templates/SelectPopoverTemplate.lit.js +5 -5
  288. package/dist/generated/templates/SelectTemplate.lit.js +1 -1
  289. package/dist/generated/templates/SliderBaseTemplate.lit.js +1 -1
  290. package/dist/generated/templates/SliderTemplate.lit.js +1 -1
  291. package/dist/generated/templates/SplitButtonTemplate.lit.js +7 -0
  292. package/dist/generated/templates/StandardListItemTemplate.lit.js +5 -5
  293. package/dist/generated/templates/StepInputTemplate.lit.js +4 -2
  294. package/dist/generated/templates/SuggestionListItemTemplate.lit.js +5 -5
  295. package/dist/generated/templates/SwitchTemplate.lit.js +4 -2
  296. package/dist/generated/templates/TabContainerPopoverTemplate.lit.js +4 -2
  297. package/dist/generated/templates/TabContainerTemplate.lit.js +9 -10
  298. package/dist/generated/templates/TabInOverflowTemplate.lit.js +1 -1
  299. package/dist/generated/templates/TabInStripTemplate.lit.js +2 -4
  300. package/dist/generated/templates/TabSeparatorInOverflowTemplate.lit.js +7 -0
  301. package/dist/generated/templates/TabSeparatorInStripTemplate.lit.js +7 -0
  302. package/dist/generated/templates/TableTemplate.lit.js +2 -2
  303. package/dist/generated/templates/TextAreaPopoverTemplate.lit.js +1 -1
  304. package/dist/generated/templates/TimePickerPopoverTemplate.lit.js +1 -1
  305. package/dist/generated/templates/TimePickerTemplate.lit.js +1 -1
  306. package/dist/generated/templates/TimeSelectionTemplate.lit.js +1 -1
  307. package/dist/generated/templates/ToastTemplate.lit.js +2 -1
  308. package/dist/generated/templates/ToggleButtonTemplate.lit.js +1 -1
  309. package/dist/generated/templates/TokenTemplate.lit.js +1 -1
  310. package/dist/generated/templates/TreeListItemTemplate.lit.js +5 -5
  311. package/dist/generated/templates/TreeTemplate.lit.js +1 -1
  312. package/dist/generated/templates/WheelSliderTemplate.lit.js +2 -2
  313. package/dist/generated/themes/Avatar.css.js +3 -3
  314. package/dist/generated/themes/AvatarGroup.css.js +3 -3
  315. package/dist/generated/themes/Badge.css.js +3 -3
  316. package/dist/generated/themes/Breadcrumbs.css.js +3 -3
  317. package/dist/generated/themes/BreadcrumbsPopover.css.js +3 -3
  318. package/dist/generated/themes/BrowserScrollbar.css.js +3 -3
  319. package/dist/generated/themes/BusyIndicator.css.js +3 -3
  320. package/dist/generated/themes/Button.css.js +3 -3
  321. package/dist/generated/themes/Button.ie11.css.js +3 -3
  322. package/dist/generated/themes/Calendar.css.js +3 -3
  323. package/dist/generated/themes/CalendarHeader.css.js +3 -3
  324. package/dist/generated/themes/Card.css.js +3 -3
  325. package/dist/generated/themes/CardHeader.css.js +3 -3
  326. package/dist/generated/themes/Carousel.css.js +3 -3
  327. package/dist/generated/themes/CheckBox.css.js +3 -3
  328. package/dist/generated/themes/ColorPalette.css.js +3 -3
  329. package/dist/generated/themes/ColorPaletteItem.css.js +3 -3
  330. package/dist/generated/themes/ColorPalettePopover.css.js +8 -0
  331. package/dist/generated/themes/ColorPaletteStaticArea.css.js +3 -3
  332. package/dist/generated/themes/ColorPicker.css.js +3 -3
  333. package/dist/generated/themes/ComboBox.css.js +3 -3
  334. package/dist/generated/themes/ComboBoxPopover.css.js +3 -3
  335. package/dist/generated/themes/CustomListItem.css.js +3 -3
  336. package/dist/generated/themes/DatePicker.css.js +3 -3
  337. package/dist/generated/themes/DatePickerPopover.css.js +3 -3
  338. package/dist/generated/themes/DateRangePicker.css.js +3 -3
  339. package/dist/generated/themes/DateTimePicker.css.js +3 -3
  340. package/dist/generated/themes/DateTimePickerPopover.css.js +3 -3
  341. package/dist/generated/themes/DayPicker.css.js +3 -3
  342. package/dist/generated/themes/Dialog.css.js +3 -3
  343. package/dist/generated/themes/FileUploader.css.js +3 -3
  344. package/dist/generated/themes/GroupHeaderListItem.css.js +3 -3
  345. package/dist/generated/themes/GrowingButton.css.js +3 -3
  346. package/dist/generated/themes/Icon.css.js +3 -3
  347. package/dist/generated/themes/Input.css.js +3 -3
  348. package/dist/generated/themes/InputIcon.css.js +3 -3
  349. package/dist/generated/themes/InvisibleTextStyles.css.js +3 -3
  350. package/dist/generated/themes/Label.css.js +3 -3
  351. package/dist/generated/themes/Link.css.js +3 -3
  352. package/dist/generated/themes/List.css.js +3 -3
  353. package/dist/generated/themes/ListItem.css.js +3 -3
  354. package/dist/generated/themes/ListItemBase.css.js +3 -3
  355. package/dist/generated/themes/MessageStrip.css.js +3 -3
  356. package/dist/generated/themes/MonthPicker.css.js +3 -3
  357. package/dist/generated/themes/MultiComboBox.css.js +3 -3
  358. package/dist/generated/themes/MultiInput.css.js +3 -3
  359. package/dist/generated/themes/Panel.css.js +3 -3
  360. package/dist/generated/themes/Popover.css.js +3 -3
  361. package/dist/generated/themes/Popup.css.js +3 -3
  362. package/dist/generated/themes/PopupGlobal.css.js +8 -0
  363. package/dist/generated/themes/PopupStaticAreaStyles.css.js +3 -3
  364. package/dist/generated/themes/PopupsCommon.css.js +3 -3
  365. package/dist/generated/themes/ProgressIndicator.css.js +3 -3
  366. package/dist/generated/themes/RadioButton.css.js +3 -3
  367. package/dist/generated/themes/RatingIndicator.css.js +3 -3
  368. package/dist/generated/themes/ResponsivePopover.css.js +3 -3
  369. package/dist/generated/themes/ResponsivePopoverCommon.css.js +3 -3
  370. package/dist/generated/themes/SegmentedButton.css.js +3 -3
  371. package/dist/generated/themes/Select.css.js +3 -3
  372. package/dist/generated/themes/SelectPopover.css.js +3 -3
  373. package/dist/generated/themes/SliderBase.css.js +3 -3
  374. package/dist/generated/themes/SplitButton.css.js +8 -0
  375. package/dist/generated/themes/StepInput.css.js +3 -3
  376. package/dist/generated/themes/Suggestions.css.js +8 -0
  377. package/dist/generated/themes/Switch.css.js +3 -3
  378. package/dist/generated/themes/Tab.css.js +3 -3
  379. package/dist/generated/themes/TabContainer.css.js +3 -3
  380. package/dist/generated/themes/TabInOverflow.css.js +3 -3
  381. package/dist/generated/themes/TabInStrip.css.js +3 -3
  382. package/dist/generated/themes/TabSeparatorInOverflow.css.js +8 -0
  383. package/dist/generated/themes/TabSeparatorInStrip.css.js +8 -0
  384. package/dist/generated/themes/Table.css.js +3 -3
  385. package/dist/generated/themes/TableCell.css.js +3 -3
  386. package/dist/generated/themes/TableColumn.css.js +3 -3
  387. package/dist/generated/themes/TableGroupRow.css.js +3 -3
  388. package/dist/generated/themes/TableRow.css.js +3 -3
  389. package/dist/generated/themes/TapHighlightColor.css.js +8 -0
  390. package/dist/generated/themes/TextArea.css.js +3 -3
  391. package/dist/generated/themes/TimePicker.css.js +3 -3
  392. package/dist/generated/themes/TimePickerPopover.css.js +3 -3
  393. package/dist/generated/themes/TimeSelection.css.js +3 -3
  394. package/dist/generated/themes/Title.css.js +3 -3
  395. package/dist/generated/themes/Toast.css.js +3 -3
  396. package/dist/generated/themes/ToggleButton.css.js +3 -3
  397. package/dist/generated/themes/ToggleButton.ie11.css.js +3 -3
  398. package/dist/generated/themes/Token.css.js +3 -3
  399. package/dist/generated/themes/Tokenizer.css.js +3 -3
  400. package/dist/generated/themes/Tree.css.js +3 -3
  401. package/dist/generated/themes/TreeListItem.css.js +3 -3
  402. package/dist/generated/themes/ValueStateMessage.css.js +3 -3
  403. package/dist/generated/themes/WheelSlider.css.js +3 -3
  404. package/dist/generated/themes/YearPicker.css.js +3 -3
  405. package/dist/generated/themes/sap_belize/parameters-bundle.css.js +1 -1
  406. package/dist/generated/themes/sap_belize_hcb/parameters-bundle.css.js +1 -1
  407. package/dist/generated/themes/sap_belize_hcw/parameters-bundle.css.js +1 -1
  408. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
  409. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
  410. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
  411. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
  412. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -0
  413. package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js +1 -0
  414. package/dist/i18n/messagebundle.properties +47 -1
  415. package/dist/i18n/messagebundle_ar.properties +35 -4
  416. package/dist/i18n/messagebundle_bg.properties +35 -4
  417. package/dist/i18n/messagebundle_ca.properties +35 -4
  418. package/dist/i18n/messagebundle_cs.properties +35 -4
  419. package/dist/i18n/messagebundle_cy.properties +35 -4
  420. package/dist/i18n/messagebundle_da.properties +35 -4
  421. package/dist/i18n/messagebundle_de.properties +35 -4
  422. package/dist/i18n/messagebundle_el.properties +35 -4
  423. package/dist/i18n/messagebundle_en.properties +32 -1
  424. package/dist/i18n/messagebundle_en_GB.properties +32 -1
  425. package/dist/i18n/messagebundle_en_US_sappsd.properties +32 -1
  426. package/dist/i18n/messagebundle_en_US_saprigi.properties +38 -1
  427. package/dist/i18n/messagebundle_en_US_saptrc.properties +32 -1
  428. package/dist/i18n/messagebundle_es.properties +35 -4
  429. package/dist/i18n/messagebundle_es_MX.properties +36 -5
  430. package/dist/i18n/messagebundle_et.properties +35 -4
  431. package/dist/i18n/messagebundle_fi.properties +36 -5
  432. package/dist/i18n/messagebundle_fr.properties +35 -4
  433. package/dist/i18n/messagebundle_fr_CA.properties +35 -4
  434. package/dist/i18n/messagebundle_hi.properties +35 -4
  435. package/dist/i18n/messagebundle_hr.properties +35 -4
  436. package/dist/i18n/messagebundle_hu.properties +35 -4
  437. package/dist/i18n/messagebundle_id.properties +35 -4
  438. package/dist/i18n/messagebundle_it.properties +35 -4
  439. package/dist/i18n/messagebundle_iw.properties +35 -4
  440. package/dist/i18n/messagebundle_ja.properties +37 -6
  441. package/dist/i18n/messagebundle_kk.properties +35 -4
  442. package/dist/i18n/messagebundle_ko.properties +35 -4
  443. package/dist/i18n/messagebundle_lt.properties +35 -4
  444. package/dist/i18n/messagebundle_lv.properties +35 -4
  445. package/dist/i18n/messagebundle_ms.properties +35 -4
  446. package/dist/i18n/messagebundle_nl.properties +35 -4
  447. package/dist/i18n/messagebundle_no.properties +35 -4
  448. package/dist/i18n/messagebundle_pl.properties +35 -4
  449. package/dist/i18n/messagebundle_pt.properties +35 -4
  450. package/dist/i18n/messagebundle_pt_PT.properties +35 -4
  451. package/dist/i18n/messagebundle_ro.properties +35 -4
  452. package/dist/i18n/messagebundle_ru.properties +35 -4
  453. package/dist/i18n/messagebundle_sh.properties +35 -4
  454. package/dist/i18n/messagebundle_sk.properties +35 -4
  455. package/dist/i18n/messagebundle_sl.properties +35 -4
  456. package/dist/i18n/messagebundle_sv.properties +35 -4
  457. package/dist/i18n/messagebundle_th.properties +33 -2
  458. package/dist/i18n/messagebundle_tr.properties +35 -4
  459. package/dist/i18n/messagebundle_uk.properties +35 -4
  460. package/dist/i18n/messagebundle_vi.properties +35 -4
  461. package/dist/i18n/messagebundle_zh_CN.properties +35 -4
  462. package/dist/i18n/messagebundle_zh_TW.properties +34 -3
  463. package/dist/popup-utils/OpenedPopupsRegistry.js +1 -1
  464. package/dist/types/HasPopup.js +62 -0
  465. package/dist/types/TabsOverflowMode.js +40 -0
  466. package/dist/webcomponentsjs/CHANGELOG.md +4 -0
  467. package/dist/webcomponentsjs/README.md +44 -30
  468. package/dist/webcomponentsjs/bundles/webcomponents-ce.js +14 -24
  469. package/dist/webcomponentsjs/bundles/webcomponents-ce.js.map +1 -1
  470. package/dist/webcomponentsjs/bundles/webcomponents-pf_dom.js.map +1 -1
  471. package/dist/webcomponentsjs/bundles/webcomponents-pf_js.js +26 -23
  472. package/dist/webcomponentsjs/bundles/webcomponents-pf_js.js.map +1 -1
  473. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js +239 -242
  474. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js.map +1 -1
  475. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce.js +176 -182
  476. package/dist/webcomponentsjs/bundles/webcomponents-sd-ce.js.map +1 -1
  477. package/dist/webcomponentsjs/bundles/webcomponents-sd.js +144 -141
  478. package/dist/webcomponentsjs/bundles/webcomponents-sd.js.map +1 -1
  479. package/dist/webcomponentsjs/webcomponents-bundle.js +241 -244
  480. package/dist/webcomponentsjs/webcomponents-bundle.js.map +1 -1
  481. package/dist/webcomponentsjs/webcomponents-loader.js +49 -28
  482. package/package.json +8 -8
  483. package/src/Assets-static.js +1 -1
  484. package/src/Assets.js +1 -1
  485. package/src/Avatar.js +12 -15
  486. package/src/AvatarGroup.js +9 -11
  487. package/src/Badge.hbs +6 -1
  488. package/src/Badge.js +18 -9
  489. package/src/Breadcrumbs.hbs +3 -2
  490. package/src/Breadcrumbs.js +25 -10
  491. package/src/BreadcrumbsItem.js +4 -10
  492. package/src/BreadcrumbsPopover.hbs +2 -2
  493. package/src/BusyIndicator.hbs +2 -1
  494. package/src/BusyIndicator.js +5 -8
  495. package/src/Button.hbs +1 -1
  496. package/src/Button.js +36 -12
  497. package/src/Calendar.hbs +5 -0
  498. package/src/Calendar.js +109 -8
  499. package/src/CalendarHeader.hbs +11 -4
  500. package/src/CalendarHeader.js +51 -15
  501. package/src/Card.hbs +3 -4
  502. package/src/Card.js +37 -24
  503. package/src/CardHeader.hbs +14 -6
  504. package/src/CardHeader.js +30 -14
  505. package/src/Carousel.hbs +2 -1
  506. package/src/Carousel.js +18 -12
  507. package/src/CheckBox.hbs +4 -0
  508. package/src/CheckBox.js +81 -9
  509. package/src/ColorPalette.hbs +19 -5
  510. package/src/ColorPalette.js +223 -17
  511. package/src/ColorPaletteItem.hbs +2 -2
  512. package/src/ColorPaletteItem.js +22 -4
  513. package/src/ColorPalettePopover.hbs +31 -0
  514. package/src/ColorPalettePopover.js +244 -0
  515. package/src/ColorPicker.hbs +1 -0
  516. package/src/ColorPicker.js +15 -10
  517. package/src/ComboBox.hbs +5 -0
  518. package/src/ComboBox.js +287 -78
  519. package/src/ComboBoxGroupItem.js +1 -0
  520. package/src/ComboBoxPopover.hbs +6 -2
  521. package/src/DateComponentBase.js +22 -13
  522. package/src/DatePicker.js +35 -10
  523. package/src/DatePickerPopover.hbs +4 -1
  524. package/src/DateRangePicker.js +23 -1
  525. package/src/DateTimePicker.js +7 -9
  526. package/src/DateTimePickerPopover.hbs +3 -1
  527. package/src/DayPicker.hbs +9 -3
  528. package/src/DayPicker.js +43 -7
  529. package/src/Dialog.hbs +1 -1
  530. package/src/Dialog.js +17 -26
  531. package/src/DurationPicker.js +2 -2
  532. package/src/FileUploader.hbs +1 -0
  533. package/src/FileUploader.js +33 -20
  534. package/src/FileUploaderPopover.hbs +1 -0
  535. package/src/GroupHeaderListItem.hbs +4 -4
  536. package/src/GroupHeaderListItem.js +7 -11
  537. package/src/Icon.js +30 -20
  538. package/src/Input.hbs +10 -2
  539. package/src/Input.js +259 -87
  540. package/src/InputPopover.hbs +6 -4
  541. package/src/Interfaces.js +10 -0
  542. package/src/Label.js +1 -1
  543. package/src/Link.hbs +2 -1
  544. package/src/Link.js +36 -19
  545. package/src/List.hbs +8 -6
  546. package/src/List.js +77 -27
  547. package/src/ListItem.hbs +5 -2
  548. package/src/ListItem.js +29 -12
  549. package/src/MessageStrip.hbs +5 -5
  550. package/src/MessageStrip.js +56 -19
  551. package/src/MultiComboBox.hbs +6 -1
  552. package/src/MultiComboBox.js +283 -78
  553. package/src/MultiComboBoxItem.js +4 -10
  554. package/src/MultiComboBoxPopover.hbs +38 -22
  555. package/src/MultiInput.js +57 -11
  556. package/src/Option.js +15 -10
  557. package/src/Panel.hbs +1 -1
  558. package/src/Panel.js +33 -13
  559. package/src/Popover.js +137 -66
  560. package/src/Popup.js +40 -27
  561. package/src/PopupBlockLayer.hbs +1 -1
  562. package/src/ProgressIndicator.hbs +7 -1
  563. package/src/ProgressIndicator.js +21 -10
  564. package/src/RadioButton.hbs +4 -1
  565. package/src/RadioButton.js +69 -9
  566. package/src/RangeSlider.hbs +8 -2
  567. package/src/RangeSlider.js +19 -21
  568. package/src/RatingIndicator.hbs +2 -0
  569. package/src/RatingIndicator.js +44 -15
  570. package/src/ResponsivePopover.hbs +11 -7
  571. package/src/ResponsivePopover.js +20 -38
  572. package/src/SegmentedButton.hbs +1 -0
  573. package/src/SegmentedButton.js +25 -9
  574. package/src/SegmentedButtonItem.js +8 -11
  575. package/src/Select.hbs +1 -2
  576. package/src/Select.js +89 -62
  577. package/src/SelectPopover.hbs +23 -21
  578. package/src/Slider.hbs +1 -0
  579. package/src/Slider.js +20 -21
  580. package/src/SliderBase.hbs +4 -1
  581. package/src/SliderBase.js +13 -13
  582. package/src/SplitButton.hbs +53 -0
  583. package/src/SplitButton.js +425 -0
  584. package/src/StepInput.hbs +5 -2
  585. package/src/StepInput.js +13 -11
  586. package/src/SuggestionItem.js +2 -2
  587. package/src/Switch.hbs +20 -3
  588. package/src/Switch.js +33 -10
  589. package/src/Tab.js +40 -17
  590. package/src/TabContainer.hbs +48 -53
  591. package/src/TabContainer.js +495 -118
  592. package/src/TabContainerPopover.hbs +10 -6
  593. package/src/TabInOverflow.hbs +0 -1
  594. package/src/TabInStrip.hbs +4 -14
  595. package/src/TabSeparator.js +42 -3
  596. package/src/TabSeparatorInOverflow.hbs +8 -0
  597. package/src/TabSeparatorInStrip.hbs +6 -0
  598. package/src/Table.hbs +4 -3
  599. package/src/Table.js +23 -11
  600. package/src/TableGroupRow.js +12 -5
  601. package/src/TableRow.js +8 -14
  602. package/src/TextArea.js +40 -22
  603. package/src/TextAreaPopover.hbs +2 -1
  604. package/src/TimePicker.hbs +3 -1
  605. package/src/TimePicker.js +3 -3
  606. package/src/TimePickerBase.js +12 -7
  607. package/src/TimePickerPopover.hbs +1 -1
  608. package/src/TimeSelection.hbs +1 -1
  609. package/src/TimeSelection.js +9 -10
  610. package/src/Toast.hbs +13 -11
  611. package/src/Toast.js +11 -0
  612. package/src/ToggleButton.js +15 -0
  613. package/src/Token.hbs +2 -0
  614. package/src/Token.js +25 -11
  615. package/src/Tokenizer.js +151 -21
  616. package/src/Tree.hbs +3 -0
  617. package/src/Tree.js +38 -0
  618. package/src/TreeItem.js +21 -0
  619. package/src/TreeListItem.hbs +1 -1
  620. package/src/TreeListItem.js +22 -21
  621. package/src/WheelSlider.hbs +2 -2
  622. package/src/WheelSlider.js +9 -9
  623. package/src/YearPicker.js +1 -0
  624. package/src/features/ColorPaletteMoreColors.js +7 -7
  625. package/src/features/InputSuggestions.js +200 -49
  626. package/src/i18n/messagebundle.properties +47 -1
  627. package/src/i18n/messagebundle_ar.properties +35 -4
  628. package/src/i18n/messagebundle_bg.properties +35 -4
  629. package/src/i18n/messagebundle_ca.properties +35 -4
  630. package/src/i18n/messagebundle_cs.properties +35 -4
  631. package/src/i18n/messagebundle_cy.properties +35 -4
  632. package/src/i18n/messagebundle_da.properties +35 -4
  633. package/src/i18n/messagebundle_de.properties +35 -4
  634. package/src/i18n/messagebundle_el.properties +35 -4
  635. package/src/i18n/messagebundle_en.properties +32 -1
  636. package/src/i18n/messagebundle_en_GB.properties +32 -1
  637. package/src/i18n/messagebundle_en_US_sappsd.properties +32 -1
  638. package/src/i18n/messagebundle_en_US_saprigi.properties +38 -1
  639. package/src/i18n/messagebundle_en_US_saptrc.properties +32 -1
  640. package/src/i18n/messagebundle_es.properties +35 -4
  641. package/src/i18n/messagebundle_es_MX.properties +36 -5
  642. package/src/i18n/messagebundle_et.properties +35 -4
  643. package/src/i18n/messagebundle_fi.properties +36 -5
  644. package/src/i18n/messagebundle_fr.properties +35 -4
  645. package/src/i18n/messagebundle_fr_CA.properties +35 -4
  646. package/src/i18n/messagebundle_hi.properties +35 -4
  647. package/src/i18n/messagebundle_hr.properties +35 -4
  648. package/src/i18n/messagebundle_hu.properties +35 -4
  649. package/src/i18n/messagebundle_id.properties +35 -4
  650. package/src/i18n/messagebundle_it.properties +35 -4
  651. package/src/i18n/messagebundle_iw.properties +35 -4
  652. package/src/i18n/messagebundle_ja.properties +37 -6
  653. package/src/i18n/messagebundle_kk.properties +35 -4
  654. package/src/i18n/messagebundle_ko.properties +35 -4
  655. package/src/i18n/messagebundle_lt.properties +35 -4
  656. package/src/i18n/messagebundle_lv.properties +35 -4
  657. package/src/i18n/messagebundle_ms.properties +35 -4
  658. package/src/i18n/messagebundle_nl.properties +35 -4
  659. package/src/i18n/messagebundle_no.properties +35 -4
  660. package/src/i18n/messagebundle_pl.properties +35 -4
  661. package/src/i18n/messagebundle_pt.properties +35 -4
  662. package/src/i18n/messagebundle_pt_PT.properties +35 -4
  663. package/src/i18n/messagebundle_ro.properties +35 -4
  664. package/src/i18n/messagebundle_ru.properties +35 -4
  665. package/src/i18n/messagebundle_sh.properties +35 -4
  666. package/src/i18n/messagebundle_sk.properties +35 -4
  667. package/src/i18n/messagebundle_sl.properties +35 -4
  668. package/src/i18n/messagebundle_sv.properties +35 -4
  669. package/src/i18n/messagebundle_th.properties +33 -2
  670. package/src/i18n/messagebundle_tr.properties +35 -4
  671. package/src/i18n/messagebundle_uk.properties +35 -4
  672. package/src/i18n/messagebundle_vi.properties +35 -4
  673. package/src/i18n/messagebundle_zh_CN.properties +35 -4
  674. package/src/i18n/messagebundle_zh_TW.properties +34 -3
  675. package/src/popup-utils/OpenedPopupsRegistry.js +1 -1
  676. package/src/themes/Avatar.css +227 -0
  677. package/src/themes/AvatarGroup.css +82 -0
  678. package/src/themes/Badge.css +247 -0
  679. package/src/themes/Breadcrumbs.css +100 -0
  680. package/src/themes/BreadcrumbsPopover.css +6 -0
  681. package/src/themes/BrowserScrollbar.css +25 -0
  682. package/src/themes/BusyIndicator.css +143 -0
  683. package/src/themes/Button.css +306 -0
  684. package/src/themes/Button.ie11.css +48 -0
  685. package/src/themes/Calendar.css +18 -0
  686. package/src/themes/CalendarHeader.css +137 -0
  687. package/src/themes/Card.css +42 -0
  688. package/src/themes/CardHeader.css +133 -0
  689. package/src/themes/Carousel.css +140 -0
  690. package/src/themes/CheckBox.css +289 -0
  691. package/src/themes/ColorPalette.css +70 -0
  692. package/src/themes/ColorPaletteItem.css +70 -0
  693. package/src/themes/ColorPalettePopover.css +16 -0
  694. package/src/themes/ColorPaletteStaticArea.css +17 -0
  695. package/src/themes/ColorPicker.css +190 -0
  696. package/src/themes/ComboBox.css +9 -0
  697. package/src/themes/ComboBoxPopover.css +17 -0
  698. package/src/themes/CustomListItem.css +31 -0
  699. package/src/themes/DatePicker.css +46 -0
  700. package/src/themes/DatePickerPopover.css +5 -0
  701. package/src/themes/DateRangePicker.css +16 -0
  702. package/src/themes/DateTimePicker.css +11 -0
  703. package/src/themes/DateTimePickerPopover.css +78 -0
  704. package/src/themes/DayPicker.css +269 -0
  705. package/src/themes/Dialog.css +70 -0
  706. package/src/themes/FileUploader.css +40 -0
  707. package/src/themes/GroupHeaderListItem.css +24 -0
  708. package/src/themes/GrowingButton.css +67 -0
  709. package/src/themes/Icon.css +38 -0
  710. package/src/themes/Input.css +406 -0
  711. package/src/themes/InputIcon.css +53 -0
  712. package/src/themes/InvisibleTextStyles.css +9 -0
  713. package/src/themes/Label.css +85 -0
  714. package/src/themes/Link.css +77 -0
  715. package/src/themes/List.css +116 -0
  716. package/src/themes/ListItem.css +231 -0
  717. package/src/themes/ListItemBase.css +79 -0
  718. package/src/themes/MessageStrip.css +123 -0
  719. package/src/themes/MonthPicker.css +86 -0
  720. package/src/themes/MultiComboBox.css +37 -0
  721. package/src/themes/MultiInput.css +14 -0
  722. package/src/themes/Panel.css +100 -0
  723. package/src/themes/Popover.css +102 -0
  724. package/src/themes/Popup.css +5 -0
  725. package/src/themes/PopupGlobal.css +6 -0
  726. package/src/themes/PopupStaticAreaStyles.css +17 -0
  727. package/src/themes/PopupsCommon.css +87 -0
  728. package/src/themes/ProgressIndicator.css +158 -0
  729. package/src/themes/RadioButton.css +249 -0
  730. package/src/themes/RatingIndicator.css +52 -0
  731. package/src/themes/ResponsivePopover.css +34 -0
  732. package/src/themes/ResponsivePopoverCommon.css +207 -0
  733. package/src/themes/SegmentedButton.css +88 -0
  734. package/src/themes/Select.css +53 -0
  735. package/src/themes/SelectPopover.css +10 -0
  736. package/src/themes/SliderBase.css +253 -0
  737. package/src/themes/SplitButton.css +98 -0
  738. package/src/themes/StepInput.css +269 -0
  739. package/src/themes/Suggestions.css +14 -0
  740. package/src/themes/Switch.css +370 -0
  741. package/src/themes/Tab.css +9 -0
  742. package/src/themes/TabContainer.css +128 -0
  743. package/src/themes/TabInOverflow.css +61 -0
  744. package/src/themes/TabInStrip.css +374 -0
  745. package/src/themes/TabSeparatorInOverflow.css +8 -0
  746. package/src/themes/TabSeparatorInStrip.css +5 -0
  747. package/src/themes/Table.css +91 -0
  748. package/src/themes/TableCell.css +28 -0
  749. package/src/themes/TableColumn.css +29 -0
  750. package/src/themes/TableGroupRow.css +34 -0
  751. package/src/themes/TableRow.css +84 -0
  752. package/src/themes/TapHighlightColor.css +3 -0
  753. package/src/themes/TextArea.css +309 -0
  754. package/src/themes/TimePicker.css +50 -0
  755. package/src/themes/TimePickerPopover.css +11 -0
  756. package/src/themes/TimeSelection.css +27 -0
  757. package/src/themes/Title.css +65 -0
  758. package/src/themes/Toast.css +93 -0
  759. package/src/themes/ToggleButton.css +88 -0
  760. package/src/themes/ToggleButton.ie11.css +48 -0
  761. package/src/themes/Token.css +117 -0
  762. package/src/themes/Tokenizer.css +84 -0
  763. package/src/themes/Tree.css +11 -0
  764. package/src/themes/TreeListItem.css +107 -0
  765. package/src/themes/ValueStateMessage.css +76 -0
  766. package/src/themes/WheelSlider.css +203 -0
  767. package/src/themes/YearPicker.css +86 -0
  768. package/src/themes/base/Avatar-parameters.css +38 -0
  769. package/src/themes/base/AvatarGroup-parameter.css +6 -0
  770. package/src/themes/base/Badge-parameters.css +61 -0
  771. package/src/themes/base/BrowserScrollbar-parameters.css +4 -0
  772. package/src/themes/base/BusyIndicator-parameters.css +5 -0
  773. package/src/themes/base/Button-parameters.css +30 -0
  774. package/src/themes/base/CalendarHeader-parameters.css +20 -0
  775. package/src/themes/base/Card-parameters.css +17 -0
  776. package/src/themes/base/Carousel-parameters.css +9 -0
  777. package/src/themes/base/CheckBox-parameters.css +53 -0
  778. package/src/themes/base/ColorPalette-parameters.css +14 -0
  779. package/src/themes/base/ColorPicker-parameters.css +8 -0
  780. package/src/themes/base/DatePicker-parameters.css +6 -0
  781. package/src/themes/base/DayPicker-parameters.css +41 -0
  782. package/src/themes/base/Dialog-parameters.css +9 -0
  783. package/src/themes/base/GroupHeaderListItem-parameters.css +3 -0
  784. package/src/themes/base/GrowingButton-parameters.css +6 -0
  785. package/src/themes/base/Input-parameters.css +63 -0
  786. package/src/themes/base/InputIcon-parameters.css +11 -0
  787. package/src/themes/base/Link-parameters.css +8 -0
  788. package/src/themes/base/List-parameters.css +3 -0
  789. package/src/themes/base/ListItemBase-parameters.css +9 -0
  790. package/src/themes/base/MessageStrip-parameters.css +21 -0
  791. package/src/themes/base/MonthPicker-parameters.css +16 -0
  792. package/src/themes/base/MultiComboBox-parameters.css +3 -0
  793. package/src/themes/base/Panel-parameters.css +11 -0
  794. package/src/themes/base/PopupsCommon-parameters.css +8 -0
  795. package/src/themes/base/ProgressIndicator-parameters.css +21 -0
  796. package/src/themes/base/RadioButton-parameters.css +32 -0
  797. package/src/themes/base/RatingIndicator-parameters.css +3 -0
  798. package/src/themes/base/SegmentedButtton-parameters.css +8 -0
  799. package/src/themes/base/Select-parameters.css +11 -0
  800. package/src/themes/base/SelectPopover-parameters.css +4 -0
  801. package/src/themes/base/SliderBase-parameters.css +57 -0
  802. package/src/themes/base/StepInput-parameters.css +23 -0
  803. package/src/themes/base/Suggestions-parameters.css +3 -0
  804. package/src/themes/base/Switch-parameters.css +107 -0
  805. package/src/themes/base/TabContainer-parameters.css +84 -0
  806. package/src/themes/base/Table-parameters.css +6 -0
  807. package/src/themes/base/TableColumn-parameters.css +3 -0
  808. package/src/themes/base/TableRow-parameters.css +3 -0
  809. package/src/themes/base/TextArea-parameters.css +22 -0
  810. package/src/themes/base/TimePicker-parameters.css +4 -0
  811. package/src/themes/base/TimelineItem-parameters.css +10 -0
  812. package/src/themes/base/Title-parameters.css +8 -0
  813. package/src/themes/base/Toast-parameters.css +6 -0
  814. package/src/themes/base/ToggleButton-parameters.css +8 -0
  815. package/src/themes/base/Token-parameters.css +19 -0
  816. package/src/themes/base/Tokenizer-parameters.css +4 -0
  817. package/src/themes/base/ValueStateMessage-parameters.css +7 -0
  818. package/src/themes/base/WheelSlider-parameters.css +15 -0
  819. package/src/themes/base/YearPicker-parameters.css +16 -0
  820. package/src/themes/base/sizes-parameters.css +302 -0
  821. package/src/themes/sap_belize/BrowserScrollbar-parameters.css +4 -0
  822. package/src/themes/sap_belize/Carousel-parameters.css +9 -0
  823. package/src/themes/sap_belize/Dialog-parameters.css +5 -0
  824. package/src/themes/sap_belize/Input-parameters.css +6 -0
  825. package/src/themes/sap_belize/InputIcon-parameters.css +5 -0
  826. package/src/themes/sap_belize/ProgressIndicator-parameters.css +8 -0
  827. package/src/themes/sap_belize/SliderBase-parameters.css +22 -0
  828. package/src/themes/sap_belize/TabContainer-parameters.css +6 -0
  829. package/src/themes/sap_belize/Table-parameters.css +7 -0
  830. package/src/themes/sap_belize/TimePicker-parameters.css +5 -0
  831. package/src/themes/sap_belize/WheelSlider-parameters.css +17 -0
  832. package/src/themes/sap_belize/parameters-bundle.css +48 -0
  833. package/src/themes/sap_belize_hcb/Avatar-parameters.css +18 -0
  834. package/src/themes/sap_belize_hcb/Badge-parameters.css +43 -0
  835. package/src/themes/sap_belize_hcb/BrowserScrollbar-parameters.css +4 -0
  836. package/src/themes/sap_belize_hcb/Button-parameters.css +12 -0
  837. package/src/themes/sap_belize_hcb/CalendarHeader-parameters.css +11 -0
  838. package/src/themes/sap_belize_hcb/Card-parameters.css +6 -0
  839. package/src/themes/sap_belize_hcb/Carousel-parameters.css +9 -0
  840. package/src/themes/sap_belize_hcb/CheckBox-parameters.css +12 -0
  841. package/src/themes/sap_belize_hcb/DatePicker-parameters.css +6 -0
  842. package/src/themes/sap_belize_hcb/DayPicker-parameters.css +13 -0
  843. package/src/themes/sap_belize_hcb/Dialog-parameters.css +7 -0
  844. package/src/themes/sap_belize_hcb/GrowingButton-parameters.css +8 -0
  845. package/src/themes/sap_belize_hcb/Input-parameters.css +14 -0
  846. package/src/themes/sap_belize_hcb/InputIcon-parameters.css +5 -0
  847. package/src/themes/sap_belize_hcb/Link-parameters.css +7 -0
  848. package/src/themes/sap_belize_hcb/MessageStrip-parameters.css +10 -0
  849. package/src/themes/sap_belize_hcb/MonthPicker-parameters.css +10 -0
  850. package/src/themes/sap_belize_hcb/Panel-parameters.css +5 -0
  851. package/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css +11 -0
  852. package/src/themes/sap_belize_hcb/RadioButton-parameters.css +10 -0
  853. package/src/themes/sap_belize_hcb/Select-parameters.css +12 -0
  854. package/src/themes/sap_belize_hcb/SliderBase-parameters.css +17 -0
  855. package/src/themes/sap_belize_hcb/Switch-parameters.css +46 -0
  856. package/src/themes/sap_belize_hcb/TabContainer-parameters.css +44 -0
  857. package/src/themes/sap_belize_hcb/Table-parameters.css +7 -0
  858. package/src/themes/sap_belize_hcb/TableRow-parameters.css +5 -0
  859. package/src/themes/sap_belize_hcb/TextArea-parameters.css +6 -0
  860. package/src/themes/sap_belize_hcb/ToggleButton-parameters.css +7 -0
  861. package/src/themes/sap_belize_hcb/Token-parameters.css +6 -0
  862. package/src/themes/sap_belize_hcb/ValueStateMessage-parameters.css +5 -0
  863. package/src/themes/sap_belize_hcb/WheelSlider-parameters.css +17 -0
  864. package/src/themes/sap_belize_hcb/YearPicker-parameters.css +10 -0
  865. package/src/themes/sap_belize_hcb/parameters-bundle.css +47 -0
  866. package/src/themes/sap_belize_hcw/Avatar-parameters.css +18 -0
  867. package/src/themes/sap_belize_hcw/Badge-parameters.css +43 -0
  868. package/src/themes/sap_belize_hcw/BrowserScrollbar-parameters.css +4 -0
  869. package/src/themes/sap_belize_hcw/Button-parameters.css +12 -0
  870. package/src/themes/sap_belize_hcw/CalendarHeader-parameters.css +11 -0
  871. package/src/themes/sap_belize_hcw/Card-parameters.css +6 -0
  872. package/src/themes/sap_belize_hcw/Carousel-parameters.css +9 -0
  873. package/src/themes/sap_belize_hcw/CheckBox-parameters.css +12 -0
  874. package/src/themes/sap_belize_hcw/DatePicker-parameters.css +5 -0
  875. package/src/themes/sap_belize_hcw/DayPicker-parameters.css +14 -0
  876. package/src/themes/sap_belize_hcw/Dialog-parameters.css +7 -0
  877. package/src/themes/sap_belize_hcw/GrowingButton-parameters.css +8 -0
  878. package/src/themes/sap_belize_hcw/Input-parameters.css +14 -0
  879. package/src/themes/sap_belize_hcw/InputIcon-parameters.css +5 -0
  880. package/src/themes/sap_belize_hcw/Link-parameters.css +7 -0
  881. package/src/themes/sap_belize_hcw/MessageStrip-parameters.css +10 -0
  882. package/src/themes/sap_belize_hcw/MonthPicker-parameters.css +10 -0
  883. package/src/themes/sap_belize_hcw/Panel-parameters.css +5 -0
  884. package/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css +11 -0
  885. package/src/themes/sap_belize_hcw/RadioButton-parameters.css +10 -0
  886. package/src/themes/sap_belize_hcw/Select-parameters.css +12 -0
  887. package/src/themes/sap_belize_hcw/SliderBase-parameters.css +17 -0
  888. package/src/themes/sap_belize_hcw/Switch-parameters.css +45 -0
  889. package/src/themes/sap_belize_hcw/TabContainer-parameters.css +44 -0
  890. package/src/themes/sap_belize_hcw/Table-parameters.css +7 -0
  891. package/src/themes/sap_belize_hcw/TableRow-parameters.css +5 -0
  892. package/src/themes/sap_belize_hcw/TextArea-parameters.css +6 -0
  893. package/src/themes/sap_belize_hcw/ToggleButton-parameters.css +6 -0
  894. package/src/themes/sap_belize_hcw/Token-parameters.css +6 -0
  895. package/src/themes/sap_belize_hcw/ValueStateMessage-parameters.css +5 -0
  896. package/src/themes/sap_belize_hcw/WheelSlider-parameters.css +17 -0
  897. package/src/themes/sap_belize_hcw/YearPicker-parameters.css +10 -0
  898. package/src/themes/sap_belize_hcw/parameters-bundle.css +47 -0
  899. package/src/themes/sap_fiori_3/Avatar-parameters.css +9 -0
  900. package/src/themes/sap_fiori_3/Button-parameters.css +14 -0
  901. package/src/themes/sap_fiori_3/CalendarHeader-parameters.css +8 -0
  902. package/src/themes/sap_fiori_3/CheckBox-parameters.css +13 -0
  903. package/src/themes/sap_fiori_3/DayPicker-parameters.css +6 -0
  904. package/src/themes/sap_fiori_3/Input-parameters.css +7 -0
  905. package/src/themes/sap_fiori_3/Link-parameters.css +7 -0
  906. package/src/themes/sap_fiori_3/List-parameters.css +5 -0
  907. package/src/themes/sap_fiori_3/MonthPicker-parameters.css +5 -0
  908. package/src/themes/sap_fiori_3/MultiComboBox-parameters.css +5 -0
  909. package/src/themes/sap_fiori_3/Panel-parameters.css +6 -0
  910. package/src/themes/sap_fiori_3/SliderBase-parameters.css +5 -0
  911. package/src/themes/sap_fiori_3/TabContainer-parameters.css +12 -0
  912. package/src/themes/sap_fiori_3/TimePicker-parameters.css +5 -0
  913. package/src/themes/sap_fiori_3/Token-parameters.css +9 -0
  914. package/src/themes/sap_fiori_3/WheelSlider-parameters.css +16 -0
  915. package/src/themes/sap_fiori_3/YearPicker-parameters.css +5 -0
  916. package/src/themes/sap_fiori_3/parameters-bundle.css +48 -0
  917. package/src/themes/sap_fiori_3_dark/Avatar-parameters.css +9 -0
  918. package/src/themes/sap_fiori_3_dark/Button-parameters.css +14 -0
  919. package/src/themes/sap_fiori_3_dark/CalendarHeader-parameters.css +8 -0
  920. package/src/themes/sap_fiori_3_dark/CheckBox-parameters.css +13 -0
  921. package/src/themes/sap_fiori_3_dark/DayPicker-parameters.css +6 -0
  922. package/src/themes/sap_fiori_3_dark/Input-parameters.css +7 -0
  923. package/src/themes/sap_fiori_3_dark/Link-parameters.css +7 -0
  924. package/src/themes/sap_fiori_3_dark/List-parameters.css +5 -0
  925. package/src/themes/sap_fiori_3_dark/MonthPicker-parameters.css +5 -0
  926. package/src/themes/sap_fiori_3_dark/MultiComboBox-parameters.css +5 -0
  927. package/src/themes/sap_fiori_3_dark/Panel-parameters.css +6 -0
  928. package/src/themes/sap_fiori_3_dark/SliderBase-parameters.css +5 -0
  929. package/src/themes/sap_fiori_3_dark/TabContainer-parameters.css +12 -0
  930. package/src/themes/sap_fiori_3_dark/Token-parameters.css +8 -0
  931. package/src/themes/sap_fiori_3_dark/WheelSlider-parameters.css +15 -0
  932. package/src/themes/sap_fiori_3_dark/YearPicker-parameters.css +5 -0
  933. package/src/themes/sap_fiori_3_dark/parameters-bundle.css +47 -0
  934. package/src/themes/sap_fiori_3_hcb/Avatar-parameters.css +24 -0
  935. package/src/themes/sap_fiori_3_hcb/Badge-parameters.css +43 -0
  936. package/src/themes/sap_fiori_3_hcb/Button-parameters.css +10 -0
  937. package/src/themes/sap_fiori_3_hcb/CalendarHeader-parameters.css +11 -0
  938. package/src/themes/sap_fiori_3_hcb/Card-parameters.css +6 -0
  939. package/src/themes/sap_fiori_3_hcb/Carousel-parameters.css +9 -0
  940. package/src/themes/sap_fiori_3_hcb/CheckBox-parameters.css +13 -0
  941. package/src/themes/sap_fiori_3_hcb/DatePicker-parameters.css +5 -0
  942. package/src/themes/sap_fiori_3_hcb/DayPicker-parameters.css +19 -0
  943. package/src/themes/sap_fiori_3_hcb/Dialog-parameters.css +7 -0
  944. package/src/themes/sap_fiori_3_hcb/GrowingButton-parameters.css +8 -0
  945. package/src/themes/sap_fiori_3_hcb/Input-parameters.css +21 -0
  946. package/src/themes/sap_fiori_3_hcb/InputIcon-parameters.css +5 -0
  947. package/src/themes/sap_fiori_3_hcb/Link-parameters.css +7 -0
  948. package/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css +10 -0
  949. package/src/themes/sap_fiori_3_hcb/MonthPicker-parameters.css +11 -0
  950. package/src/themes/sap_fiori_3_hcb/Panel-parameters.css +5 -0
  951. package/src/themes/sap_fiori_3_hcb/ProgressIndicator-parameters.css +11 -0
  952. package/src/themes/sap_fiori_3_hcb/RadioButton-parameters.css +10 -0
  953. package/src/themes/sap_fiori_3_hcb/Select-parameters.css +12 -0
  954. package/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css +14 -0
  955. package/src/themes/sap_fiori_3_hcb/Switch-parameters.css +45 -0
  956. package/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css +44 -0
  957. package/src/themes/sap_fiori_3_hcb/Table-parameters.css +5 -0
  958. package/src/themes/sap_fiori_3_hcb/TableRow-parameters.css +5 -0
  959. package/src/themes/sap_fiori_3_hcb/TextArea-parameters.css +10 -0
  960. package/src/themes/sap_fiori_3_hcb/TimePicker-parameters.css +5 -0
  961. package/src/themes/sap_fiori_3_hcb/ToggleButton-parameters.css +6 -0
  962. package/src/themes/sap_fiori_3_hcb/Token-parameters.css +7 -0
  963. package/src/themes/sap_fiori_3_hcb/ValueStateMessage-parameters.css +5 -0
  964. package/src/themes/sap_fiori_3_hcb/WheelSlider-parameters.css +17 -0
  965. package/src/themes/sap_fiori_3_hcb/YearPicker-parameters.css +11 -0
  966. package/src/themes/sap_fiori_3_hcb/parameters-bundle.css +48 -0
  967. package/src/themes/sap_fiori_3_hcw/Avatar-parameters.css +24 -0
  968. package/src/themes/sap_fiori_3_hcw/Badge-parameters.css +43 -0
  969. package/src/themes/sap_fiori_3_hcw/Button-parameters.css +10 -0
  970. package/src/themes/sap_fiori_3_hcw/CalendarHeader-parameters.css +11 -0
  971. package/src/themes/sap_fiori_3_hcw/Card-parameters.css +6 -0
  972. package/src/themes/sap_fiori_3_hcw/Carousel-parameters.css +9 -0
  973. package/src/themes/sap_fiori_3_hcw/CheckBox-parameters.css +13 -0
  974. package/src/themes/sap_fiori_3_hcw/DatePicker-parameters.css +5 -0
  975. package/src/themes/sap_fiori_3_hcw/DayPicker-parameters.css +19 -0
  976. package/src/themes/sap_fiori_3_hcw/Dialog-parameters.css +7 -0
  977. package/src/themes/sap_fiori_3_hcw/GrowingButton-parameters.css +8 -0
  978. package/src/themes/sap_fiori_3_hcw/Input-parameters.css +21 -0
  979. package/src/themes/sap_fiori_3_hcw/InputIcon-parameters.css +5 -0
  980. package/src/themes/sap_fiori_3_hcw/Link-parameters.css +7 -0
  981. package/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css +10 -0
  982. package/src/themes/sap_fiori_3_hcw/MonthPicker-parameters.css +11 -0
  983. package/src/themes/sap_fiori_3_hcw/Panel-parameters.css +5 -0
  984. package/src/themes/sap_fiori_3_hcw/ProgressIndicator-parameters.css +11 -0
  985. package/src/themes/sap_fiori_3_hcw/RadioButton-parameters.css +10 -0
  986. package/src/themes/sap_fiori_3_hcw/Select-parameters.css +12 -0
  987. package/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css +13 -0
  988. package/src/themes/sap_fiori_3_hcw/Switch-parameters.css +45 -0
  989. package/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css +44 -0
  990. package/src/themes/sap_fiori_3_hcw/Table-parameters.css +5 -0
  991. package/src/themes/sap_fiori_3_hcw/TableRow-parameters.css +5 -0
  992. package/src/themes/sap_fiori_3_hcw/TextArea-parameters.css +10 -0
  993. package/src/themes/sap_fiori_3_hcw/TimePicker-parameters.css +5 -0
  994. package/src/themes/sap_fiori_3_hcw/ToggleButton-parameters.css +6 -0
  995. package/src/themes/sap_fiori_3_hcw/Token-parameters.css +7 -0
  996. package/src/themes/sap_fiori_3_hcw/ValueStateMessage-parameters.css +5 -0
  997. package/src/themes/sap_fiori_3_hcw/WheelSlider-parameters.css +17 -0
  998. package/src/themes/sap_fiori_3_hcw/YearPicker-parameters.css +11 -0
  999. package/src/themes/sap_fiori_3_hcw/parameters-bundle.css +48 -0
  1000. package/src/themes/sap_horizon/Avatar-parameters.css +33 -0
  1001. package/src/themes/sap_horizon/BusyIndicator-parameters.css +7 -0
  1002. package/src/themes/sap_horizon/Button-parameters.css +20 -0
  1003. package/src/themes/sap_horizon/CalendarHeader-parameters.css +19 -0
  1004. package/src/themes/sap_horizon/Card-parameters.css +10 -0
  1005. package/src/themes/sap_horizon/CheckBox-parameters.css +34 -0
  1006. package/src/themes/sap_horizon/ColorPalette-parameters.css +16 -0
  1007. package/src/themes/sap_horizon/ColorPicker-parameters.css +10 -0
  1008. package/src/themes/sap_horizon/DatePicker-parameters.css +6 -0
  1009. package/src/themes/sap_horizon/DayPicker-parameters.css +31 -0
  1010. package/src/themes/sap_horizon/Dialog-parameters.css +11 -0
  1011. package/src/themes/sap_horizon/GrowingButton-parameters.css +5 -0
  1012. package/src/themes/sap_horizon/Input-parameters.css +35 -0
  1013. package/src/themes/sap_horizon/InputIcon-parameters.css +17 -0
  1014. package/src/themes/sap_horizon/Link-parameters.css +10 -0
  1015. package/src/themes/sap_horizon/List-parameters.css +5 -0
  1016. package/src/themes/sap_horizon/ListItemBase-parameters.css +7 -0
  1017. package/src/themes/sap_horizon/MessageStrip-parameters.css +9 -0
  1018. package/src/themes/sap_horizon/MonthPicker-parameters.css +17 -0
  1019. package/src/themes/sap_horizon/MultiComboBox-parameters.css +5 -0
  1020. package/src/themes/sap_horizon/Panel-parameters.css +12 -0
  1021. package/src/themes/sap_horizon/PopupsCommon-parameters.css +10 -0
  1022. package/src/themes/sap_horizon/ProgressIndicator-parameters.css +23 -0
  1023. package/src/themes/sap_horizon/RadioButton-parameters.css +9 -0
  1024. package/src/themes/sap_horizon/RatingIndicator-parameters.css +3 -0
  1025. package/src/themes/sap_horizon/SegmentedButtton-parameters.css +10 -0
  1026. package/src/themes/sap_horizon/Select-parameters.css +5 -0
  1027. package/src/themes/sap_horizon/SelectPopover-parameters.css +4 -0
  1028. package/src/themes/sap_horizon/SliderBase-parameters.css +44 -0
  1029. package/src/themes/sap_horizon/StepInput-parameters.css +25 -0
  1030. package/src/themes/sap_horizon/Suggestions-parameters.css +5 -0
  1031. package/src/themes/sap_horizon/Switch-parameters.css +31 -0
  1032. package/src/themes/sap_horizon/TabContainer-parameters.css +25 -0
  1033. package/src/themes/sap_horizon/Table-parameters.css +8 -0
  1034. package/src/themes/sap_horizon/TableColumn-parameters.css +5 -0
  1035. package/src/themes/sap_horizon/TableRow-parameters.css +5 -0
  1036. package/src/themes/sap_horizon/TextArea-parameters.css +22 -0
  1037. package/src/themes/sap_horizon/TimePicker-parameters.css +6 -0
  1038. package/src/themes/sap_horizon/ToggleButton-parameters.css +11 -0
  1039. package/src/themes/sap_horizon/Token-parameters.css +28 -0
  1040. package/src/themes/sap_horizon/Tokenizer-parameters.css +6 -0
  1041. package/src/themes/sap_horizon/ValueStateMessage-parameters.css +8 -0
  1042. package/src/themes/sap_horizon/WheelSlider-parameters.css +19 -0
  1043. package/src/themes/sap_horizon/YearPicker-parameters.css +16 -0
  1044. package/src/themes/sap_horizon/parameters-bundle.css +57 -0
  1045. package/src/themes/sap_horizon/sizes-parameters.css +8 -0
  1046. package/src/themes/sap_horizon_exp/Badge-parameters.css +91 -0
  1047. package/src/themes/sap_horizon_exp/Button-parameters.css +12 -0
  1048. package/src/themes/sap_horizon_exp/CalendarHeader-parameters.css +8 -0
  1049. package/src/themes/sap_horizon_exp/CheckBox-parameters.css +35 -0
  1050. package/src/themes/sap_horizon_exp/DatePicker-parameters.css +5 -0
  1051. package/src/themes/sap_horizon_exp/DayPicker-parameters.css +6 -0
  1052. package/src/themes/sap_horizon_exp/Input-parameters.css +46 -0
  1053. package/src/themes/sap_horizon_exp/InputIcon-parameters.css +9 -0
  1054. package/src/themes/sap_horizon_exp/Link-parameters.css +7 -0
  1055. package/src/themes/sap_horizon_exp/List-parameters.css +5 -0
  1056. package/src/themes/sap_horizon_exp/MonthPicker-parameters.css +5 -0
  1057. package/src/themes/sap_horizon_exp/MultiComboBox-parameters.css +7 -0
  1058. package/src/themes/sap_horizon_exp/Panel-parameters.css +6 -0
  1059. package/src/themes/sap_horizon_exp/Popover-parameters.css +5 -0
  1060. package/src/themes/sap_horizon_exp/RadioButton-parameters.css +30 -0
  1061. package/src/themes/sap_horizon_exp/Select-parameters.css +5 -0
  1062. package/src/themes/sap_horizon_exp/SliderBase-parameters.css +30 -0
  1063. package/src/themes/sap_horizon_exp/Switch-parameters.css +46 -0
  1064. package/src/themes/sap_horizon_exp/TabContainer-parameters.css +40 -0
  1065. package/src/themes/sap_horizon_exp/TimePicker-parameters.css +5 -0
  1066. package/src/themes/sap_horizon_exp/Token-parameters.css +9 -0
  1067. package/src/themes/sap_horizon_exp/WheelSlider-parameters.css +16 -0
  1068. package/src/themes/sap_horizon_exp/YearPicker-parameters.css +5 -0
  1069. package/src/themes/sap_horizon_exp/parameters-bundle.css +46 -0
  1070. package/src/types/HasPopup.js +62 -0
  1071. package/src/types/TabsOverflowMode.js +40 -0
  1072. package/dist/generated/templates/TabSeparatorTemplate.lit.js +0 -7
  1073. package/src/TabSeparator.hbs +0 -1
package/dist/api.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "since": "1.0.0-rc.6",
15
15
  "extends": "UI5Element",
16
16
  "implements": [ "sap.ui.webcomponents.main.IAvatar" ],
17
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nAn image-like control that has different display options for representing images and icons in different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to set a custom size.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<ul> <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li> <li>[SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Avatar.js\";</code>",
17
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nAn image-like control that has different display options for representing images and icons in different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to set a custom size.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<ul> <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li> <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Avatar.js\";</code>",
18
18
  "constructor": { "visibility": "public" },
19
19
  "properties": [
20
20
  {
@@ -110,7 +110,7 @@
110
110
  "name": "colorScheme",
111
111
  "readonly": "true",
112
112
  "visibility": "public",
113
- "type": "Array",
113
+ "type": "AvatarColorScheme[]",
114
114
  "description": "Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.",
115
115
  "defaultValue": "[]"
116
116
  },
@@ -118,7 +118,7 @@
118
118
  "name": "hiddenItems",
119
119
  "readonly": "true",
120
120
  "visibility": "public",
121
- "type": "Array",
121
+ "type": "HTMLElement[]",
122
122
  "description": "Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.",
123
123
  "defaultValue": "[]"
124
124
  },
@@ -288,12 +288,6 @@
288
288
  "description": "Defines the link href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported.",
289
289
  "defaultValue": "\"\""
290
290
  },
291
- {
292
- "name": "stableDomRef",
293
- "visibility": "public",
294
- "type": "string",
295
- "description": "Defines the stable selector that you can use via <code>getStableDomRef</code> method."
296
- },
297
291
  {
298
292
  "name": "target",
299
293
  "visibility": "public",
@@ -385,18 +379,26 @@
385
379
  "type": "String",
386
380
  "description": "Sets the accessible aria name of the component."
387
381
  },
382
+ {
383
+ "name": "accessibleNameRef",
384
+ "visibility": "public",
385
+ "since": "1.1.0",
386
+ "type": "String",
387
+ "description": "Receives id(or many ids) of the elements that label the component.",
388
+ "defaultValue": "\"\""
389
+ },
388
390
  {
389
391
  "name": "design",
390
392
  "visibility": "public",
391
393
  "type": "ButtonDesign",
392
- "description": "Defines the component design.\n\n<br><br> <b>Note:</b>\n\n<ul> <li><code>Default</code></li> <li><code>Emphasized</code></li> <li><code>Positive</code></li> <li><code>Negative</code></li> <li><code>Transparent</code></li> <li><code>Attention</code></li> </ul>",
394
+ "description": "Defines the component design.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Default</code></li> <li><code>Emphasized</code></li> <li><code>Positive</code></li> <li><code>Negative</code></li> <li><code>Transparent</code></li> <li><code>Attention</code></li> </ul>",
393
395
  "defaultValue": "\"Default\""
394
396
  },
395
397
  {
396
398
  "name": "disabled",
397
399
  "visibility": "public",
398
400
  "type": "boolean",
399
- "description": "Defines whether the component is disabled (default is set to <code>false</code>). A disabled component can't be pressed or focused, and it is not in the tab chain.",
401
+ "description": "Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.",
400
402
  "defaultValue": "false"
401
403
  },
402
404
  {
@@ -417,7 +419,7 @@
417
419
  "name": "submits",
418
420
  "visibility": "public",
419
421
  "type": "boolean",
420
- "description": "When set to <code>true</code>, the component will automatically submit the nearest form element upon <code>press</code>. <br><br> <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>",
422
+ "description": "When set to <code>true</code>, the component will automatically submit the nearest form element upon <code>press</code>. <br><br> <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>",
421
423
  "defaultValue": "false"
422
424
  }
423
425
  ],
@@ -450,7 +452,7 @@
450
452
  "visibility": "public",
451
453
  "since": "1.0.0-rc.11",
452
454
  "extends": "CalendarPart",
453
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-calendar</code> component allows users to select one or more dates. <br><br> Currently selected dates are represented with instances of <code>ui5-date</code> as children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property. Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally. <br><br>\n\n<h3>Usage</h3>\n\nThe user can navigate to a particular date by: <br> <ul> <li>Pressing over a month inside the months view</li> <li>Pressing over an year inside the years view</li> </ul> <br> The user can confirm a date selection by pressing over a date inside the days view. <br><br>\n\n<h3>Keyboard Handling</h3> The <code>ui5-calendar</code> provides advanced keyboard handling. When a picker is showed and focused the user can use the following keyboard shortcuts in order to perform a navigation: <br> - Day picker: <br> <ul> <li>[F4] - Shows month picker</li> <li>[SHIFT] + [F4] - Shows year picker</li> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li> <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li> <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li> <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li> <li>[HOME] - Navigate to the first day of the week</li> <li>[END] - Navigate to the last day of the week</li> <li>[CTRL] + [HOME] - Navigate to the first day of the month</li> <li>[CTRL] + [END] - Navigate to the last day of the month</li> </ul> <br> - Month picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[HOME] - Navigate to the first month of the current row</li> <li>[END] - Navigate to the last month of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li> <li>[CTRL] + [END] - Navigate to the last month of the year</li> </ul> <br> - Year picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year range</li> <li>[PAGEDOWN] - Navigate the next year range</li> <li>[HOME] - Navigate to the first year of the current row</li> <li>[END] - Navigate to the last year of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li> <li>[CTRL] + [END] - Navigate to the last year of the current year range</li> </ul> <br>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <code> &lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt; { \"calendarType\": \"Japanese\" } &lt;/script&gt; </code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Calendar\";</code>",
455
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-calendar</code> component allows users to select one or more dates. <br><br> Currently selected dates are represented with instances of <code>ui5-date</code> as children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property. Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally. <br><br>\n\n<h3>Usage</h3>\n\nThe user can navigate to a particular date by: <br> <ul> <li>Pressing over a month inside the months view</li> <li>Pressing over an year inside the years view</li> </ul> <br> The user can confirm a date selection by pressing over a date inside the days view. <br><br>\n\n<h3>Keyboard Handling</h3> The <code>ui5-calendar</code> provides advanced keyboard handling. When a picker is showed and focused the user can use the following keyboard shortcuts in order to perform a navigation: <br> - Day picker: <br> <ul> <li>[F4] - Shows month picker</li> <li>[SHIFT] + [F4] - Shows year picker</li> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li> <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li> <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li> <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li> <li>[HOME] - Navigate to the first day of the week</li> <li>[END] - Navigate to the last day of the week</li> <li>[CTRL] + [HOME] - Navigate to the first day of the month</li> <li>[CTRL] + [END] - Navigate to the last day of the month</li> </ul> <br> - Month picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year</li> <li>[PAGEDOWN] - Navigate to the next year</li> <li>[HOME] - Navigate to the first month of the current row</li> <li>[END] - Navigate to the last month of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li> <li>[CTRL] + [END] - Navigate to the last month of the year</li> </ul> <br> - Year picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year range</li> <li>[PAGEDOWN] - Navigate the next year range</li> <li>[HOME] - Navigate to the first year of the current row</li> <li>[END] - Navigate to the last year of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li> <li>[CTRL] + [END] - Navigate to the last year of the current year range</li> </ul> <br>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <code> &lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt; { \"calendarType\": \"Japanese\" } &lt;/script&gt; </code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Calendar\";</code>",
454
456
  "constructor": { "visibility": "public" },
455
457
  "properties": [
456
458
  {
@@ -579,6 +581,7 @@
579
581
  "name": "sap.ui.webcomponents.main.Card",
580
582
  "basename": "Card",
581
583
  "tagname": "ui5-card",
584
+ "appenddocs": "CardHeader",
582
585
  "resource": "Card.js",
583
586
  "module": "Card",
584
587
  "static": true,
@@ -586,7 +589,24 @@
586
589
  "extends": "sap.ui.webcomponents.base.UI5Element",
587
590
  "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-card</code> is a component that represents information in the form of a tile with separate header and content areas. The content area of a <code>ui5-card</code> can be arbitrary HTML content. The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and fill.\n\nNote: We recommend the usage of <code>ui5-card-header</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Card\";</code> <br> <code>import \"@ui5/webcomponents/dist/CardHeader.js\";</code> (for <code>ui5-card-header</code>)",
588
591
  "constructor": { "visibility": "public" },
589
- "properties": [],
592
+ "properties": [
593
+ {
594
+ "name": "accessibleName",
595
+ "visibility": "public",
596
+ "since": "1.0.0-rc.16",
597
+ "type": "String",
598
+ "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.",
599
+ "defaultValue": "\"\""
600
+ },
601
+ {
602
+ "name": "accessibleNameRef",
603
+ "visibility": "public",
604
+ "since": "1.0.0-rc.16",
605
+ "type": "String",
606
+ "description": "Defines the IDs of the elements that label the component.",
607
+ "defaultValue": "\"\""
608
+ }
609
+ ],
590
610
  "slots": [
591
611
  {
592
612
  "name": "default",
@@ -610,7 +630,6 @@
610
630
  "name": "sap.ui.webcomponents.main.CardHeader",
611
631
  "basename": "CardHeader",
612
632
  "tagname": "ui5-card-header",
613
- "appenddocs": "CardHeader",
614
633
  "resource": "CardHeader.js",
615
634
  "module": "CardHeader",
616
635
  "static": true,
@@ -682,7 +701,7 @@
682
701
  "visibility": "public",
683
702
  "since": "1.0.0-rc.6",
684
703
  "extends": "UI5Element",
685
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. <br> There are several ways to perform navigation: <ul> <li>on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.</li> <li>on mobile - the user can use swipe gestures.</li> </ul>\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4>\n\n<ul> <li>The items you want to display are very different from each other.</li> <li>You want to display the items one after the other.</li> </ul>\n\n<h4>When not to use:</h4>\n\n<ul> <li>The items you want to display need to be visible at the same time.</li> <li>The items you want to display are uniform and very similar.</li> </ul>\n\n<h3>Keyboard Handling</h3> When the <code>ui5-carousel</code> is focused the user can navigate between the items with the following keyboard shortcuts: <br>\n\n<ul> <li>[UP/DOWN] - Navigates to previous and next item</li> <li>[LEFT/RIGHT] - Navigates to previous and next item</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Carousel.js\";</code>",
704
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. <br> There are several ways to perform navigation: <ul> <li>on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.</li> <li>on mobile - the user can use swipe gestures.</li> </ul>\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4>\n\n<ul> <li>The items you want to display are very different from each other.</li> <li>You want to display the items one after the other.</li> </ul>\n\n<h4>When not to use:</h4>\n\n<ul> <li>The items you want to display need to be visible at the same time.</li> <li>The items you want to display are uniform and very similar.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4> When the <code>ui5-carousel</code> is focused the user can navigate between the items with the following keyboard shortcuts: <br>\n\n* <h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<ul> <li>[UP/DOWN] - Navigates to previous and next item</li> <li>[LEFT/RIGHT] - Navigates to previous and next item</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Carousel.js\";</code>",
686
705
  "constructor": { "visibility": "public" },
687
706
  "properties": [
688
707
  {
@@ -791,6 +810,22 @@
791
810
  "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nAllows the user to set a binary value, such as true/false or yes/no for an item. <br><br> The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose. If it's checked, an indicator is displayed inside the box. To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square box or its label. <br><br> The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked. Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.\n\n<h3>Usage</h3>\n\nYou can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default. In case you prefer text to wrap, set the <code>wrappingType</code> property to \"Normal\". The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends. <br><br> You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to <code>true</code>, or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code> property to <code>true</code>.\n\n<br><br> <h3>Keyboard Handling</h3>\n\nThe user can use the following keyboard shortcuts to toggle the checked state of the <code>ui5-checkbox</code>. <ul> <li>[SPACE, ENTER] - Toggles between different states: checked, not checked.</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/CheckBox\";</code>",
792
811
  "constructor": { "visibility": "public" },
793
812
  "properties": [
813
+ {
814
+ "name": "accessibleName",
815
+ "visibility": "public",
816
+ "since": "1.1.0",
817
+ "type": "String",
818
+ "description": "Sets the accessible aria name of the component.",
819
+ "defaultValue": "\"\""
820
+ },
821
+ {
822
+ "name": "accessibleNameRef",
823
+ "visibility": "public",
824
+ "since": "1.1.0",
825
+ "type": "String",
826
+ "description": "Receives id(or many ids) of the elements that label the component",
827
+ "defaultValue": "\"\""
828
+ },
794
829
  {
795
830
  "name": "checked",
796
831
  "visibility": "public",
@@ -870,7 +905,7 @@
870
905
  "visibility": "public",
871
906
  "since": "1.0.0-rc.12",
872
907
  "extends": "UI5Element",
873
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The ColorPalette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\n<h3>Usage</h3>\n\nThe Colorpalette is meant for users that needs to select a color from a predefined set. To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ColorPalette.js\";</code>",
908
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\n<h3>Usage</h3>\n\nThe <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set. To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ColorPalette.js\";</code>",
874
909
  "constructor": { "visibility": "public" },
875
910
  "properties": [],
876
911
  "slots": [
@@ -879,7 +914,7 @@
879
914
  "propertyName": "colors",
880
915
  "visibility": "public",
881
916
  "type": "sap.ui.webcomponents.main.IColorPaletteItem[]",
882
- "description": "Defines the <code>ui5-color-palette-item</code> items."
917
+ "description": "Defines the <code>ui5-color-palette-item</code> elements."
883
918
  }
884
919
  ],
885
920
  "events": [
@@ -916,6 +951,103 @@
916
951
  ],
917
952
  "slots": []
918
953
  },
954
+ {
955
+ "kind": "class",
956
+ "name": "sap.ui.webcomponents.main.ColorPalettePopover",
957
+ "basename": "ColorPalettePopover",
958
+ "tagname": "ui5-color-palette-popover",
959
+ "resource": "ColorPalettePopover.js",
960
+ "module": "ColorPalettePopover",
961
+ "static": true,
962
+ "visibility": "public",
963
+ "since": "1.0.0-rc.16",
964
+ "extends": "UI5Element",
965
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> Represents a predefined range of colors for easier selection.\n\nOverview The ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly. You can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\n<h3>Usage</h3>\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor the <code>ui5-color-palette-popover</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ColorPalettePopover.js\";</code>",
966
+ "constructor": { "visibility": "public" },
967
+ "properties": [
968
+ {
969
+ "name": "defaultColor",
970
+ "visibility": "public",
971
+ "type": "CSSColor",
972
+ "description": "Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>"
973
+ },
974
+ {
975
+ "name": "showDefaultColor",
976
+ "visibility": "public",
977
+ "type": "boolean",
978
+ "description": "Defines whether the user can choose the default color from a button.",
979
+ "defaultValue": "false"
980
+ },
981
+ {
982
+ "name": "showMoreColors",
983
+ "visibility": "public",
984
+ "type": "boolean",
985
+ "description": "Defines whether the user can choose a custom color from a component. <b>Note:</b> In order to use this property you need to import the following module: <code>\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"</code>",
986
+ "defaultValue": "false"
987
+ },
988
+ {
989
+ "name": "showRecentColors",
990
+ "visibility": "public",
991
+ "type": "boolean",
992
+ "description": "Defines whether the user can see the last used colors in the bottom of the component",
993
+ "defaultValue": "false"
994
+ }
995
+ ],
996
+ "slots": [
997
+ {
998
+ "name": "default",
999
+ "visibility": "public",
1000
+ "type": "HTMLElement[]",
1001
+ "description": "Defines the content of the component."
1002
+ }
1003
+ ],
1004
+ "events": [
1005
+ {
1006
+ "name": "item-click",
1007
+ "visibility": "public",
1008
+ "parameters": [ { "name": "color", "type": "String", "description": "the selected color" } ],
1009
+ "description": "Fired when the user selects a color."
1010
+ }
1011
+ ],
1012
+ "methods": [
1013
+ {
1014
+ "name": "isOpen",
1015
+ "visibility": "protected",
1016
+ "since": "1.0.0-rc.16",
1017
+ "returnValue": { "type": "boolean" },
1018
+ "description": "Returns if the component is opened."
1019
+ },
1020
+ {
1021
+ "name": "openPopover",
1022
+ "visibility": "public",
1023
+ "since": "1.0.0-rc.16",
1024
+ "parameters": [
1025
+ {
1026
+ "name": "opener",
1027
+ "type": "HTMLElement",
1028
+ "optional": false,
1029
+ "description": "the element that the popover is shown at"
1030
+ }
1031
+ ],
1032
+ "description": "Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.",
1033
+ "deprecated": { "text": "The method is deprecated in favour of <code>showAt</code>." }
1034
+ },
1035
+ {
1036
+ "name": "showAt",
1037
+ "visibility": "public",
1038
+ "since": "1.1.1",
1039
+ "parameters": [
1040
+ {
1041
+ "name": "opener",
1042
+ "type": "HTMLElement",
1043
+ "optional": false,
1044
+ "description": "the element that the popover is shown at"
1045
+ }
1046
+ ],
1047
+ "description": "Shows the ColorPalettePopover."
1048
+ }
1049
+ ]
1050
+ },
919
1051
  {
920
1052
  "kind": "class",
921
1053
  "name": "sap.ui.webcomponents.main.ColorPicker",
@@ -927,13 +1059,13 @@
927
1059
  "visibility": "public",
928
1060
  "since": "1.0.0-rc.12",
929
1061
  "extends": "UI5Element",
930
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The ColorPicker allows users to choose any color and provides different input options for selecting colors.\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4 Use the color picker if: <ul> <li> users need to select any color freely.</li> </ul>\n\n<h4>When not to use:</h4> <ul> <li> Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ColorPicker.js\";</code>",
1062
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-color-picker</code> allows users to choose any color and provides different input options for selecting colors.\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4 Use the color picker if: <ul> <li> users need to select any color freely.</li> </ul>\n\n<h4>When not to use:</h4> <ul> <li> Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ColorPicker.js\";</code>",
931
1063
  "constructor": { "visibility": "public" },
932
1064
  "properties": [
933
1065
  {
934
1066
  "name": "color",
935
1067
  "visibility": "public",
936
- "type": "String",
1068
+ "type": "CSSColor",
937
1069
  "description": "Defines the currently selected color of the component. <br><br> <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property."
938
1070
  }
939
1071
  ],
@@ -958,7 +1090,7 @@
958
1090
  "visibility": "public",
959
1091
  "since": "1.0.0-rc.6",
960
1092
  "extends": "UI5Element",
961
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-combobox</code> component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select one or more options from a predefined list. <h3>Structure</h3> The <code>ui5-combobox</code> consists of the following elements: <ul> <li> Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. <br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ComboBox\";</code>",
1093
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-combobox</code> component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n<h3>Structure</h3> The <code>ui5-combobox</code> consists of the following elements: <ul> <li> Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\nThe <code>ui5-combobox</code> provides advanced keyboard handling. <br>\n\n<ul> <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.</li> <li>[ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.</li> <li>[ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.</li> <li>[DOWN] - Selects the next matching item in the picker.</li> <li>[UP] - Selects the previous matching item in the picker.</li> <li>[PAGEDOWN] - Moves selection down by page size (10 items by default).</li> <li>[PAGEUP] - Moves selection up by page size (10 items by default). </li> <li>[HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.</li> <li>[END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ComboBox\";</code>",
962
1094
  "constructor": { "visibility": "public" },
963
1095
  "properties": [
964
1096
  {
@@ -973,14 +1105,14 @@
973
1105
  "visibility": "public",
974
1106
  "since": "1.0.0-rc.15",
975
1107
  "type": "String",
976
- "description": "Receives id(or many ids) of the elements that label the combo box",
1108
+ "description": "Receives id(or many ids) of the elements that label the component",
977
1109
  "defaultValue": "\"\""
978
1110
  },
979
1111
  {
980
1112
  "name": "disabled",
981
1113
  "visibility": "public",
982
1114
  "type": "boolean",
983
- "description": "Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely uninteractive.",
1115
+ "description": "Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive.",
984
1116
  "defaultValue": "false"
985
1117
  },
986
1118
  {
@@ -1008,7 +1140,7 @@
1008
1140
  "name": "readonly",
1009
1141
  "visibility": "public",
1010
1142
  "type": "boolean",
1011
- "description": "Defines whether the component is readonly. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction.",
1143
+ "description": "Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction.",
1012
1144
  "defaultValue": "false"
1013
1145
  },
1014
1146
  {
@@ -1053,7 +1185,7 @@
1053
1185
  "visibility": "public",
1054
1186
  "since": "1.0.0-rc.9",
1055
1187
  "type": "HTMLElement[]",
1056
- "description": "Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the <code>ui5-select</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."
1188
+ "description": "Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the <code>ui5-combobox</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."
1057
1189
  }
1058
1190
  ],
1059
1191
  "events": [
@@ -1086,6 +1218,7 @@
1086
1218
  "visibility": "public",
1087
1219
  "since": "1.0.0-rc.15",
1088
1220
  "extends": "UI5Element",
1221
+ "implements": [ "sap.ui.webcomponents.main.IComboBoxItem" ],
1089
1222
  "description": "The <code>ui5-combobox-group-item</code> is type of suggestion item, that can be used to split the <code>ui5-combobox</code> suggestions into groups.",
1090
1223
  "constructor": { "visibility": "public" },
1091
1224
  "properties": [
@@ -1201,7 +1334,7 @@
1201
1334
  "visibility": "public",
1202
1335
  "since": "1.0.0-rc.6",
1203
1336
  "type": "string",
1204
- "description": "Determines the мinimum date available for selection.",
1337
+ "description": "Determines the minimum date available for selection.",
1205
1338
  "defaultValue": "\"\""
1206
1339
  },
1207
1340
  {
@@ -1209,6 +1342,14 @@
1209
1342
  "visibility": "public",
1210
1343
  "type": "CalendarType",
1211
1344
  "description": "Sets a calendar type used for display. If not set, the calendar type of the global configuration is used."
1345
+ },
1346
+ {
1347
+ "name": "secondaryCalendarType",
1348
+ "visibility": "public",
1349
+ "since": "1.0.0-rc.16",
1350
+ "type": "CalendarType",
1351
+ "description": "Defines the secondary calendar type. If not set, the calendar will only show the primary calendar type.",
1352
+ "defaultValue": "undefined"
1212
1353
  }
1213
1354
  ],
1214
1355
  "slots": []
@@ -1223,7 +1364,7 @@
1223
1364
  "static": true,
1224
1365
  "visibility": "public",
1225
1366
  "extends": "DateComponentBase",
1226
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action. The <code>ui5-date-picker</code> allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.\n\n<h3>Usage</h3>\n\nThe user can enter a date by: <ul> <li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and chooses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.\n\n<h3>Formatting</h3>\n\nIf a date is entered by typing it into the input field, it must fit to the used date format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"yyyy-MM-dd\", a valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n<h3>Keyboard Handling</h3> The <code>ui5-date-picker</code> provides advanced keyboard handling. If the <code>ui5-date-picker</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>\n\nIf the <code>ui5-date-picker</code> is focused and the picker dialog is not opened the user can increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery by using the following shortcuts: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <pre><code>&lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt;\n{\n\t\"calendarType\": \"Japanese\"\n}\n&lt;/script&gt;\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>",
1367
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action. The <code>ui5-date-picker</code> allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.\n\n<h3>Usage</h3>\n\nThe user can enter a date by: <ul> <li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.\n\n<h3>Formatting</h3>\n\nIf a date is entered by typing it into the input field, it must fit to the used date format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"yyyy-MM-dd\", a valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n<h3>Keyboard Handling</h3> The <code>ui5-date-picker</code> provides advanced keyboard handling. If the <code>ui5-date-picker</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>\n\nIf the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened, then users can increment or decrement the date referenced by <code>dateValue</code> property by using the following shortcuts: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <pre><code>&lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt;\n{\n\t\"calendarType\": \"Japanese\"\n}\n&lt;/script&gt;</code></pre>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>",
1227
1368
  "constructor": { "visibility": "public" },
1228
1369
  "properties": [
1229
1370
  {
@@ -1279,7 +1420,7 @@
1279
1420
  "visibility": "public",
1280
1421
  "since": "1.0.0-rc.8",
1281
1422
  "type": "boolean",
1282
- "description": "Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:<b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.",
1423
+ "description": "Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.",
1283
1424
  "defaultValue": "false"
1284
1425
  },
1285
1426
  {
@@ -1472,6 +1613,20 @@
1472
1613
  "description": "<h3 class=\"comment-api-title\">Overview</h3> The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n<h3>Usage</h3> The user can enter a date by: Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices). For the <code>ui5-daterange-picker</code> <h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DateRangePicker.js\";</code>\n\n<h3>Keyboard Handling</h3> The <code>ui5-daterange-picker</code> provides advanced keyboard handling. <br>\n\nWhen the <code>ui5-daterange-picker</code> input field is focused the user can increment or decrement respectively the range start or end date, depending on where the cursor is. The following shortcuts are available: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>",
1473
1614
  "constructor": { "visibility": "public" },
1474
1615
  "properties": [
1616
+ {
1617
+ "name": "dateValue",
1618
+ "readonly": "true",
1619
+ "visibility": "public",
1620
+ "type": "Date",
1621
+ "description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
1622
+ },
1623
+ {
1624
+ "name": "dateValueUTC",
1625
+ "readonly": "true",
1626
+ "visibility": "public",
1627
+ "type": "Date",
1628
+ "description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
1629
+ },
1475
1630
  {
1476
1631
  "name": "delimiter",
1477
1632
  "visibility": "public",
@@ -1506,7 +1661,7 @@
1506
1661
  "visibility": "public",
1507
1662
  "since": "1.0.0-rc.7",
1508
1663
  "extends": "DatePicker",
1509
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>DateTimePicker</code> component alows users to select both date (day, month and year) and time (hours, minutes and seconds) and for the purpose it consists of input field and Date/Time picker.\n\n<h3>Usage</h3>\n\nUse the <code>DateTimePicker</code> if you need a combined date and time input component. Don't use it if you want to use either date, or time value. In this case, use the <code>DatePicker</code> or the <code>TimePicker</code> components instead. <br><br> The user can set date/time by: <ul> <li>using the calendar and the time selectors</li> <li>typing in the input field</li> </ul>\n\nProgramatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property <br><br> As most of the input based components, the <code>DateTimePicker</code> supports properties, such as: <code>disabled</code>, <code>readonly</code>, <code>valueState</code> and <code>placeholder</code>.\n\n<h3>Formatting</h3>\n\nThe value entered by typing into the input field must fit to the used date/time format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> <b>Example:</b> the following format <code>dd/MM/yyyy, hh:mm:ss aa</code> corresponds the <code>13/04/2020, 03:16:16 AM</code> value. <br> The small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n<br><br> <b>Example:</b> the following format <code>dd/MM/yyyy, HH:mm:ss</code> corresponds the <code>13/04/2020, 15:16:16</code> value. <br> The capital 'H' indicates \"24\" hours format.\n\n<br><br> <b>Note:</b> If the <code>formatPattern</code> does NOT include time, the <code>DateTimePicker</code> will fallback to the default time format according to the locale.\n\n<br><br> <b>Note:</b> If no placeholder is set to the <code>DateTimePicker</code>, the current <code>formatPattern</code> is displayed as a placeholder. If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n<br><br> <b>Note:</b> If the user input does NOT match the <code>formatPattern</code>, the <code>DateTimePicker</code> makes an attempt to parse it based on the locale settings.\n\n<h3>Responsive behavior</h3>\n\nThe <code>DateTimePicker</code> is responsive and fully adapts to all devices. For larger screens, such as tablet or desktop, it is displayed as a popover, while on phone devices, it is displayed full screen.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DateTimePicker.js\";</code>",
1664
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>DateTimePicker</code> component alows users to select both date (day, month and year) and time (hours, minutes and seconds) and for the purpose it consists of input field and Date/Time picker.\n\n<h3>Usage</h3>\n\nUse the <code>DateTimePicker</code> if you need a combined date and time input component. Don't use it if you want to use either date, or time value. In this case, use the <code>DatePicker</code> or the <code>TimePicker</code> components instead. <br><br> The user can set date/time by: <ul> <li>using the calendar and the time selectors</li> <li>typing in the input field</li> </ul>\n\nProgramatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property\n\n<h3>Formatting</h3>\n\nThe value entered by typing into the input field must fit to the used date/time format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> <b>Example:</b> the following format <code>dd/MM/yyyy, hh:mm:ss aa</code> corresponds the <code>13/04/2020, 03:16:16 AM</code> value. <br> The small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n<br><br> <b>Example:</b> the following format <code>dd/MM/yyyy, HH:mm:ss</code> corresponds the <code>13/04/2020, 15:16:16</code> value. <br> The capital 'H' indicates \"24\" hours format.\n\n<br><br> <b>Note:</b> If the <code>formatPattern</code> does NOT include time, the <code>DateTimePicker</code> will fallback to the default time format according to the locale.\n\n<br><br> <b>Note:</b> If no placeholder is set to the <code>DateTimePicker</code>, the current <code>formatPattern</code> is displayed as a placeholder. If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n<br><br> <b>Note:</b> If the user input does NOT match the <code>formatPattern</code>, the <code>DateTimePicker</code> makes an attempt to parse it based on the locale settings.\n\n<h3>Responsive behavior</h3>\n\nThe <code>DateTimePicker</code> is responsive and fully adapts to all devices. For larger screens, such as tablet or desktop, it is displayed as a popover, while on phone devices, it is displayed full screen.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DateTimePicker.js\";</code>",
1510
1665
  "constructor": { "visibility": "public" },
1511
1666
  "methods": [ { "name": "openPicker", "visibility": "public", "description": "Opens the picker." } ]
1512
1667
  },
@@ -1594,13 +1749,6 @@
1594
1749
  "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-dialog</code> component is used to temporarily display some information in a size-limited window in front of the regular app screen. It is used to prompt the user for an action or a confirmation. The <code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and the main screen is dimmed/blocked. The dialog combines concepts known from other technologies where the windows have names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box. <br><br> The <code>ui5-dialog</code> is modal, which means that user action is required before returning to the parent window is possible. The content of the <code>ui5-dialog</code> is fully customizable.\n\n<h3>Structure</h3> A <code>ui5-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-dialog</code> is usually displayed at the center of the screen. Its position can be changed by the user. To enable this, you need to set the property <code>draggable</code> accordingly.\n\n<h3>Responsive Behavior</h3> The <code>stretch</code> property can be used to stretch the <code>ui5-dialog</code> on full screen.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Dialog\";</code>\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside <code>ui5-dialog</code>. Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside other components containing z-index. This might break z-index management.",
1595
1750
  "constructor": { "visibility": "public" },
1596
1751
  "properties": [
1597
- {
1598
- "name": "accessibleName",
1599
- "visibility": "public",
1600
- "type": "string",
1601
- "description": "Sets the accessible aria name of the component.",
1602
- "defaultValue": "\"\""
1603
- },
1604
1752
  {
1605
1753
  "name": "draggable",
1606
1754
  "visibility": "public",
@@ -1689,7 +1837,7 @@
1689
1837
  "name": "disabled",
1690
1838
  "visibility": "public",
1691
1839
  "type": "boolean",
1692
- "description": "Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabledcomponent is completely noninteractive.",
1840
+ "description": "Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive.",
1693
1841
  "defaultValue": "false"
1694
1842
  },
1695
1843
  {
@@ -1880,6 +2028,14 @@
1880
2028
  "description": "Defines the text alternative of the component. If not provided a default text alternative will be set, if present. <br><br> <b>Note:</b> Every icon should have a text alternative in order to calculate its accessible name.",
1881
2029
  "defaultValue": "\"\""
1882
2030
  },
2031
+ {
2032
+ "name": "accessibleRole",
2033
+ "visibility": "public",
2034
+ "since": "1.1.0",
2035
+ "type": "string",
2036
+ "description": "Defines the accessibility role of the component.",
2037
+ "defaultValue": "\"\""
2038
+ },
1883
2039
  {
1884
2040
  "name": "interactive",
1885
2041
  "visibility": "public",
@@ -1967,7 +2123,7 @@
1967
2123
  "visibility": "public",
1968
2124
  "extends": "sap.ui.webcomponents.base.UI5Element",
1969
2125
  "implements": [ "sap.ui.webcomponents.main.IInput" ],
1970
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-input</code> component allows the user to enter and edit text or numeric values in one line. <br> Additionally, you can provide <code>suggestionItems</code>, that are displayed in a popover right under the input. <br><br> The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>enabled</code> property). To visualize semantic states, such as \"error\" or \"warning\", the <code>valueState</code> property is provided. When the user makes changes to the text, the change event is fired, which enables you to react on any text change. <br><br> <b>Note:</b> If you are using the <code>ui5-input</code> as a single npm module, don't forget to import the <code>InputSuggestions</code> module from \"@ui5/webcomponents/dist/features/InputSuggestions.js\" to enable the suggestions functionality.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Input.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> (optional - for input suggestions support)",
2126
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-input</code> component allows the user to enter and edit text or numeric values in one line. <br> Additionally, you can provide <code>suggestionItems</code>, that are displayed in a popover right under the input. <br><br> The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>disabled</code> property). To visualize semantic states, such as \"error\" or \"warning\", the <code>valueState</code> property is provided. When the user makes changes to the text, the change event is fired, which enables you to react on any text change. <br><br> <b>Note:</b> If you are using the <code>ui5-input</code> as a single npm module, don't forget to import the <code>InputSuggestions</code> module from \"@ui5/webcomponents/dist/features/InputSuggestions.js\" to enable the suggestions functionality.\n\n<h3>Keyboard Handling</h3> The <code>ui5-input</code> provides the following keyboard shortcuts: <br>\n\n<ul> <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Opens value help if available, same as clicking the value help icon. (Does not open suggestion list.)</li> <li>[ESC] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.</li> <li>[ENTER] or [RETURN] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.</li> <li>[DOWN] - Focuses the next matching item in the suggestion list.</li> <li>[UP] - Focuses the previous matching item in the suggestion list.</li> <li>[HOME] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.</li> <li>[END] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.</li> <li>[PAGEUP] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.</li> <li>[PAGEDOWN] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Input.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> (optional - for input suggestions support)",
1971
2127
  "constructor": { "visibility": "public" },
1972
2128
  "properties": [
1973
2129
  {
@@ -1988,7 +2144,7 @@
1988
2144
  "visibility": "public",
1989
2145
  "since": "1.0.0-rc.15",
1990
2146
  "type": "String",
1991
- "description": "Receives id(or many ids) of the elements that label the input",
2147
+ "description": "Receives id(or many ids) of the elements that label the input.",
1992
2148
  "defaultValue": "\"\""
1993
2149
  },
1994
2150
  {
@@ -2029,7 +2185,7 @@
2029
2185
  "name": "previewItem",
2030
2186
  "readonly": "true",
2031
2187
  "visibility": "public",
2032
- "type": "ui5-suggestion-item",
2188
+ "type": "sap.ui.webcomponents.main.IInputSuggestionItem",
2033
2189
  "description": "The suggestion item on preview."
2034
2190
  },
2035
2191
  {
@@ -2082,12 +2238,12 @@
2082
2238
  "propertyName": "suggestionItems",
2083
2239
  "visibility": "public",
2084
2240
  "type": "sap.ui.webcomponents.main.IInputSuggestionItem[]",
2085
- "description": "Defines the suggestion items. <br><br> Example: <br><br> &lt;ui5-input show-suggestions><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text=\"Item #1\">&lt;/ui5-suggestion-item><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text=\"Item #2\">&lt;/ui5-suggestion-item><br> &lt;/ui5-input> <br> <ui5-input show-suggestions> <ui5-suggestion-group-item text=\"Group #1\"></ui5-suggestion-group-item> <ui5-suggestion-item text=\"Item #1\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #2\"></ui5-suggestion-item> <ui5-suggestion-group-item text=\"Group #2\"></ui5-suggestion-group-item> <ui5-suggestion-item text=\"Item #3\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #4\"></ui5-suggestion-item> </ui5-input> <br><br> <b>Note:</b> The suggestion would be displayed only if the <code>showSuggestions</code> property is set to <code>true</code>. <br><br> <b>Note:</b> The <code>&lt;ui5-suggestion-item></code> and <code>&lt;ui5-suggestion-group-item><code/> are recommended to be used as suggestion items. <br><br> <b>Note:</b> Importing the Input Suggestions Support feature: <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> <br> automatically imports the <code>&lt;ui5-suggestion-item></code> and <code>&lt;ui5-suggestion-group-item></code> for your convenience."
2241
+ "description": "Defines the suggestion items. <br><br> Example: <br><br> &lt;ui5-input show-suggestions><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text=\"Item #1\">&lt;/ui5-suggestion-item><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text=\"Item #2\">&lt;/ui5-suggestion-item><br> &lt;/ui5-input> <br> <ui5-input show-suggestions> <ui5-suggestion-group-item text=\"Group #1\"></ui5-suggestion-group-item> <ui5-suggestion-item text=\"Item #1\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #2\"></ui5-suggestion-item> <ui5-suggestion-group-item text=\"Group #2\"></ui5-suggestion-group-item> <ui5-suggestion-item text=\"Item #3\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #4\"></ui5-suggestion-item> </ui5-input> <br><br> <b>Note:</b> The suggestions would be displayed only if the <code>showSuggestions</code> property is set to <code>true</code>. <br><br> <b>Note:</b> The <code>&lt;ui5-suggestion-item&gt;</code> and <code>&lt;ui5-suggestion-group-item&gt;</code> are recommended to be used as suggestion items. <br><br> <b>Note:</b> Importing the Input Suggestions Support feature: <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> <br> automatically imports the <code>&lt;ui5-suggestion-item></code> and <code>&lt;ui5-suggestion-group-item></code> for your convenience."
2086
2242
  },
2087
2243
  {
2088
2244
  "name": "icon",
2089
2245
  "visibility": "public",
2090
- "type": "sap.ui.webcomponents.main.IIcon",
2246
+ "type": "sap.ui.webcomponents.main.IIcon[]",
2091
2247
  "description": "Defines the icon to be displayed in the component."
2092
2248
  },
2093
2249
  {
@@ -2095,7 +2251,7 @@
2095
2251
  "visibility": "public",
2096
2252
  "since": "1.0.0-rc.6",
2097
2253
  "type": "HTMLElement[]",
2098
- "description": "Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state. <br> <b>Note:</b> If the component has <code>suggestionItems</code>, the <code>valueStateMessage</code> would be displayed as part of the same popover, if used on desktop, or dialog - on phone."
2254
+ "description": "Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br><br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state. <br><br> <b>Note:</b> If the component has <code>suggestionItems</code>, the <code>valueStateMessage</code> would be displayed as part of the same popover, if used on desktop, or dialog - on phone."
2099
2255
  }
2100
2256
  ],
2101
2257
  "events": [
@@ -2117,7 +2273,7 @@
2117
2273
  {
2118
2274
  "name": "item",
2119
2275
  "type": "HTMLElement",
2120
- "description": "The previewed suggestion item"
2276
+ "description": "The previewed suggestion item."
2121
2277
  },
2122
2278
  {
2123
2279
  "name": "targetRef",
@@ -2130,23 +2286,23 @@
2130
2286
  {
2131
2287
  "name": "suggestion-item-select",
2132
2288
  "visibility": "public",
2133
- "parameters": [ { "name": "item", "type": "HTMLElement", "description": "The selected item" } ],
2289
+ "parameters": [ { "name": "item", "type": "HTMLElement", "description": "The selected item." } ],
2134
2290
  "description": "Fired when a suggestion item, that is displayed in the suggestion popup, is selected."
2135
2291
  },
2136
2292
  {
2137
2293
  "name": "suggestion-scroll",
2138
- "visibility": "public",
2294
+ "visibility": "protected",
2139
2295
  "since": "1.0.0-rc.8",
2140
2296
  "parameters": [
2141
2297
  {
2142
2298
  "name": "scrollTop",
2143
2299
  "type": "Integer",
2144
- "description": "The current scroll position"
2300
+ "description": "The current scroll position."
2145
2301
  },
2146
2302
  {
2147
2303
  "name": "scrollContainer",
2148
2304
  "type": "HTMLElement",
2149
- "description": "The scroll container"
2305
+ "description": "The scroll container."
2150
2306
  }
2151
2307
  ],
2152
2308
  "description": "Fired when the user scrolls the suggestion popover."
@@ -2166,6 +2322,16 @@
2166
2322
  }
2167
2323
  ]
2168
2324
  },
2325
+ {
2326
+ "kind": "interface",
2327
+ "name": "sap.ui.webcomponents.main.ISegmentedButtonItem",
2328
+ "basename": "ISegmentedButtonItem",
2329
+ "resource": "Interfaces.js",
2330
+ "module": "Interfaces",
2331
+ "static": true,
2332
+ "visibility": "public",
2333
+ "description": "Interface for components that may be slotted inside <code>ui5-segmented-button</code> as items"
2334
+ },
2169
2335
  {
2170
2336
  "kind": "interface",
2171
2337
  "name": "sap.ui.webcomponents.main.ISelectOption",
@@ -2267,7 +2433,7 @@
2267
2433
  "name": "showColon",
2268
2434
  "visibility": "public",
2269
2435
  "type": "boolean",
2270
- "description": "Defines whether semi-colon is added to the component text. <br><br> <b>Note:</b> Usually used in forms.",
2436
+ "description": "Defines whether colon is added to the component text. <br><br> <b>Note:</b> Usually used in forms.",
2271
2437
  "defaultValue": "false"
2272
2438
  },
2273
2439
  {
@@ -2300,6 +2466,13 @@
2300
2466
  "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-link</code> is a hyperlink component that is used to navigate to other apps and web pages, or to trigger actions. It is a clickable text element, visualized in such a way that it stands out from the standard text. On hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n<h3>Usage</h3>\n\nYou can set the <code>ui5-link</code> to be enabled or disabled. <br><br> To create a visual hierarchy in large lists of links, you can set the less important links as <code>Subtle</code> or the more important ones as <code>Emphasized</code>, by using the <code>design</code> property. <br><br> If the <code>href</code> property is set, the link behaves as the HTML anchor tag (<code>&lt;a&gt;&lt;a&#47;&gt;</code>) and opens the specified URL in the given target frame (<code>target</code> property). To specify where the linked content is opened, you can use the <code>target</code> property.\n\n<h3>Responsive behavior</h3>\n\nIf there is not enough space, the text of the <code>ui5-link</code> becomes truncated. If the <code>wrappingType</code> property is set to <code>\"Normal\"</code>, the text is displayed on several lines instead of being truncated.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Link\";</code>",
2301
2467
  "constructor": { "visibility": "public" },
2302
2468
  "properties": [
2469
+ {
2470
+ "name": "accessibilityAttributes",
2471
+ "visibility": "public",
2472
+ "since": "1.1.0",
2473
+ "type": "object",
2474
+ "description": "An object of strings that defines several additional accessibility attribute values for customization depending on the use case.\n\nIt supports the following fields:\n\n<ul> <li><code>expanded</code>: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: <ul> <li><code>true</code></li> <li><code>false</code></li> <ul> </li> <li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values: <ul> <li><code>Dialog</code></li> <li><code>Grid</code></li> <li><code>ListBox</code></li> <li><code>Menu</code></li> <li><code>Tree</code></li> </ul> </li> </ul>"
2475
+ },
2303
2476
  {
2304
2477
  "name": "accessibleNameRef",
2305
2478
  "visibility": "public",
@@ -2319,7 +2492,7 @@
2319
2492
  "name": "disabled",
2320
2493
  "visibility": "public",
2321
2494
  "type": "boolean",
2322
- "description": "Defines whether the component is disabled. <br><br> <b>Note:</b> When disabled, the component cannot be triggered by the user.",
2495
+ "description": "Defines whether the component is disabled. <br><br> <b>Note:</b> When disabled, the click event cannot be triggered by the user.",
2323
2496
  "defaultValue": "false"
2324
2497
  },
2325
2498
  {
@@ -2372,7 +2545,7 @@
2372
2545
  "static": true,
2373
2546
  "visibility": "public",
2374
2547
  "extends": "UI5Element",
2375
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-list</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br><br> The <code>ui5-list</code> is а container for the available list items: <ul> <li><code>ui5-li</code></li> <li><code>ui5-li-custom</code></li> <li><code>ui5-li-groupheader</code></li> </ul> <br><br> To benefit from the built-in selection mechanism, you can use the available selection modes, such as <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>. <br><br> Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.\n\n<br><br> <h3>Keyboard Handling</h3> The <code>ui5-list</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <br>\n\n<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> </ul>\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete), when the <code>mode</code> property is in use: <ul> <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li> <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/List.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/StandardListItem.js\";</code> (for <code>ui5-li</code>) <br> <code>import \"@ui5/webcomponents/dist/CustomListItem.js\";</code> (for <code>ui5-li-custom</code>) <br> <code>import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";</code> (for <code>ui5-li-groupheader</code>)",
2548
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-list</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br><br> The <code>ui5-list</code> is a container for the available list items: <ul> <li><code>ui5-li</code></li> <li><code>ui5-li-custom</code></li> <li><code>ui5-li-groupheader</code></li> </ul> <br><br> To benefit from the built-in selection mechanism, you can use the available selection modes, such as <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>. <br><br> Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4 The <code>ui5-list</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <br>\n\n<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> </ul>\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete), when the <code>mode</code> property is in use: <ul> <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li> <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li> </ul>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/List.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/StandardListItem.js\";</code> (for <code>ui5-li</code>) <br> <code>import \"@ui5/webcomponents/dist/CustomListItem.js\";</code> (for <code>ui5-li-custom</code>) <br> <code>import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";</code> (for <code>ui5-li-groupheader</code>)",
2376
2549
  "constructor": { "visibility": "public" },
2377
2550
  "properties": [
2378
2551
  {
@@ -2380,7 +2553,7 @@
2380
2553
  "visibility": "public",
2381
2554
  "since": "1.0.0-rc.15",
2382
2555
  "type": "String",
2383
- "description": "Sets the accessible aria name of the component.",
2556
+ "description": "Defines the accessible name of the component.",
2384
2557
  "defaultValue": "\"\""
2385
2558
  },
2386
2559
  {
@@ -2388,7 +2561,7 @@
2388
2561
  "visibility": "public",
2389
2562
  "since": "1.0.0-rc.15",
2390
2563
  "type": "String",
2391
- "description": "Receives id(or many ids) of the elements that label the input",
2564
+ "description": "Defines the IDs of the elements that label the input.",
2392
2565
  "defaultValue": "\"\""
2393
2566
  },
2394
2567
  {
@@ -2396,8 +2569,8 @@
2396
2569
  "visibility": "public",
2397
2570
  "since": "1.0.0-rc.15",
2398
2571
  "type": "String",
2399
- "description": "Defines the accessible role of the component. <br><br> <b>Note:</b> If you use notification list items, it's recommended to set <code>accessible-role=\"list\"</code> for better accessibility.",
2400
- "defaultValue": "\"listbox\""
2572
+ "description": "Defines the accessible role of the component. <br><br>",
2573
+ "defaultValue": "\"list\""
2401
2574
  },
2402
2575
  {
2403
2576
  "name": "busy",
@@ -2426,7 +2599,7 @@
2426
2599
  "visibility": "public",
2427
2600
  "since": "1.0.0-rc.13",
2428
2601
  "type": "ListGrowingMode",
2429
- "description": "Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>.",
2602
+ "description": "Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>.",
2430
2603
  "defaultValue": "\"None\""
2431
2604
  },
2432
2605
  {
@@ -2440,7 +2613,7 @@
2440
2613
  "name": "indent",
2441
2614
  "visibility": "public",
2442
2615
  "type": "boolean",
2443
- "description": "Determines whether the list items are indented.",
2616
+ "description": "Determines whether the component is indented.",
2444
2617
  "defaultValue": "false"
2445
2618
  },
2446
2619
  {
@@ -2483,6 +2656,7 @@
2483
2656
  "events": [
2484
2657
  {
2485
2658
  "name": "item-click",
2659
+ "allowPreventDefault": "true",
2486
2660
  "visibility": "public",
2487
2661
  "parameters": [ { "name": "item", "type": "HTMLElement", "description": "The clicked item." } ],
2488
2662
  "description": "Fired when an item is activated, unless the item's <code>type</code> property is set to <code>Inactive</code>."
@@ -2610,14 +2784,14 @@
2610
2784
  "kind": "class",
2611
2785
  "name": "sap.ui.webcomponents.main.MessageStrip",
2612
2786
  "basename": "MessageStrip",
2613
- "tagname": "ui5-messagestrip",
2787
+ "tagname": "ui5-message-strip",
2614
2788
  "resource": "MessageStrip.js",
2615
2789
  "module": "MessageStrip",
2616
2790
  "static": true,
2617
2791
  "visibility": "public",
2618
2792
  "since": "0.9.0",
2619
2793
  "extends": "UI5Element",
2620
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-messagestrip</code> component enables the embedding of app-related messages. It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-messagestrip</code> component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>",
2794
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-message-strip</code> component enables the embedding of app-related messages. It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-message-strip</code> component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>",
2621
2795
  "constructor": { "visibility": "public" },
2622
2796
  "properties": [
2623
2797
  {
@@ -2632,7 +2806,7 @@
2632
2806
  "name": "hideCloseButton",
2633
2807
  "visibility": "public",
2634
2808
  "type": "boolean",
2635
- "description": "Defines whether the MessageStrip renders close icon.",
2809
+ "description": "Defines whether the MessageStrip renders close button.",
2636
2810
  "defaultValue": "false"
2637
2811
  },
2638
2812
  {
@@ -2735,7 +2909,7 @@
2735
2909
  "visibility": "public",
2736
2910
  "since": "0.11.0",
2737
2911
  "extends": "UI5Element",
2738
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component provides a list box with items and a text field allowing the user to either type a value directly into the control, or choose from the list of existing items.\n\nIt is a drop-down list for selecting and filtering values, commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow of available options. The select options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options. <li> Input field - displays the selected option/s as token/s. Users can type to filter the list. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </li> </ul>\n\nIn the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for: <ul> <li>Every <code>ui5-mcb-item</code> that you provide. Example: <code><ui5-mcb-item stable-dom-ref=\"item1\"></ui5-mcb-item></code></li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-multi-combobox</code> exposes the following CSS Shadow Parts: <ul> <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>",
2912
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options. <li> Input field - displays the selected option/s as token/s. Users can type to filter the list. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-multi-combobox</code> exposes the following CSS Shadow Parts: <ul> <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>",
2739
2913
  "constructor": { "visibility": "public" },
2740
2914
  "properties": [
2741
2915
  {
@@ -2875,13 +3049,6 @@
2875
3049
  "type": "boolean",
2876
3050
  "description": "Defines the selected state of the component.",
2877
3051
  "defaultValue": "false"
2878
- },
2879
- {
2880
- "name": "stableDomRef",
2881
- "visibility": "public",
2882
- "since": "1.0.0-rc.11",
2883
- "type": "string",
2884
- "description": "Defines the stable selector that you can use via getStableDomRef method."
2885
3052
  }
2886
3053
  ],
2887
3054
  "slots": []
@@ -2911,7 +3078,7 @@
2911
3078
  "name": "showValueHelpIcon",
2912
3079
  "visibility": "public",
2913
3080
  "type": "boolean",
2914
- "description": "Determines whether a value help icon will be should in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event.",
3081
+ "description": "Determines whether a value help icon will be visualized in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event.",
2915
3082
  "defaultValue": "false"
2916
3083
  }
2917
3084
  ],
@@ -2972,13 +3139,6 @@
2972
3139
  "description": "Defines the selected state of the component.",
2973
3140
  "defaultValue": "false"
2974
3141
  },
2975
- {
2976
- "name": "stableDomRef",
2977
- "visibility": "public",
2978
- "since": "1.0.0-rc.11",
2979
- "type": "string",
2980
- "description": "Defines the stable selector that you can use via getStableDomRef method."
2981
- },
2982
3142
  {
2983
3143
  "name": "value",
2984
3144
  "visibility": "public",
@@ -3005,7 +3165,7 @@
3005
3165
  "static": true,
3006
3166
  "visibility": "public",
3007
3167
  "extends": "sap.ui.webcomponents.base.UI5Element",
3008
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-panel</code> component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.\n\n<h3>Guidelines:</h3> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul>\n\n<h3>Structure</h3> A panel consists of a title bar with a header text or custom header. <br> The content area can contain an arbitrary set of controls. The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br> The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br><b>Note:</b> the custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n<h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed height, it will take up the space even if the panel is collapsed.</li> <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>), an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-panel</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style the wrapper of the content</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Panel\";</code>",
3168
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-panel</code> component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.\n\n<h3>Guidelines:</h3> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul>\n\n<h3>Structure</h3> The panel's header area consists of a title bar with a header text or custom header. <br> The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br> The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br> The content area can contain an arbitrary set of controls. <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n<h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed height, it will take up the space even if the panel is collapsed.</li> <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>), an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-panel</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style the wrapper of the content</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Panel\";</code>",
3009
3169
  "constructor": { "visibility": "public" },
3010
3170
  "properties": [
3011
3171
  {
@@ -3050,6 +3210,14 @@
3050
3210
  "type": "string",
3051
3211
  "description": "This property is used to set the header text of the component. The text is visible in both expanded and collapsed states. <br><br> <b>Note:</b> This property is overridden by the <code>header</code> slot.",
3052
3212
  "defaultValue": "\"\""
3213
+ },
3214
+ {
3215
+ "name": "noAnimation",
3216
+ "visibility": "public",
3217
+ "since": "1.0.0-rc.16",
3218
+ "type": "boolean",
3219
+ "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.",
3220
+ "defaultValue": "false"
3053
3221
  }
3054
3222
  ],
3055
3223
  "slots": [
@@ -3220,7 +3388,15 @@
3220
3388
  "visibility": "public",
3221
3389
  "since": "1.0.0-rc.15",
3222
3390
  "type": "String",
3223
- "description": "Sets the accessible aria name of the component.",
3391
+ "description": "Defines the accessible name of the component.",
3392
+ "defaultValue": "\"\""
3393
+ },
3394
+ {
3395
+ "name": "accessibleNameRef",
3396
+ "visibility": "public",
3397
+ "since": "1.1.0",
3398
+ "type": "String",
3399
+ "description": "Defines the IDs of the elements that label the component.",
3224
3400
  "defaultValue": "\"\""
3225
3401
  },
3226
3402
  {
@@ -3378,6 +3554,12 @@
3378
3554
  "description": "Defines whether component is in disabled state.",
3379
3555
  "defaultValue": "false"
3380
3556
  },
3557
+ {
3558
+ "name": "displayValue",
3559
+ "visibility": "public",
3560
+ "type": "string",
3561
+ "description": "Specifies the text value to be displayed in the bar.\n\n<b>Note:</b> <ul> <li>If there is no value provided or the value is empty, the default percentage value is shown.</li> <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li> </ul>"
3562
+ },
3381
3563
  {
3382
3564
  "name": "hideValue",
3383
3565
  "visibility": "public",
@@ -3415,6 +3597,14 @@
3415
3597
  "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-radio-button</code> component enables users to select a single option from a set of options. When a <code>ui5-radio-button</code> is selected by the user, the <code>change</code> event is fired. When a <code>ui5-radio-button</code> that is within a group is selected, the one that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property. <br> <b>Note:</b> If <code>ui5-radio-button</code> is not part of a group, it can be selected once, but can not be deselected back.\n\n<h3>Keyboard Handling</h3>\n\nOnce the <code>ui5-radio-button</code> is on focus, it might be selected by pressing the Space and Enter keys. <br> The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group, while TAB and SHIFT + TAB can be used to enter or leave the radio button group. <br> <b>Note:</b> On entering radio button group, the focus goes to the currently selected radio button.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RadioButton\";</code>",
3416
3598
  "constructor": { "visibility": "public" },
3417
3599
  "properties": [
3600
+ {
3601
+ "name": "accessibleNameRef",
3602
+ "visibility": "public",
3603
+ "since": "1.1.0",
3604
+ "type": "String",
3605
+ "description": "Defines the IDs of the elements that label the component.",
3606
+ "defaultValue": "\"\""
3607
+ },
3418
3608
  {
3419
3609
  "name": "checked",
3420
3610
  "visibility": "public",
@@ -3494,7 +3684,7 @@
3494
3684
  "visibility": "public",
3495
3685
  "since": "1.0.0-rc.11",
3496
3686
  "extends": "SliderBase",
3497
- "description": "Represents a numerical interval and two handles (grips) to select a sub-range within it.\n\n<h3 class=\"comment-api-title\">Overview</h3> The purpose of the component to enable visual selection of sub-ranges within a given interval.\n\n<h3>Structure</h3> The most important properties of the Range Slider are: <ul> <li>min - The minimum value of the slider range</li> <li>max - The maximum value of the slider range</li> <li>value - The current value of the slider</li> <li>step - Determines the increments in which the slider will move</li> <li>showTooltip - Determines if a tooltip should be displayed above the handle</li> <li>showTickmarks - Displays a visual divider between the step values</li> <li>labelInterval - Labels some or all of the tickmarks with their values.</li> </ul> <h4>Notes:</h4> <ul> <li>The right and left handle can be moved individually and their positions could therefore switch.</li> <li>The entire range can be moved along the interval.</li> </ul> <h3>Usage</h3> The most common use case is to select and move sub-ranges on a continuous numerical scale.\n\n<h3>Responsive Behavior</h3> You can move the currently selected range by clicking on it and dragging it along the interval.\n\n<h3>Keyboard Handling</h3>\n\n<ul> <li><code>Left or Down Arrow</code> - Moves a component's handle or the entire selection one step to the left;</li> <li><code>Right or Up Arrow</code> - Moves a component's handle or the entire selection one step to the right;</li> <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;</li> <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;</li> <li><code>Plus</code> - Same as <code>Right or Up Arrow</code></li> <li><code>Minus</code> - Same as <code>Left or Down Arrow</code></li> <li><code>Home</code> - Moves the entire selection or the selected handle to the beginning of the component's range;</li> <li><code>End</code> - Moves the entire selection or the selected handle to the end of the component's range;</li> <li><code>Page Up</code> - Same as <code>Right or Up Arrow + Ctrl/Cmd</code></li> <li><code>Page Down</code> - Same as <code>Left or Down Arrow + Ctrl/Cmd</code></li> <li><code>Escape</code> - Resets the <code>startValue</code> and <code>endValue</code> properties to the values prior the component focusing;</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RangeSlider\";</code>",
3687
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> Represents a numerical interval and two handles (grips) to select a sub-range within it. The purpose of the component to enable visual selection of sub-ranges within a given interval.\n\n<h3>Structure</h3> The most important properties of the Range Slider are: <ul> <li>min - The minimum value of the slider range.</li> <li>max - The maximum value of the slider range.</li> <li>value - The current value of the slider.</li> <li>step - Determines the increments in which the slider will move.</li> <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li> <li>showTickmarks - Displays a visual divider between the step values.</li> <li>labelInterval - Labels some or all of the tickmarks with their values.</li> </ul> <h4>Notes:</h4> <ul> <li>The right and left handle can be moved individually and their positions could therefore switch.</li> <li>The entire range can be moved along the interval.</li> </ul> <h3>Usage</h3> The most common use case is to select and move sub-ranges on a continuous numerical scale.\n\n<h3>Responsive Behavior</h3> You can move the currently selected range by clicking on it and dragging it along the interval.\n\n<h3>Keyboard Handling</h3>\n\n<ul> <li><code>Left or Down Arrow</code> - Moves a component's handle or the entire selection one step to the left;</li> <li><code>Right or Up Arrow</code> - Moves a component's handle or the entire selection one step to the right;</li> <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;</li> <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;</li> <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li> <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li> <li><code>Home</code> - Moves the entire selection or the selected handle to the beginning of the component's range;</li> <li><code>End</code> - Moves the entire selection or the selected handle to the end of the component's range;</li> <li><code>Page Up</code> - Same as <code>Right or Up Arrow + Ctrl/Cmd</code>;</li> <li><code>Page Down</code> - Same as <code>Left or Down Arrow + Ctrl/Cmd</code>;</li> <li><code>Escape</code> - Resets the <code>startValue</code> and <code>endValue</code> properties to the values prior the component focusing;</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RangeSlider\";</code>",
3498
3688
  "constructor": { "visibility": "public" },
3499
3689
  "properties": [
3500
3690
  {
@@ -3532,7 +3722,7 @@
3532
3722
  "visibility": "public",
3533
3723
  "since": "1.0.0-rc.8",
3534
3724
  "extends": "UI5Element",
3535
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The RatingIndicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings.\n\n<h3>Usage</h3> The recommended number of icons is between 5 and 7.\n\n<h3>Responsive Behavior</h3> You can change the size of the Rating Indicator by changing its <code>font-size</code> CSS property. <br> Example: <code>&lt;ui5-rating-indicator style=\"font-size: 3rem;\">&lt;/ui5-rating-indicator></code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RatingIndicator.js\";</code>",
3725
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The Rating Indicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings.\n\n<h3>Usage</h3> The recommended number of icons is between 5 and 7.\n\n<h3>Responsive Behavior</h3> You can change the size of the Rating Indicator by changing its <code>font-size</code> CSS property. <br> Example: <code>&lt;ui5-rating-indicator style=\"font-size: 3rem;\">&lt;/ui5-rating-indicator></code>\n\n<h3>Keyboard Handling</h3> When the <code>ui5-rating-indicator</code> is focused, the user can change the rating with the following keyboard shortcuts: <br>\n\n<ul> <li>[RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing</li> <li>[LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.</li> <li>[HOME] - Sets the lowest value.</li> <li>[END] - Sets the highest value.</li> <li>[SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.</li> <li>Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RatingIndicator.js\";</code>",
3536
3726
  "constructor": { "visibility": "public" },
3537
3727
  "properties": [
3538
3728
  {
@@ -3554,7 +3744,7 @@
3554
3744
  "visibility": "public",
3555
3745
  "since": "1.0.0-rc.15",
3556
3746
  "type": "Integer",
3557
- "description": "The number of displayed rating symbols",
3747
+ "description": "The number of displayed rating symbols.",
3558
3748
  "defaultValue": "5"
3559
3749
  },
3560
3750
  {
@@ -3568,7 +3758,7 @@
3568
3758
  "name": "value",
3569
3759
  "visibility": "public",
3570
3760
  "type": "Float",
3571
- "description": "The indicated value of the rating <br><br> <b>Note:</b> If you set a number which is not round, it would be shown as follows: <ul> <li>1.0 - 1.2 -> 1</li> <li>1.3 - 1.7 -> 1.5</li> <li>1.8 - 1.9 -> 2</li> <ul>",
3761
+ "description": "The indicated value of the rating. <br><br> <b>Note:</b> If you set a number which is not round, it would be shown as follows: <ul> <li>1.0 - 1.2 -> 1</li> <li>1.3 - 1.7 -> 1.5</li> <li>1.8 - 1.9 -> 2</li> <ul>",
3572
3762
  "defaultValue": "0"
3573
3763
  }
3574
3764
  ],
@@ -3640,11 +3830,18 @@
3640
3830
  "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-segmented-button</code> shows a group of items. When the user clicks or taps one of the items, it stays in a pressed state. It automatically resizes the items to fit proportionally within the component. When no width is set, the component uses the available width. <br><br> <b>Note:</b> There can be just one selected <code>item</code> at a time.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SegmentedButton\";</code>",
3641
3831
  "constructor": { "visibility": "public" },
3642
3832
  "properties": [
3833
+ {
3834
+ "name": "accessibleName",
3835
+ "visibility": "public",
3836
+ "since": "1.0.3",
3837
+ "type": "String",
3838
+ "description": "Sets the accessible aria name of the component."
3839
+ },
3643
3840
  {
3644
3841
  "name": "selectedItem",
3645
3842
  "readonly": "true",
3646
3843
  "visibility": "public",
3647
- "type": "ui5-segmented-button-item",
3844
+ "type": "sap.ui.webcomponents.main.ISegmentedButtonItem",
3648
3845
  "description": "Currently selected item."
3649
3846
  }
3650
3847
  ],
@@ -3653,7 +3850,7 @@
3653
3850
  "name": "default",
3654
3851
  "propertyName": "items",
3655
3852
  "visibility": "public",
3656
- "type": "sap.ui.webcomponents.main.IButton[]",
3853
+ "type": "sap.ui.webcomponents.main.ISegmentedButtonItem[]",
3657
3854
  "description": "Defines the items of <code>ui5-segmented-button</code>. <br><br> <b>Note:</b> Multiple items are allowed. <br><br> <b>Note:</b> Use the <code>ui5-segmented-button-item</code> for the intended design."
3658
3855
  }
3659
3856
  ],
@@ -3678,32 +3875,30 @@
3678
3875
  "static": true,
3679
3876
  "visibility": "public",
3680
3877
  "extends": "ToggleButton",
3878
+ "implements": [ "sap.ui.webcomponents.main.ISegmentedButtonItem" ],
3681
3879
  "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nUsers can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>. <br><br> Clicking or tapping on a <code>ui5-segmented-button-item</code> changes its state to <code>pressed</code>. The item returns to its initial state when the user clicks or taps on it again. By applying additional custom CSS-styling classes, apps can give a different style to any <code>ui5-segmented-button-item</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SegmentedButtonItem\";</code>",
3682
3880
  "constructor": { "visibility": "public" },
3683
3881
  "properties": [
3684
3882
  {
3685
3883
  "name": "design",
3686
3884
  "visibility": "public",
3687
- "type": "undefined",
3688
- "description": "<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."
3885
+ "type": "ButtonDesign",
3886
+ "description": "<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.",
3887
+ "defaultValue": "\"Default\""
3689
3888
  },
3690
3889
  {
3691
3890
  "name": "iconEnd",
3692
3891
  "visibility": "public",
3693
- "type": "undefined",
3694
- "description": "<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."
3695
- },
3696
- {
3697
- "name": "iconSize",
3698
- "visibility": "public",
3699
- "type": "undefined",
3700
- "description": "<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."
3892
+ "type": "boolean",
3893
+ "description": "<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.",
3894
+ "defaultValue": "false"
3701
3895
  },
3702
3896
  {
3703
3897
  "name": "submits",
3704
3898
  "visibility": "public",
3705
- "type": "undefined",
3706
- "description": "<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."
3899
+ "type": "boolean",
3900
+ "description": "<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.",
3901
+ "defaultValue": "false"
3707
3902
  }
3708
3903
  ],
3709
3904
  "slots": []
@@ -3720,7 +3915,7 @@
3720
3915
  "visibility": "public",
3721
3916
  "since": "0.8.0",
3722
3917
  "extends": "sap.ui.webcomponents.base.UI5Element",
3723
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-select</code> component is used to create a drop-down list. The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.\n\n<h3>Keyboard Handling</h3> The <code>ui5-select</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li> <li>[UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.</li> <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li> <li>[ESC] - Closes the drop-down without changing the selection.</li> <li>[HOME] - Navigates to first option</li> <li>[END] - Navigates to the last option</li> </ul> <br>\n\n<h3>Stable DOM Refs</h3>\n\nIn the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for: <ul> <li>Every <code>ui5-option</code> that you provide. Example: <code><ui5-option stable-dom-ref=\"option1\"></ui5-option></code></li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code>",
3918
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-select</code> component is used to create a drop-down list. The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.\n\n<h3>Keyboard Handling</h3> The <code>ui5-select</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li> <li>[UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.</li> <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li> <li>[ESC] - Closes the drop-down without changing the selection.</li> <li>[HOME] - Navigates to first option</li> <li>[END] - Navigates to the last option</li> </ul> <br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code>",
3724
3919
  "constructor": { "visibility": "public" },
3725
3920
  "properties": [
3726
3921
  {
@@ -3764,7 +3959,7 @@
3764
3959
  "name": "selectedOption",
3765
3960
  "readonly": "true",
3766
3961
  "visibility": "public",
3767
- "type": "ui5-option",
3962
+ "type": "sap.ui.webcomponents.main.ISelectOption",
3768
3963
  "description": "Currently selected option."
3769
3964
  },
3770
3965
  {
@@ -3817,7 +4012,7 @@
3817
4012
  "visibility": "public",
3818
4013
  "since": "1.0.0-rc.11",
3819
4014
  "extends": "SliderBase",
3820
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The Slider component represents a numerical range and a handle (grip). The purpose of the component is to enable visual selection of a value in a continuous numerical range by moving an adjustable handle.\n\n<h3>Structure</h3> The most important properties of the Slider are: <ul> <li>min - The minimum value of the slider range</li> <li>max - The maximum value of the slider range</li> <li>value - The current value of the slider</li> <li>step - Determines the increments in which the slider will move</li> <li>showTooltip - Determines if a tooltip should be displayed above the handle</li> <li>showTickmarks - Displays a visual divider between the step values</li> <li>labelInterval - Labels some or all of the tickmarks with their values.</li> </ul>\n\n<h3>Usage</h3> The most common usecase is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n\n<h3>Responsive Behavior</h3> The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and resizing the width of the control. You can move the slider handle in several different ways: <ul> <li>Drag and drop to the desired value</li> <li>Click/tap on the range bar to move the handle to that location</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-slider</code> exposes the following CSS Shadow Parts: <ul> <li>progress-container - Used to style the progress container(the thin line) of the <code>ui5-slider</code></li> <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code></li> <li>handle - Used to style the handle of the <code>ui5-slider</code></li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<ul> <li><code>Left or Down Arrow</code> - Moves the handle one step to the left, effectively decreasing the component's value by <code>step</code> amount;</li> <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li> <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li> <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;</li> <li><code>Plus</code> - Same as <code>Right or Up Arrow</code></li> <li><code>Minus</code> - Same as <code>Left or Down Arrow</code></li> <li><code>Home</code> - Moves the handle to the beginning of the range;</li> <li><code>End</code> - Moves the handle to the end of the range;</li> <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code></li> <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code></li> <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Slider\";</code>",
4015
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The Slider component represents a numerical range and a handle (grip). The purpose of the component is to enable visual selection of a value in a continuous numerical range by moving an adjustable handle.\n\n<h3>Structure</h3> The most important properties of the Slider are: <ul> <li>min - The minimum value of the slider range.</li> <li>max - The maximum value of the slider range.</li> <li>value - The current value of the slider range.</li> <li>step - Determines the increments in which the slider will move.</li> <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li> <li>showTickmarks - Displays a visual divider between the step values.</li> <li>labelInterval - Labels some or all of the tickmarks with their values.</li> </ul>\n\n<h3>Usage</h3> The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n\n<h3>Responsive Behavior</h3> The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and resizing the width of the control. You can move the slider handle in several different ways: <ul> <li>Drag and drop the handle to the desired value.</li> <li>Click/tap on the range bar to move the handle to that location.</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-slider</code> exposes the following CSS Shadow Parts: <ul> <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li> <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li> <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<ul> <li><code>Left or Down Arrow</code> - Moves the handle one step to the left, effectively decreasing the component's value by <code>step</code> amount;</li> <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li> <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li> <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;</li> <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li> <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li> <li><code>Home</code> - Moves the handle to the beginning of the range;</li> <li><code>End</code> - Moves the handle to the end of the range;</li> <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li> <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li> <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Slider\";</code>",
3821
4016
  "constructor": { "visibility": "public" },
3822
4017
  "properties": [
3823
4018
  {
@@ -3861,21 +4056,21 @@
3861
4056
  "name": "max",
3862
4057
  "visibility": "public",
3863
4058
  "type": "Float",
3864
- "description": "Defines the maximum value of the slider",
4059
+ "description": "Defines the maximum value of the slider.",
3865
4060
  "defaultValue": "100"
3866
4061
  },
3867
4062
  {
3868
4063
  "name": "min",
3869
4064
  "visibility": "public",
3870
4065
  "type": "Float",
3871
- "description": "Defines the minimum value of the slider",
4066
+ "description": "Defines the minimum value of the slider.",
3872
4067
  "defaultValue": "0"
3873
4068
  },
3874
4069
  {
3875
4070
  "name": "showTickmarks",
3876
4071
  "visibility": "public",
3877
4072
  "type": "boolean",
3878
- "description": "Enables tick marks visualization for each step. <br><br> <b>Note:</b> The step must be a positive number.",
4073
+ "description": "Enables tickmarks visualization for each step. <br><br> <b>Note:</b> The step must be a positive number.",
3879
4074
  "defaultValue": "false"
3880
4075
  },
3881
4076
  {
@@ -3984,6 +4179,76 @@
3984
4179
  }
3985
4180
  ]
3986
4181
  },
4182
+ {
4183
+ "kind": "class",
4184
+ "name": "sap.ui.webcomponents.main.SplitButton",
4185
+ "basename": "SplitButton",
4186
+ "tagname": "ui5-split-button",
4187
+ "resource": "SplitButton.js",
4188
+ "module": "SplitButton",
4189
+ "static": true,
4190
+ "visibility": "public",
4191
+ "since": "1.1.0",
4192
+ "extends": "UI5Element",
4193
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<code>ui5-split-button</code> enables users to trigger actions. It is constructed of two separate actions - default action and arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys - <code>Space</code> or <code>Enter</code> for default action, and <code>Arrow Down</code> or <code>Arrow Up</code> for arrow action.\n\n<h3>Usage</h3>\n\n<code>ui5-split-button</code> consists two separate buttons: <ul> <li>for the first one (default action) you can define some <code>text</code> or an <code>icon</code>, or both. Also, it is possible to define different icon for active state of this button - <code>activeIcon</code>.</li> <li>the second one (arrow action) contains only <code>slim-arrow-down</code> icon.</li> </ul> You can choose a <code>design</code> from a set of predefined types (the same as for ui5-button) that offer different styling to correspond to the triggered action. Both text and arrow actions have the same design. <br><br> You can set the <code>ui5-split-button</code> as enabled or disabled. Both parts of an enabled <code>ui5-split-button</code> can be pressed by clicking or tapping it, or by certain keys, which changes the style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled <code>ui5-split-button</code> appears inactive and any of the two buttons cannot be pressed. <br><br> <b>Keyboard handing</b> <ul> <li><code>Space</code> or <code>Enter</code> - triggers the default action</li> <li><code>Shift</code> or <code>Escape</code> - if <code>Space</code> is pressed, releases the default action button without triggering the click event.</li> <li><code>Arrow Down</code>, <code>Arrow Up</code>, <code>Alt</code>+<code>Arrow Down</code>, <code>Alt</code>+<code>Arrow Up</code>, or <code>F4</code> - triggers the arrow action There are separate events that are fired on activating of <code>ui5-split-button</code> parts: <ul> <li><code>click</code> for the first button (default action)</li> <li><code>arrow-click</code> for the second button (arrow action)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/SplitButton.js\";</code>",
4194
+ "constructor": { "visibility": "public" },
4195
+ "properties": [
4196
+ {
4197
+ "name": "accessibleName",
4198
+ "visibility": "public",
4199
+ "type": "String",
4200
+ "description": "Sets the accessible aria name of the component."
4201
+ },
4202
+ {
4203
+ "name": "activeIcon",
4204
+ "visibility": "public",
4205
+ "type": "string",
4206
+ "description": "Defines the icon to be displayed in active state as graphical element within the component.",
4207
+ "defaultValue": "\"\""
4208
+ },
4209
+ {
4210
+ "name": "design",
4211
+ "visibility": "public",
4212
+ "type": "ButtonDesign",
4213
+ "description": "Defines the component design.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Default</code></li> <li><code>Emphasized</code></li> <li><code>Positive</code></li> <li><code>Negative</code></li> <li><code>Transparent</code></li> <li><code>Attention</code></li> </ul>",
4214
+ "defaultValue": "\"Default\""
4215
+ },
4216
+ {
4217
+ "name": "disabled",
4218
+ "visibility": "public",
4219
+ "type": "boolean",
4220
+ "description": "Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.",
4221
+ "defaultValue": "false"
4222
+ },
4223
+ {
4224
+ "name": "icon",
4225
+ "visibility": "public",
4226
+ "type": "string",
4227
+ "description": "Defines the icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> Example:\n\nSee all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.",
4228
+ "defaultValue": "\"\""
4229
+ }
4230
+ ],
4231
+ "slots": [
4232
+ {
4233
+ "name": "default",
4234
+ "visibility": "public",
4235
+ "type": "Node[]",
4236
+ "description": "Defines the text of the component. <br><br> <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
4237
+ }
4238
+ ],
4239
+ "events": [
4240
+ {
4241
+ "name": "arrow-click",
4242
+ "visibility": "public",
4243
+ "description": "Fired when the user clicks on the arrow action."
4244
+ },
4245
+ {
4246
+ "name": "click",
4247
+ "visibility": "public",
4248
+ "description": "Fired when the user clicks on the default action."
4249
+ }
4250
+ ]
4251
+ },
3987
4252
  {
3988
4253
  "kind": "class",
3989
4254
  "name": "sap.ui.webcomponents.main.StandardListItem",
@@ -4235,7 +4500,7 @@
4235
4500
  "visibility": "public",
4236
4501
  "since": "1.0.0-rc.15",
4237
4502
  "type": "ValueState",
4238
- "description": "Defines the state of the <code>additionalText</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code> and <code>\"Erorr\"</code>.",
4503
+ "description": "Defines the state of the <code>additionalText</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Information\"</code>, <code>\"Warning\"</code> and <code>\"Erorr\"</code>.",
4239
4504
  "defaultValue": "\"None\""
4240
4505
  },
4241
4506
  {
@@ -4292,9 +4557,17 @@
4292
4557
  "visibility": "public",
4293
4558
  "since": "0.8.0",
4294
4559
  "extends": "sap.ui.webcomponents.base.UI5Element",
4295
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-switch</code> component is used for changing between binary states. <br> The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties, but texts longer than 3 letters will be cutted off. <br> However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style=\"width: 200px\"></code>), and set widths, depending on the texts they would use. <br> Note: the component would not automatically stretch to fit the whole text width.\n\n<h3>Keyboard Handling</h3> The state can be changed by pressing the Space and Enter keys.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-switch</code> exposes the following CSS Shadow Parts: <ul> <li>slider - Used to style the track, where the handle is being slid</li> <li>text-on - Used to style the onText</li> <li>text-off - Used to style the offText</li> <li>handle - Used to style the handle of the switch</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Switch\";</code>",
4560
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-switch</code> component is used for changing between binary states. <br> The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties, but texts longer than 3 letters will be cutted off. <br> However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style=\"width: 200px\"></code>), and set widths, depending on the texts they would use. <br> Note: the component would not automatically stretch to fit the whole text width.\n\n<h3>Keyboard Handling</h3> The state can be changed by pressing the Space and Enter keys.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-switch</code> exposes the following CSS Shadow Parts: <ul> <li>slider - Used to style the track, where the handle is being slid</li> <li>text-on - Used to style the <code>textOn</code> property text</li> <li>text-off - Used to style the <code>textOff</code> property text</li> <li>handle - Used to style the handle of the switch</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Switch\";</code>",
4296
4561
  "constructor": { "visibility": "public" },
4297
4562
  "properties": [
4563
+ {
4564
+ "name": "accessibleNameRef",
4565
+ "visibility": "public",
4566
+ "since": "1.1.0",
4567
+ "type": "String",
4568
+ "description": "Receives id(or many ids) of the elements that label the component.",
4569
+ "defaultValue": "\"\""
4570
+ },
4298
4571
  {
4299
4572
  "name": "checked",
4300
4573
  "visibility": "public",
@@ -4320,14 +4593,14 @@
4320
4593
  "name": "textOff",
4321
4594
  "visibility": "public",
4322
4595
  "type": "string",
4323
- "description": "Defines the text, displayed when the component is not checked. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).",
4596
+ "description": "Defines the text, displayed when the component is not checked. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.",
4324
4597
  "defaultValue": "\"\""
4325
4598
  },
4326
4599
  {
4327
4600
  "name": "textOn",
4328
4601
  "visibility": "public",
4329
4602
  "type": "string",
4330
- "description": "Defines the text, displayed when the component is checked.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).",
4603
+ "description": "Defines the text, displayed when the component is checked.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.",
4331
4604
  "defaultValue": "\"\""
4332
4605
  }
4333
4606
  ],
@@ -4358,7 +4631,7 @@
4358
4631
  "name": "additionalText",
4359
4632
  "visibility": "public",
4360
4633
  "type": "string",
4361
- "description": "Represents the \"additionalText\" text, which is displayed in the tab filter.",
4634
+ "description": "Represents the \"additionalText\" text, which is displayed in the tab.",
4362
4635
  "defaultValue": "\"\""
4363
4636
  },
4364
4637
  {
@@ -4389,13 +4662,6 @@
4389
4662
  "description": "Specifies if the component is selected.",
4390
4663
  "defaultValue": "false"
4391
4664
  },
4392
- {
4393
- "name": "stableDomRef",
4394
- "visibility": "public",
4395
- "since": "1.0.0-rc.8",
4396
- "type": "string",
4397
- "description": "Defines the stable selector that you can use via getStableDomRef method."
4398
- },
4399
4665
  {
4400
4666
  "name": "text",
4401
4667
  "visibility": "public",
@@ -4411,6 +4677,14 @@
4411
4677
  "type": "Node[]",
4412
4678
  "description": "Defines the tab content."
4413
4679
  }
4680
+ ],
4681
+ "methods": [
4682
+ {
4683
+ "name": "getTabInStripDomRef",
4684
+ "visibility": "public",
4685
+ "since": "1.0.0-rc.16",
4686
+ "description": "Returns the DOM reference of the tab that is placed in the header. <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method."
4687
+ }
4414
4688
  ]
4415
4689
  },
4416
4690
  {
@@ -4424,7 +4698,7 @@
4424
4698
  "static": true,
4425
4699
  "visibility": "public",
4426
4700
  "extends": "sap.ui.webcomponents.base.UI5Element",
4427
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li> </ul>\n\n<h3>Stable DOM Refs</h3>\n\nIn the context of <code>ui5-tabcontainer</code>, you can provide a custom stable DOM refs for: <ul> <li>Each <code>ui5-tab</code> Example: <code><ui5-tab stable-dom-ref=\"in-stock\"></ui5-tab></code></li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)",
4701
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)",
4428
4702
  "constructor": { "visibility": "public" },
4429
4703
  "properties": [
4430
4704
  {
@@ -4445,8 +4719,11 @@
4445
4719
  "name": "showOverflow",
4446
4720
  "visibility": "public",
4447
4721
  "type": "boolean",
4448
- "description": "Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all tab filters are displayed so that it's easier for the user to select a specific tab filter.",
4449
- "defaultValue": "false"
4722
+ "description": "Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all tabs are displayed so that it's easier for the user to select a specific tab.",
4723
+ "defaultValue": "false",
4724
+ "deprecated": {
4725
+ "text": "Since the introduction of TabsOverflowMode overflows will always be visible if there is not enough space for all tabs, all hidden tabs are moved to a select list in the respective overflows and are accessible via the overflowButton and / or startOverflowButton"
4726
+ }
4450
4727
  },
4451
4728
  {
4452
4729
  "name": "tabLayout",
@@ -4454,6 +4731,14 @@
4454
4731
  "type": "TabLayout",
4455
4732
  "description": "Defines the alignment of the content and the <code>additionalText</code> of a tab.\n\n<br><br> <b>Note:</b> The content and the <code>additionalText</code> would be displayed vertically by defualt, but when set to <code>Inline</code>, they would be displayed horizontally.\n\n<br><br> Available options are: <ul> <li><code>Standard</code></li> <li><code>Inline</code></li> </ul>",
4456
4733
  "defaultValue": "\"Standard\""
4734
+ },
4735
+ {
4736
+ "name": "tabsOverflowMode",
4737
+ "visibility": "public",
4738
+ "since": "1.1.0",
4739
+ "type": "TabsOverflowMode",
4740
+ "description": "Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n<br><br> <b>Note:</b> Only one overflow at the end would be displayed by default, but when set to <code>StartAndEnd</code>, there will be two overflows on both ends, and tab order will not change on tab selection.\n\n<br><br> Available options are: <ul> <li><code>End</code></li> <li><code>StartAndEnd</code></li> </ul>",
4741
+ "defaultValue": "\"End\""
4457
4742
  }
4458
4743
  ],
4459
4744
  "slots": [
@@ -4470,6 +4755,13 @@
4470
4755
  "since": "1.0.0-rc.9",
4471
4756
  "type": "sap.ui.webcomponents.main.IButton",
4472
4757
  "description": "Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used."
4758
+ },
4759
+ {
4760
+ "name": "startOverflowButton",
4761
+ "visibility": "public",
4762
+ "since": "1.1.0",
4763
+ "type": "sap.ui.webcomponents.main.IButton",
4764
+ "description": "Defines the button which will open the start overflow menu if available. If nothing is provided to this slot, the default button will be used."
4473
4765
  }
4474
4766
  ],
4475
4767
  "events": [
@@ -4503,7 +4795,7 @@
4503
4795
  "static": true,
4504
4796
  "visibility": "public",
4505
4797
  "extends": "sap.ui.webcomponents.base.UI5Element",
4506
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table</code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data. <br><br> To render the <code>Table</code> properly, the order of the <code>columns</code> should match with the order of the item <code>cells</code> in the <code>rows</code>. <br><br> Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.\n\n<h3>Selection</h3> To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes: <code>SingleSelect</code> and <code>MultiSelect</code>. <br> In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between <code>Active</code> or <code>Inactive</code>. <br><br> In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or by pressing the <code>Space</code> or <code>Enter</code> keys. <br> In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header. <br><br> <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Table.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TableColumn.js\";</code> (for <code>ui5-table-column</code>) <br> <code>import \"@ui5/webcomponents/dist/TableRow.js\";</code> (for <code>ui5-table-row</code>) <br> <code>import \"@ui5/webcomponents/dist/TableCell.js\";</code> (for <code>ui5-table-cell</code>)",
4798
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table</code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data. <br><br> To render the <code>Table</code> properly, the order of the <code>columns</code> should match with the order of the item <code>cells</code> in the <code>rows</code>. <br><br> Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.\n\n<h3>Selection</h3> To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes: <code>SingleSelect</code> and <code>MultiSelect</code>. <br> In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between <code>Active</code> or <code>Inactive</code>. <br><br> In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or by pressing the <code>Space</code> or <code>Enter</code> keys. <br> In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header. <br><br> <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Table.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TableColumn.js\";</code> (for <code>ui5-table-column</code>) <br> <code>import \"@ui5/webcomponents/dist/TableRow.js\";</code> (for <code>ui5-table-row</code>) <br> <code>import \"@ui5/webcomponents/dist/TableCell.js\";</code> (for <code>ui5-table-cell</code>)",
4507
4799
  "constructor": { "visibility": "public" },
4508
4800
  "properties": [
4509
4801
  {
@@ -4526,7 +4818,7 @@
4526
4818
  "visibility": "public",
4527
4819
  "since": "1.0.0-rc.12",
4528
4820
  "type": "TableGrowingMode",
4529
- "description": "Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>.",
4821
+ "description": "Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>.",
4530
4822
  "defaultValue": "\"None\""
4531
4823
  },
4532
4824
  {
@@ -4572,7 +4864,7 @@
4572
4864
  "name": "stickyColumnHeader",
4573
4865
  "visibility": "public",
4574
4866
  "type": "boolean",
4575
- "description": "Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>Limitations:</b> <ul> <li>Browsers that do not support this feature: <ul> <li>Internet Explorer</li> <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li> <li>Mozilla Firefox lower than version 59</li> </ul> </li> <li>Scrolling behavior: <ul> <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code> or <code>overflow: auto</code> style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li> </ul> </li> </ul>",
4867
+ "description": "Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>Restrictions:</b> <ul> <li>Browsers that do not support this feature: <ul> <li>Internet Explorer</li> <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li> <li>Mozilla Firefox lower than version 59</li> </ul> </li> <li>Scrolling behavior: <ul> <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code> or <code>overflow: auto</code> style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li> </ul> </li> </ul>",
4576
4868
  "defaultValue": "false"
4577
4869
  }
4578
4870
  ],
@@ -4710,7 +5002,8 @@
4710
5002
  "visibility": "public",
4711
5003
  "since": "1.0.0-rc.15",
4712
5004
  "extends": "sap.ui.webcomponents.base.UI5Element",
4713
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-group-row</code> component represents a group row in the <code>ui5-table</code>.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-table-group-row</code> exposes the following CSS Shadow Parts: <ul> <li>group-row - Used to style the native <code>tr</code> tag element.</li> </ul>",
5005
+ "implements": [ "sap.ui.webcomponents.main.ITableRow" ],
5006
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-group-row</code> component represents a group row in the <code>ui5-table</code>.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-table-group-row</code> exposes the following CSS Shadow Parts: <ul> <li>group-row - Used to style the native <code>tr</code> element.</li> </ul>",
4714
5007
  "constructor": { "visibility": "public" },
4715
5008
  "properties": [],
4716
5009
  "slots": [
@@ -4733,7 +5026,7 @@
4733
5026
  "visibility": "public",
4734
5027
  "extends": "sap.ui.webcomponents.base.UI5Element",
4735
5028
  "implements": [ "sap.ui.webcomponents.main.ITableRow" ],
4736
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-row</code> component represents a row in the <code>ui5-table</code>.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-table-row</code> exposes the following CSS Shadow Parts: <ul> <li>row - Used to style the native <code>tr</code> element</li> <li>popin-row - Used to style the <code>tr</code> element</li> when a row pops in </ul>",
5029
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-row</code> component represents a row in the <code>ui5-table</code>.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-table-row</code> exposes the following CSS Shadow Parts: <ul> <li>row - Used to style the native <code>tr</code> element</li> <li>popin-row - Used to style the <code>tr</code> element when a row pops in</li> </ul>",
4737
5030
  "constructor": { "visibility": "public" },
4738
5031
  "properties": [
4739
5032
  {
@@ -4749,7 +5042,7 @@
4749
5042
  "visibility": "public",
4750
5043
  "since": "1.0.0-rc.15",
4751
5044
  "type": "TableRowType",
4752
- "description": "Defines the visual indication and behavior of the component. <br><br> Available options are: <ul> <li><code>Active</code></li> <li><code>Inactive</code></li> <ul> <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press, while with type <code>Inactive</code> - will not.",
5045
+ "description": "Defines the visual indication and behavior of the component. <br><br> Available options are: <ul> <li><code>Active</code></li> <li><code>Inactive</code></li> </ul> <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press, while with type <code>Inactive</code> - will not.",
4753
5046
  "defaultValue": "\"Inactive\""
4754
5047
  }
4755
5048
  ],
@@ -4787,7 +5080,7 @@
4787
5080
  "static": true,
4788
5081
  "visibility": "public",
4789
5082
  "extends": "sap.ui.webcomponents.base.UI5Element",
4790
- "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-textarea</code> component provides large spaces for text entries in the form of multiple rows. It has the functionality of the <code>TextField</code> with the additional functionality for multiline texts. <br><br> When empty, it can hold a placeholder similar to a <code>ui5-input</code>. You can define the rows of the <code>ui5-textarea</code> and also determine specific behavior when handling long texts.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-textarea</code> exposes the following CSS Shadow Parts: <ul> <li>textarea - Used to style the native textarea</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TextArea\";</code>",
5083
+ "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-textarea</code> component is used to enter multiple lines of text. <br><br> When empty, it can hold a placeholder similar to a <code>ui5-input</code>. You can define the rows of the <code>ui5-textarea</code> and also determine specific behavior when handling long texts.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-textarea</code> exposes the following CSS Shadow Parts: <ul> <li>textarea - Used to style the native textarea</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TextArea\";</code>",
4791
5084
  "constructor": { "visibility": "public" },
4792
5085
  "properties": [
4793
5086
  {
@@ -4809,7 +5102,7 @@
4809
5102
  "name": "disabled",
4810
5103
  "visibility": "public",
4811
5104
  "type": "boolean",
4812
- "description": "Indicates whether the user can interact with the component or not. <br><br> <b>Note:</b> Disabled components cannot be focused and they are out of the tab chain.",
5105
+ "description": "Indicates whether the user can interact with the component or not. <br><br> <b>Note:</b> A disabled component is completely noninteractive.",
4813
5106
  "defaultValue": "false"
4814
5107
  },
4815
5108
  {
@@ -4823,7 +5116,7 @@
4823
5116
  "name": "growingMaxLines",
4824
5117
  "visibility": "public",
4825
5118
  "type": "Integer",
4826
- "description": "Defines the maximum number of lines that the Web Component can grow.",
5119
+ "description": "Defines the maximum number of lines that the component can grow.",
4827
5120
  "defaultValue": "0"
4828
5121
  },
4829
5122
  {
@@ -4880,7 +5173,7 @@
4880
5173
  "name": "value",
4881
5174
  "visibility": "public",
4882
5175
  "type": "string",
4883
- "description": "Defines the value of the Web Component.",
5176
+ "description": "Defines the value of the component.",
4884
5177
  "defaultValue": "\"\""
4885
5178
  },
4886
5179
  {
@@ -4926,7 +5219,7 @@
4926
5219
  "visibility": "public",
4927
5220
  "since": "1.0.0-rc.6",
4928
5221
  "extends": "TimePickerBase",
4929
- "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-time-picker</code> component provides an input field with assigned sliders which opens on user action. The <code>ui5-time-picker</code> allows users to select a localized time using touch, mouse, or keyboard input. It consists of two parts: the time input field and the sliders.\n\n<h3>Usage</h3> The user can enter a time by: <ul> <li>Using the sliders that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and chooses the enter key, the sliders shows the corresponding time. When the user directly triggers the sliders display, the actual time is displayed. For the <code>ui5-time-picker</code>\n\n<h3>Formatting</h3>\n\nIf a time is entered by typing it into the input field, it must fit to the used time format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"HH:mm:ss\", a valid value string is \"11:42:35\" and the same is displayed in the input.\n\n<h3>Keyboard handling</h3> [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it. <br> When closed: <ul> <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li> <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li> <li>[SHIFT]+[PAGEUP] Increments minutes by 1.</li> <li>[SHIFT]+ [PAGEDOWN] Decrements minutes by 1.</li> <li>[SHIFT]+[CTRL]+[PAGEUP] Increments seconds by 1.</li> <li>[SHIFT]+[CTRL]+ [PAGEDOWN] Decrements seconds by 1.</li> </ul> When opened: <ul> <li>[UP] If focus is on one of the selection lists: Select the value which is above the current value. If the first value is selected, select the last value in the list. Exception: AM/ PM List: stay on the first item.</li> <li>[DOWN] If focus is on one of the selection lists: Select the value which is below the current value. If the last value is selected, select the first value in the list. Exception: AM/ PM List: stay on the last item.</li> <li>[LEFT] If focus is on one of the selection lists: Move focus to the selection list which is left of the current selection list. If focus is at the first selection list, move focus to the last selection list.</li> <li>[RIGHT] If focus is on one of the selection lists: Move focus to the selection list which is right of the current selection list. When focus is at the last selection list, move focus to the first selection list.</li> <li>[PAGEUP] If focus is on one of the selection lists: Move focus to the first entry of this list.</li> <li>[PAGEDOWN] If focus is on one of the selection lists: Move focus to the last entry of this list.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TimePicker.js\";</code>",
5222
+ "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-time-picker</code> component provides an input field with assigned sliders which are opened on user action. The <code>ui5-time-picker</code> allows users to select a localized time using touch, mouse, or keyboard input. It consists of two parts: the time input field and the sliders.\n\n<h3>Usage</h3> The user can enter a time by: <ul> <li>Using the sliders that are displayed in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and chooses the enter key, the sliders shows the corresponding time. When the user directly triggers the sliders display, the actual time is displayed. For the <code>ui5-time-picker</code>\n\n<h3>Formatting</h3>\n\nIf a time is entered by typing it into the input field, it must fit to the used time format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"HH:mm:ss\", a valid value string is \"11:42:35\" and the same is displayed in the input.\n\n<h3>Keyboard handling</h3> [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it. <br> When closed: <ul> <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li> <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li> <li>[SHIFT]+[PAGEUP] Increments minutes by 1.</li> <li>[SHIFT]+ [PAGEDOWN] Decrements minutes by 1.</li> <li>[SHIFT]+[CTRL]+[PAGEUP] Increments seconds by 1.</li> <li>[SHIFT]+[CTRL]+ [PAGEDOWN] Decrements seconds by 1.</li> </ul> When opened: <ul> <li>[UP] If focus is on one of the selection lists: Select the value which is above the current value. If the first value is selected, select the last value in the list. Exception: AM/ PM List: stay on the first item.</li> <li>[DOWN] If focus is on one of the selection lists: Select the value which is below the current value. If the last value is selected, select the first value in the list. Exception: AM/ PM List: stay on the last item.</li> <li>[LEFT] If focus is on one of the selection lists: Move focus to the selection list which is left of the current selection list. If focus is at the first selection list, move focus to the last selection list.</li> <li>[RIGHT] If focus is on one of the selection lists: Move focus to the selection list which is right of the current selection list. When focus is at the last selection list, move focus to the first selection list.</li> <li>[PAGEUP] If focus is on one of the selection lists: Move focus to the first entry of this list.</li> <li>[PAGEDOWN] If focus is on one of the selection lists: Move focus to the last entry of this list.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TimePicker.js\";</code>",
4930
5223
  "constructor": { "visibility": "public" },
4931
5224
  "properties": [
4932
5225
  {
@@ -5206,7 +5499,7 @@
5206
5499
  "visibility": "public",
5207
5500
  "since": "1.0.0-rc.9",
5208
5501
  "type": "sap.ui.webcomponents.main.IIcon",
5209
- "description": "Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used. Accepts <code>ui5-icon</code>"
5502
+ "description": "Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used. Accepts <code>ui5-icon</code>."
5210
5503
  }
5211
5504
  ],
5212
5505
  "events": [
@@ -5303,6 +5596,20 @@
5303
5596
  "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the deleted item." } ],
5304
5597
  "description": "Fired when the Delete button of any tree item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the component <code>mode</code> property is set to <code>Delete</code>."
5305
5598
  },
5599
+ {
5600
+ "name": "item-mouseout",
5601
+ "visibility": "public",
5602
+ "since": "1.0.0-rc.16",
5603
+ "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the hovered item." } ],
5604
+ "description": "Fired when the mouse cursor leaves the tree item borders."
5605
+ },
5606
+ {
5607
+ "name": "item-mouseover",
5608
+ "visibility": "public",
5609
+ "since": "1.0.0-rc.16",
5610
+ "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the hovered item." } ],
5611
+ "description": "Fired when the mouse cursor enters the tree item borders."
5612
+ },
5306
5613
  {
5307
5614
  "name": "item-toggle",
5308
5615
  "allowPreventDefault": "true",
@@ -5408,6 +5715,14 @@
5408
5715
  "description": "If set, an icon will be displayed before the text, representing the tree item.",
5409
5716
  "defaultValue": "\"\""
5410
5717
  },
5718
+ {
5719
+ "name": "indeterminate",
5720
+ "visibility": "public",
5721
+ "since": "1.1.0",
5722
+ "type": "boolean",
5723
+ "description": "Defines whether the selection of a tree node is displayed as partially selected. <br><br> <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code> and <code>selected</code> properties: <ul> <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected. <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected. <li> If a tree node has <code>selected</code> set to <code>false</code>, it is displayed as not selected regardless of the value of the <code>indeterminate</code> property. </ul> <br> <b>Note:</b> This property takes effect only when the <code>ui5-tree</code> is in <code>MultiSelect</code> mode.",
5724
+ "defaultValue": "false"
5725
+ },
5411
5726
  {
5412
5727
  "name": "selected",
5413
5728
  "visibility": "public",
@@ -5912,6 +6227,50 @@
5912
6227
  ],
5913
6228
  "slots": []
5914
6229
  },
6230
+ {
6231
+ "kind": "class",
6232
+ "name": "sap.ui.webcomponents.main.types.HasPopup",
6233
+ "basename": "HasPopup",
6234
+ "resource": "types/HasPopup.js",
6235
+ "module": "types/HasPopup",
6236
+ "static": true,
6237
+ "visibility": "public",
6238
+ "description": "Different types of HasPopup.",
6239
+ "constructor": { "visibility": "public" },
6240
+ "properties": [
6241
+ {
6242
+ "name": "Dialog",
6243
+ "visibility": "public",
6244
+ "type": "Dialog",
6245
+ "description": "Dialog popup type."
6246
+ },
6247
+ {
6248
+ "name": "Grid",
6249
+ "visibility": "public",
6250
+ "type": "Grid",
6251
+ "description": "Grid popup type."
6252
+ },
6253
+ {
6254
+ "name": "ListBox",
6255
+ "visibility": "public",
6256
+ "type": "ListBox",
6257
+ "description": "ListBox popup type."
6258
+ },
6259
+ {
6260
+ "name": "Menu",
6261
+ "visibility": "public",
6262
+ "type": "Menu",
6263
+ "description": "Menu popup type."
6264
+ },
6265
+ {
6266
+ "name": "Tree",
6267
+ "visibility": "public",
6268
+ "type": "Tree",
6269
+ "description": "Tree popup type."
6270
+ }
6271
+ ],
6272
+ "slots": []
6273
+ },
5915
6274
  {
5916
6275
  "kind": "class",
5917
6276
  "name": "sap.ui.webcomponents.main.types.InputType",
@@ -6502,6 +6861,32 @@
6502
6861
  ],
6503
6862
  "slots": []
6504
6863
  },
6864
+ {
6865
+ "kind": "class",
6866
+ "name": "sap.ui.webcomponents.main.types.TabsOverflowMode",
6867
+ "basename": "TabsOverflowMode",
6868
+ "resource": "types/TabsOverflowMode.js",
6869
+ "module": "types/TabsOverflowMode",
6870
+ "static": true,
6871
+ "visibility": "public",
6872
+ "description": "Different types of overflow modes.",
6873
+ "constructor": { "visibility": "public" },
6874
+ "properties": [
6875
+ {
6876
+ "name": "End",
6877
+ "visibility": "public",
6878
+ "type": "End",
6879
+ "description": "End type is used if there should be only one overflow with hidden the tabs at the end of the tab container."
6880
+ },
6881
+ {
6882
+ "name": "StartAndEnd",
6883
+ "visibility": "public",
6884
+ "type": "StartAndEnd",
6885
+ "description": "StartAndEnd type is used if there should be two overflows on both ends of the tab container."
6886
+ }
6887
+ ],
6888
+ "slots": []
6889
+ },
6505
6890
  {
6506
6891
  "kind": "class",
6507
6892
  "name": "sap.ui.webcomponents.main.types.TitleLevel",