@ui5/webcomponents 2.22.0-rc.3 → 2.22.0-rc.5

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 (292) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/AvatarBadge.d.ts +3 -3
  4. package/dist/AvatarBadge.js +10 -10
  5. package/dist/AvatarBadge.js.map +1 -1
  6. package/dist/AvatarBadgeTemplate.js +1 -1
  7. package/dist/AvatarBadgeTemplate.js.map +1 -1
  8. package/dist/Calendar.d.ts +7 -1
  9. package/dist/Calendar.js +40 -3
  10. package/dist/Calendar.js.map +1 -1
  11. package/dist/CalendarHeaderTemplate.js +2 -2
  12. package/dist/CalendarHeaderTemplate.js.map +1 -1
  13. package/dist/ColorPaletteItem.d.ts +0 -1
  14. package/dist/ColorPaletteItem.js +0 -2
  15. package/dist/ColorPaletteItem.js.map +1 -1
  16. package/dist/ComboBox.d.ts +4 -0
  17. package/dist/ComboBox.js +6 -0
  18. package/dist/ComboBox.js.map +1 -1
  19. package/dist/DateTimePicker.d.ts +5 -6
  20. package/dist/DateTimePicker.js +9 -11
  21. package/dist/DateTimePicker.js.map +1 -1
  22. package/dist/Input.d.ts +4 -0
  23. package/dist/Input.js.map +1 -1
  24. package/dist/List.js +8 -0
  25. package/dist/List.js.map +1 -1
  26. package/dist/ListItem.d.ts +9 -5
  27. package/dist/ListItem.js +10 -9
  28. package/dist/ListItem.js.map +1 -1
  29. package/dist/ListItemBase.d.ts +6 -1
  30. package/dist/ListItemBase.js +16 -0
  31. package/dist/ListItemBase.js.map +1 -1
  32. package/dist/ListItemBaseTemplate.d.ts +2 -2
  33. package/dist/ListItemBaseTemplate.js.map +1 -1
  34. package/dist/ListItemGroup.d.ts +2 -0
  35. package/dist/ListItemGroup.js.map +1 -1
  36. package/dist/Menu.d.ts +4 -0
  37. package/dist/Menu.js.map +1 -1
  38. package/dist/MenuItemTemplate.d.ts +5 -1
  39. package/dist/MenuItemTemplate.js +8 -3
  40. package/dist/MenuItemTemplate.js.map +1 -1
  41. package/dist/MultiComboBox.d.ts +5 -1
  42. package/dist/MultiComboBox.js +33 -24
  43. package/dist/MultiComboBox.js.map +1 -1
  44. package/dist/MultiInput.d.ts +6 -0
  45. package/dist/MultiInput.js +36 -8
  46. package/dist/MultiInput.js.map +1 -1
  47. package/dist/Panel.d.ts +22 -0
  48. package/dist/Panel.js +51 -0
  49. package/dist/Panel.js.map +1 -1
  50. package/dist/PanelTemplate.js +5 -2
  51. package/dist/PanelTemplate.js.map +1 -1
  52. package/dist/RangeSlider.d.ts +19 -1
  53. package/dist/RangeSlider.js +112 -29
  54. package/dist/RangeSlider.js.map +1 -1
  55. package/dist/RangeSliderTemplate.d.ts +0 -3
  56. package/dist/RangeSliderTemplate.js +22 -17
  57. package/dist/RangeSliderTemplate.js.map +1 -1
  58. package/dist/SegmentedButtonItem.d.ts +0 -1
  59. package/dist/SegmentedButtonItem.js +0 -2
  60. package/dist/SegmentedButtonItem.js.map +1 -1
  61. package/dist/Slider.d.ts +1 -2
  62. package/dist/Slider.js +12 -7
  63. package/dist/Slider.js.map +1 -1
  64. package/dist/SliderBase.d.ts +0 -1
  65. package/dist/SliderBase.js +18 -15
  66. package/dist/SliderBase.js.map +1 -1
  67. package/dist/SliderHandle.d.ts +42 -9
  68. package/dist/SliderHandle.js +49 -9
  69. package/dist/SliderHandle.js.map +1 -1
  70. package/dist/SliderHandleTemplate.js +7 -1
  71. package/dist/SliderHandleTemplate.js.map +1 -1
  72. package/dist/SliderScale.d.ts +53 -0
  73. package/dist/SliderScale.js +67 -0
  74. package/dist/SliderScale.js.map +1 -1
  75. package/dist/SliderScaleTemplate.js +5 -1
  76. package/dist/SliderScaleTemplate.js.map +1 -1
  77. package/dist/SliderTemplate.js +1 -1
  78. package/dist/SliderTemplate.js.map +1 -1
  79. package/dist/Tab.d.ts +8 -1
  80. package/dist/Tab.js +13 -0
  81. package/dist/Tab.js.map +1 -1
  82. package/dist/TabContainer.d.ts +6 -3
  83. package/dist/TabContainer.js +11 -8
  84. package/dist/TabContainer.js.map +1 -1
  85. package/dist/Table.d.ts +1 -0
  86. package/dist/Table.js +16 -3
  87. package/dist/Table.js.map +1 -1
  88. package/dist/TableCell.d.ts +2 -2
  89. package/dist/TableCell.js +2 -2
  90. package/dist/TableCell.js.map +1 -1
  91. package/dist/TableHeaderRowTemplate.js +5 -2
  92. package/dist/TableHeaderRowTemplate.js.map +1 -1
  93. package/dist/TableNavigation.js +3 -0
  94. package/dist/TableNavigation.js.map +1 -1
  95. package/dist/TableRow.d.ts +0 -2
  96. package/dist/TableRow.js +0 -9
  97. package/dist/TableRow.js.map +1 -1
  98. package/dist/TableRowBase.d.ts +6 -1
  99. package/dist/TableRowBase.js +37 -2
  100. package/dist/TableRowBase.js.map +1 -1
  101. package/dist/TableRowTemplate.js +4 -2
  102. package/dist/TableRowTemplate.js.map +1 -1
  103. package/dist/Tokenizer.d.ts +1 -0
  104. package/dist/Tokenizer.js +12 -0
  105. package/dist/Tokenizer.js.map +1 -1
  106. package/dist/Toolbar.d.ts +9 -0
  107. package/dist/Toolbar.js +4 -1
  108. package/dist/Toolbar.js.map +1 -1
  109. package/dist/css/themes/Dialog.css +1 -1
  110. package/dist/css/themes/ListItemBase.css +1 -1
  111. package/dist/css/themes/OptionBase.css +1 -1
  112. package/dist/css/themes/Panel.css +1 -1
  113. package/dist/css/themes/RangeSlider.css +1 -1
  114. package/dist/css/themes/Slider.css +1 -1
  115. package/dist/css/themes/SliderBase.css +1 -1
  116. package/dist/css/themes/SliderHandle.css +1 -1
  117. package/dist/css/themes/SliderScale.css +1 -1
  118. package/dist/css/themes/SliderTooltip.css +1 -1
  119. package/dist/css/themes/TableRow.css +1 -1
  120. package/dist/css/themes/TableRowBase.css +1 -1
  121. package/dist/css/themes/Toolbar.css +1 -1
  122. package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -1
  123. package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
  124. package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
  125. package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
  126. package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
  127. package/dist/css/themes/sap_horizon_auto/parameters-bundle.css +38 -94
  128. package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  129. package/dist/css/themes/sap_horizon_hc_auto/parameters-bundle.css +40 -96
  130. package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
  131. package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
  132. package/dist/custom-elements-internal.json +1016 -138
  133. package/dist/custom-elements.json +471 -108
  134. package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js +7 -2
  135. package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js.map +1 -1
  136. package/dist/dynamic-date-range-options/FromDateTimeTemplate.js +1 -1
  137. package/dist/dynamic-date-range-options/FromDateTimeTemplate.js.map +1 -1
  138. package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
  139. package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
  140. package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
  141. package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
  142. package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
  143. package/dist/generated/assets/themes/sap_horizon_auto/parameters-bundle.css.json +1 -1
  144. package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
  145. package/dist/generated/assets/themes/sap_horizon_hc_auto/parameters-bundle.css.json +1 -1
  146. package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
  147. package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
  148. package/dist/generated/themes/Dialog.css.d.ts +1 -1
  149. package/dist/generated/themes/Dialog.css.js +1 -1
  150. package/dist/generated/themes/Dialog.css.js.map +1 -1
  151. package/dist/generated/themes/ListItemBase.css.d.ts +1 -1
  152. package/dist/generated/themes/ListItemBase.css.js +1 -1
  153. package/dist/generated/themes/ListItemBase.css.js.map +1 -1
  154. package/dist/generated/themes/OptionBase.css.d.ts +1 -1
  155. package/dist/generated/themes/OptionBase.css.js +1 -1
  156. package/dist/generated/themes/OptionBase.css.js.map +1 -1
  157. package/dist/generated/themes/Panel.css.d.ts +1 -1
  158. package/dist/generated/themes/Panel.css.js +1 -1
  159. package/dist/generated/themes/Panel.css.js.map +1 -1
  160. package/dist/generated/themes/RangeSlider.css.d.ts +1 -1
  161. package/dist/generated/themes/RangeSlider.css.js +1 -1
  162. package/dist/generated/themes/RangeSlider.css.js.map +1 -1
  163. package/dist/generated/themes/Slider.css.d.ts +1 -1
  164. package/dist/generated/themes/Slider.css.js +1 -1
  165. package/dist/generated/themes/Slider.css.js.map +1 -1
  166. package/dist/generated/themes/SliderBase.css.d.ts +1 -1
  167. package/dist/generated/themes/SliderBase.css.js +1 -1
  168. package/dist/generated/themes/SliderBase.css.js.map +1 -1
  169. package/dist/generated/themes/SliderHandle.css.d.ts +1 -1
  170. package/dist/generated/themes/SliderHandle.css.js +1 -1
  171. package/dist/generated/themes/SliderHandle.css.js.map +1 -1
  172. package/dist/generated/themes/SliderScale.css.d.ts +1 -1
  173. package/dist/generated/themes/SliderScale.css.js +1 -1
  174. package/dist/generated/themes/SliderScale.css.js.map +1 -1
  175. package/dist/generated/themes/SliderTooltip.css.d.ts +1 -1
  176. package/dist/generated/themes/SliderTooltip.css.js +1 -1
  177. package/dist/generated/themes/SliderTooltip.css.js.map +1 -1
  178. package/dist/generated/themes/TableRow.css.d.ts +1 -1
  179. package/dist/generated/themes/TableRow.css.js +1 -1
  180. package/dist/generated/themes/TableRow.css.js.map +1 -1
  181. package/dist/generated/themes/TableRowBase.css.d.ts +1 -1
  182. package/dist/generated/themes/TableRowBase.css.js +1 -1
  183. package/dist/generated/themes/TableRowBase.css.js.map +1 -1
  184. package/dist/generated/themes/Toolbar.css.d.ts +1 -1
  185. package/dist/generated/themes/Toolbar.css.js +1 -1
  186. package/dist/generated/themes/Toolbar.css.js.map +1 -1
  187. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
  188. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
  189. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
  190. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
  191. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
  192. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
  193. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
  194. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
  195. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
  196. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
  197. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
  198. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
  199. package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
  200. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
  201. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
  202. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
  203. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +38 -94
  204. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
  205. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
  206. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
  207. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
  208. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.d.ts +1 -1
  209. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js +40 -96
  210. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js.map +1 -1
  211. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
  212. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
  213. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
  214. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
  215. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
  216. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
  217. package/dist/vscode.html-custom-data.json +118 -46
  218. package/dist/web-types.json +289 -93
  219. package/package-scripts.cjs +1 -0
  220. package/package.json +9 -9
  221. package/src/AvatarBadgeTemplate.tsx +1 -2
  222. package/src/CalendarHeaderTemplate.tsx +4 -0
  223. package/src/ListItemBaseTemplate.tsx +3 -3
  224. package/src/MenuItemTemplate.tsx +21 -10
  225. package/src/PanelTemplate.tsx +12 -5
  226. package/src/RangeSliderTemplate.tsx +146 -113
  227. package/src/SliderHandleTemplate.tsx +7 -1
  228. package/src/SliderScaleTemplate.tsx +26 -1
  229. package/src/SliderTemplate.tsx +0 -1
  230. package/src/TableHeaderRowTemplate.tsx +23 -1
  231. package/src/TableRowTemplate.tsx +13 -1
  232. package/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx +8 -2
  233. package/src/dynamic-date-range-options/FromDateTimeTemplate.tsx +1 -1
  234. package/src/i18n/messagebundle.properties +2 -2
  235. package/src/themes/Dialog.css +2 -2
  236. package/src/themes/ListItemBase.css +4 -3
  237. package/src/themes/OptionBase.css +6 -0
  238. package/src/themes/Panel.css +19 -2
  239. package/src/themes/RangeSlider.css +20 -68
  240. package/src/themes/Slider.css +3 -6
  241. package/src/themes/SliderBase.css +1 -269
  242. package/src/themes/SliderHandle.css +4 -3
  243. package/src/themes/SliderScale.css +45 -6
  244. package/src/themes/SliderTooltip.css +1 -1
  245. package/src/themes/TableRow.css +28 -39
  246. package/src/themes/TableRowBase.css +79 -20
  247. package/src/themes/Toolbar.css +2 -2
  248. package/src/themes/base/Panel-parameters.css +1 -0
  249. package/src/themes/base/SliderBase-parameters.css +1 -101
  250. package/src/themes/base/SliderHandle-parameters.css +22 -1
  251. package/src/themes/base/SliderScale-parameters.css +23 -3
  252. package/src/themes/base/sizes-parameters.css +2 -2
  253. package/src/themes/sap_fiori_3/Slider-parameters.css +4 -4
  254. package/src/themes/sap_fiori_3/SliderBase-parameters.css +0 -30
  255. package/src/themes/sap_fiori_3/SliderHandle-parameters.css +18 -1
  256. package/src/themes/sap_fiori_3/SliderScale-parameters.css +2 -8
  257. package/src/themes/sap_fiori_3_dark/Slider-parameters.css +4 -4
  258. package/src/themes/sap_fiori_3_dark/SliderBase-parameters.css +1 -26
  259. package/src/themes/sap_fiori_3_dark/SliderHandle-parameters.css +1 -5
  260. package/src/themes/sap_fiori_3_dark/SliderScale-parameters.css +1 -13
  261. package/src/themes/sap_fiori_3_hcb/Link-parameters.css +1 -1
  262. package/src/themes/sap_fiori_3_hcb/Slider-parameters.css +4 -4
  263. package/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css +1 -39
  264. package/src/themes/sap_fiori_3_hcb/SliderHandle-parameters.css +1 -5
  265. package/src/themes/sap_fiori_3_hcb/SliderScale-parameters.css +4 -6
  266. package/src/themes/sap_fiori_3_hcw/Link-parameters.css +1 -1
  267. package/src/themes/sap_fiori_3_hcw/Slider-parameters.css +4 -4
  268. package/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css +1 -37
  269. package/src/themes/sap_fiori_3_hcw/SliderHandle-parameters.css +1 -5
  270. package/src/themes/sap_fiori_3_hcw/SliderScale-parameters.css +1 -14
  271. package/src/themes/sap_horizon/Slider-parameters.css +4 -4
  272. package/src/themes/sap_horizon/SliderBase-parameters.css +0 -49
  273. package/src/themes/sap_horizon/SliderHandle-parameters.css +2 -1
  274. package/src/themes/sap_horizon/SliderScale-parameters.css +4 -5
  275. package/src/themes/sap_horizon_dark/Slider-parameters.css +4 -4
  276. package/src/themes/sap_horizon_dark/SliderBase-parameters.css +1 -50
  277. package/src/themes/sap_horizon_dark/SliderHandle-parameters.css +1 -5
  278. package/src/themes/sap_horizon_dark/SliderScale-parameters.css +1 -10
  279. package/src/themes/sap_horizon_hcb/Link-parameters.css +1 -1
  280. package/src/themes/sap_horizon_hcb/Slider-parameters.css +4 -4
  281. package/src/themes/sap_horizon_hcb/SliderBase-parameters.css +1 -71
  282. package/src/themes/sap_horizon_hcb/SliderHandle-parameters.css +4 -3
  283. package/src/themes/sap_horizon_hcb/SliderScale-parameters.css +3 -2
  284. package/src/themes/sap_horizon_hcw/Link-parameters.css +1 -1
  285. package/src/themes/sap_horizon_hcw/Slider-parameters.css +4 -4
  286. package/src/themes/sap_horizon_hcw/SliderBase-parameters.css +1 -72
  287. package/src/themes/sap_horizon_hcw/SliderHandle-parameters.css +1 -5
  288. package/src/themes/sap_horizon_hcw/SliderScale-parameters.css +1 -10
  289. package/dist/SliderBaseTemplate.d.ts +0 -10
  290. package/dist/SliderBaseTemplate.js +0 -19
  291. package/dist/SliderBaseTemplate.js.map +0 -1
  292. package/src/SliderBaseTemplate.tsx +0 -65
