@lion/ui 0.18.0-menu-system.6 → 0.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (248) hide show
  1. package/collapsible.js +0 -1
  2. package/components/button/src/LionButton.js +0 -4
  3. package/components/button/test-suites/LionButton.suite.js +0 -1
  4. package/components/calendar/src/LionCalendar.js +1 -3
  5. package/components/combobox/test/lion-combobox.test.js +0 -1
  6. package/components/form-core/src/choice-group/ChoiceInputMixin.js +1 -1
  7. package/components/form-core/src/form-group/FormGroupMixin.js +0 -7
  8. package/components/form-core/src/registration/FormRegistrarMixin.js +0 -11
  9. package/components/form-core/test/FormControlMixin.test.js +0 -1
  10. package/components/form-core/test/validate/Validator.test.js +0 -2
  11. package/components/form-core/test-suites/ValidateMixin.suite.js +0 -2
  12. package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js +0 -1
  13. package/components/input-datepicker/src/localizeNamespaceLoader.js +0 -1
  14. package/components/input-datepicker/test/lion-input-datepicker.test.js +6 -5
  15. package/components/listbox/test-suites/ListboxMixin.suite.js +1 -7
  16. package/components/localize/src/date/utils/normalizeIntlDate.js +2 -3
  17. package/components/localize/test/date/formatDate.test.js +2 -3
  18. package/components/overlays/src/OverlayController.js +110 -278
  19. package/components/overlays/src/OverlayMixin.js +11 -58
  20. package/components/overlays/src/OverlaysManager.js +2 -2
  21. package/components/overlays/src/configurations/withDropdownConfig.js +2 -22
  22. package/components/overlays/src/configurations/withPopoverConfig.js +32 -0
  23. package/components/overlays/src/utils/adopt-styles.js +5 -4
  24. package/components/overlays/src/utils/get-focusable-elements.js +0 -4
  25. package/components/overlays/src/utils/is-equal-config.js +6 -10
  26. package/components/overlays/test/OverlayController.test.js +21 -128
  27. package/components/overlays/test/utils-tests/is-equal-config.test.js +1 -1
  28. package/components/overlays/test-suites/OverlayMixin.suite.js +8 -8
  29. package/components/overlays/types/ArrowMixinTypes.ts +1 -3
  30. package/components/overlays/types/OverlayConfig.ts +5 -20
  31. package/components/select-rich/test/lion-select-rich.test.js +0 -3
  32. package/components/switch/src/LionSwitch.js +1 -1
  33. package/components/switch/src/LionSwitchButton.js +8 -3
  34. package/components/switch/test/lion-switch-button.test.js +38 -0
  35. package/components/switch/test/lion-switch.test.js +7 -0
  36. package/custom-elements.json +17550 -30452
  37. package/dist-types/components/button/src/LionButton.d.ts +0 -1
  38. package/dist-types/components/button/src/LionButton.d.ts.map +1 -1
  39. package/dist-types/components/button/test-suites/LionButton.suite.d.ts.map +1 -1
  40. package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
  41. package/dist-types/components/dialog/src/LionDialog.d.ts +1 -5
  42. package/dist-types/components/dialog/src/LionDialog.d.ts.map +1 -1
  43. package/dist-types/components/form-core/src/form-group/FormGroupMixin.d.ts.map +1 -1
  44. package/dist-types/components/form-core/src/registration/FormRegistrarMixin.d.ts.map +1 -1
  45. package/dist-types/components/form-core/test-suites/ValidateMixin.suite.d.ts.map +1 -1
  46. package/dist-types/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.d.ts.map +1 -1
  47. package/dist-types/components/input-datepicker/src/localizeNamespaceLoader.d.ts.map +1 -1
  48. package/dist-types/components/listbox/test-suites/ListboxMixin.suite.d.ts.map +1 -1
  49. package/dist-types/components/localize/src/date/utils/normalizeIntlDate.d.ts.map +1 -1
  50. package/dist-types/components/overlays/src/OverlayController.d.ts +12 -24
  51. package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
  52. package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
  53. package/dist-types/components/overlays/src/configurations/withDropdownConfig.d.ts +0 -1
  54. package/dist-types/components/overlays/src/configurations/withDropdownConfig.d.ts.map +1 -1
  55. package/dist-types/components/overlays/src/configurations/withPopoverConfig.d.ts +6 -0
  56. package/dist-types/components/overlays/src/configurations/withPopoverConfig.d.ts.map +1 -0
  57. package/dist-types/components/overlays/src/utils/get-focusable-elements.d.ts.map +1 -1
  58. package/dist-types/components/overlays/src/utils/is-equal-config.d.ts.map +1 -1
  59. package/dist-types/components/overlays/types/ArrowMixinTypes.d.ts.map +1 -1
  60. package/dist-types/components/overlays/types/OverlayConfig.d.ts +2 -12
  61. package/dist-types/components/overlays/types/OverlayConfig.d.ts.map +1 -1
  62. package/dist-types/components/select-rich/src/LionSelectRich.d.ts +2 -10
  63. package/dist-types/components/select-rich/src/LionSelectRich.d.ts.map +1 -1
  64. package/dist-types/components/switch/src/LionSwitchButton.d.ts +6 -0
  65. package/dist-types/components/switch/src/LionSwitchButton.d.ts.map +1 -1
  66. package/dist-types/exports/overlays.d.ts +1 -3
  67. package/dist-types/exports/overlays.d.ts.map +1 -1
  68. package/dist-types/tsconfig.tsbuildinfo +1 -1
  69. package/docs/components/checkbox-group/overview.md +2 -2
  70. package/docs/components/collapsible/overview.md +1 -1
  71. package/docs/components/combobox/api-table.md +8 -21
  72. package/docs/components/combobox/overview.md +1 -1
  73. package/docs/components/combobox/use-cases.md +1 -1
  74. package/docs/components/dialog/api-table.md +6 -31
  75. package/docs/components/dialog/overview.md +1 -1
  76. package/docs/components/fieldset/overview.md +5 -5
  77. package/docs/components/form/overview.md +3 -3
  78. package/docs/components/form/use-cases.md +2 -2
  79. package/docs/components/icon/use-cases.md +1 -1
  80. package/docs/components/input/overview.md +1 -1
  81. package/docs/components/input-amount/overview.md +3 -3
  82. package/docs/components/input-date/overview.md +3 -3
  83. package/docs/components/input-datepicker/api-table.md +4 -21
  84. package/docs/components/input-datepicker/overview.md +5 -5
  85. package/docs/components/input-email/overview.md +2 -2
  86. package/docs/components/input-file/overview.md +1 -1
  87. package/docs/components/input-iban/overview.md +2 -2
  88. package/docs/components/input-range/overview.md +2 -2
  89. package/docs/components/input-stepper/overview.md +1 -1
  90. package/docs/components/input-tel/overview.md +1 -1
  91. package/docs/components/input-tel/use-cases.md +6 -6
  92. package/docs/components/input-tel-dropdown/overview.md +1 -1
  93. package/docs/components/listbox/use-cases.md +1 -1
  94. package/docs/components/radio-group/overview.md +3 -3
  95. package/docs/components/select/use-cases.md +1 -1
  96. package/docs/components/select-rich/api-table.md +5 -21
  97. package/docs/components/select-rich/use-cases.md +2 -2
  98. package/docs/components/switch/api-table.md +2 -0
  99. package/docs/components/tabs/examples.md +1 -1
  100. package/docs/components/tooltip/api-table.md +11 -36
  101. package/docs/fundamentals/index.md +4 -4
  102. package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
  103. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
  104. package/docs/fundamentals/rationales/accessibility.md +1 -1
  105. package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
  106. package/docs/fundamentals/systems/core/overview.md +1 -1
  107. package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
  108. package/docs/fundamentals/systems/form/model-value.md +1 -1
  109. package/docs/fundamentals/systems/form/overview.md +28 -28
  110. package/docs/fundamentals/systems/form/validate.md +2 -2
  111. package/docs/fundamentals/systems/localize/overview.md +4 -4
  112. package/docs/fundamentals/systems/overlays/api-table.md +34 -36
  113. package/docs/fundamentals/systems/overlays/configuration.md +2 -2
  114. package/docs/fundamentals/systems/overlays/overview.md +5 -5
  115. package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
  116. package/docs/fundamentals/tools/helpers/overview.md +1 -1
  117. package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
  118. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  119. package/docs/guides/how-to/create-a-form.md +4 -4
  120. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  121. package/docs/guides/how-to/index.md +1 -1
  122. package/docs/guides/index.md +8 -8
  123. package/docs/guides/principles/index.md +5 -5
  124. package/docs/guides/principles/styling.md +1 -1
  125. package/exports/collapsible.js +0 -1
  126. package/exports/overlays.js +1 -6
  127. package/overlays.js +1 -6
  128. package/package.json +1 -1
  129. package/components/collapsible/src/DisclosureMixin.js +0 -313
  130. package/components/collapsible/test-suites/DisclosureMixin.suite.js +0 -30
  131. package/components/collapsible/types/DisclosureMixinTypes.ts +0 -48
  132. package/components/menu/CHANGELOG.md +0 -37
  133. package/components/menu/README.md +0 -335
  134. package/components/menu/index.js +0 -2
  135. package/components/menu/lion-menu-overlay.js +0 -3
  136. package/components/menu/lion-menu.js +0 -3
  137. package/components/menu/lion-spinbutton.js +0 -3
  138. package/components/menu/lion-toolbar.js +0 -3
  139. package/components/menu/lion-tree.js +0 -3
  140. package/components/menu/package.json +0 -46
  141. package/components/menu/requirements.temp.md +0 -12
  142. package/components/menu/src/InteractiveListMixin.js +0 -841
  143. package/components/menu/src/LionMenu.js +0 -250
  144. package/components/menu/src/LionMenuHybrid.js +0 -46
  145. package/components/menu/src/LionMenuOverlay.js +0 -155
  146. package/components/menu/src/LionSpinbutton.js +0 -213
  147. package/components/menu/src/LionToolbar.js +0 -94
  148. package/components/menu/src/LionTree.js +0 -52
  149. package/components/menu/src/MoreButtonMenuMixin.js +0 -278
  150. package/components/menu/src/MultiLevelListMixin.js +0 -274
  151. package/components/menu/src/utils/isInView.js +0 -26
  152. package/components/menu/src/utils/listItemInteractions.js +0 -124
  153. package/components/menu/src/utils/uuid.js +0 -3
  154. package/components/menu/test/lion-menu.test.js +0 -6
  155. package/components/menu/test-suites/InteractiveListMixin.suite.js +0 -642
  156. package/components/menu/test-suites/LionMenuHybrid.suite.js +0 -583
  157. package/components/menu/types/InteractiveListMixinTypes.d.ts +0 -82
  158. package/components/navigation-bar/README.md +0 -1
  159. package/components/navigation-bar/src/LionNavigationBar.js +0 -439
  160. package/components/navigation-bar/src/types.js +0 -41
  161. package/components/overlays/NEXT.md +0 -49
  162. package/dist-types/components/collapsible/src/DisclosureMixin.d.ts +0 -3
  163. package/dist-types/components/collapsible/src/DisclosureMixin.d.ts.map +0 -1
  164. package/dist-types/components/collapsible/test-suites/DisclosureMixin.suite.d.ts +0 -2
  165. package/dist-types/components/collapsible/test-suites/DisclosureMixin.suite.d.ts.map +0 -1
  166. package/dist-types/components/collapsible/types/DisclosureMixinTypes.d.ts +0 -24
  167. package/dist-types/components/collapsible/types/DisclosureMixinTypes.d.ts.map +0 -1
  168. package/dist-types/components/menu/index.d.ts +0 -3
  169. package/dist-types/components/menu/index.d.ts.map +0 -1
  170. package/dist-types/components/menu/lion-menu-overlay.d.ts +0 -2
  171. package/dist-types/components/menu/lion-menu-overlay.d.ts.map +0 -1
  172. package/dist-types/components/menu/lion-menu.d.ts +0 -2
  173. package/dist-types/components/menu/lion-menu.d.ts.map +0 -1
  174. package/dist-types/components/menu/lion-spinbutton.d.ts +0 -2
  175. package/dist-types/components/menu/lion-spinbutton.d.ts.map +0 -1
  176. package/dist-types/components/menu/lion-toolbar.d.ts +0 -2
  177. package/dist-types/components/menu/lion-toolbar.d.ts.map +0 -1
  178. package/dist-types/components/menu/lion-tree.d.ts +0 -2
  179. package/dist-types/components/menu/lion-tree.d.ts.map +0 -1
  180. package/dist-types/components/menu/src/InteractiveListMixin.d.ts +0 -617
  181. package/dist-types/components/menu/src/InteractiveListMixin.d.ts.map +0 -1
  182. package/dist-types/components/menu/src/LionMenu.d.ts +0 -565
  183. package/dist-types/components/menu/src/LionMenu.d.ts.map +0 -1
  184. package/dist-types/components/menu/src/LionMenuHybrid.d.ts +0 -19
  185. package/dist-types/components/menu/src/LionMenuHybrid.d.ts.map +0 -1
  186. package/dist-types/components/menu/src/LionMenuOverlay.d.ts +0 -1013
  187. package/dist-types/components/menu/src/LionMenuOverlay.d.ts.map +0 -1
  188. package/dist-types/components/menu/src/LionSpinbutton.d.ts +0 -58
  189. package/dist-types/components/menu/src/LionSpinbutton.d.ts.map +0 -1
  190. package/dist-types/components/menu/src/LionToolbar.d.ts +0 -8
  191. package/dist-types/components/menu/src/LionToolbar.d.ts.map +0 -1
  192. package/dist-types/components/menu/src/LionTree.d.ts +0 -447
  193. package/dist-types/components/menu/src/LionTree.d.ts.map +0 -1
  194. package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts +0 -39
  195. package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts.map +0 -1
  196. package/dist-types/components/menu/src/MultiLevelListMixin.d.ts +0 -495
  197. package/dist-types/components/menu/src/MultiLevelListMixin.d.ts.map +0 -1
  198. package/dist-types/components/menu/src/utils/isInView.d.ts +0 -9
  199. package/dist-types/components/menu/src/utils/isInView.d.ts.map +0 -1
  200. package/dist-types/components/menu/src/utils/listItemInteractions.d.ts +0 -48
  201. package/dist-types/components/menu/src/utils/listItemInteractions.d.ts.map +0 -1
  202. package/dist-types/components/menu/src/utils/uuid.d.ts +0 -2
  203. package/dist-types/components/menu/src/utils/uuid.d.ts.map +0 -1
  204. package/dist-types/components/menu/test/lion-menu.test.d.ts +0 -2
  205. package/dist-types/components/menu/test/lion-menu.test.d.ts.map +0 -1
  206. package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts +0 -14
  207. package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts.map +0 -1
  208. package/dist-types/components/menu/test-suites/LionMenuHybrid.suite.d.ts +0 -5
  209. package/dist-types/components/menu/test-suites/LionMenuHybrid.suite.d.ts.map +0 -1
  210. package/dist-types/components/navigation-bar/src/LionNavigationBar.d.ts +0 -238
  211. package/dist-types/components/navigation-bar/src/LionNavigationBar.d.ts.map +0 -1
  212. package/dist-types/components/navigation-bar/src/types.d.ts +0 -85
  213. package/dist-types/components/navigation-bar/src/types.d.ts.map +0 -1
  214. package/dist-types/exports/define/lion-item.d.ts +0 -2
  215. package/dist-types/exports/define/lion-item.d.ts.map +0 -1
  216. package/dist-types/exports/define/lion-menu-overlay.d.ts +0 -2
  217. package/dist-types/exports/define/lion-menu-overlay.d.ts.map +0 -1
  218. package/dist-types/exports/define/lion-menu.d.ts +0 -2
  219. package/dist-types/exports/define/lion-menu.d.ts.map +0 -1
  220. package/dist-types/exports/define/lion-navigation-bar.d.ts +0 -2
  221. package/dist-types/exports/define/lion-navigation-bar.d.ts.map +0 -1
  222. package/dist-types/exports/define/lion-toolbar.d.ts +0 -2
  223. package/dist-types/exports/define/lion-toolbar.d.ts.map +0 -1
  224. package/dist-types/exports/define/lion-tree.d.ts +0 -2
  225. package/dist-types/exports/define/lion-tree.d.ts.map +0 -1
  226. package/dist-types/exports/menu-test-suites.d.ts +0 -2
  227. package/dist-types/exports/menu-test-suites.d.ts.map +0 -1
  228. package/dist-types/exports/menu.d.ts +0 -7
  229. package/dist-types/exports/menu.d.ts.map +0 -1
  230. package/dist-types/exports/navigation-bar.d.ts +0 -2
  231. package/dist-types/exports/navigation-bar.d.ts.map +0 -1
  232. package/docs/components/menu/api-table.md +0 -455
  233. package/docs/components/menu/applyMenuDemoStyles.js +0 -173
  234. package/docs/components/menu/extensions.md +0 -262
  235. package/docs/components/menu/index.md +0 -13
  236. package/docs/components/menu/overview.md +0 -422
  237. package/exports/define/lion-item.js +0 -3
  238. package/exports/define/lion-menu-overlay.js +0 -3
  239. package/exports/define/lion-menu.js +0 -3
  240. package/exports/define/lion-navigation-bar.js +0 -3
  241. package/exports/define/lion-toolbar.js +0 -3
  242. package/exports/define/lion-tree.js +0 -3
  243. package/exports/menu-test-suites.js +0 -2
  244. package/exports/menu.js +0 -7
  245. package/exports/navigation-bar.js +0 -1
  246. package/menu-test-suites.js +0 -2
  247. package/menu.js +0 -7
  248. package/navigation-bar.js +0 -1
