@lion/ui 0.21.1-menu-system.0 → 0.22.0

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 (185) hide show
  1. package/components/button/src/LionButton.js +0 -4
  2. package/components/form/test/lion-form.test.js +4 -3
  3. package/components/form-core/src/form-group/FormGroupMixin.js +37 -0
  4. package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js +25 -0
  5. package/components/input-amount-dropdown/src/LionInputAmountDropdown.js +2 -2
  6. package/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.js +12 -3
  7. package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js +10 -3
  8. package/components/overlays/src/OverlayController.js +111 -296
  9. package/components/overlays/src/OverlayMixin.js +17 -76
  10. package/components/overlays/src/utils/adopt-styles.js +1 -1
  11. package/components/overlays/src/utils/is-equal-config.js +6 -15
  12. package/components/overlays/test/OverlayController.test.js +24 -144
  13. package/components/overlays/test-suites/OverlayMixin.suite.js +8 -8
  14. package/components/overlays/types/ArrowMixinTypes.ts +3 -1
  15. package/components/overlays/types/OverlayConfig.ts +5 -20
  16. package/components/overlays/types/OverlayMixinTypes.ts +0 -2
  17. package/custom-elements.json +6260 -13587
  18. package/dist-types/components/button/src/LionButton.d.ts +0 -1
  19. package/dist-types/components/button/src/LionButton.d.ts.map +1 -1
  20. package/dist-types/components/combobox/src/LionCombobox.d.ts +1 -1
  21. package/dist-types/components/dialog/src/LionDialog.d.ts +2 -6
  22. package/dist-types/components/dialog/src/LionDialog.d.ts.map +1 -1
  23. package/dist-types/components/form-core/src/form-group/FormGroupMixin.d.ts +1 -0
  24. package/dist-types/components/form-core/src/form-group/FormGroupMixin.d.ts.map +1 -1
  25. package/dist-types/components/form-core/test-suites/form-group/FormGroupMixin.suite.d.ts.map +1 -1
  26. package/dist-types/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.d.ts.map +1 -1
  27. package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts +1 -1
  28. package/dist-types/components/overlays/src/OverlayController.d.ts +5 -22
  29. package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
  30. package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
  31. package/dist-types/components/overlays/src/utils/is-equal-config.d.ts.map +1 -1
  32. package/dist-types/components/overlays/types/ArrowMixinTypes.d.ts.map +1 -1
  33. package/dist-types/components/overlays/types/OverlayConfig.d.ts +2 -12
  34. package/dist-types/components/overlays/types/OverlayConfig.d.ts.map +1 -1
  35. package/dist-types/components/overlays/types/OverlayMixinTypes.d.ts +0 -1
  36. package/dist-types/components/overlays/types/OverlayMixinTypes.d.ts.map +1 -1
  37. package/dist-types/components/select-rich/src/LionSelectRich.d.ts +2 -6
  38. package/dist-types/components/select-rich/src/LionSelectRich.d.ts.map +1 -1
  39. package/dist-types/components/tooltip/src/LionTooltip.d.ts +1 -1
  40. package/dist-types/exports/overlays.d.ts +0 -6
  41. package/dist-types/exports/overlays.d.ts.map +1 -1
  42. package/dist-types/tsconfig.tsbuildinfo +1 -1
  43. package/docs/components/checkbox-group/overview.md +2 -2
  44. package/docs/components/collapsible/overview.md +1 -1
  45. package/docs/components/combobox/api-table.md +39 -53
  46. package/docs/components/combobox/overview.md +1 -1
  47. package/docs/components/combobox/use-cases.md +1 -1
  48. package/docs/components/dialog/api-table.md +6 -32
  49. package/docs/components/dialog/overview.md +1 -1
  50. package/docs/components/fieldset/overview.md +5 -5
  51. package/docs/components/form/overview.md +3 -3
  52. package/docs/components/form/use-cases.md +2 -2
  53. package/docs/components/icon/use-cases.md +1 -1
  54. package/docs/components/input/overview.md +1 -1
  55. package/docs/components/input-amount/overview.md +3 -3
  56. package/docs/components/input-date/overview.md +3 -3
  57. package/docs/components/input-datepicker/api-table.md +45 -63
  58. package/docs/components/input-datepicker/overview.md +5 -5
  59. package/docs/components/input-email/overview.md +2 -2
  60. package/docs/components/input-file/overview.md +1 -1
  61. package/docs/components/input-iban/overview.md +2 -2
  62. package/docs/components/input-range/overview.md +2 -2
  63. package/docs/components/input-stepper/overview.md +1 -1
  64. package/docs/components/input-tel/overview.md +1 -1
  65. package/docs/components/input-tel/use-cases.md +6 -6
  66. package/docs/components/input-tel-dropdown/overview.md +1 -1
  67. package/docs/components/listbox/use-cases.md +1 -1
  68. package/docs/components/radio-group/overview.md +3 -3
  69. package/docs/components/select/use-cases.md +1 -1
  70. package/docs/components/select-rich/api-table.md +33 -50
  71. package/docs/components/select-rich/use-cases.md +2 -2
  72. package/docs/components/tabs/examples.md +1 -1
  73. package/docs/components/tooltip/api-table.md +7 -33
  74. package/docs/fundamentals/index.md +4 -4
  75. package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
  76. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
  77. package/docs/fundamentals/rationales/accessibility.md +1 -1
  78. package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
  79. package/docs/fundamentals/systems/core/overview.md +1 -1
  80. package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
  81. package/docs/fundamentals/systems/form/model-value.md +1 -1
  82. package/docs/fundamentals/systems/form/overview.md +28 -28
  83. package/docs/fundamentals/systems/form/validate.md +2 -2
  84. package/docs/fundamentals/systems/localize/overview.md +4 -4
  85. package/docs/fundamentals/systems/overlays/api-table.md +43 -46
  86. package/docs/fundamentals/systems/overlays/configuration.md +2 -2
  87. package/docs/fundamentals/systems/overlays/overview.md +5 -5
  88. package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
  89. package/docs/fundamentals/tools/helpers/overview.md +1 -1
  90. package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
  91. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  92. package/docs/guides/how-to/create-a-form.md +4 -4
  93. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  94. package/docs/guides/how-to/index.md +1 -1
  95. package/docs/guides/index.md +8 -8
  96. package/docs/guides/principles/index.md +5 -5
  97. package/docs/guides/principles/styling.md +1 -1
  98. package/exports/overlays.js +0 -6
  99. package/overlays.js +0 -6
  100. package/package.json +6 -2
  101. package/vscode.css-custom-data.json +5 -0
  102. package/vscode.html-custom-data.json +789 -0
  103. package/web-types.json +2016 -0
  104. package/components/menu/CHANGELOG.md +0 -37
  105. package/components/menu/README.md +0 -334
  106. package/components/menu/index.js +0 -2
  107. package/components/menu/lion-menu.js +0 -3
  108. package/components/menu/package.json +0 -46
  109. package/components/menu/requirements.temp.md +0 -12
  110. package/components/menu/src/InteractiveListMixin.js +0 -840
  111. package/components/menu/src/LionMenu.js +0 -421
  112. package/components/menu/src/MoreButtonMenuMixin.js +0 -278
  113. package/components/menu/src/MultiLevelListMixin.js +0 -305
  114. package/components/menu/src/utils/isInView.js +0 -26
  115. package/components/menu/src/utils/listItemInteractions.js +0 -124
  116. package/components/menu/test/InteractiveListMixin.test.js +0 -3
  117. package/components/menu/test/MoreButtonMenuMixin.test.js +0 -4
  118. package/components/menu/test/MultiLevelListMixin.test.js +0 -3
  119. package/components/menu/test/lion-menu-interactions.test.js +0 -3
  120. package/components/menu/test/lion-menu.test.js +0 -14
  121. package/components/menu/test-helpers/mimicKeyPress.js +0 -9
  122. package/components/menu/test-suites/InteractiveListMixin.suite.js +0 -454
  123. package/components/menu/test-suites/LionMenu.suite.js +0 -114
  124. package/components/menu/test-suites/LionMenuInteractions.suite.js +0 -583
  125. package/components/menu/test-suites/MoreButtonMenuMixin.suite.js +0 -372
  126. package/components/menu/test-suites/MultiLevelListMixin.suite.js +0 -303
  127. package/components/menu/types/InteractiveListMixinTypes.d.ts +0 -84
  128. package/components/overlays/NEXT.md +0 -49
  129. package/dist-types/components/menu/index.d.ts +0 -3
  130. package/dist-types/components/menu/index.d.ts.map +0 -1
  131. package/dist-types/components/menu/lion-menu.d.ts +0 -2
  132. package/dist-types/components/menu/lion-menu.d.ts.map +0 -1
  133. package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts +0 -39
  134. package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts.map +0 -1
  135. package/dist-types/components/menu/src/utils/isInView.d.ts +0 -9
  136. package/dist-types/components/menu/src/utils/isInView.d.ts.map +0 -1
  137. package/dist-types/components/menu/src/utils/listItemInteractions.d.ts +0 -48
  138. package/dist-types/components/menu/src/utils/listItemInteractions.d.ts.map +0 -1
  139. package/dist-types/components/menu/test/InteractiveListMixin.test.d.ts +0 -2
  140. package/dist-types/components/menu/test/InteractiveListMixin.test.d.ts.map +0 -1
  141. package/dist-types/components/menu/test/MoreButtonMenuMixin.test.d.ts +0 -2
  142. package/dist-types/components/menu/test/MoreButtonMenuMixin.test.d.ts.map +0 -1
  143. package/dist-types/components/menu/test/MultiLevelListMixin.test.d.ts +0 -2
  144. package/dist-types/components/menu/test/MultiLevelListMixin.test.d.ts.map +0 -1
  145. package/dist-types/components/menu/test/lion-menu-interactions.test.d.ts +0 -2
  146. package/dist-types/components/menu/test/lion-menu-interactions.test.d.ts.map +0 -1
  147. package/dist-types/components/menu/test/lion-menu.test.d.ts +0 -2
  148. package/dist-types/components/menu/test/lion-menu.test.d.ts.map +0 -1
  149. package/dist-types/components/menu/test-helpers/mimicKeyPress.d.ts +0 -7
  150. package/dist-types/components/menu/test-helpers/mimicKeyPress.d.ts.map +0 -1
  151. package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts +0 -11
  152. package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts.map +0 -1
  153. package/dist-types/components/menu/test-suites/LionMenu.suite.d.ts +0 -9
  154. package/dist-types/components/menu/test-suites/LionMenu.suite.d.ts.map +0 -1
  155. package/dist-types/components/menu/test-suites/LionMenuInteractions.suite.d.ts +0 -5
  156. package/dist-types/components/menu/test-suites/LionMenuInteractions.suite.d.ts.map +0 -1
  157. package/dist-types/components/menu/test-suites/MoreButtonMenuMixin.suite.d.ts +0 -11
  158. package/dist-types/components/menu/test-suites/MoreButtonMenuMixin.suite.d.ts.map +0 -1
  159. package/dist-types/components/menu/test-suites/MultiLevelListMixin.suite.d.ts +0 -11
  160. package/dist-types/components/menu/test-suites/MultiLevelListMixin.suite.d.ts.map +0 -1
  161. package/dist-types/exports/define/lion-item.d.ts +0 -2
  162. package/dist-types/exports/define/lion-item.d.ts.map +0 -1
  163. package/dist-types/exports/define/lion-menu.d.ts +0 -2
  164. package/dist-types/exports/define/lion-menu.d.ts.map +0 -1
  165. package/dist-types/exports/menu-test-suites.d.ts +0 -4
  166. package/dist-types/exports/menu-test-suites.d.ts.map +0 -1
  167. package/dist-types/exports/menu.d.ts +0 -3
  168. package/dist-types/exports/menu.d.ts.map +0 -1
  169. package/docs/components/menu/api-table.md +0 -121
  170. package/docs/components/menu/applyMenuDemoStyles.js +0 -173
  171. package/docs/components/menu/extensions.md +0 -262
  172. package/docs/components/menu/index.md +0 -13
  173. package/docs/components/menu/overview.md +0 -422
  174. package/docs/components/menu/src/DemoNavigationBar.js +0 -441
  175. package/docs/components/menu/src/DemoSpinButton.js +0 -215
  176. package/docs/components/menu/src/DemoToolbar.js +0 -101
  177. package/docs/components/menu/src/DemoTree.js +0 -55
  178. package/docs/components/menu/src/navigation-bar-types.js +0 -41
  179. package/docs/components/menu/use-cases.md +0 -74
  180. package/exports/define/lion-item.js +0 -3
  181. package/exports/define/lion-menu.js +0 -3
  182. package/exports/menu-test-suites.js +0 -4
  183. package/exports/menu.js +0 -3
  184. package/menu-test-suites.js +0 -4
  185. package/menu.js +0 -3