@@ -83,6 +83,7 @@ declare class MultiInput extends Input implements IFormInputElement {
83
83
  tokens: Slot<IToken>;
84
84
  _skipOpenSuggestions: boolean;
85
85
  _valueHelpIconPressed: boolean;
86
+ _focusInTokenizer: boolean;
86
87
  get formValidityMessage(): string;
87
88
  get formValidity(): ValidityStateFlags;
88
89
  get formFormattedValue(): FormData | string | null;
@@ -97,6 +98,11 @@ declare class MultiInput extends Input implements IFormInputElement {
97
98
  _onkeydown(e: KeyboardEvent): void;
98
99
  _onTokenizerKeydown(e: KeyboardEvent): void;
99
100
  _handleLeft(e: KeyboardEvent): void;
101
+ _focusToken(tokenToFocus: IToken): void;
102
+ /**
103
+ * @override
104
+ */
105
+ _handleChange(): void;
100
106
  _handleBackspace(e: KeyboardEvent): void;
101
107
  _focusFirstToken(e: KeyboardEvent): void;
102
108
  _onfocusout(e: FocusEvent): void;
@@ -10,7 +10,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
10
10
  import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
11
11
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
12
12
  import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
13
- import { isShow, isBackSpace, isLeft, isRight, isRightCtrl, isHome, isEnd, isDown, } from "@ui5/webcomponents-base/dist/Keys.js";
13
+ import { isShow, isBackSpace, isLeft, isRight, isRightCtrl, isHome, isEnd, isDown, isEnter, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
14
14
  import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
15
15
  import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL, MULTIINPUT_VALUE_HELP, FORM_MIXED_TEXTFIELD_REQUIRED, MULTIINPUT_FILTER_BUTTON_LABEL, } from "./generated/i18n/i18n-defaults.js";
16
16
  import Input from "./Input.js";
@@ -87,6 +87,7 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
87
87
  // Prevent suggestions' opening.
88
88
  this._skipOpenSuggestions = false;
89
89
  this._valueHelpIconPressed = false;
90
+ this._focusInTokenizer = false;
90
91
  }
91
92
  valueHelpPress() {
92
93
  this.closeValueStatePopover();
@@ -117,6 +118,7 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
117
118
  if (!this.contains(e.relatedTarget) && !this.shadowRoot.contains(e.relatedTarget)) {
118
119
  this.tokenizer._tokens.forEach(token => { token.selected = false; });
119
120
  }
121
+ this._focusInTokenizer = false;
120
122
  }
121
123
  valueHelpMouseUp() {
122
124
  setTimeout(() => {
@@ -136,6 +138,7 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
136
138
  }
137
139
  _onkeydown(e) {
138
140
  !this._isComposing && super._onkeydown(e);
141
+ this._isKeyNavigation = true;
139
142
  const target = e.target;
140
143
  const isHomeInBeginning = isHome(e) && target.selectionStart === 0;
141
144
  if (isHomeInBeginning) {
@@ -151,9 +154,14 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
151
154
  return this._handleBackspace(e);
152
155
  }
153
156
  this._skipOpenSuggestions = false;
157
+ if ((isEnter(e) || isTabNext(e)) && this.previousValue !== this.value) {
158
+ this._handleChange();
159
+ return;
160
+ }
154
161
  if (isShow(e)) {
155
162
  this.valueHelpPress();
156
163
  }
164
+ this._isKeyNavigation = false;
157
165
  }
158
166
  _onTokenizerKeydown(e) {
159
167
  const rightCtrl = isRightCtrl(e);
@@ -174,18 +182,30 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
174
182
  // selectionStart property applies only to inputs of types text, search, URL, tel, and password
175
183
  if (((cursorPosition === null && !this.value) || cursorPosition === 0) && lastToken) {
176
184
  e.preventDefault();
177
- lastToken.focus();
178
- this.tokenizer._itemNav.setCurrentItem(lastToken);
185
+ this._focusToken(lastToken);
179
186
  }
180
187
  }
188
+ _focusToken(tokenToFocus) {
189
+ this._focusInTokenizer = true;
190
+ tokenToFocus.focus();
191
+ this.tokenizer._itemNav.setCurrentItem(tokenToFocus);
192
+ }
193
+ /**
194
+ * @override
195
+ */
196
+ _handleChange() {
197
+ if (this._focusInTokenizer) {
198
+ return;
199
+ }
200
+ super._handleChange();
201
+ }
181
202
  _handleBackspace(e) {
182
203
  const tokens = this.tokens;
183
204
  const lastToken = tokens.length && tokens[tokens.length - 1];
184
205
  // Only move focus to the last token if the input is empty
185
206
  if (!this.value && lastToken) {
186
207
  e.preventDefault();
187
- lastToken.focus();
188
- this.tokenizer._itemNav.setCurrentItem(lastToken);
208
+ this._focusToken(lastToken);
189
209
  }
190
210
  }
191
211
  _focusFirstToken(e) {
@@ -193,8 +213,7 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
193
213
  const firstToken = tokens.length && tokens[0];
194
214
  if (firstToken) {
195
215
  e.preventDefault();
196
- firstToken.focus();
197
- this.tokenizer._itemNav.setCurrentItem(firstToken);
216
+ this._focusToken(firstToken);
198
217
  }
199
218
  }
200
219
  _onfocusout(e) {
@@ -214,8 +233,17 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
214
233
  */
215
234
  _onfocusin(e) {
216
235
  const inputDomRef = this.getInputDOMRef();
236
+ const wasTokenFocused = e.relatedTarget instanceof HTMLElement && e.relatedTarget.hasAttribute("ui5-token");
217
237
  if (e.target === inputDomRef) {
218
- super._onfocusin(e);
238
+ if (wasTokenFocused) {
239
+ this.focused = true;
240
+ this.open = true;
241
+ this._inputIconFocused = false;
242
+ this._focusedAfterClear = false;
243
+ }
244
+ else {
245
+ super._onfocusin(e);
246
+ }
219
247
  }
220
248
  }
221
249
  onBeforeRendering() {
@@ -1 +1 @@
1
- {"version":3,"file":"MultiInput.js","sourceRoot":"","sources":["../src/MultiInput.ts"],"names":[],"mappings":"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","sourcesContent":["import type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tisShow,\n\tisBackSpace,\n\tisLeft,\n\tisRight,\n\tisRightCtrl,\n\tisHome,\n\tisEnd,\n\tisDown,\n\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tMULTIINPUT_ROLEDESCRIPTION_TEXT,\n\tMULTIINPUT_VALUE_HELP_LABEL,\n\tMULTIINPUT_VALUE_HELP,\n\tFORM_MIXED_TEXTFIELD_REQUIRED,\n\tMULTIINPUT_FILTER_BUTTON_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport Input from \"./Input.js\";\nimport MultiInputTemplate from \"./MultiInputTemplate.js\";\nimport styles from \"./generated/themes/MultiInput.css.js\";\nimport type Token from \"./Token.js\";\nimport type Tokenizer from \"./Tokenizer.js\";\nimport { getTokensCountText } from \"./Tokenizer.js\";\nimport type { TokenizerTokenDeleteEventDetail } from \"./Tokenizer.js\";\n\nimport type {\n\tInputSelectionChangeEventDetail as MultiInputSelectionChangeEventDetail,\n} from \"./Input.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ninterface IToken extends UI5Element, ITabbable {\n\ttext?: string;\n\treadonly: boolean,\n\tselected: boolean,\n\tisTruncatable: boolean,\n}\n\ntype MultiInputTokenDeleteEventDetail = {\n\ttokens: Token[];\n}\n\n/**\n * @class\n * ### Overview\n * A `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n *\n * User can choose interaction for creating tokens.\n * Fiori Guidelines say that user should create tokens when:\n *\n * - Type a value in the input and press enter or focus out the input field (`change` event is fired)\n * - Move between suggestion items (`selection-change` event is fired)\n * - Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/MultiInput.js\";`\n * @constructor\n * @extends Input\n * @since 1.0.0-rc.9\n * @public\n */\n@customElement({\n\ttag: \"ui5-multi-input\",\n\trenderer: jsxRenderer,\n\tformAssociated: true,\n\ttemplate: MultiInputTemplate,\n\tstyles: [Input.styles, styles],\n})\n/**\n * Fired when the value help icon is pressed\n * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n * @public\n */\n@event(\"value-help-trigger\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when tokens are being deleted.\n * @param {Array} tokens An array containing the deleted tokens.\n * @public\n */\n@event(\"token-delete\", {\n\tbubbles: true,\n})\n\nclass MultiInput extends Input implements IFormInputElement {\n\teventDetails!: Input[\"eventDetails\"] & {\n\t\t\"value-help-trigger\": void,\n\t\t\"token-delete\": MultiInputTokenDeleteEventDetail,\n\t}\n\t/**\n\t * Determines whether a value help icon will be visualized in the end of the input.\n\t * Pressing the icon will fire `value-help-trigger` event.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowValueHelpIcon = false;\n\n\t/**\n\t * Indicates whether the tokenizer has tokens\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ttokenizerAvailable = false;\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * **Note:** When the component is used inside a form element,\n\t * the value is sent as the first element in the form data, even if it's empty.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tdeclare name?: string;\n\n\t/**\n\t * Indicates whether to show tokens in suggestions popover\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_showTokensInSuggestions = false;\n\n\t/**\n\t * Tracks whether user has explicitly toggled the show tokens state\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_userToggledShowTokens = false;\n\n\t/**\n\t * Defines the component tokens.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true })\n\ttokens!: Slot<IToken>;\n\n\t_skipOpenSuggestions: boolean;\n\t_valueHelpIconPressed: boolean;\n\n\tget formValidityMessage() {\n\t\treturn MultiInput.i18nBundle.getText(FORM_MIXED_TEXTFIELD_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\tconst tokens = (this.tokens || []);\n\n\t\treturn { valueMissing: this.required && !this.value && !tokens.length };\n\t}\n\n\tget formFormattedValue(): FormData | string | null {\n\t\tconst tokens = (this.tokens || []);\n\n\t\tif (tokens.length && this.name) {\n\t\t\tconst formData = new FormData();\n\n\t\t\tformData.append(this.name, this.value);\n\n\t\t\tfor (let i = 0; i < tokens.length; i++) {\n\t\t\t\tformData.append(this.name, (tokens[i].text || \"\"));\n\t\t\t}\n\n\t\t\treturn formData;\n\t\t}\n\n\t\treturn this.value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Prevent suggestions' opening.\n\t\tthis._skipOpenSuggestions = false;\n\t\tthis._valueHelpIconPressed = false;\n\t}\n\n\tvalueHelpPress() {\n\t\tthis.closeValueStatePopover();\n\t\tthis.fireDecoratorEvent(\"value-help-trigger\");\n\t}\n\n\ttokenDelete(e: CustomEvent<TokenizerTokenDeleteEventDetail>) {\n\t\tconst deletedTokens = e.detail.tokens;\n\t\tconst selectedTokens = this.tokens.filter(token => token.selected);\n\t\tconst shouldFocusInput = this.tokens.length - 1 === 0 || this.tokens.length === selectedTokens.length;\n\n\t\tif (this._readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (deletedTokens) {\n\t\t\tthis.fireDecoratorEvent(\"token-delete\", { tokens: deletedTokens });\n\n\t\t\tif (shouldFocusInput) {\n\t\t\t\tthis.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tvalueHelpMouseDown(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tthis.focus();\n\t\tthis.closeValueStatePopover();\n\t\tthis.tokenizer.open = false;\n\t\tthis._valueHelpIconPressed = true;\n\t}\n\n\t_tokenizerFocusOut(e: FocusEvent) {\n\t\tif (!this.contains(e.relatedTarget as HTMLElement) && !this.shadowRoot!.contains(e.relatedTarget as HTMLElement)) {\n\t\t\tthis.tokenizer._tokens.forEach(token => { token.selected = false; });\n\t\t}\n\t}\n\n\tvalueHelpMouseUp() {\n\t\tsetTimeout(() => {\n\t\t\tthis._valueHelpIconPressed = false;\n\t\t}, 0);\n\t}\n\n\tinnerFocusIn() {\n\t\tthis.focused = true;\n\t\tthis.tokenizer._scrollToEndOnExpand = true;\n\t\tthis.tokenizer.expanded = true;\n\t\tthis.tokens.forEach(token => {\n\t\t\ttoken.selected = false;\n\t\t});\n\t}\n\n\t_showMoreItemsPress() {\n\t\tthis.tokenizer._scrollToEndOnExpand = true;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\t!this._isComposing && super._onkeydown(e);\n\n\t\tconst target = e.target as HTMLInputElement;\n\t\tconst isHomeInBeginning = isHome(e) && target.selectionStart === 0;\n\n\t\tif (isHomeInBeginning) {\n\t\t\tthis._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens\n\t\t\treturn this._focusFirstToken(e);\n\t\t}\n\n\t\tif (isLeft(e)) {\n\t\t\tthis._skipOpenSuggestions = true;\n\t\t\treturn this._handleLeft(e);\n\t\t}\n\n\t\tif (isBackSpace(e)) {\n\t\t\tthis._skipOpenSuggestions = true;\n\t\t\treturn this._handleBackspace(e);\n\t\t}\n\n\t\tthis._skipOpenSuggestions = false;\n\n\t\tif (isShow(e)) {\n\t\t\tthis.valueHelpPress();\n\t\t}\n\t}\n\n\t_onTokenizerKeydown(e: KeyboardEvent) {\n\t\tconst rightCtrl = isRightCtrl(e);\n\t\tif (isRight(e) || isDown(e) || isEnd(e) || rightCtrl) {\n\t\t\te.preventDefault();\n\t\t\tconst lastTokenIndex = this.tokens.length - 1;\n\n\t\t\tif (e.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.focus();\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleLeft(e: KeyboardEvent) {\n\t\tconst cursorPosition = this.getDomRef()!.querySelector(`input`)!.selectionStart;\n\t\tconst tokens = this.tokens;\n\t\tconst lastToken = tokens.length && tokens[tokens.length - 1];\n\n\t\t// selectionStart property applies only to inputs of types text, search, URL, tel, and password\n\t\tif (((cursorPosition === null && !this.value) || cursorPosition === 0) && lastToken) {\n\t\t\te.preventDefault();\n\t\t\tlastToken.focus();\n\t\t\tthis.tokenizer._itemNav.setCurrentItem(lastToken);\n\t\t}\n\t}\n\n\t_handleBackspace(e: KeyboardEvent) {\n\t\tconst tokens = this.tokens;\n\t\tconst lastToken = tokens.length && tokens[tokens.length - 1];\n\n\t\t// Only move focus to the last token if the input is empty\n\t\tif (!this.value && lastToken) {\n\t\t\te.preventDefault();\n\t\t\tlastToken.focus();\n\t\t\tthis.tokenizer._itemNav.setCurrentItem(lastToken);\n\t\t}\n\t}\n\n\t_focusFirstToken(e: KeyboardEvent) {\n\t\tconst tokens = this.tokens;\n\t\tconst firstToken = tokens.length && tokens[0];\n\n\t\tif (firstToken) {\n\t\t\te.preventDefault();\n\n\t\t\tfirstToken.focus();\n\t\t\tthis.tokenizer._itemNav.setCurrentItem(firstToken);\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\tsuper._onfocusout(e);\n\t\tconst relatedTarget = e.relatedTarget as HTMLElement;\n\t\tconst insideDOM = this.contains(relatedTarget);\n\t\tconst insideShadowDom = this.shadowRoot!.contains(relatedTarget);\n\n\t\tif (!insideDOM && !insideShadowDom) {\n\t\t\tthis.tokenizer.expanded = false;\n\t\t}\n\n\t\tif (this.contains(relatedTarget) && relatedTarget.hasAttribute(\"ui5-token\")) {\n\t\t\tthis.focused = false;\n\t\t}\n\t}\n\n\t/**\n\t * @override\n\t */\n\t_onfocusin(e: FocusEvent) {\n\t\tconst inputDomRef = this.getInputDOMRef();\n\n\t\tif (e.target === inputDomRef) {\n\t\t\tsuper._onfocusin(e);\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tthis.style.setProperty(\"--_ui5-input-icons-count\", `${this.iconsCount}`);\n\t\tthis.tokenizerAvailable = this.tokens && this.tokens.length > 0;\n\n\t\tif (this.tokenizer) {\n\t\t\tthis.tokenizer.readonly = this.readonly;\n\n\t\t\t// Set the CSS variable on the tokenizer element so it's available in the shadow DOM\n\t\t\tthis.tokenizer.style.setProperty(\"--_ui5-input-icons-count\", `${this.iconsCount}`);\n\t\t}\n\t}\n\n\t/**\n\t * Override the _handlePickerAfterOpen method to handle token display based on device type\n\t */\n\t_handlePickerAfterOpen() {\n\t\tif (this.tokens.length > 0) {\n\t\t\t// On mobile: show tokens by default (for filter dialog feature)\n\t\t\t// On desktop: keep showing suggestions (default behavior)\n\t\t\tif (isPhone()) {\n\t\t\t\tthis._showTokensInSuggestions = true;\n\t\t\t}\n\t\t\tthis._userToggledShowTokens = false;\n\n\t\t\t// Expand tokenizer to show all tokens and prevent cut-off\n\t\t\tthis.tokenizer._scrollToEndOnExpand = true;\n\t\t\tthis.tokenizer.expanded = true;\n\t\t}\n\n\t\tsuper._handlePickerAfterOpen();\n\t}\n\n\tonAfterRendering() {\n\t\tsuper.onAfterRendering();\n\n\t\tthis.tokenizer.preventInitialFocus = true;\n\t}\n\n\tget iconsCount() {\n\t\treturn super.iconsCount + (this.showValueHelpIcon ? 1 : 0);\n\t}\n\n\tget tokenizer() {\n\t\treturn this.shadowRoot!.querySelector<Tokenizer>(\"[ui5-tokenizer]\")!;\n\t}\n\n\tget tokenizerExpanded() {\n\t\treturn this.tokenizer && this.tokenizer.expanded;\n\t}\n\n\tget _tokensCountText() {\n\t\treturn getTokensCountText(this.tokens.length);\n\t}\n\n\tget _valueHelpText() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_VALUE_HELP);\n\t}\n\n\tget _filterButtonAccessibleName() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_FILTER_BUTTON_LABEL);\n\t}\n\n\tget _tokensCountTextId() {\n\t\treturn `hiddenText-nMore`;\n\t}\n\n\tget _valueHelpTextId() {\n\t\treturn this.showValueHelpIcon ? `hiddenText-value-help` : \"\";\n\t}\n\n\t/**\n\t * Returns the placeholder value when there are no tokens.\n\t * @protected\n\t */\n\tget _placeholder() {\n\t\tif (this.tokens.length) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\treturn this.placeholder;\n\t}\n\n\tget accInfo() {\n\t\tconst ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this._valueStateLinksShortcutsTextAccId} ${this._valueHelpTextId}`.trim();\n\t\treturn {\n\t\t\t...super.accInfo,\n\t\t\t\"ariaRoledescription\": this.ariaRoleDescription,\n\t\t\t\"ariaDescribedBy\": ariaDescribedBy,\n\t\t};\n\t}\n\n\tget valueHelpLabel() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_VALUE_HELP_LABEL);\n\t}\n\n\tget ariaRoleDescription() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);\n\t}\n\n\tget morePopoverOpener(): HTMLElement {\n\t\tif (this.tokens.length === 1 && this.tokens[0].isTruncatable) {\n\t\t\treturn this.tokens[0];\n\t\t}\n\n\t\treturn this;\n\t}\n\n\tget shouldDisplayOnlyValueStateMessage() {\n\t\treturn this.hasValueStateMessage && !this.readonly && !this.open && this.focused && !this.tokenizer.open;\n\t}\n\n\t/**\n\t * Computes the effective state for showing tokens in suggestions.\n\t * Returns false (show suggestions) by default, true only when explicitly set.\n\t */\n\tget _effectiveShowTokensInSuggestions() {\n\t\t// If no tokens exist, always show suggestions\n\t\tif (this.tokens.length === 0) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Return the current state (will be true on mobile after picker opens, false otherwise)\n\t\treturn this._showTokensInSuggestions;\n\t}\n}\n\nMultiInput.define();\n\nexport default MultiInput;\nexport type {\n\tIToken,\n\tMultiInputTokenDeleteEventDetail,\n\tMultiInputSelectionChangeEventDetail,\n};\n"]}
1
+ {"version":3,"file":"MultiInput.js","sourceRoot":"","sources":["../src/MultiInput.ts"],"names":[],"mappings":"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","sourcesContent":["import type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tisShow,\n\tisBackSpace,\n\tisLeft,\n\tisRight,\n\tisRightCtrl,\n\tisHome,\n\tisEnd,\n\tisDown,\n\tisEnter,\n\tisTabNext,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tMULTIINPUT_ROLEDESCRIPTION_TEXT,\n\tMULTIINPUT_VALUE_HELP_LABEL,\n\tMULTIINPUT_VALUE_HELP,\n\tFORM_MIXED_TEXTFIELD_REQUIRED,\n\tMULTIINPUT_FILTER_BUTTON_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport Input from \"./Input.js\";\nimport MultiInputTemplate from \"./MultiInputTemplate.js\";\nimport styles from \"./generated/themes/MultiInput.css.js\";\nimport type Token from \"./Token.js\";\nimport type Tokenizer from \"./Tokenizer.js\";\nimport { getTokensCountText } from \"./Tokenizer.js\";\nimport type { TokenizerTokenDeleteEventDetail } from \"./Tokenizer.js\";\n\nimport type {\n\tInputSelectionChangeEventDetail as MultiInputSelectionChangeEventDetail,\n} from \"./Input.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ninterface IToken extends UI5Element, ITabbable {\n\ttext?: string;\n\treadonly: boolean,\n\tselected: boolean,\n\tisTruncatable: boolean,\n}\n\ntype MultiInputTokenDeleteEventDetail = {\n\ttokens: Token[];\n}\n\n/**\n * @class\n * ### Overview\n * A `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n *\n * User can choose interaction for creating tokens.\n * Fiori Guidelines say that user should create tokens when:\n *\n * - Type a value in the input and press enter or focus out the input field (`change` event is fired)\n * - Move between suggestion items (`selection-change` event is fired)\n * - Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/MultiInput.js\";`\n * @constructor\n * @extends Input\n * @since 1.0.0-rc.9\n * @public\n */\n@customElement({\n\ttag: \"ui5-multi-input\",\n\trenderer: jsxRenderer,\n\tformAssociated: true,\n\ttemplate: MultiInputTemplate,\n\tstyles: [Input.styles, styles],\n})\n/**\n * Fired when the value help icon is pressed\n * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n * @public\n */\n@event(\"value-help-trigger\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when tokens are being deleted.\n * @param {Array} tokens An array containing the deleted tokens.\n * @public\n */\n@event(\"token-delete\", {\n\tbubbles: true,\n})\n\nclass MultiInput extends Input implements IFormInputElement {\n\teventDetails!: Input[\"eventDetails\"] & {\n\t\t\"value-help-trigger\": void,\n\t\t\"token-delete\": MultiInputTokenDeleteEventDetail,\n\t}\n\t/**\n\t * Determines whether a value help icon will be visualized in the end of the input.\n\t * Pressing the icon will fire `value-help-trigger` event.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowValueHelpIcon = false;\n\n\t/**\n\t * Indicates whether the tokenizer has tokens\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ttokenizerAvailable = false;\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * **Note:** When the component is used inside a form element,\n\t * the value is sent as the first element in the form data, even if it's empty.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tdeclare name?: string;\n\n\t/**\n\t * Indicates whether to show tokens in suggestions popover\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_showTokensInSuggestions = false;\n\n\t/**\n\t * Tracks whether user has explicitly toggled the show tokens state\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_userToggledShowTokens = false;\n\n\t/**\n\t * Defines the component tokens.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true })\n\ttokens!: Slot<IToken>;\n\n\t_skipOpenSuggestions: boolean;\n\t_valueHelpIconPressed: boolean;\n\t_focusInTokenizer: boolean;\n\n\tget formValidityMessage() {\n\t\treturn MultiInput.i18nBundle.getText(FORM_MIXED_TEXTFIELD_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\tconst tokens = (this.tokens || []);\n\n\t\treturn { valueMissing: this.required && !this.value && !tokens.length };\n\t}\n\n\tget formFormattedValue(): FormData | string | null {\n\t\tconst tokens = (this.tokens || []);\n\n\t\tif (tokens.length && this.name) {\n\t\t\tconst formData = new FormData();\n\n\t\t\tformData.append(this.name, this.value);\n\n\t\t\tfor (let i = 0; i < tokens.length; i++) {\n\t\t\t\tformData.append(this.name, (tokens[i].text || \"\"));\n\t\t\t}\n\n\t\t\treturn formData;\n\t\t}\n\n\t\treturn this.value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Prevent suggestions' opening.\n\t\tthis._skipOpenSuggestions = false;\n\t\tthis._valueHelpIconPressed = false;\n\t\tthis._focusInTokenizer = false;\n\t}\n\n\tvalueHelpPress() {\n\t\tthis.closeValueStatePopover();\n\t\tthis.fireDecoratorEvent(\"value-help-trigger\");\n\t}\n\n\ttokenDelete(e: CustomEvent<TokenizerTokenDeleteEventDetail>) {\n\t\tconst deletedTokens = e.detail.tokens;\n\t\tconst selectedTokens = this.tokens.filter(token => token.selected);\n\t\tconst shouldFocusInput = this.tokens.length - 1 === 0 || this.tokens.length === selectedTokens.length;\n\n\t\tif (this._readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (deletedTokens) {\n\t\t\tthis.fireDecoratorEvent(\"token-delete\", { tokens: deletedTokens });\n\n\t\t\tif (shouldFocusInput) {\n\t\t\t\tthis.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tvalueHelpMouseDown(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tthis.focus();\n\t\tthis.closeValueStatePopover();\n\t\tthis.tokenizer.open = false;\n\t\tthis._valueHelpIconPressed = true;\n\t}\n\n\t_tokenizerFocusOut(e: FocusEvent) {\n\t\tif (!this.contains(e.relatedTarget as HTMLElement) && !this.shadowRoot!.contains(e.relatedTarget as HTMLElement)) {\n\t\t\tthis.tokenizer._tokens.forEach(token => { token.selected = false; });\n\t\t}\n\t\tthis._focusInTokenizer = false;\n\t}\n\n\tvalueHelpMouseUp() {\n\t\tsetTimeout(() => {\n\t\t\tthis._valueHelpIconPressed = false;\n\t\t}, 0);\n\t}\n\n\tinnerFocusIn() {\n\t\tthis.focused = true;\n\t\tthis.tokenizer._scrollToEndOnExpand = true;\n\t\tthis.tokenizer.expanded = true;\n\t\tthis.tokens.forEach(token => {\n\t\t\ttoken.selected = false;\n\t\t});\n\t}\n\n\t_showMoreItemsPress() {\n\t\tthis.tokenizer._scrollToEndOnExpand = true;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\t!this._isComposing && super._onkeydown(e);\n\t\tthis._isKeyNavigation = true;\n\n\t\tconst target = e.target as HTMLInputElement;\n\t\tconst isHomeInBeginning = isHome(e) && target.selectionStart === 0;\n\n\t\tif (isHomeInBeginning) {\n\t\t\tthis._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens\n\t\t\treturn this._focusFirstToken(e);\n\t\t}\n\n\t\tif (isLeft(e)) {\n\t\t\tthis._skipOpenSuggestions = true;\n\t\t\treturn this._handleLeft(e);\n\t\t}\n\n\t\tif (isBackSpace(e)) {\n\t\t\tthis._skipOpenSuggestions = true;\n\t\t\treturn this._handleBackspace(e);\n\t\t}\n\n\t\tthis._skipOpenSuggestions = false;\n\n\t\tif ((isEnter(e) || isTabNext(e)) && this.previousValue !== this.value) {\n\t\t\tthis._handleChange();\n\t\t\treturn;\n\t\t}\n\n\t\tif (isShow(e)) {\n\t\t\tthis.valueHelpPress();\n\t\t}\n\n\t\tthis._isKeyNavigation = false;\n\t}\n\n\t_onTokenizerKeydown(e: KeyboardEvent) {\n\t\tconst rightCtrl = isRightCtrl(e);\n\t\tif (isRight(e) || isDown(e) || isEnd(e) || rightCtrl) {\n\t\t\te.preventDefault();\n\t\t\tconst lastTokenIndex = this.tokens.length - 1;\n\n\t\t\tif (e.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.focus();\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleLeft(e: KeyboardEvent) {\n\t\tconst cursorPosition = this.getDomRef()!.querySelector(`input`)!.selectionStart;\n\t\tconst tokens = this.tokens;\n\t\tconst lastToken = tokens.length && tokens[tokens.length - 1];\n\n\t\t// selectionStart property applies only to inputs of types text, search, URL, tel, and password\n\t\tif (((cursorPosition === null && !this.value) || cursorPosition === 0) && lastToken) {\n\t\t\te.preventDefault();\n\t\t\tthis._focusToken(lastToken);\n\t\t}\n\t}\n\n\t_focusToken(tokenToFocus: IToken) {\n\t\tthis._focusInTokenizer = true;\n\t\ttokenToFocus.focus();\n\t\tthis.tokenizer._itemNav.setCurrentItem(tokenToFocus);\n\t}\n\n\t/**\n\t * @override\n\t */\n\t_handleChange() {\n\t\tif (this._focusInTokenizer) {\n\t\t\treturn;\n\t\t}\n\n\t\tsuper._handleChange();\n\t}\n\n\t_handleBackspace(e: KeyboardEvent) {\n\t\tconst tokens = this.tokens;\n\t\tconst lastToken = tokens.length && tokens[tokens.length - 1];\n\n\t\t// Only move focus to the last token if the input is empty\n\t\tif (!this.value && lastToken) {\n\t\t\te.preventDefault();\n\t\t\tthis._focusToken(lastToken);\n\t\t}\n\t}\n\n\t_focusFirstToken(e: KeyboardEvent) {\n\t\tconst tokens = this.tokens;\n\t\tconst firstToken = tokens.length && tokens[0];\n\n\t\tif (firstToken) {\n\t\t\te.preventDefault();\n\t\t\tthis._focusToken(firstToken);\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\tsuper._onfocusout(e);\n\t\tconst relatedTarget = e.relatedTarget as HTMLElement;\n\t\tconst insideDOM = this.contains(relatedTarget);\n\t\tconst insideShadowDom = this.shadowRoot!.contains(relatedTarget);\n\n\t\tif (!insideDOM && !insideShadowDom) {\n\t\t\tthis.tokenizer.expanded = false;\n\t\t}\n\n\t\tif (this.contains(relatedTarget) && relatedTarget.hasAttribute(\"ui5-token\")) {\n\t\t\tthis.focused = false;\n\t\t}\n\t}\n\n\t/**\n\t * @override\n\t */\n\t_onfocusin(e: FocusEvent) {\n\t\tconst inputDomRef = this.getInputDOMRef();\n\t\tconst wasTokenFocused = e.relatedTarget instanceof HTMLElement && e.relatedTarget.hasAttribute(\"ui5-token\");\n\n\t\tif (e.target === inputDomRef) {\n\t\t\tif (wasTokenFocused) {\n\t\t\t\tthis.focused = true;\n\t\t\t\tthis.open = true;\n\t\t\t\tthis._inputIconFocused = false;\n\t\t\t\tthis._focusedAfterClear = false;\n\t\t\t} else {\n\t\t\t\tsuper._onfocusin(e);\n\t\t\t}\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tthis.style.setProperty(\"--_ui5-input-icons-count\", `${this.iconsCount}`);\n\t\tthis.tokenizerAvailable = this.tokens && this.tokens.length > 0;\n\n\t\tif (this.tokenizer) {\n\t\t\tthis.tokenizer.readonly = this.readonly;\n\n\t\t\t// Set the CSS variable on the tokenizer element so it's available in the shadow DOM\n\t\t\tthis.tokenizer.style.setProperty(\"--_ui5-input-icons-count\", `${this.iconsCount}`);\n\t\t}\n\t}\n\n\t/**\n\t * Override the _handlePickerAfterOpen method to handle token display based on device type\n\t */\n\t_handlePickerAfterOpen() {\n\t\tif (this.tokens.length > 0) {\n\t\t\t// On mobile: show tokens by default (for filter dialog feature)\n\t\t\t// On desktop: keep showing suggestions (default behavior)\n\t\t\tif (isPhone()) {\n\t\t\t\tthis._showTokensInSuggestions = true;\n\t\t\t}\n\t\t\tthis._userToggledShowTokens = false;\n\n\t\t\t// Expand tokenizer to show all tokens and prevent cut-off\n\t\t\tthis.tokenizer._scrollToEndOnExpand = true;\n\t\t\tthis.tokenizer.expanded = true;\n\t\t}\n\n\t\tsuper._handlePickerAfterOpen();\n\t}\n\n\tonAfterRendering() {\n\t\tsuper.onAfterRendering();\n\n\t\tthis.tokenizer.preventInitialFocus = true;\n\t}\n\n\tget iconsCount() {\n\t\treturn super.iconsCount + (this.showValueHelpIcon ? 1 : 0);\n\t}\n\n\tget tokenizer() {\n\t\treturn this.shadowRoot!.querySelector<Tokenizer>(\"[ui5-tokenizer]\")!;\n\t}\n\n\tget tokenizerExpanded() {\n\t\treturn this.tokenizer && this.tokenizer.expanded;\n\t}\n\n\tget _tokensCountText() {\n\t\treturn getTokensCountText(this.tokens.length);\n\t}\n\n\tget _valueHelpText() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_VALUE_HELP);\n\t}\n\n\tget _filterButtonAccessibleName() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_FILTER_BUTTON_LABEL);\n\t}\n\n\tget _tokensCountTextId() {\n\t\treturn `hiddenText-nMore`;\n\t}\n\n\tget _valueHelpTextId() {\n\t\treturn this.showValueHelpIcon ? `hiddenText-value-help` : \"\";\n\t}\n\n\t/**\n\t * Returns the placeholder value when there are no tokens.\n\t * @protected\n\t */\n\tget _placeholder() {\n\t\tif (this.tokens.length) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\treturn this.placeholder;\n\t}\n\n\tget accInfo() {\n\t\tconst ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this._valueStateLinksShortcutsTextAccId} ${this._valueHelpTextId}`.trim();\n\t\treturn {\n\t\t\t...super.accInfo,\n\t\t\t\"ariaRoledescription\": this.ariaRoleDescription,\n\t\t\t\"ariaDescribedBy\": ariaDescribedBy,\n\t\t};\n\t}\n\n\tget valueHelpLabel() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_VALUE_HELP_LABEL);\n\t}\n\n\tget ariaRoleDescription() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);\n\t}\n\n\tget morePopoverOpener(): HTMLElement {\n\t\tif (this.tokens.length === 1 && this.tokens[0].isTruncatable) {\n\t\t\treturn this.tokens[0];\n\t\t}\n\n\t\treturn this;\n\t}\n\n\tget shouldDisplayOnlyValueStateMessage() {\n\t\treturn this.hasValueStateMessage && !this.readonly && !this.open && this.focused && !this.tokenizer.open;\n\t}\n\n\t/**\n\t * Computes the effective state for showing tokens in suggestions.\n\t * Returns false (show suggestions) by default, true only when explicitly set.\n\t */\n\tget _effectiveShowTokensInSuggestions() {\n\t\t// If no tokens exist, always show suggestions\n\t\tif (this.tokens.length === 0) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Return the current state (will be true on mobile after picker opens, false otherwise)\n\t\treturn this._showTokensInSuggestions;\n\t}\n}\n\nMultiInput.define();\n\nexport default MultiInput;\nexport type {\n\tIToken,\n\tMultiInputTokenDeleteEventDetail,\n\tMultiInputSelectionChangeEventDetail,\n};\n"]}
package/dist/Panel.d.ts CHANGED
@@ -142,6 +142,12 @@ declare class Panel extends UI5Element {
142
142
  _animationRunning: boolean;
143
143
  _pendingToggle: boolean;
144
144
  _touched: boolean;
145
+ /**
146
+ * Indicates whether the content area should be focusable.
147
+ * This is true when content is scrollable and has no focusable children.
148
+ * @private
149
+ */
150
+ _contentFocusable: boolean;
145
151
  /**
146
152
  * Defines the component header area.
147
153
  *
@@ -151,6 +157,7 @@ declare class Panel extends UI5Element {
151
157
  header: Slot<HTMLElement>;
152
158
  static i18nBundle: I18nBundle;
153
159
  onBeforeRendering(): void;
160
+ onAfterRendering(): void;
154
161
  shouldToggle(element: HTMLElement): boolean;
155
162
  get shouldNotAnimate(): boolean;
156
163
  _isMobile(): void;
@@ -161,6 +168,21 @@ declare class Panel extends UI5Element {
161
168
  _headerKeyUp(e: KeyboardEvent): void;
162
169
  _toggleOpen(): void;
163
170
  _headerOnTarget(target: HTMLElement): boolean;
171
+ /**
172
+ * Updates the focusability of the content area.
173
+ * Content becomes focusable when:
174
+ * - Panel is expanded (not collapsed)
175
+ * - Content is scrollable (scrollHeight > clientHeight or scrollWidth > clientWidth)
176
+ * - No focusable children exist inside
177
+ * @private
178
+ */
179
+ _updateContentFocusable(): void;
180
+ /**
181
+ * Returns the tabindex for the content area.
182
+ * Returns 0 when content should be focusable, undefined otherwise (removes attribute).
183
+ * @private
184
+ */
185
+ get _contentTabIndex(): number | undefined;
164
186
  get toggleButtonTitle(): string;
165
187
  get expanded(): boolean;
166
188
  get accRole(): Lowercase<PanelAccessibleRole>;
package/dist/Panel.js CHANGED
@@ -18,6 +18,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
18
18
  import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
19
19
  import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
20
20
  import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
21
+ import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
21
22
  import PanelTemplate from "./PanelTemplate.js";
22
23
  import { PANEL_ICON } from "./generated/i18n/i18n-defaults.js";
23
24
  // Styles
@@ -142,6 +143,12 @@ let Panel = Panel_1 = class Panel extends UI5Element {
142
143
  this._animationRunning = false;
143
144
  this._pendingToggle = false;
144
145
  this._touched = false;
146
+ /**
147
+ * Indicates whether the content area should be focusable.
148
+ * This is true when content is scrollable and has no focusable children.
149
+ * @private
150
+ */
151
+ this._contentFocusable = false;
145
152
  }
146
153
  onBeforeRendering() {
147
154
  // If the animation is running, it will set the content expanded state at the end
@@ -150,6 +157,9 @@ let Panel = Panel_1 = class Panel extends UI5Element {
150
157
  }
151
158
  this._hasHeader = !!this.header.length;
152
159
  }
160
+ onAfterRendering() {
161
+ this._updateContentFocusable();
162
+ }
153
163
  shouldToggle(element) {
154
164
  const customContent = this.header.length;
155
165
  if (customContent) {
@@ -240,6 +250,44 @@ let Panel = Panel_1 = class Panel extends UI5Element {
240
250
  _headerOnTarget(target) {
241
251
  return target.classList.contains("sapMPanelWrappingDiv");
242
252
  }
253
+ /**
254
+ * Updates the focusability of the content area.
255
+ * Content becomes focusable when:
256
+ * - Panel is expanded (not collapsed)
257
+ * - Content is scrollable (scrollHeight > clientHeight or scrollWidth > clientWidth)
258
+ * - No focusable children exist inside
259
+ * @private
260
+ */
261
+ _updateContentFocusable() {
262
+ // Not focusable when collapsed
263
+ if (this.collapsed) {
264
+ this._contentFocusable = false;
265
+ return;
266
+ }
267
+ const contentDom = this.shadowRoot?.querySelector(".ui5-panel-content");
268
+ if (!contentDom) {
269
+ this._contentFocusable = false;
270
+ return;
271
+ }
272
+ // Check if scrollable (vertical OR horizontal)
273
+ const isScrollable = contentDom.scrollHeight > contentDom.clientHeight
274
+ || contentDom.scrollWidth > contentDom.clientWidth;
275
+ if (!isScrollable) {
276
+ this._contentFocusable = false;
277
+ return;
278
+ }
279
+ // Check for focusable children (synchronous)
280
+ const tabbables = getTabbableElements(contentDom);
281
+ this._contentFocusable = tabbables.length === 0;
282
+ }
283
+ /**
284
+ * Returns the tabindex for the content area.
285
+ * Returns 0 when content should be focusable, undefined otherwise (removes attribute).
286
+ * @private
287
+ */
288
+ get _contentTabIndex() {
289
+ return this._contentFocusable ? 0 : undefined;
290
+ }
243
291
  get toggleButtonTitle() {
244
292
  return Panel_1.i18nBundle.getText(PANEL_ICON);
245
293
  }
@@ -337,6 +385,9 @@ __decorate([
337
385
  __decorate([
338
386
  property({ type: Boolean })
339
387
  ], Panel.prototype, "_touched", void 0);
388
+ __decorate([
389
+ property({ type: Boolean, noAttribute: true })
390
+ ], Panel.prototype, "_contentFocusable", void 0);
340
391
  __decorate([
341
392
  slot()
342
393
  ], Panel.prototype, "header", void 0);
package/dist/Panel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport { supportsTouch } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type Button from \"./Button.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./PanelTemplate.js\";\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * 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.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** 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 * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header - Used to style the wrapper of the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t@property({ type: Boolean })\n\tstickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_pendingToggle = false;\n\n\t@property({ type: Boolean })\n\t_touched = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tget shouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_isMobile() {\n\t\tif (supportsTouch()) {\n\t\t\tthis._touched = true;\n\t\t}\n\t}\n\n\t_headerFocusOut() {\n\t\tthis._touched = false;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\tif (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = true;\n\t\t}\n\n\t\t// Cancel toggle if Escape is pressed\n\t\tif (isEscape(e) && this._pendingToggle) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\t// Only toggle if space was pressed and escape wasn't pressed to cancel\n\t\t\tif (this._pendingToggle) {\n\t\t\t\tthis._toggleOpen();\n\t\t\t}\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase() as Lowercase<PanelAccessibleRole>;\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined as \"button\" | undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn Number.parseInt(this.headerLevel.slice(1));\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? -1 : 0;\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}
1
+ {"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport { supportsTouch } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type Button from \"./Button.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./PanelTemplate.js\";\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * 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.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** 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 * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header - Used to style the wrapper of the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t@property({ type: Boolean })\n\tstickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_pendingToggle = false;\n\n\t@property({ type: Boolean })\n\t_touched = false;\n\n\t/**\n\t * Indicates whether the content area should be focusable.\n\t * This is true when content is scrollable and has no focusable children.\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentFocusable = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tonAfterRendering() {\n\t\tthis._updateContentFocusable();\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tget shouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_isMobile() {\n\t\tif (supportsTouch()) {\n\t\t\tthis._touched = true;\n\t\t}\n\t}\n\n\t_headerFocusOut() {\n\t\tthis._touched = false;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\tif (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = true;\n\t\t}\n\n\t\t// Cancel toggle if Escape is pressed\n\t\tif (isEscape(e) && this._pendingToggle) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\t// Only toggle if space was pressed and escape wasn't pressed to cancel\n\t\t\tif (this._pendingToggle) {\n\t\t\t\tthis._toggleOpen();\n\t\t\t}\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\t/**\n\t * Updates the focusability of the content area.\n\t * Content becomes focusable when:\n\t * - Panel is expanded (not collapsed)\n\t * - Content is scrollable (scrollHeight > clientHeight or scrollWidth > clientWidth)\n\t * - No focusable children exist inside\n\t * @private\n\t */\n\t_updateContentFocusable() {\n\t\t// Not focusable when collapsed\n\t\tif (this.collapsed) {\n\t\t\tthis._contentFocusable = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst contentDom = this.shadowRoot?.querySelector(\".ui5-panel-content\") as HTMLElement | null;\n\t\tif (!contentDom) {\n\t\t\tthis._contentFocusable = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if scrollable (vertical OR horizontal)\n\t\tconst isScrollable = contentDom.scrollHeight > contentDom.clientHeight\n\t\t\t|| contentDom.scrollWidth > contentDom.clientWidth;\n\n\t\tif (!isScrollable) {\n\t\t\tthis._contentFocusable = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for focusable children (synchronous)\n\t\tconst tabbables = getTabbableElements(contentDom);\n\t\tthis._contentFocusable = tabbables.length === 0;\n\t}\n\n\t/**\n\t * Returns the tabindex for the content area.\n\t * Returns 0 when content should be focusable, undefined otherwise (removes attribute).\n\t * @private\n\t */\n\tget _contentTabIndex(): number | undefined {\n\t\treturn this._contentFocusable ? 0 : undefined;\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase() as Lowercase<PanelAccessibleRole>;\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined as \"button\" | undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn Number.parseInt(this.headerLevel.slice(1));\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? -1 : 0;\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}
@@ -22,8 +22,11 @@ export default function PanelTemplate() {
22
22
  }, name: slimArrowRight, showTooltip: true, accessibleName: this.toggleButtonTitle }) }), this._hasHeader ?
23
23
  _jsx("slot", { name: "header" })
24
24
  : // else
25
- _jsx("div", { id: `${this._id}-header-title`, class: "ui5-panel-header-title", children: this.headerText })] }) }), _jsx("div", { class: "ui5-panel-content", id: `${this._id}-content`, tabindex: -1, style: {
25
+ _jsx("div", { id: `${this._id}-header-title`, class: "ui5-panel-header-title", children: this.headerText })] }) }), _jsx("div", { class: {
26
+ "ui5-panel-content-wrapper": true,
27
+ "ui5-panel-content-focusable": this._contentFocusable,
28
+ }, style: {
26
29
  display: this._contentExpanded ? "block" : "none",
27
- }, part: "content", children: _jsx("slot", {}) })] }) }));
30
+ }, children: _jsx("div", { class: "ui5-panel-content", id: `${this._id}-content`, tabindex: this._contentTabIndex, part: "content", children: _jsx("slot", {}) }) })] }) }));
28
31
  }