package/docs/components/menu/api-table.md DELETED
@@ -1,455 +0,0 @@
1
- ---
2
- parts:
3
- - API Table
4
- - Menu
5
- title: 'Menu: API Table'
6
- eleventyNavigation:
7
- key: API Table >> Menu
8
- title: API Table
9
- order: 90
10
- parent: Menu
11
- ---
12
- # Menu: API Table
13
-
14
-
15
- ## class: `LionMenu`, `lion-menu`
16
-
17
- ### Fields
18
-
19
- | Name | Privacy | Type | Default | Description | Inherited From |
20
- | --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- |
21
- | `activeIndex` | public | | | | InteractiveListMixin |
22
- | `activeItem` | public | | | | InteractiveListMixin |
23
- | `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | |
24
- | `behaveAsAccordion` | public | `boolean` | `true` | When true, will have a maximum of one submenu open at a time | MultiLevelListMixin |
25
- | `checkedIndex` | public | `number \| number[]` | | | InteractiveListMixin |
26
- | `handleFocus` | public | `boolean` | `true` | | MultiLevelListMixin |
27
- | `invokerInteraction` | public | `string` | `'click'` | | |
28
- | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | MultiLevelListMixin |
29
- | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element | InteractiveListMixin |
30
- | `itemWrap` | public | `boolean` | | | InteractiveListMixin |
31
- | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | MultiLevelListMixin |
32
- | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener | InteractiveListMixin |
33
- | `multipleChoice` | public | `boolean` | `false` | | InteractiveListMixin |
34
- | `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set | InteractiveListMixin |
35
- | `orientation` | public | `string` | `'vertical'` | | InteractiveListMixin |
36
- | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | MultiLevelListMixin |
37
- | `rotateKeyboardNavigation` | public | `boolean` | `false` | | InteractiveListMixin |
38
- | `selectionFollowsFocus` | public | `boolean` | `false` | | InteractiveListMixin |
39
- | `slots` | public | | | | InteractiveListMixin |
40
- | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | InteractiveListMixin |
41
- | `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode) | InteractiveListMixin |
42
- | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop. | InteractiveListMixin |
43
- | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | InteractiveListMixin |
44
- | `_contentNode` | protected | | | | MultiLevelListMixin |
45
- | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items. | InteractiveListMixin |
46
- | `_hasSmartListItems` | public | | | | InteractiveListMixin |
47
- | `_interactiveChildrenRoles` | protected | | | | InteractiveListMixin |
48
- | `_invokerNode` | protected | | | | MultiLevelListMixin |
49
- | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | InteractiveListMixin |
50
- | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | InteractiveListMixin |
51
- | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | InteractiveListMixin |
52
- | `_onPopState` | protected | | | | InteractiveListMixin |
53
- | `_scrollTargetNode` | protected | | | | InteractiveListMixin |
54
- | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | MultiLevelListMixin |
55
-
56
- ### Methods
57
-
58
- | Name | Privacy | Description | Parameters | Return | Inherited From |
59
- | --------------------------- | --------- | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------ | -------------------- |
60
- | `setCheckedIndex` | public | Allows groups within one level. In case we deal with menuitemcheckbox,&#xA;we treat it as multiple choice group | `index: number` | | InteractiveListMixin |
61
- | `toggle` | public | | `ev: Event` | | MultiLevelListMixin |
62
- | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
63
- | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
64
- | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: *` | | InteractiveListMixin |
65
- | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | InteractiveListMixin |
66
- | `_onListClick` | protected | | `ev: MouseEvent` | | InteractiveListMixin |
67
- | `_onListFocusIn` | protected | | `ev: FocusEvent` | | InteractiveListMixin |
68
- | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: *` | | InteractiveListMixin |
69
- | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | InteractiveListMixin |
70
- | `_setupList` | protected | | | | InteractiveListMixin |
71
-
72
- ### Attributes
73
-
74
- | Name | Field | Inherited From |
75
- | ---------------------------- | ------------------------ | -------------------- |
76
- | `bar` | bar | |
77
- | `invokerNode` | invokerNode | MultiLevelListMixin |
78
- | `behave-as-accordion` | behaveAsAccordion | MultiLevelListMixin |
79
- | `level` | level | MultiLevelListMixin |
80
- | `orientation` | orientation | InteractiveListMixin |
81
- | `multiple-choice` | multipleChoice | InteractiveListMixin |
82
- | `selection-follows-focus` | selectionFollowsFocus | InteractiveListMixin |
83
- | `rotate-keyboard-navigation` | rotateKeyboardNavigation | InteractiveListMixin |
84
- | `no-preselect` | noPreselect | InteractiveListMixin |
85
- | `item-wrap` | itemWrap | InteractiveListMixin |
86
- | `_activateOnTypedChars` | \_activateOnTypedChars | InteractiveListMixin |
87
- | `_hasSmartListItems` | \_hasSmartListItems | InteractiveListMixin |
88
- | `_activeMode` | \_activeMode | InteractiveListMixin |
89
-
90
- <hr/>
91
-
92
-
93
- ## class: `LionMenuHybrid`
94
-
95
- ### Fields
96
-
97
- | Name | Privacy | Type | Default | Description | Inherited From |
98
- | ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
99
- | `activeIndex` | public | | | | LionMenu |
100
- | `activeItem` | public | | | | LionMenu |
101
- | `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
102
- | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
103
- | `checkedIndex` | public | `number \| number[]` | | | LionMenu |
104
- | `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
105
- | `handleFocus` | public | `boolean` | `true` | | LionMenu |
106
- | `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
107
- | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
108
- | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | LionMenu |
109
- | `itemWrap` | public | `boolean` | | | LionMenu |
110
- | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
111
- | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | LionMenu |
112
- | `multipleChoice` | public | `boolean` | `false` | | LionMenu |
113
- | `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | LionMenu |
114
- | `openableMode` | public | `'disclosure'\|'overlay'` | `'disclosure'` | Terminology aligned with https\://open-ui.org/components/openable.explainer/ | |
115
- | `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog. | OverlayMixin |
116
- | `orientation` | public | `string` | `'vertical'` | | LionMenu |
117
- | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
118
- | `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
119
- | `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
120
- | `slots` | public | | | | LionMenu |
121
- | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
122
- | `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | LionMenu |
123
- | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. | LionMenu |
124
- | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
125
- | `_contentNode` | protected | | | | LionMenu |
126
- | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
127
- | `_hasSmartListItems` | public | | | | LionMenu |
128
- | `_interactiveChildrenRoles` | protected | | | | LionMenu |
129
- | `_invokerNode` | protected | | | | LionMenu |
130
- | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
131
- | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
132
- | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | LionMenu |
133
- | `_onOverlayShow` | protected | | | | OverlayWithListInvokerMixin |
134
- | `_onPopState` | protected | | | | LionMenu |
135
- | `_overlayBackdropNode` | protected | | | | OverlayMixin |
136
- | `_overlayContentNode` | protected | | | make sure OverlayMixin gets the contentNode defined by DisclosureMixin | OverlayMixin |
137
- | `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
138
- | `_overlayInvokerNode` | protected | | | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin | OverlayMixin |
139
- | `_overlayReferenceNode` | protected | | | | OverlayMixin |
140
- | `_scrollTargetNode` | protected | | | | LionMenu |
141
- | `_shouldSetupOverlay` | protected | `boolean` | `false` | | |
142
- | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
143
-
144
- ### Methods
145
-
146
- | Name | Privacy | Description | Parameters | Return | Inherited From |
147
- | ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
148
- | `close` | public | Hides the overlay | | | OverlayMixin |
149
- | `open` | public | Shows the overlay | | | OverlayMixin |
150
- | `repositionOverlay` | public | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically) | | | OverlayMixin |
151
- | `setCheckedIndex` | public | When \`multipleChoice\` is false, will toggle, else will check provided index | `index: Number` | | LionMenu |
152
- | `toggle` | public | Toggles the overlay | `ev: Event` | | LionMenu |
153
- | `_defineOverlay` | protected | | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin |
154
- | `_defineOverlayConfig` | protected | | | `OverlayConfig` | OverlayMixin |
155
- | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
156
- | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
157
- | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: LionItem[]\|HTMLElement[]` | | LionMenu |
158
- | `_isPermanentlyDisconnected` | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around. | | `Promise<boolean>` | OverlayMixin |
159
- | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | LionMenu |
160
- | `_onListClick` | protected | | `ev: MouseEvent` | | LionMenu |
161
- | `_onListFocusIn` | protected | | `ev: FocusEvent` | | LionMenu |
162
- | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: KeyboardEvent` | | LionMenu |
163
- | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | LionMenu |
164
- | `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean` | | OverlayMixin |
165
- | `_setupList` | protected | | | | LionMenu |
166
- | `_setupOpenCloseListeners` | protected | | | | OverlayMixin |
167
- | `_setupOverlayCtrl` | protected | | | | OverlayMixin |
168
- | `_teardownOpenCloseListeners` | protected | | | | OverlayMixin |
169
- | `_teardownOverlayCtrl` | protected | | | | OverlayMixin |
170
-
171
- ### Events
172
-
173
- | Name | Type | Description | Inherited From |
174
- | ---------------- | ------------- | ----------- | -------------- |
175
- | `opened-changed` | `CustomEvent` | | OverlayMixin |
176
-
177
- ### Attributes
178
-
179
- | Name | Field | Inherited From |
180
- | ---------------------------- | ------------------------ | -------------- |
181
- | `openable-mode` | openableMode | |
182
- | `opened` | opened | OverlayMixin |
183
- | `orientation` | orientation | LionMenu |
184
- | `multiple-choice` | multipleChoice | LionMenu |
185
- | `selection-follows-focus` | selectionFollowsFocus | LionMenu |
186
- | `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenu |
187
- | `no-preselect` | noPreselect | LionMenu |
188
- | `item-wrap` | itemWrap | LionMenu |
189
- | `_activateOnTypedChars` | \_activateOnTypedChars | LionMenu |
190
- | `_hasSmartListItems` | \_hasSmartListItems | LionMenu |
191
- | `_activeMode` | \_activeMode | LionMenu |
192
- | `invokerNode` | invokerNode | LionMenu |
193
- | `behave-as-accordion` | behaveAsAccordion | LionMenu |
194
- | `level` | level | LionMenu |
195
- | `bar` | bar | LionMenu |
196
-
197
- <hr/>
198
-
199
-
200
- ## class: `LionMenuOverlay`, `lion-menu-overlay`
201
-
202
- ### Fields
203
-
204
- | Name | Privacy | Type | Default | Description | Inherited From |
205
- | ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
206
- | `activeIndex` | public | | | | LionMenu |
207
- | `activeItem` | public | | | | LionMenu |
208
- | `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
209
- | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
210
- | `checkedIndex` | public | `number \| number[]` | | | LionMenu |
211
- | `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
212
- | `handleFocus` | public | `boolean` | `true` | | LionMenu |
213
- | `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
214
- | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
215
- | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | LionMenu |
216
- | `itemWrap` | public | `boolean` | | | LionMenu |
217
- | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
218
- | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | LionMenu |
219
- | `multipleChoice` | public | `boolean` | `false` | | LionMenu |
220
- | `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | LionMenu |
221
- | `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog. | OverlayMixin |
222
- | `orientation` | public | `string` | `'vertical'` | | LionMenu |
223
- | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
224
- | `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
225
- | `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
226
- | `slots` | public | | | | LionMenu |
227
- | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
228
- | `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | LionMenu |
229
- | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. | LionMenu |
230
- | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
231
- | `_contentNode` | protected | | | | LionMenu |
232
- | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
233
- | `_hasSmartListItems` | public | | | | LionMenu |
234
- | `_interactiveChildrenRoles` | protected | | | | LionMenu |
235
- | `_invokerNode` | protected | | | | LionMenu |
236
- | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
237
- | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
238
- | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | LionMenu |
239
- | `_onOverlayShow` | protected | | | | OverlayWithListInvokerMixin |
240
- | `_onPopState` | protected | | | | LionMenu |
241
- | `_overlayBackdropNode` | protected | | | | OverlayMixin |
242
- | `_overlayContentNode` | protected | | | make sure OverlayMixin gets the contentNode defined by DisclosureMixin | OverlayMixin |
243
- | `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
244
- | `_overlayInvokerNode` | protected | | | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin | OverlayMixin |
245
- | `_overlayReferenceNode` | protected | | | | OverlayMixin |
246
- | `_scrollTargetNode` | protected | | | | LionMenu |
247
- | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
248
-
249
- ### Methods
250
-
251
- | Name | Privacy | Description | Parameters | Return | Inherited From |
252
- | ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
253
- | `close` | public | Hides the overlay | | | OverlayMixin |
254
- | `open` | public | Shows the overlay | | | OverlayMixin |
255
- | `repositionOverlay` | public | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically) | | | OverlayMixin |
256
- | `setCheckedIndex` | public | When \`multipleChoice\` is false, will toggle, else will check provided index | `index: Number` | | LionMenu |
257
- | `toggle` | public | Toggles the overlay | `ev: Event` | | LionMenu |
258
- | `_defineOverlay` | protected | | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin |
259
- | `_defineOverlayConfig` | protected | | | `OverlayConfig` | OverlayMixin |
260
- | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
261
- | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
262
- | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: LionItem[]\|HTMLElement[]` | | LionMenu |
263
- | `_isPermanentlyDisconnected` | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around. | | `Promise<boolean>` | OverlayMixin |
264
- | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | LionMenu |
265
- | `_onListClick` | protected | | `ev: MouseEvent` | | LionMenu |
266
- | `_onListFocusIn` | protected | | `ev: FocusEvent` | | LionMenu |
267
- | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: KeyboardEvent` | | LionMenu |
268
- | `_onListKeyUp` | protected | | `ev: *` | | LionMenu |
269
- | `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean` | | OverlayMixin |
270
- | `_setupList` | protected | | | | LionMenu |
271
- | `_setupOpenCloseListeners` | protected | | | | OverlayMixin |
272
- | `_setupOverlayCtrl` | protected | | | | OverlayMixin |
273
- | `_teardownOpenCloseListeners` | protected | | | | OverlayMixin |
274
- | `_teardownOverlayCtrl` | protected | | | | OverlayMixin |
275
-
276
- ### Events
277
-
278
- | Name | Type | Description | Inherited From |
279
- | ---------------- | ------------- | ----------- | -------------- |
280
- | `opened-changed` | `CustomEvent` | | OverlayMixin |
281
-
282
- ### Attributes
283
-
284
- | Name | Field | Inherited From |
285
- | ---------------------------- | ------------------------ | -------------- |
286
- | `opened` | opened | OverlayMixin |
287
- | `orientation` | orientation | LionMenu |
288
- | `multiple-choice` | multipleChoice | LionMenu |
289
- | `selection-follows-focus` | selectionFollowsFocus | LionMenu |
290
- | `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenu |
291
- | `no-preselect` | noPreselect | LionMenu |
292
- | `item-wrap` | itemWrap | LionMenu |
293
- | `_activateOnTypedChars` | \_activateOnTypedChars | LionMenu |
294
- | `_hasSmartListItems` | \_hasSmartListItems | LionMenu |
295
- | `_activeMode` | \_activeMode | LionMenu |
296
- | `invokerNode` | invokerNode | LionMenu |
297
- | `behave-as-accordion` | behaveAsAccordion | LionMenu |
298
- | `level` | level | LionMenu |
299
- | `bar` | bar | LionMenu |
300
-
301
- <hr/>
302
-
303
-
304
- ## class: `LionToolbar`, `lion-toolbar`
305
-
306
- ### Fields
307
-
308
- | Name | Privacy | Type | Default | Description | Inherited From |
309
- | --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
310
- | `activeIndex` | public | | | | LionMenu |
311
- | `activeItem` | public | | | | LionMenu |
312
- | `bar` | public | `boolean` | `true` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
313
- | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
314
- | `checkedIndex` | public | `number \| number[]` | | | LionMenu |
315
- | `handleFocus` | public | `boolean` | `true` | | LionMenu |
316
- | `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
317
- | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
318
- | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | LionMenu |
319
- | `itemWrap` | public | `boolean` | | | LionMenu |
320
- | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
321
- | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | LionMenu |
322
- | `multipleChoice` | public | `boolean` | `false` | | LionMenu |
323
- | `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | LionMenu |
324
- | `orientation` | public | `string` | `'vertical'` | | LionMenu |
325
- | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
326
- | `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
327
- | `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
328
- | `slots` | public | | | | LionMenu |
329
- | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
330
- | `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | LionMenu |
331
- | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. | LionMenu |
332
- | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
333
- | `_contentNode` | protected | | | | LionMenu |
334
- | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
335
- | `_hasSmartListItems` | public | | | | LionMenu |
336
- | `_interactiveChildrenRoles` | protected | | | | LionMenu |
337
- | `_invokerNode` | protected | | | | LionMenu |
338
- | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
339
- | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
340
- | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'toolbar'` | The role that will be put on \_listNode | LionMenu |
341
- | `_onPopState` | protected | | | | LionMenu |
342
- | `_scrollTargetNode` | protected | | | | LionMenu |
343
- | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
344
-
345
- ### Methods
346
-
347
- | Name | Privacy | Description | Parameters | Return | Inherited From |
348
- | --------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------ | -------------- |
349
- | `setCheckedIndex` | public | Allows groups (\[role=radiogroup\|checkboxgroup]) within one level.&#xA;In case we deal with \[role=checkbox], we treat it as multiple choice group | `index: number` | | LionMenu |
350
- | `toggle` | public | | `ev: Event` | | LionMenu |
351
- | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
352
- | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenu |
353
- | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: *` | | LionMenu |
354
- | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | LionMenu |
355
- | `_onListClick` | protected | | `ev: MouseEvent` | | LionMenu |
356
- | `_onListFocusIn` | protected | | `ev: FocusEvent` | | LionMenu |
357
- | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: *` | | LionMenu |
358
- | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | LionMenu |
359
- | `_setupList` | protected | | | | LionMenu |
360
-
361
- ### Attributes
362
-
363
- | Name | Field | Inherited From |
364
- | ---------------------------- | ------------------------ | -------------- |
365
- | `invokerNode` | invokerNode | LionMenu |
366
- | `behave-as-accordion` | behaveAsAccordion | LionMenu |
367
- | `level` | level | LionMenu |
368
- | `orientation` | orientation | LionMenu |
369
- | `multiple-choice` | multipleChoice | LionMenu |
370
- | `selection-follows-focus` | selectionFollowsFocus | LionMenu |
371
- | `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenu |
372
- | `no-preselect` | noPreselect | LionMenu |
373
- | `item-wrap` | itemWrap | LionMenu |
374
- | `_activateOnTypedChars` | \_activateOnTypedChars | LionMenu |
375
- | `_hasSmartListItems` | \_hasSmartListItems | LionMenu |
376
- | `_activeMode` | \_activeMode | LionMenu |
377
- | `bar` | bar | LionMenu |
378
-
379
- <hr/>
380
-
381
-
382
- ## class: `LionTree`, `lion-tree`
383
-
384
- ### Fields
385
-
386
- | Name | Privacy | Type | Default | Description | Inherited From |
387
- | --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- |
388
- | `activeIndex` | public | | | | InteractiveListMixin |
389
- | `activeItem` | public | | | | InteractiveListMixin |
390
- | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | MultiLevelListMixin |
391
- | `checkedIndex` | public | `number \| number[]` | | | InteractiveListMixin |
392
- | `handleFocus` | public | `boolean` | `true` | | MultiLevelListMixin |
393
- | `invokerInteraction` | public | `string` | `'click'` | | |
394
- | `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence&#xA;over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | MultiLevelListMixin |
395
- | `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.&#xA;This way, the outside world can confirm the type of an element | InteractiveListMixin |
396
- | `itemWrap` | public | `boolean` | | | InteractiveListMixin |
397
- | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | MultiLevelListMixin |
398
- | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | InteractiveListMixin |
399
- | `multipleChoice` | public | `boolean` | `false` | | InteractiveListMixin |
400
- | `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | InteractiveListMixin |
401
- | `orientation` | public | `string` | `'vertical'` | | InteractiveListMixin |
402
- | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | MultiLevelListMixin |
403
- | `rotateKeyboardNavigation` | public | `boolean` | `false` | | InteractiveListMixin |
404
- | `selectionFollowsFocus` | public | `boolean` | `false` | | InteractiveListMixin |
405
- | `slots` | public | | | | InteractiveListMixin |
406
- | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | InteractiveListMixin |
407
- | `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against&#xA;the values of list items. The first and closest match, becomes active&#xA;(focused or activedescendant depending on \_matchMode) | InteractiveListMixin |
408
- | `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an&#xA;\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).&#xA;For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)&#xA;Other examples:&#xA;- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)&#xA;- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)&#xA;For disclosure menus, we need keyboard navigation, but treat every list item&#xA;(more precisely its anchor child) as a tab stop. | InteractiveListMixin |
409
- | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | InteractiveListMixin |
410
- | `_contentNode` | protected | | | | MultiLevelListMixin |
411
- | `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set&#xA;to them and they are responsible for setting \[aria-selected].&#xA;When false, \`get listItems()\` needs to be configured to point to the list items. | InteractiveListMixin |
412
- | `_hasSmartListItems` | public | | | | InteractiveListMixin |
413
- | `_interactiveChildrenRoles` | protected | | | | InteractiveListMixin |
414
- | `_invokerNode` | protected | | | | MultiLevelListMixin |
415
- | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | InteractiveListMixin |
416
- | `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]&#xA;Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | InteractiveListMixin |
417
- | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'tree'` | The role that will be put on \_listNode | InteractiveListMixin |
418
- | `_onPopState` | protected | | | | InteractiveListMixin |
419
- | `_scrollTargetNode` | protected | | | | InteractiveListMixin |
420
- | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | MultiLevelListMixin |
421
-
422
- ### Methods
423
-
424
- | Name | Privacy | Description | Parameters | Return | Inherited From |
425
- | --------------------------- | --------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------- | ------ | -------------------- |
426
- | `setCheckedIndex` | public | When \`multipleChoice\` is false, will toggle, else will check provided index | `index: Number` | | InteractiveListMixin |
427
- | `toggle` | public | | `ev: Event` | | MultiLevelListMixin |
428
- | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
429
- | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | InteractiveListMixin |
430
- | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: *` | | InteractiveListMixin |
431
- | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | InteractiveListMixin |
432
- | `_onListClick` | protected | | `ev: MouseEvent` | | InteractiveListMixin |
433
- | `_onListFocusIn` | protected | | `ev: FocusEvent` | | InteractiveListMixin |
434
- | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: *` | | InteractiveListMixin |
435
- | `_onListKeyUp` | protected | | `ev: KeyboardEvent` | | InteractiveListMixin |
436
- | `_setupList` | protected | | | | InteractiveListMixin |
437
-
438
- ### Attributes
439
-
440
- | Name | Field | Inherited From |
441
- | ---------------------------- | ------------------------ | -------------------- |
442
- | `invokerNode` | invokerNode | MultiLevelListMixin |
443
- | `behave-as-accordion` | behaveAsAccordion | MultiLevelListMixin |
444
- | `level` | level | MultiLevelListMixin |
445
- | `orientation` | orientation | InteractiveListMixin |
446
- | `multiple-choice` | multipleChoice | InteractiveListMixin |
447
- | `selection-follows-focus` | selectionFollowsFocus | InteractiveListMixin |
448
- | `rotate-keyboard-navigation` | rotateKeyboardNavigation | InteractiveListMixin |
449
- | `no-preselect` | noPreselect | InteractiveListMixin |
450
- | `item-wrap` | itemWrap | InteractiveListMixin |
451
- | `_activateOnTypedChars` | \_activateOnTypedChars | InteractiveListMixin |
452
- | `_hasSmartListItems` | \_hasSmartListItems | InteractiveListMixin |
453
- | `_activeMode` | \_activeMode | InteractiveListMixin |
454
-
455
- <hr/>