package/docs/components/menu/api-table.md DELETED
@@ -1,121 +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 | | | | LionMenuCore |
22
- | `activeItem` | public | | | | LionMenuCore |
23
- | `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenuCore |
24
- | `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenuCore |
25
- | `checkedIndex` | public | `number \| number[]` | | | LionMenuCore |
26
- | `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
27
- | `handleFocus` | public | `boolean` | `true` | | LionMenuCore |
28
- | `invokerInteraction` | public | `string` | `'click'` | | LionMenuCore |
29
- | `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 | LionMenuCore |
30
- | `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 | LionMenuCore |
31
- | `itemWrap` | public | `boolean` | | | LionMenuCore |
32
- | `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenuCore |
33
- | `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,&#xA;\_\_listItems are gathered via a slotchange listener | LionMenuCore |
34
- | `multipleChoice` | public | `boolean` | `false` | | LionMenuCore |
35
- | `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,&#xA;checkedIndex will not be set | LionMenuCore |
36
- | `openableMode` | public | `'disclosure'\|'overlay'` | `'disclosure'` | Terminology aligned with https\://open-ui.org/components/openable.explainer/ | |
37
- | `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 |
38
- | `orientation` | public | `string` | `'vertical'` | | LionMenuCore |
39
- | `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenuCore |
40
- | `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenuCore |
41
- | `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenuCore |
42
- | `slots` | public | | | | LionMenuCore |
43
- | `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenuCore |
44
- | `_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) | LionMenuCore |
45
- | `_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. | LionMenuCore |
46
- | `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenuCore |
47
- | `_contentNode` | protected | | | | LionMenuCore |
48
- | `_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. | LionMenuCore |
49
- | `_hasSmartListItems` | public | | | | LionMenuCore |
50
- | `_interactiveChildrenRoles` | protected | | | | LionMenuCore |
51
- | `_invokerNode` | protected | | | | LionMenuCore |
52
- | `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenuCore |
53
- | `_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" | LionMenuCore |
54
- | `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | LionMenuCore |
55
- | `_onOverlayShow` | protected | | | | OverlayWithListInvokerMixin |
56
- | `_onPopState` | protected | | | | LionMenuCore |
57
- | `_overlayBackdropNode` | protected | | | | OverlayMixin |
58
- | `_overlayContentNode` | protected | | | make sure OverlayMixin gets the contentNode defined by DisclosureMixin | OverlayMixin |
59
- | `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
60
- | `_overlayInvokerNode` | protected | | | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin | OverlayMixin |
61
- | `_overlayReferenceNode` | protected | | | | OverlayMixin |
62
- | `_scrollTargetNode` | protected | | | | LionMenuCore |
63
- | `_shouldSetupOverlay` | protected | `boolean` | `false` | | |
64
- | `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenuCore |
65
-
66
- ### Methods
67
-
68
- | Name | Privacy | Description | Parameters | Return | Inherited From |
69
- | ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
70
- | `close` | public | Hides the overlay | | | OverlayMixin |
71
- | `open` | public | Shows the overlay | | | OverlayMixin |
72
- | `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 |
73
- | `setCheckedIndex` | public | When \`multipleChoice\` is false, will toggle, else will check provided index | `index: Number` | | LionMenuCore |
74
- | `toggle` | public | Toggles the overlay | `ev: Event` | | LionMenuCore |
75
- | `_defineOverlay` | protected | | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin |
76
- | `_defineOverlayConfig` | protected | | | `OverlayConfig` | OverlayMixin |
77
- | `_getInvokerNode` | protected | | | `Element\|null` | OverlayMixin |
78
- | `_getNextEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenuCore |
79
- | `_getPreviousEnabledOption` | protected | | `currentIndex: number, offset: number` | | LionMenuCore |
80
- | `_initListItems` | protected | When \_listItemsSlot receives new items, they are initialized via this method | `newItems: LionItem[]\|HTMLElement[]` | | LionMenuCore |
81
- | `_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 |
82
- | `_matchCharsAgainstItem` | protected | | `{ chars, item }, config: {chars: string[], item: HTMLElement}` | | LionMenuCore |
83
- | `_onListClick` | protected | | `ev: MouseEvent` | | LionMenuCore |
84
- | `_onListFocusIn` | protected | | `ev: FocusEvent` | | LionMenuCore |
85
- | `_onListKeyDown` | protected | Handles various keyboard controls | `ev: KeyboardEvent` | | LionMenuCore |
86
- | `_onListKeyUp` | protected | | `ev: *` | | LionMenuCore |
87
- | `_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 |
88
- | `_setupList` | protected | | | | LionMenuCore |
89
- | `_setupOpenCloseListeners` | protected | | | | OverlayMixin |
90
- | `_setupOverlayCtrl` | protected | | | | OverlayMixin |
91
- | `_syncCurrentPageWithLocationHref` | protected | | `location: Location` | | LionMenuCore |
92
- | `_teardownOpenCloseListeners` | protected | | | | OverlayMixin |
93
- | `_teardownOverlayCtrl` | protected | | | | OverlayMixin |
94
-
95
- ### Events
96
-
97
- | Name | Type | Description | Inherited From |
98
- | ---------------- | ------------- | ----------- | -------------- |
99
- | `opened-changed` | `CustomEvent` | | OverlayMixin |
100
-
101
- ### Attributes
102
-
103
- | Name | Field | Inherited From |
104
- | ---------------------------- | ------------------------ | -------------- |
105
- | `openable-mode` | openableMode | |
106
- | `opened` | opened | OverlayMixin |
107
- | `orientation` | orientation | LionMenuCore |
108
- | `multiple-choice` | multipleChoice | LionMenuCore |
109
- | `selection-follows-focus` | selectionFollowsFocus | LionMenuCore |
110
- | `rotate-keyboard-navigation` | rotateKeyboardNavigation | LionMenuCore |
111
- | `no-preselect` | noPreselect | LionMenuCore |
112
- | `item-wrap` | itemWrap | LionMenuCore |
113
- | `_activateOnTypedChars` | \_activateOnTypedChars | LionMenuCore |
114
- | `_hasSmartListItems` | \_hasSmartListItems | LionMenuCore |
115
- | `_activeMode` | \_activeMode | LionMenuCore |
116
- | `invokerNode` | invokerNode | LionMenuCore |
117
- | `behave-as-accordion` | behaveAsAccordion | LionMenuCore |
118
- | `level` | level | LionMenuCore |
119
- | `bar` | bar | LionMenuCore |
120
-
121
- <hr/>
package/docs/components/menu/applyMenuDemoStyles.js DELETED
@@ -1,173 +0,0 @@
1
- import { html, render } from 'lit';
2
-
3
- function renderLitAsNode(tpl) {
4
- const container = document.createElement('div');
5
- render(tpl, container);
6
- return container.firstElementChild;
7
- }
8
-
9
- let isApplied = false;
10
-
11
- export function applyMenuDemoStyles() {
12
- if (isApplied) {
13
- return;
14
- }
15
-
16
- const fontAwesome = html`<link
17
- rel="stylesheet"
18
- href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
19
- integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
20
- crossorigin="anonymous"
21
- />`;
22
- document.head.appendChild(renderLitAsNode(fontAwesome));
23
-
24
- const styles = html` <style>
25
- [role='menu']:focus {
26
- outline: none;
27
- }
28
-
29
- [role='toolbar'],
30
- [role='tree'],
31
- [role='menubar'],
32
- [role='menu'] {
33
- background: white;
34
- font-family: sans-serif;
35
- font-size: 12px;
36
- }
37
-
38
- [level] > [role='menu'] {
39
- border: 1px solid black;
40
- }
41
-
42
- [role='treeitem']:not([aria-expanded]),
43
- [role='treeitem'][aria-expanded],
44
- [role^='menuitem']:not([aria-expanded]),
45
- [role^='menuitem'][aria-expanded] {
46
- all: unset;
47
- display: block;
48
- width: 100%;
49
- position: relative;
50
- box-sizing: border-box;
51
- padding: 4px 24px 4px 8px;
52
- }
53
-
54
- [role='treeitem']:not([aria-expanded]),
55
- [role='treeitem'][aria-expanded] {
56
- padding-left: 16px;
57
- }
58
-
59
- [role='treeitem'][active]:not([aria-expanded]),
60
- [role='treeitem'][active][aria-expanded],
61
- [role^='menuitem'][active]:not([aria-expanded]),
62
- [role^='menuitem'][active][aria-expanded] {
63
- background: lightgrey;
64
- }
65
-
66
- [role^='menuitem'][checked]:not([aria-expanded]),
67
- [role^='menuitem'][checked][aria-expanded] {
68
- background: #eee;
69
- }
70
-
71
- [role='treeitem'],
72
- [role^='menuitem'] {
73
- position: relative;
74
- cursor: default;
75
- }
76
-
77
- [role='treeitem']::after,
78
- [role^='menuitem']::after {
79
- position: absolute;
80
- top: 5px;
81
- font-size: 10px;
82
- }
83
-
84
- [role^='menuitem']::after {
85
- right: 4px;
86
- }
87
-
88
- [role^='treeitem']::after {
89
- left: 4px;
90
- }
91
-
92
- [role^='menuitem'][aria-expanded]::after {
93
- content: '▶';
94
- }
95
-
96
- [role^='menuitem'][aria-expanded='true']::after {
97
- content: '▼';
98
- }
99
-
100
- [orientation='horizontal'] [role^='menuitem'][aria-expanded]::after {
101
- content: '▼';
102
- }
103
-
104
- [role='menuitemcheckbox'][aria-checked='true']::after {
105
- content: '🗹';
106
- }
107
-
108
- [role='menuitemradio'][aria-checked='true']::after {
109
- content: '◉';
110
- }
111
-
112
- [role='separator'] {
113
- border-bottom: 1px solid gray;
114
- }
115
-
116
- [role='treeitem'][aria-expanded]::after {
117
- content: '+';
118
- }
119
-
120
- demo-tree[level='1'] [role='treeitem']:not([aria-expanded]),
121
- demo-tree[level='1'] [role='treeitem'][aria-expanded] {
122
- padding-left: 24px;
123
- }
124
-
125
- lion-menu[level='1'] [role^='menuitem']:not([aria-expanded]),
126
- lion-menu[level='1'] [role^='menuitem'][aria-expanded] {
127
- padding-left: 16px;
128
- }
129
-
130
- demo-tree[level='2'] [role='treeitem']:not([aria-expanded]),
131
- demo-tree[level='2'] [role='treeitem'][aria-expanded] {
132
- padding-left: 32px;
133
- }
134
- lion-menu[level='2'] [role^='menuitem']:not([aria-expanded]),
135
- lion-menu[level='2'] [role^='menuitem'][aria-expanded] {
136
- padding-left: 24px;
137
- }
138
-
139
- [role='toolbar'] {
140
- padding: 8px;
141
- background: #eee;
142
- }
143
- [role='toolbar'] button {
144
- background: none;
145
- padding: 4px 8px;
146
- border: 1px transparent;
147
- }
148
- [role='toolbar'] button[aria-pressed='true'],
149
- [role='toolbar'] button[aria-checked='true'] {
150
- background: white;
151
- border: 1px black;
152
- }
153
-
154
- [role='toolbar'] > div[role='separator'] {
155
- margin-left: 8px;
156
- margin-right: 8px;
157
- border-left: 1px solid lightgray;
158
- }
159
-
160
- button[slot='invoker'] {
161
- background: none;
162
- color: inherit;
163
- border: none;
164
- padding: 0;
165
- font: inherit;
166
- display: block;
167
- width: 100%;
168
- text-align: left;
169
- }
170
- </style>`;
171
- document.head.appendChild(renderLitAsNode(styles));
172
- isApplied = true;
173
- }
package/docs/components/menu/extensions.md DELETED
@@ -1,262 +0,0 @@
1
- ---
2
- title: 'Menu: Extensions'
3
- parts:
4
- - Menu
5
- - Extensions
6
- eleventyNavigation:
7
- key: 'Menu: Extensions'
8
- order: 10
9
- parent: Menu
10
- title: Extensions
11
- ---
12
-
13
- # Menu: Extensions
14
-
15
- ```js script
16
- import { html } from 'lit';
17
- import './src/DemoNavigationBar.js';
18
-
19
- // N.B. data structure designed to be compatible with existing extension layer
20
- // TODO: maybe refactor api and bridge
21
-
22
- const menuData = [
23
- {
24
- title: 'Products',
25
- link: 'products',
26
- sub: [
27
- {
28
- title: 'Payments',
29
- link: 'payments-collections',
30
- sub: [
31
- { title: 'Payments & Collections', link: '#' },
32
- { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
33
- { title: 'Instant Payments', link: 'instant-payments' },
34
- { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
35
- { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
36
- { title: 'International Credit Transfer', link: 'international-credit-transfer' },
37
- { title: 'Account Reporting', link: 'account-deporting' },
38
- ],
39
- },
40
- {
41
- title: 'Savings',
42
- link: 'savings-collection',
43
- sub: [
44
- { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
45
- { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
46
- { title: 'Notional Cash Management', link: 'notional-cash-management' },
47
- { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
48
- { title: 'Liquidity Management', link: 'liquidity-management' },
49
- { title: 'Excess Cash', link: 'excess-cash' },
50
- ],
51
- },
52
- {
53
- title: 'Investing',
54
- link: 'investing-collection',
55
- sub: [
56
- { title: 'Digital Banking Services', link: 'home' },
57
- { title: 'InsideBusiness', link: 'home' },
58
- { title: 'Connectivity Solutions', link: 'connectivity-solutions' },
59
- ],
60
- },
61
- {
62
- title: 'Mortgages',
63
- link: 'mortgages-collections',
64
- sub: [
65
- { title: 'Payments & Collections', link: '#' },
66
- { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
67
- { title: 'Instant Payments', link: 'instant-payments' },
68
- { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
69
- { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
70
- { title: 'International Credit Transfer', link: 'international-credit-transfer' },
71
- { title: 'Account Reporting', link: 'account-deporting' },
72
- ],
73
- },
74
- {
75
- title: 'Loans',
76
- link: 'loans-collection',
77
- sub: [
78
- { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
79
- { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
80
- { title: 'Notional Cash Management', link: 'notional-cash-management' },
81
- { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
82
- { title: 'Liquidity Management', link: 'liquidity-management' },
83
- { title: 'Excess Cash', link: 'excess-cash' },
84
- ],
85
- },
86
- {
87
- title: 'Insurances',
88
- link: 'insurances-collection',
89
- sub: [
90
- { title: 'Digital Banking Services', link: 'home' },
91
- { title: 'InsideBusiness', link: 'home' },
92
- { title: 'Connectivity Solutions', link: 'connectivity-solutions' },
93
- ],
94
- },
95
- {
96
- title: 'Digital banking',
97
- link: 'digital-banking',
98
- },
99
- ],
100
- },
101
- {
102
- title: "Who it's for",
103
- link: 'who',
104
- sub: [
105
- {
106
- title: 'Parents & kids',
107
- link: 'parents-kids',
108
- sub: [
109
- { title: 'Child current account', link: '#child-current' },
110
- { title: 'Youth current account', link: '#youth-current' },
111
- { title: 'Child savings account', link: '#child-savings' },
112
- ],
113
- },
114
- {
115
- title: 'Students',
116
- link: 'students',
117
- sub: [
118
- { title: 'Student account', link: '#student-account' },
119
- { title: 'Smart payments', link: '#smart-payments' },
120
- { title: 'Smart savings', link: '#smart-savings' },
121
- { title: 'Smart banking', link: '#smart-banking' },
122
- { title: 'Smart for now', link: '#smart-for-now' },
123
- { title: 'Smart for later', link: '#smart-for-later' },
124
- ],
125
- },
126
- {
127
- title: "I'm an expat",
128
- link: 'expat',
129
- sub: [
130
- { title: 'Open a Dutch banking account', link: '#open' },
131
- { title: 'Investments', link: '#investments' },
132
- { title: 'Mortgage', link: '#mortgage' },
133
- { title: 'Health insurance', link: '#insurance' },
134
- ],
135
- },
136
- ],
137
- },
138
- {
139
- title: 'Themes',
140
- link: 'themes',
141
- sub: [
142
- {
143
- title: 'Living',
144
- link: 'living-collections',
145
- sub: [
146
- { title: 'Payments & Collections', link: '#' },
147
- { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
148
- { title: 'Instant Payments', link: 'instant-payments' },
149
- { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
150
- { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
151
- { title: 'International Credit Transfer', link: 'international-credit-transfer' },
152
- { title: 'Account Reporting', link: 'account-deporting' },
153
- ],
154
- },
155
- {
156
- title: 'Wealth',
157
- link: 'wealth-collections',
158
- sub: [
159
- { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
160
- { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
161
- { title: 'Notional Cash Management', link: 'notional-cash-management' },
162
- { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
163
- { title: 'Liquidity Management', link: 'liquidity-management' },
164
- { title: 'Excess Cash', link: 'excess-cash' },
165
- ],
166
- },
167
- ],
168
- },
169
- {
170
- title: 'Loyalty shop',
171
- link: '#points',
172
- },
173
- {
174
- title: 'Make an appointment',
175
- link: '#appointment',
176
- },
177
- {
178
- title: 'Products 2',
179
- link: 'products-2',
180
- sub: [
181
- {
182
- title: 'Payments',
183
- link: 'payments-collections',
184
- sub: [
185
- { title: 'Payments & Collections', link: '#' },
186
- { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
187
- { title: 'Instant Payments', link: 'instant-payments' },
188
- { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
189
- { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
190
- { title: 'International Credit Transfer', link: 'international-credit-transfer' },
191
- { title: 'Account Reporting', link: 'account-deporting' },
192
- ],
193
- },
194
- ],
195
- },
196
-
197
- {
198
- title: 'Products 3',
199
- sub: [
200
- {
201
- title: 'Payments',
202
- link: 'payments-collections',
203
- sub: [
204
- { title: 'Payments & Collections', link: '#' },
205
- { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
206
- { title: 'Instant Payments', link: 'instant-payments' },
207
- { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
208
- { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
209
- { title: 'International Credit Transfer', link: 'international-credit-transfer' },
210
- { title: 'Account Reporting', link: 'account-deporting' },
211
- ],
212
- },
213
- ],
214
- },
215
- {
216
- title: 'Loyalty shop 2',
217
- link: '#points',
218
- },
219
- {
220
- title: 'Make an appointment 2',
221
- link: '#appointment',
222
- },
223
- ];
224
-
225
- const secondaryMenu = [
226
- {
227
- title: 'Back to old website',
228
- link: 'https://www.ingwb.com',
229
- target: '_self',
230
- trackid: 'backToOldWebsite',
231
- },
232
- ];
233
-
234
- const ctaPrimary = {
235
- id: 'cta-primary',
236
- label: 'Log in',
237
- href: '#login',
238
- };
239
-
240
- const ctaSecondary = {
241
- id: 'cta-secondary',
242
- label: 'Open an account',
243
- href: '#open-account',
244
- };
245
-
246
- // N.B. these should be provided via api call
247
- const suggestions = ['A', 'B', 'C', 'D'];
248
- ```
249
-
250
- ```js preview-story
251
- export const navigationBar = () => {
252
- return html`<demo-navigation-bar
253
- .menuItems="${menuData}"
254
- .menuSupportItems="${secondaryMenu}"
255
- .ctaPrimary="${ctaPrimary}"
256
- .ctaSecondary="${ctaSecondary}"
257
- .suggestions="${suggestions}"
258
- >
259
- .prefilledSuggestion="${suggestions[0]}"</demo-navigation-bar
260
- >`;
261
- };
262
- ```
package/docs/components/menu/index.md DELETED
@@ -1,13 +0,0 @@
1
- ---
2
- title: Menu
3
- parts:
4
- - Menu
5
- eleventyNavigation:
6
- key: Menu
7
- order: 20
8
- title: Menu
9
- ---
10
-
11
- # Menu
12
-
13
- -> go to Overview