29
32
  //# sourceMappingURL=PanelTemplate.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PanelTemplate.js","sourceRoot":"","sources":["../src/PanelTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,aAAa;IACpC,OAAO,CAAC,4BACP,eACC,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,OAAO,gBACN,IAAI,CAAC,uBAAuB,qBACvB,IAAI,CAAC,iCAAiC,aAErD,IAAI,CAAC,qBAAqB;oBAC3B,+CAA+C;oBAC/C,cACC,KAAK,EAAE;4BACN,2BAA2B,EAAE,IAAI;4BACjC,kCAAkC,EAAE,IAAI,CAAC,YAAY;yBACrD,EACD,IAAI,EAAE,IAAI,CAAC,kBAAkB,gBACjB,IAAI,CAAC,uBAAuB,YAExC,eACC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,mBACR,IAAI,CAAC,OAAO,CAAC,YAAY,mBACzB,IAAI,CAAC,OAAO,CAAC,YAAY,qBACvB,IAAI,CAAC,OAAO,CAAC,cAAc,EAC5C,IAAI,EAAC,QAAQ,aAEX,CAAC,IAAI,CAAC,KAAK;oCACZ,cAAK,KAAK,EAAC,8BAA8B,YACtC,IAAI,CAAC,UAAU,CAAC,CAAC;4CAClB,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,2DAA2D,EACjE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,uBAAuB,EACpE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAClC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,YAEnD,cAAK,KAAK,EAAC,+BAA+B,YACzC,KAAC,IAAI,IACJ,KAAK,EAAE;4DACN,uBAAuB,EAAE,IAAI;4DAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;yDAC1D,EACD,IAAI,EAAE,cAAc,GAEd,GACF,GACE;4CACT,CAAC,CAAC,OAAO;gDACT,KAAC,IAAI,IACJ,KAAK,EAAE;wDACN,yBAAyB,EAAE,IAAI;wDAC/B,uBAAuB,EAAE,IAAI;wDAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;qDAC1D,EACD,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,iBAAiB,GACrC,GAEE,EAGL,IAAI,CAAC,UAAU,CAAC,CAAC;oCAClB,eAAM,IAAI,EAAC,QAAQ,GAAQ;oCAC3B,CAAC,CAAC,OAAO;wCACT,cACC,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,eAAe,EAC/B,KAAK,EAAC,wBAAwB,YAE5B,IAAI,CAAC,UAAU,GACZ,IAEF,GACD,EAIP,cACC,KAAK,EAAC,mBAAmB,EACzB,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,UAAU,EAC1B,QAAQ,EAAG,CAAC,CAAC,EACb,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;qBACjD,EACD,IAAI,EAAC,SAAS,YAEd,gBAAa,GACR,IACD,GACJ,CAAC,CAAC;AACN,CAAC","sourcesContent":["import type Panel from \"./Panel.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\n\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function PanelTemplate(this: Panel) {\n\treturn (<>\n\t\t<div\n\t\t\tclass=\"ui5-panel-root\"\n\t\t\trole={this.accRole}\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-labelledby={this.fixedPanelAriaLabelledbyReference}\n\t\t>\n\t\t\t{ this.hasHeaderOrHeaderText &&\n\t\t\t\t// header: either header or h1 with header text\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper\": true,\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.headingWrapperRole}\n\t\t\t\t\taria-level={this.headingWrapperAriaLevel}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tonClick={this._headerClick}\n\t\t\t\t\t\tonKeyDown={this._headerKeyDown}\n\t\t\t\t\t\tonKeyUp={this._headerKeyUp}\n\t\t\t\t\t\tonTouchStart={this._isMobile}\n\t\t\t\t\t\tonFocusOut={this._headerFocusOut}\n\t\t\t\t\t\tclass=\"ui5-panel-header\"\n\t\t\t\t\t\ttabindex={this.headerTabIndex}\n\t\t\t\t\t\trole={this.accInfo.role}\n\t\t\t\t\t\taria-expanded={this.accInfo.ariaExpanded}\n\t\t\t\t\t\taria-controls={this.accInfo.ariaControls}\n\t\t\t\t\t\taria-labelledby={this.accInfo.ariaLabelledby}\n\t\t\t\t\t\tpart=\"header\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ !this.fixed &&\n\t\t\t\t\t\t\t<div class=\"ui5-panel-header-button-root\">\n\t\t\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-button ui5-panel-header-button-with-icon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._toggleButtonClick}\n\t\t\t\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.button.accessibilityAttributes}\n\t\t\t\t\t\t\t\t\t\ttooltip={this.accInfo.button.title}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.accInfo.button.ariaLabelButton}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-panel-header-icon-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.toggleButtonTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={ `${this._id}-header-title` }\n\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-title\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this.headerText }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{/* content area */}\n\t\t\t<div\n\t\t\t\tclass=\"ui5-panel-content\"\n\t\t\t\tid={ `${this._id}-content` }\n\t\t\t\ttabindex={ -1 }\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t\t}}\n\t\t\t\tpart=\"content\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t</>);\n}\n"]}
