@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
@@ -1,439 +0,0 @@
1
- // @ts-nocheck
2
- /* eslint-disable class-methods-use-this */
3
- import { LitElement, html, css, nothing } from 'lit';
4
- import { LionMenuHybrid } from '@lion/ui/menu.js';
5
- import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
6
-
7
- /**
8
- * @typedef {import('./types.js').NavBarResponsiveMode} NavBarResponsiveMode
9
- * @typedef {import('./types.js').MenuItem} MenuItem
10
- * @typedef {import('./types.js').CtaLink} CtaLink
11
- * @typedef {import('./types.js').Logo} Logo
12
- * @typedef {import('./types.js').LevelConfig} LevelConfig
13
- */
14
-
15
- export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
16
- static get properties() {
17
- return {
18
- responsiveMode: { type: String, reflect: true, attribute: 'responsive-mode' },
19
- // logo: { type: String },
20
- menuItems: { type: Array },
21
- menuSupportItems: { type: Array },
22
- ctaPrimary: { type: Object },
23
- ctaSecondary: { type: Object },
24
- suggestions: { type: Array },
25
- showOnMobile: { type: Array, attribute: 'show-on-mobile', reflect: true },
26
-
27
- _levelCfg: { state: true },
28
- };
29
- }
30
-
31
- static get scopedElements() {
32
- return {
33
- // 'lion-menu-overlay': LionMenuOverlay,
34
- 'lion-menu-hybrid': LionMenuHybrid,
35
- };
36
- }
37
-
38
- static get styles() {
39
- return [
40
- css`
41
- /** specific styles */
42
-
43
- :host([responsive-mode='desktop']) [data-has-full-width-flyout] > [slot='list'] {
44
- /** make sure that we give the right styles */
45
- position: relative;
46
- }
47
-
48
- :host([responsive-mode='desktop'])
49
- [data-has-full-width-flyout]
50
- > [slot='list']
51
- [level='2']
52
- > [slot='list'] {
53
- position: absolute;
54
- width: 100%;
55
- left: 0;
56
- right: 0;
57
- min-height: 300px;
58
- padding: 1em;
59
- background-color: white;
60
- border: 1px solid gray;
61
- box-sizing: border-box;
62
- }
63
-
64
- :host([responsive-mode='desktop']) [level='3'] > [slot='list'] {
65
- position: absolute;
66
- left: 33.333%;
67
- width: 33.333%;
68
- top: 0;
69
- padding: 1em;
70
- background-color: white;
71
- box-sizing: border-box;
72
- height: 100%;
73
- }
74
-
75
- :host([responsive-mode='mobile']) nav {
76
- border: 1px solid black;
77
- display: block;
78
- position: fixed;
79
- top: 0;
80
- bottom: 0;
81
- right: 0;
82
- min-width: 500px;
83
- }
84
-
85
- :host([responsive-mode='mobile']) [level][opened] > [slot='list'] {
86
- left: 0;
87
- width: 100%;
88
- top: 0;
89
- box-sizing: border-box;
90
- }
91
-
92
- :host([responsive-mode='mobile']) [slot='list'] {
93
- position: relative;
94
- padding: 1em;
95
- background-color: white;
96
- }
97
-
98
- :host([responsive-mode='mobile']) [level='2'] > [slot='list'],
99
- :host([responsive-mode='mobile']) [level='3'] > [slot='list'] {
100
- position: absolute;
101
- left: 100%;
102
- top: 0;
103
- box-sizing: border-box;
104
- padding-bottom: 200%;
105
- }
106
-
107
- /**
108
- * TODO remove it. Use it now for testing More button feature
109
- */
110
- :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'],
111
- :host([responsive-mode='desktop'])
112
- [level='1']
113
- > [slot='list']
114
- > [data-more-button-wrapper] {
115
- margin-right: 180px;
116
- }
117
-
118
- :host([responsive-mode='mobile']) nav {
119
- display: flex;
120
- flex-direction: column;
121
- /* height: 100%;
122
- justify-content: space-between; */
123
- }
124
-
125
- /* :host([responsive-mode='mobile']) .cta-items {
126
- position: absolute;
127
- bottom: 0;
128
- width: 100%;
129
- padding: 1em;
130
- background-color: white;
131
- box-sizing: border-box;
132
- } */
133
-
134
- :host([responsive-mode='mobile']) .logo-and-close {
135
- padding: 1em;
136
- }
137
- `,
138
- ];
139
- }
140
-
141
- constructor() {
142
- super();
143
-
144
- /** @type {Logo} */
145
- this.logo = { type: 'ing', alt: 'ING homepage', href: '/' };
146
- /** @type {MenuItem[]} */
147
- this.menuSupportItems = [];
148
- // /**
149
- // * @type {string[]}
150
- // * @description Choose which items to show on mobile when in default mode, maximum of two. Possible values: 'search', 'ctaPrimary', 'ctaSecondary', 'avatarMenu'
151
- // */
152
- // this.showOnMobile = [];
153
- /**
154
- * @type {CtaLink}
155
- */
156
- // @ts-ignore
157
- this.ctaPrimary = {};
158
- /**
159
- * @type {CtaLink}
160
- */
161
- // @ts-ignore
162
- this.ctaSecondary = {};
163
- /** @type {MenuItem[]} */
164
- this.menuItems = [];
165
- // /** @type {Boolean} */
166
- // this.searchDisabled = false;
167
- this.breakpointMin = 1400; // force desktop
168
- /** @type {string[]} */
169
- this.suggestions = [];
170
-
171
- this.prefilledSuggestion = '';
172
-
173
- const mql = window.matchMedia(`(width <= ${this.breakpointMin}px)`);
174
- /** @type {NavBarResponsiveMode} */
175
- this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
176
- this._levelCfg = this._getLevelCfg(this.responsiveMode);
177
- this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
178
-
179
- mql.addEventListener('change', () => {
180
- this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
181
- this._levelCfg = this._getLevelCfg(this.responsiveMode);
182
- this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
183
- });
184
-
185
- this.#storeLatestFocusedElementId();
186
- }
187
-
188
- /**
189
- * @param {NavBarResponsiveMode} responsiveMode
190
- */
191
- _getLevelCfg(responsiveMode) {
192
- // N.B. we're fighting some of the overlay configs provided by LionMenuOverlay here,
193
- // the idea is to take over all of that when depending on LionMenu, after removing LonMenuOverlay and LionMenuHybrid components altogether.
194
-
195
- if (responsiveMode === 'mobile') {
196
- return {
197
- l1: {
198
- isBar: false,
199
- openableConfig: {
200
- // We want to do the absolute positioning ourselves, popper is not suited for this...
201
- placementMode: 'custom',
202
- isActivated: false,
203
- hidesOnOutsideClick: false,
204
- inheritsReferenceWidth: 'none',
205
- },
206
- },
207
- l2: {
208
- openableConfig: {
209
- // We want disclosure behavior
210
- placementMode: 'custom',
211
- hidesOnOutsideClick: false,
212
- inheritsReferenceWidth: 'none',
213
- },
214
- },
215
- l3: {
216
- openableConfig: {
217
- // We want disclosure behavior
218
- placementMode: 'custom',
219
- hidesOnOutsideClick: false,
220
- inheritsReferenceWidth: 'none',
221
- },
222
- },
223
- };
224
- }
225
-
226
- return {
227
- l1: {
228
- isBar: true,
229
- hasFullWidthFlyout: true,
230
- openableConfig: {
231
- // We want disclosure behavior
232
- placementMode: 'custom',
233
- // N.B. we don't have an invoker...
234
- isActivated: false,
235
- inheritsReferenceWidth: 'none',
236
- focusContentOnOpen: true,
237
- },
238
- },
239
- l2: {
240
- openableConfig: {
241
- // We want disclosure behavior
242
- placementMode: 'custom',
243
- hidesOnOutsideClick: true,
244
- hidesOnEscape: true,
245
- inheritsReferenceWidth: 'none',
246
- focusContentOnOpen: true,
247
- },
248
- },
249
- l3: {
250
- openableConfig: {
251
- // We want disclosure behavior
252
- placementMode: 'custom',
253
- inheritsReferenceWidth: 'none',
254
- focusContentOnOpen: true,
255
- // TODO: implement in OverlayController
256
- hideVisually: true,
257
- },
258
- },
259
- };
260
- }
261
-
262
- _getSecondaryLevelCfg(responsiveMode) {
263
- if (responsiveMode === 'mobile') {
264
- return {
265
- l1: {
266
- isBar: true,
267
- },
268
- l2: {
269
- isBar: false,
270
- },
271
- };
272
- }
273
-
274
- return {
275
- l1: {
276
- isBar: true,
277
- },
278
- l2: {
279
- isBar: false,
280
- },
281
- };
282
- }
283
-
284
- /** @type {string | null} */
285
- #latestFocusedElementId = null;
286
-
287
- #storeLatestFocusedElementId() {
288
- this.addEventListener('focusin', ({ target }) => {
289
- // @ts-ignore
290
- this.#latestFocusedElementId = target.id;
291
- });
292
- }
293
-
294
- #syncLatestFocusedElementForNewResponsiveMode() {
295
- // We might show/hide or rerender some elements (with same ids) in different positions in the DOM.
296
- // As these are physically different elements, we must move focus (as otherwise it would be reset to body)
297
- if (!this.#latestFocusedElementId) return;
298
- const newFocusedElement = this.shadowRoot?.querySelector(`#${this.#latestFocusedElementId}`);
299
- if (newFocusedElement instanceof HTMLElement) {
300
- newFocusedElement.focus();
301
- }
302
- }
303
-
304
- /**
305
- * @param {import("./types.js").MenuItem}
306
- * @param {number} level
307
- */
308
- _getId(menuItem, level) {
309
- if (menuItem.id) return menuItem.id;
310
- const title = menuItem.title || menuItem.label || 'item';
311
- return `${
312
- Number.isInteger(level) ? `l${level}-${title}` : title
313
- }-${Math.random().toString(16).slice(2)}`;
314
- }
315
-
316
- /**
317
- * @param {import('lit').PropertyValues} changedProperties
318
- */
319
- updated(changedProperties) {
320
- if (changedProperties.has('responsiveMode')) {
321
- this._levelCfg = this._getLevelCfg(this.responsiveMode);
322
- this.#syncLatestFocusedElementForNewResponsiveMode();
323
- }
324
- }
325
-
326
- render() {
327
- return html`
328
- <nav>
329
- <div class="nav-header">
330
- <div class="logo-and-close">
331
- <a href="${this.logo.href || '#'}">
332
- <img src="${this.logo.src || ''}" alt="${this.logo.alt || ''}" />
333
- </a>
334
- ${this.responsiveMode === 'mobile'
335
- ? html`<button data-close data-level="1">✖️</button>`
336
- : ''}
337
- </div>
338
- ${this._searchTemplate()}
339
- </div>
340
- <div class="nav-body">
341
- ${this._menulevelTemplate(this.menuSupportItems, 1, '')}
342
- ${this.responsiveMode === 'desktop'
343
- ? this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)
344
- : ''}
345
- ${this._menulevelTemplate(this.menuItems, 1, '', true)}
346
- </div>
347
- ${this.responsiveMode === 'mobile'
348
- ? html`<div class="nav-footer">
349
- ${this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)}
350
- </div>`
351
- : ''}
352
- </nav>
353
- `;
354
- }
355
-
356
- /**
357
- * @param {string[]} suggestions
358
- * @returns {import('lit').TemplateResult}
359
- */
360
- _searchTemplate(suggestions = this.suggestions, prefilledSuggestion = this.prefilledSuggestion) {
361
- return html` <form role="search">
362
- <input
363
- type="search"
364
- list="search-list"
365
- placeholder="What are you looking for?"
366
- .value="${prefilledSuggestion}"
367
- />
368
- <datalist id="search-list">
369
- ${suggestions.map(suggestion => html`<option value="${suggestion}"></option>`)}
370
- </datalist>
371
- <input type="submit" value="Search" />
372
- </form>`;
373
- }
374
-
375
- /**
376
- * @param {CtaLink} ctaPrimary
377
- * @param {CtaLink} ctaSecondary
378
- * @returns {import('lit').TemplateResult}
379
- */
380
- _ctasTemplate(ctaPrimary, ctaSecondary) {
381
- return html`<div class="cta-items">
382
- ${ctaSecondary?.href
383
- ? html`<div class="cta-secondary">
384
- <a id="${this._getId(ctaSecondary)}" href="${ctaSecondary.href}"
385
- >${ctaSecondary.label}
386
- </a>
387
- </div>`
388
- : ''}
389
- ${ctaPrimary?.href
390
- ? html`<div class="cta-primary">
391
- <a id="${this._getId(ctaPrimary)}" href="${ctaPrimary.href}"> ${ctaPrimary.label}</a>
392
- </div>`
393
- : ''}
394
- </div>`;
395
- }
396
-
397
- /**
398
- * @param {MenuItem[]} menuItemsForLevel
399
- * @param {number} level
400
- * @returns {import('lit').TemplateResult}
401
- */
402
- _menulevelTemplate(menuItemsForLevel, level, prevText = '', itemWrap = false) {
403
- // @ts-ignore
404
- const cfgForLevel = this._levelCfg[`l${level}`];
405
-
406
- return html`<lion-menu-hybrid
407
- ?item-wrap=${itemWrap}
408
- .config="${cfgForLevel.openableConfig || {}}"
409
- .bar="${cfgForLevel.isBar}"
410
- ?data-has-full-width-flyout="${cfgForLevel.hasFullWidthFlyout}"
411
- ._activeMode="${'tabbable-disclosure'}"
412
- >
413
- ${level > 1 && this.responsiveMode === 'mobile'
414
- ? html` <div role="listitem">
415
- <button data-close data-level="${level}">&lt; ${prevText}</button>
416
- </div>`
417
- : ''}
418
- ${menuItemsForLevel.map(
419
- menuItem => html`
420
- <div role="listitem">
421
- ${menuItem.sub
422
- ? html` <button id="${this._getId(menuItem)}" data-invoker>${menuItem.title}</button>
423
- ${menuItem.sub
424
- ? this._menulevelTemplate(menuItem.sub, level + 1, menuItem.title)
425
- : ''}`
426
- : html` <a id="${this._getId(menuItem)}" href="${menuItem.link || ''}"
427
- >${menuItem.title}</a
428
- >`}
429
- </div>
430
- `,
431
- )}
432
- ${itemWrap
433
- ? html`<div slot="more-button">
434
- <button>More</button>
435
- </div>`
436
- : nothing}
437
- </lion-menu-hybrid> `;
438
- }
439
- }
@@ -1,41 +0,0 @@
1
- /**
2
- * @typedef {'mobile' | 'desktop'} NavBarResponsiveMode
3
- * Responsive mode for the navigation bar
4
- */
5
-
6
- /**
7
- * @typedef {Object} MenuItem
8
- * Navigation menu item
9
- * @property {string} [id] - Optional unique identifier
10
- * @property {string} title - Display title of the menu item
11
- * @property {string} [link] - URL for the menu item (for leaf items)
12
- * @property {MenuItem[]} [sub] - Submenu items (for parent items)
13
- */
14
-
15
- /**
16
- * @typedef {Object} CtaLink
17
- * Call-to-action link
18
- * @property {string} [id] - Optional unique identifier
19
- * @property {string} [href] - URL for the CTA
20
- * @property {string} [text] - Display text for the CTA
21
- * @property {string} [label] - Accessible label for the CTA
22
- */
23
-
24
- /**
25
- * @typedef {Object} Logo
26
- * Logo configuration for the navigation bar
27
- * @property {string} type - Logo type (e.g., 'ing')
28
- * @property {string} alt - Alternative text for the logo
29
- * @property {string} href - URL the logo links to
30
- * @property {string} [src] - Optional custom logo source URL
31
- */
32
-
33
- /**
34
- * @typedef {Object} LevelConfig
35
- * Configuration for a menu level
36
- * @property {boolean} [isBar] - Whether this level is displayed as a bar
37
- * @property {boolean} [hasFullWidthFlyout] - Whether this level has a full-width flyout
38
- * @property {object} [openableConfig] - Configuration for the openable overlay
39
- */
40
-
41
- export {};
@@ -1,49 +0,0 @@
1
- - Redesign goals OverlayController
2
- - Simplicity
3
- - One primitive to (controller to) rule them all
4
- - Aligned api with all disclosure mechanisms (openables: <https://open-ui.org/components/openable.explainer/>)
5
- - Aligned with platform overlay primitives (popover, dialog and tooltip)
6
- - Controller will be elegantly aligned with host
7
- - Controller props will be mapped to a host via a mixin, w/o requiring lots of boilerplate
8
- - No race conditions due to unaligned heart beats: both hook in to the same "tick": the reactive update cycle of lit (which can theoretically be swapped by other cycles, see <https://lit.dev/docs/frameworks/react/#usecontroller>)
9
- - In general, all property effects / events / reactivity should be aligned as much as possible with the update cycle (for predictability and perf. We only need
10
- - All components will just be configuration (no need to redefine a lot of logic)
11
- - OverlayController (or OpenableController, or DisclosureController, or VisitibilityToggleController) will be the biggest common denominator. Having all logic in one place, makes it a lot easier to erase about then having it scattered across many mixin and/or controller levels
12
- - Even though the amount of logic is large (and might feel a bit monolithic), this is just needed when we want to have a stable, battle tested abstraction around all edge cases that building accessible disclosures should handle
13
- - However, this does not come at an extra performance cost (see performance, you will only load what you need)
14
- - The current OverlayController is a long file that can benefit from some modularity and cleanup
15
- - Every overlay feature can be provided in a separate file with knowledge about the overlay lifecycle
16
- - We can provide/reuse some utils like Resettable from VisibilityToggleCtrl ()
17
- - Flexibility
18
- - Re-use your markup for different screen sizes and/or devices (that may have different appearances, but the same functionality/semantics)
19
- - Think of:
20
- - a datepicker that opens as dropdown on desktop and as centered modal dialog on mobile
21
- - a menubutton that opens as dropdown on desktop and as bottomsheet
22
- - A menu that opens as dropdown on desktop and a collapsible (or even a plain list) on mobile
23
- - As explained above, controllers are the most re-usable primitives, as a web component/mixin does not always provide the flexibility we need
24
- - Controllers can be easliy mapped to directives (giving the same flexibility as "platform attributes" like popover). Forward compatible with <https://github.com/WICG/webcomponents/issues/1029>
25
- - Controllers can be easily mapped to web components or mixins
26
- - Contrary to mixins, it’s easy to conditionally load a controller
27
- - Contrary to mixins, it’s easy to “undo” a controller (which is helpful in edge cases)
28
- - Performance
29
- - Will leverage the platform where possible:
30
- - Use popover
31
- - Forward compatibility
32
- - Aligns as much as possible with (future) platform apis
33
- - This leverages existing dev knowledge (api familiarity)
34
- - This allows to build drop in replacements
35
- - This allows to rely on the platform (reducing maintenance costs, increasing performance)
36
- - Completeness
37
- - Supports all use cases to build every UI thinkable:
38
- - Will have optional dependency to menu controllers and interactive list controllers
39
- - Supports visually hidden scenarios, hides
40
- - Backward compatibility
41
- - Since the amount of consumers of our overlay system (directly or indirectly) is large, we should provide a compatibility mechanism where possible. At the same time, we want to create an api as clean/aligned/forward compatible as possible. We could consider an optional compat-layer (a global import at the top of an app extending OverlayController prototype). Think of:
42
- - Mapping popper api to popover concepts
43
- -
44
-
45
- # Why start with OverlayController?
46
-
47
- - there is a lot of value in cleaning it up as there are many platform improvements
48
- - it's used by many
49
- - It is already a controller (we created it before Lit controllers existed) and therefore impact is minimal
@@ -1,3 +0,0 @@
1
- export type DisclosureHost = import('../types/DisclosureMixinTypes.js').DisclosureHost;
2
- export type DisclosureMixin = import('../types/DisclosureMixinTypes.js').DisclosureMixin;
3
- //# sourceMappingURL=DisclosureMixin.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DisclosureMixin.d.ts","sourceRoot":"","sources":["../../../../components/collapsible/src/DisclosureMixin.js"],"names":[],"mappings":"6BACa,OAAO,kCAAkC,EAAE,cAAc;8BACzD,OAAO,kCAAkC,EAAE,eAAe"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=DisclosureMixin.suite.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DisclosureMixin.suite.d.ts","sourceRoot":"","sources":["../../../../components/collapsible/test-suites/DisclosureMixin.suite.js"],"names":[],"mappings":""}
@@ -1,24 +0,0 @@
1
- import { Constructor } from '@open-wc/dedupe-mixin';
2
- import { LitElement } from 'lit';
3
- export declare class DisclosureHost {
4
- opened: Boolean;
5
- protected get _invokerNode(): HTMLElement;
6
- protected get _contentNode(): HTMLElement;
7
- toggle(): void;
8
- open(): void;
9
- close(): void;
10
- protected _onOpenedChanged(): Promise<void>;
11
- protected _onDisclosureShow(): void;
12
- protected _onDisclosureHide(): void;
13
- protected _showAnimation(cfg: object): Promise<void>;
14
- protected _hideAnimation(cfg: object): Promise<void>;
15
- protected _refreshAnimateCompletePromise(): void;
16
- protected _setupOpenCloseListeners(): void;
17
- protected _teardownOpenCloseListeners(): void;
18
- private __setupAnimation;
19
- private __teardownAnimation;
20
- private __handleAnimateComplete;
21
- }
22
- export declare function DisclosureImplementation<T extends Constructor<LitElement>>(superclass: T): T & Constructor<DisclosureHost> & DisclosureHost & Pick<typeof DisclosureHost, keyof typeof DisclosureHost> & Pick<typeof LitElement, keyof typeof LitElement>;
23
- export type DisclosureMixin = typeof DisclosureImplementation;
24
- //# sourceMappingURL=DisclosureMixinTypes.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DisclosureMixinTypes.d.ts","sourceRoot":"","sources":["../../../../components/collapsible/types/DisclosureMixinTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,MAAM,CAAC,OAAO,OAAO,cAAc;IAC1B,MAAM,EAAE,OAAO,CAAC;IAEvB,SAAS,KAAK,YAAY,IAAI,WAAW,CAAC;IAE1C,SAAS,KAAK,YAAY,IAAI,WAAW,CAAC;IAEnC,MAAM,IAAI,IAAI;IAEd,IAAI,IAAI,IAAI;IAEZ,KAAK,IAAI,IAAI;IAEpB,SAAS,CAAC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAE3C,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAEnC,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAEnC,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAEpD,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAEpD,SAAS,CAAC,8BAA8B,IAAI,IAAI;IAEhD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAE1C,SAAS,CAAC,2BAA2B,IAAI,IAAI;IAE7C,OAAO,CAAC,gBAAgB;IAExB,OAAO,CAAC,mBAAmB;IAE3B,OAAO,CAAC,uBAAuB;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAChF,UAAU,EAAE,CAAC,GACZ,CAAC,GACF,WAAW,CAAC,cAAc,CAAC,GAC3B,cAAc,GACd,IAAI,CAAC,OAAO,cAAc,EAAE,MAAM,OAAO,cAAc,CAAC,GACxD,IAAI,CAAC,OAAO,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,OAAO,wBAAwB,CAAC"}
@@ -1,3 +0,0 @@
1
- export { LionMenu } from "./src/LionMenu.js";
2
- export { InteractiveListMixin } from "./src/InteractiveListMixin.js";
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/menu/index.js"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=lion-menu-overlay.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"lion-menu-overlay.d.ts","sourceRoot":"","sources":["../../../components/menu/lion-menu-overlay.js"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=lion-menu.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"lion-menu.d.ts","sourceRoot":"","sources":["../../../components/menu/lion-menu.js"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=lion-spinbutton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"lion-spinbutton.d.ts","sourceRoot":"","sources":["../../../components/menu/lion-spinbutton.js"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=lion-toolbar.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"lion-toolbar.d.ts","sourceRoot":"","sources":["../../../components/menu/lion-toolbar.js"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=lion-tree.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"lion-tree.d.ts","sourceRoot":"","sources":["../../../components/menu/lion-tree.js"],"names":[],"mappings":""}