1
+ {"version":3,"file":"PanelTemplate.js","sourceRoot":"","sources":["../src/PanelTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Panel from \"./Panel.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\n\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function PanelTemplate(this: Panel) {\n\treturn (<>\n\t\t<div\n\t\t\tclass=\"ui5-panel-root\"\n\t\t\trole={this.accRole}\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-labelledby={this.fixedPanelAriaLabelledbyReference}\n\t\t>\n\t\t\t{ this.hasHeaderOrHeaderText &&\n\t\t\t\t// header: either header or h1 with header text\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper\": true,\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.headingWrapperRole}\n\t\t\t\t\taria-level={this.headingWrapperAriaLevel}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tonClick={this._headerClick}\n\t\t\t\t\t\tonKeyDown={this._headerKeyDown}\n\t\t\t\t\t\tonKeyUp={this._headerKeyUp}\n\t\t\t\t\t\tonTouchStart={this._isMobile}\n\t\t\t\t\t\tonFocusOut={this._headerFocusOut}\n\t\t\t\t\t\tclass=\"ui5-panel-header\"\n\t\t\t\t\t\ttabindex={this.headerTabIndex}\n\t\t\t\t\t\trole={this.accInfo.role}\n\t\t\t\t\t\taria-expanded={this.accInfo.ariaExpanded}\n\t\t\t\t\t\taria-controls={this.accInfo.ariaControls}\n\t\t\t\t\t\taria-labelledby={this.accInfo.ariaLabelledby}\n\t\t\t\t\t\tpart=\"header\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ !this.fixed &&\n\t\t\t\t\t\t\t<div class=\"ui5-panel-header-button-root\">\n\t\t\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-button ui5-panel-header-button-with-icon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._toggleButtonClick}\n\t\t\t\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.button.accessibilityAttributes}\n\t\t\t\t\t\t\t\t\t\ttooltip={this.accInfo.button.title}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.accInfo.button.ariaLabelButton}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-panel-header-icon-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.toggleButtonTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={ `${this._id}-header-title` }\n\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-title\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this.headerText }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{/* content area */}\n\t\t\t<div\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-panel-content-wrapper\": true,\n\t\t\t\t\t\"ui5-panel-content-focusable\": this._contentFocusable,\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-panel-content\"\n\t\t\t\t\tid={ `${this._id}-content` }\n\t\t\t\t\ttabindex={ this._contentTabIndex }\n\t\t\t\t\tpart=\"content\"\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</>);\n}\n"]}
@@ -85,6 +85,7 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
85
85
  tooltipStartValueState: `${ValueState}`;
86
86
  tooltipEndValueState: `${ValueState}`;
87
87
  rangePressed: boolean;
88
+ _progressFocused: boolean;
88
89
  _isStartValueValid: boolean;
89
90
  _isEndValueValid: boolean;
90
91
  _startValue: number;
@@ -105,9 +106,17 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
105
106
  _lastValidStartValue: string;
106
107
  _lastValidEndValue: string;
107
108
  _areInputValuesSwapped: boolean;
109
+ _onDocumentClickBound: (e: MouseEvent) => void;
108
110
  static i18nBundle: I18nBundle;
109
111
  get formFormattedValue(): FormData;
110
112
  constructor();
113
+ onEnterDOM(): void;
114
+ onExitDOM(): void;
115
+ /**
116
+ * Handles document-level clicks to clear progress focus when clicking outside.
117
+ * @private
118
+ */
119
+ _onDocumentClick(e: MouseEvent): void;
111
120
  get _ariaDisabled(): true | undefined;
112
121
  get _ariaLabelledByText(): string;
113
122
  get _ariaHandlesText(): AriaHandlesText;
@@ -306,9 +315,18 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
306
315
  get tickmarksObject(): boolean[];
307
316
  get _startHandle(): HTMLElement;
308
317
  get _endHandle(): HTMLElement;
309
- get _progressBar(): HTMLElement;
318
+ get _progressBar(): HTMLElement | null;
310
319
  get _ariaLabelledByStartHandleText(): string;
311
320
  get _ariaLabelledByEndHandleText(): string;
321
+ /**
322
+ * @private
323
+ */
324
+ get _ariaLabelStartHandle(): string;
325
+ /**
326
+ * @private
327
+ */
328
+ get _ariaLabelEndHandle(): string;
329
+ _getAriaLabelHandle(handleDescription: string): string;
312
330
  get _ariaLabelledByInputText(): string;
313
331
  get _ariaDescribedByInputText(): string;
314
332
  get styles(): {