@proximus/lavender-header 1.4.16-alpha.9 → 1.4.16-beta.3
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.
|
@@ -0,0 +1,517 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/Header.ts",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "Site header, wrapping the whole page: the page body itself is projected\nthrough the `main` slot.",
|
|
12
|
+
"name": "Header",
|
|
13
|
+
"slots": [
|
|
14
|
+
{
|
|
15
|
+
"description": "Slot for the skip link, e.g. `px-a[variant=\"skip-link\"]`.",
|
|
16
|
+
"name": "skip"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "Slot for the segment `px-dropdown`.",
|
|
20
|
+
"name": "target-group"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "Slot for the language `px-dropdown`.",
|
|
24
|
+
"name": "user-language"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "Slot for the logo link.",
|
|
28
|
+
"name": "header-logo"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"description": "Slot for the `px-header-item` navigation entries, which assign themselves to it.",
|
|
32
|
+
"name": "header-entries"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"description": "Slot for the `px-action-link` / `px-action-button` actions, which assign themselves to it.",
|
|
36
|
+
"name": "header-actions"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"description": "Slot for the `px-mdd` panels and the `px-header-mobile-menu`.",
|
|
40
|
+
"name": "header-panels"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"description": "Slot for the page content.",
|
|
44
|
+
"name": "main"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"description": "Slot for CMS authoring chrome. A page editor such as Magnolia injects its controls as direct children of `px-header`; without a slot they stay in the DOM but are never projected. Assign them to this slot to keep them visible.",
|
|
48
|
+
"name": "editor"
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
"members": [
|
|
52
|
+
{
|
|
53
|
+
"kind": "field",
|
|
54
|
+
"name": "internals",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "ElementInternals"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"kind": "field",
|
|
61
|
+
"name": "addEventListener",
|
|
62
|
+
"type": {
|
|
63
|
+
"text": "<K extends keyof HeaderEventMap>(\n type: K,\n listener: (ev: HeaderEventMap[K]) => unknown,\n options?: boolean | AddEventListenerOptions\n ) => void"
|
|
64
|
+
},
|
|
65
|
+
"description": "Narrows listener types for the Header specific custom events."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"kind": "field",
|
|
69
|
+
"name": "template",
|
|
70
|
+
"default": "` <div> <!-- Landing zone for CMS authoring chrome. Elements injected by a CMS page editor (Magnolia editor bars, placeholders...) end up as direct children of px-header. Without a matching slot they stay in the DOM but are never projected, so the controls become invisible. --> <div id=\"editor-slot\"><slot name=\"editor\"></slot></div> <header> <slot name=\"skip\"></slot> <px-section id=\"navigation-container\" padding-bottom=\"none\" padding-bottom--mobile=\"s\" padding-bottom--tablet=\"s\" padding-top=\"s\" background-color=\"none\" > <div id=\"dropdown-zone--desktop\"> <slot name=\"target-group\"></slot> <px-spacer></px-spacer> <slot name=\"user-language\"></slot> </div> <px-hstack gap=\"default\" wrap=\"wrap\" id=\"navigation-wrapper\"> <px-hstack align-items=\"center\"> <slot name=\"header-logo\"></slot> </px-hstack> <slot name=\"header-logo\"></slot> <nav id=\"primary-navigation\" aria-label=\"${this.primaryNavigationAriaLabel}\"> <div role=\"list\"> <px-hstack gap=\"default\" wrap=\"wrap\" align-items=\"center\"> <slot name=\"header-entries\"></slot> </px-hstack> </div> </nav> <px-spacer></px-spacer> <px-hstack align-items=\"center\" gap=\"xs\"> <slot name=\"header-actions\"></slot> <px-button-icon id=\"burger-menu\" variant=\"naked\" aria-label=\"${this.burgerMenuAriaLabel ?? 'Open menu'}\" aria-expanded=\"false\" hidden--laptop hidden--desktop > <px-icon name=\"burger_menu\" from=\"lavender\" size=\"m\"></px-icon> </px-button-icon> </px-hstack> </px-hstack> </px-section> <px-section id=\"panel-container\" background-color=\"surface-default\" padding=\"none\" background-color=\"none\"> <slot name=\"header-panels\"> </px-section> </header> <div id=\"backdrop-filter\"></div> <slot name=\"main\"></slot> </div> `"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"kind": "field",
|
|
74
|
+
"name": "#onResize",
|
|
75
|
+
"privacy": "private"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"kind": "method",
|
|
79
|
+
"name": "#setMDDDialogOffset",
|
|
80
|
+
"privacy": "private"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "method",
|
|
84
|
+
"name": "#togglePanel",
|
|
85
|
+
"privacy": "private",
|
|
86
|
+
"parameters": [
|
|
87
|
+
{
|
|
88
|
+
"name": "id",
|
|
89
|
+
"type": {
|
|
90
|
+
"text": "string"
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"kind": "method",
|
|
97
|
+
"name": "#showMobileMenu",
|
|
98
|
+
"privacy": "private"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"kind": "method",
|
|
102
|
+
"name": "#hideMobileMenu",
|
|
103
|
+
"privacy": "private"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"kind": "method",
|
|
107
|
+
"name": "#hidePanel",
|
|
108
|
+
"privacy": "private"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"kind": "field",
|
|
112
|
+
"name": "#$mobileMenu",
|
|
113
|
+
"privacy": "private",
|
|
114
|
+
"readonly": true
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"kind": "field",
|
|
118
|
+
"name": "#$navigationItems",
|
|
119
|
+
"privacy": "private",
|
|
120
|
+
"readonly": true
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"kind": "field",
|
|
124
|
+
"name": "#$headerWrapper",
|
|
125
|
+
"privacy": "private",
|
|
126
|
+
"readonly": true
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"kind": "field",
|
|
130
|
+
"name": "#$megaDropdowns",
|
|
131
|
+
"privacy": "private",
|
|
132
|
+
"readonly": true
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"kind": "field",
|
|
136
|
+
"name": "$backdropFilter",
|
|
137
|
+
"readonly": true
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"kind": "field",
|
|
141
|
+
"name": "$editorSlot",
|
|
142
|
+
"description": "Landing zone for CMS authoring chrome, see the `editor` slot.",
|
|
143
|
+
"readonly": true
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"kind": "field",
|
|
147
|
+
"name": "$burgerMenu",
|
|
148
|
+
"readonly": true
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"kind": "field",
|
|
152
|
+
"name": "$slotMain",
|
|
153
|
+
"readonly": true
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"kind": "field",
|
|
157
|
+
"name": "$targetGroupDropdown",
|
|
158
|
+
"readonly": true
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"kind": "field",
|
|
162
|
+
"name": "$userLanguageDropdown",
|
|
163
|
+
"readonly": true
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"kind": "field",
|
|
167
|
+
"name": "$dropDownZoneDesktop",
|
|
168
|
+
"readonly": true
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"kind": "field",
|
|
172
|
+
"name": "$primaryNavigation",
|
|
173
|
+
"readonly": true
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"kind": "field",
|
|
177
|
+
"name": "closeButtonAriaLabel"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"kind": "field",
|
|
181
|
+
"name": "burgerMenuAriaLabel"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"kind": "field",
|
|
185
|
+
"name": "backToMenuLabel"
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"kind": "field",
|
|
189
|
+
"name": "primaryNavigationAriaLabel"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"kind": "field",
|
|
193
|
+
"name": "innerHTML"
|
|
194
|
+
}
|
|
195
|
+
],
|
|
196
|
+
"events": [
|
|
197
|
+
{
|
|
198
|
+
"name": "close-panel",
|
|
199
|
+
"type": {
|
|
200
|
+
"text": "CustomEvent"
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
],
|
|
204
|
+
"attributes": [
|
|
205
|
+
{
|
|
206
|
+
"name": "burger-menu-aria-label"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"name": "close-button-aria-label"
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "primary-navigation-aria-label"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "back-to-menu-label"
|
|
216
|
+
}
|
|
217
|
+
],
|
|
218
|
+
"superclass": {
|
|
219
|
+
"name": "WithExtraAttributes",
|
|
220
|
+
"package": "@proximus/lavender-common"
|
|
221
|
+
},
|
|
222
|
+
"tagName": "px-header",
|
|
223
|
+
"customElement": true
|
|
224
|
+
}
|
|
225
|
+
],
|
|
226
|
+
"exports": [
|
|
227
|
+
{
|
|
228
|
+
"kind": "js",
|
|
229
|
+
"name": "Header",
|
|
230
|
+
"declaration": {
|
|
231
|
+
"name": "Header",
|
|
232
|
+
"module": "src/Header.ts"
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"kind": "custom-element-definition",
|
|
237
|
+
"name": "px-header",
|
|
238
|
+
"declaration": {
|
|
239
|
+
"name": "Header",
|
|
240
|
+
"module": "src/Header.ts"
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
]
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"kind": "javascript-module",
|
|
247
|
+
"path": "src/HeaderItem.ts",
|
|
248
|
+
"declarations": [
|
|
249
|
+
{
|
|
250
|
+
"kind": "class",
|
|
251
|
+
"description": "",
|
|
252
|
+
"name": "HeaderItem",
|
|
253
|
+
"members": [
|
|
254
|
+
{
|
|
255
|
+
"kind": "field",
|
|
256
|
+
"name": "internals",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "ElementInternals"
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"kind": "field",
|
|
263
|
+
"name": "template"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"kind": "method",
|
|
267
|
+
"name": "setupButtonA11y",
|
|
268
|
+
"privacy": "private"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"kind": "field",
|
|
272
|
+
"name": "#updateDataLabel",
|
|
273
|
+
"privacy": "private"
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
"kind": "field",
|
|
277
|
+
"name": "#contentObserver",
|
|
278
|
+
"privacy": "private",
|
|
279
|
+
"default": "new MutationObserver(this.#updateDataLabel)"
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
"kind": "field",
|
|
283
|
+
"name": "for"
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"kind": "field",
|
|
287
|
+
"name": "checked"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"kind": "field",
|
|
291
|
+
"name": "current"
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"kind": "field",
|
|
295
|
+
"name": "$button",
|
|
296
|
+
"readonly": true
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"kind": "field",
|
|
300
|
+
"name": "$a",
|
|
301
|
+
"readonly": true
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"kind": "field",
|
|
305
|
+
"name": "adoptedStyleSheets",
|
|
306
|
+
"type": {
|
|
307
|
+
"text": "array"
|
|
308
|
+
},
|
|
309
|
+
"default": "[stylesheet]"
|
|
310
|
+
}
|
|
311
|
+
],
|
|
312
|
+
"attributes": [
|
|
313
|
+
{
|
|
314
|
+
"name": "for"
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"name": "href"
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"name": "current"
|
|
321
|
+
}
|
|
322
|
+
],
|
|
323
|
+
"superclass": {
|
|
324
|
+
"name": "WithExtraAttributes",
|
|
325
|
+
"package": "@proximus/lavender-common"
|
|
326
|
+
},
|
|
327
|
+
"tagName": "px-header-item",
|
|
328
|
+
"customElement": true
|
|
329
|
+
}
|
|
330
|
+
],
|
|
331
|
+
"exports": [
|
|
332
|
+
{
|
|
333
|
+
"kind": "js",
|
|
334
|
+
"name": "HeaderItem",
|
|
335
|
+
"declaration": {
|
|
336
|
+
"name": "HeaderItem",
|
|
337
|
+
"module": "src/HeaderItem.ts"
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
"kind": "custom-element-definition",
|
|
342
|
+
"name": "px-header-item",
|
|
343
|
+
"declaration": {
|
|
344
|
+
"name": "HeaderItem",
|
|
345
|
+
"module": "src/HeaderItem.ts"
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
]
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"kind": "javascript-module",
|
|
352
|
+
"path": "src/Link.ts",
|
|
353
|
+
"declarations": [
|
|
354
|
+
{
|
|
355
|
+
"kind": "class",
|
|
356
|
+
"description": "",
|
|
357
|
+
"name": "MDDLink",
|
|
358
|
+
"members": [
|
|
359
|
+
{
|
|
360
|
+
"kind": "field",
|
|
361
|
+
"name": "template",
|
|
362
|
+
"default": "`<px-a font-weight=\"title\" font-size=\"body-m\" color=\"brand\" variant=\"no-style\"> <slot></slot> </px-a>`"
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"kind": "field",
|
|
366
|
+
"name": "innerHTML"
|
|
367
|
+
}
|
|
368
|
+
],
|
|
369
|
+
"superclass": {
|
|
370
|
+
"name": "HTMLElement"
|
|
371
|
+
},
|
|
372
|
+
"tagName": "px-mdd-a",
|
|
373
|
+
"customElement": true
|
|
374
|
+
}
|
|
375
|
+
],
|
|
376
|
+
"exports": [
|
|
377
|
+
{
|
|
378
|
+
"kind": "js",
|
|
379
|
+
"name": "MDDLink",
|
|
380
|
+
"declaration": {
|
|
381
|
+
"name": "MDDLink",
|
|
382
|
+
"module": "src/Link.ts"
|
|
383
|
+
}
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
"kind": "custom-element-definition",
|
|
387
|
+
"name": "px-mdd-a",
|
|
388
|
+
"declaration": {
|
|
389
|
+
"name": "MDDLink",
|
|
390
|
+
"module": "src/Link.ts"
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
]
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"kind": "javascript-module",
|
|
397
|
+
"path": "src/MobileMenu.ts",
|
|
398
|
+
"declarations": [
|
|
399
|
+
{
|
|
400
|
+
"kind": "class",
|
|
401
|
+
"description": "",
|
|
402
|
+
"name": "HeaderMobileMenu",
|
|
403
|
+
"members": [
|
|
404
|
+
{
|
|
405
|
+
"kind": "field",
|
|
406
|
+
"name": "#template",
|
|
407
|
+
"privacy": "private",
|
|
408
|
+
"default": "`<px-mdd name=\"__lavender_mobile_menu\" hidden--laptop hidden--desktop > <span slot=\"title\"><slot name=\"title\"></slot></span> <px-mdd-section title-hidden></px-mdd-section> </px-mdd>`"
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"kind": "method",
|
|
412
|
+
"name": "#createMobileMenuPanelDropDowns",
|
|
413
|
+
"privacy": "private"
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"kind": "field",
|
|
417
|
+
"name": "$megaDropDown",
|
|
418
|
+
"readonly": true
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
"kind": "field",
|
|
422
|
+
"name": "innerHTML"
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"kind": "field",
|
|
426
|
+
"name": "adoptedStyleSheets",
|
|
427
|
+
"type": {
|
|
428
|
+
"text": "array"
|
|
429
|
+
},
|
|
430
|
+
"default": "[stylesheet]"
|
|
431
|
+
}
|
|
432
|
+
],
|
|
433
|
+
"superclass": {
|
|
434
|
+
"name": "HTMLElement"
|
|
435
|
+
},
|
|
436
|
+
"tagName": "px-header-mobile-menu",
|
|
437
|
+
"customElement": true
|
|
438
|
+
}
|
|
439
|
+
],
|
|
440
|
+
"exports": [
|
|
441
|
+
{
|
|
442
|
+
"kind": "js",
|
|
443
|
+
"name": "HeaderMobileMenu",
|
|
444
|
+
"declaration": {
|
|
445
|
+
"name": "HeaderMobileMenu",
|
|
446
|
+
"module": "src/MobileMenu.ts"
|
|
447
|
+
}
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
"kind": "custom-element-definition",
|
|
451
|
+
"name": "px-header-mobile-menu",
|
|
452
|
+
"declaration": {
|
|
453
|
+
"name": "HeaderMobileMenu",
|
|
454
|
+
"module": "src/MobileMenu.ts"
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
]
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"kind": "javascript-module",
|
|
461
|
+
"path": "src/events.ts",
|
|
462
|
+
"declarations": [],
|
|
463
|
+
"exports": []
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"kind": "javascript-module",
|
|
467
|
+
"path": "src/header-item.css",
|
|
468
|
+
"declarations": [],
|
|
469
|
+
"exports": []
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"kind": "javascript-module",
|
|
473
|
+
"path": "src/header.css",
|
|
474
|
+
"declarations": [],
|
|
475
|
+
"exports": []
|
|
476
|
+
},
|
|
477
|
+
{
|
|
478
|
+
"kind": "javascript-module",
|
|
479
|
+
"path": "src/index.ts",
|
|
480
|
+
"declarations": [],
|
|
481
|
+
"exports": [
|
|
482
|
+
{
|
|
483
|
+
"kind": "js",
|
|
484
|
+
"name": "*",
|
|
485
|
+
"declaration": {
|
|
486
|
+
"name": "*",
|
|
487
|
+
"module": "src/Header"
|
|
488
|
+
}
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
"kind": "js",
|
|
492
|
+
"name": "*",
|
|
493
|
+
"declaration": {
|
|
494
|
+
"name": "*",
|
|
495
|
+
"module": "src/MobileMenu"
|
|
496
|
+
}
|
|
497
|
+
},
|
|
498
|
+
{
|
|
499
|
+
"kind": "js",
|
|
500
|
+
"name": "*",
|
|
501
|
+
"declaration": {
|
|
502
|
+
"name": "*",
|
|
503
|
+
"module": "src/HeaderItem"
|
|
504
|
+
}
|
|
505
|
+
},
|
|
506
|
+
{
|
|
507
|
+
"kind": "js",
|
|
508
|
+
"name": "*",
|
|
509
|
+
"declaration": {
|
|
510
|
+
"name": "*",
|
|
511
|
+
"module": "src/events"
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
]
|
|
515
|
+
}
|
|
516
|
+
]
|
|
517
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
|
|
3
|
+
"version": 1.1,
|
|
4
|
+
"tags": [
|
|
5
|
+
{
|
|
6
|
+
"name": "px-header",
|
|
7
|
+
"description": "Site header, wrapping the whole page: the page body itself is projected\nthrough the `main` slot.\n---\n\n\n### **Events:**\n - **close-panel**\n\n### **Slots:**\n - **skip** - Slot for the skip link, e.g. `px-a[variant=\"skip-link\"]`.\n- **target-group** - Slot for the segment `px-dropdown`.\n- **user-language** - Slot for the language `px-dropdown`.\n- **header-logo** - Slot for the logo link.\n- **header-entries** - Slot for the `px-header-item` navigation entries, which assign themselves to it.\n- **header-actions** - Slot for the `px-action-link` / `px-action-button` actions, which assign themselves to it.\n- **header-panels** - Slot for the `px-mdd` panels and the `px-header-mobile-menu`.\n- **main** - Slot for the page content.\n- **editor** - Slot for CMS authoring chrome. A page editor such as Magnolia injects its controls as direct children of `px-header`; without a slot they stay in the DOM but are never projected. Assign them to this slot to keep them visible.",
|
|
8
|
+
"attributes": [
|
|
9
|
+
{ "name": "burger-menu-aria-label", "values": [] },
|
|
10
|
+
{ "name": "close-button-aria-label", "values": [] },
|
|
11
|
+
{ "name": "primary-navigation-aria-label", "values": [] },
|
|
12
|
+
{ "name": "back-to-menu-label", "values": [] }
|
|
13
|
+
],
|
|
14
|
+
"references": []
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"name": "px-header-item",
|
|
18
|
+
"description": "\n---\n",
|
|
19
|
+
"attributes": [
|
|
20
|
+
{ "name": "for", "values": [] },
|
|
21
|
+
{ "name": "href", "values": [] },
|
|
22
|
+
{ "name": "current", "values": [] }
|
|
23
|
+
],
|
|
24
|
+
"references": []
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "px-mdd-a",
|
|
28
|
+
"description": "\n---\n",
|
|
29
|
+
"attributes": [],
|
|
30
|
+
"references": []
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "px-header-mobile-menu",
|
|
34
|
+
"description": "\n---\n",
|
|
35
|
+
"attributes": [],
|
|
36
|
+
"references": []
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
|
+
"name": "@proximus/lavender-header",
|
|
4
|
+
"version": "1.4.16-beta.3",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "px-header",
|
|
11
|
+
"description": "Site header, wrapping the whole page: the page body itself is projected\nthrough the `main` slot.\n\n---\n\n\n### **Events:**\n - **close-panel**\n\n### **Slots:**\n - **skip** - Slot for the skip link, e.g. `px-a[variant=\"skip-link\"]`.\n- **target-group** - Slot for the segment `px-dropdown`.\n- **user-language** - Slot for the language `px-dropdown`.\n- **header-logo** - Slot for the logo link.\n- **header-entries** - Slot for the `px-header-item` navigation entries, which assign themselves to it.\n- **header-actions** - Slot for the `px-action-link` / `px-action-button` actions, which assign themselves to it.\n- **header-panels** - Slot for the `px-mdd` panels and the `px-header-mobile-menu`.\n- **main** - Slot for the page content.\n- **editor** - Slot for CMS authoring chrome. A page editor such as Magnolia injects its controls as direct children of `px-header`; without a slot they stay in the DOM but are never projected. Assign them to this slot to keep them visible.",
|
|
12
|
+
"doc-url": "",
|
|
13
|
+
"attributes": [
|
|
14
|
+
{ "name": "burger-menu-aria-label", "value": { "type": "string" } },
|
|
15
|
+
{
|
|
16
|
+
"name": "close-button-aria-label",
|
|
17
|
+
"value": { "type": "string" }
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "primary-navigation-aria-label",
|
|
21
|
+
"value": { "type": "string" }
|
|
22
|
+
},
|
|
23
|
+
{ "name": "back-to-menu-label", "value": { "type": "string" } }
|
|
24
|
+
],
|
|
25
|
+
"slots": [
|
|
26
|
+
{
|
|
27
|
+
"name": "skip",
|
|
28
|
+
"description": "Slot for the skip link, e.g. `px-a[variant=\"skip-link\"]`."
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "target-group",
|
|
32
|
+
"description": "Slot for the segment `px-dropdown`."
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "user-language",
|
|
36
|
+
"description": "Slot for the language `px-dropdown`."
|
|
37
|
+
},
|
|
38
|
+
{ "name": "header-logo", "description": "Slot for the logo link." },
|
|
39
|
+
{
|
|
40
|
+
"name": "header-entries",
|
|
41
|
+
"description": "Slot for the `px-header-item` navigation entries, which assign themselves to it."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "header-actions",
|
|
45
|
+
"description": "Slot for the `px-action-link` / `px-action-button` actions, which assign themselves to it."
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "header-panels",
|
|
49
|
+
"description": "Slot for the `px-mdd` panels and the `px-header-mobile-menu`."
|
|
50
|
+
},
|
|
51
|
+
{ "name": "main", "description": "Slot for the page content." },
|
|
52
|
+
{
|
|
53
|
+
"name": "editor",
|
|
54
|
+
"description": "Slot for CMS authoring chrome. A page editor such as Magnolia injects its controls as direct children of `px-header`; without a slot they stay in the DOM but are never projected. Assign them to this slot to keep them visible."
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
"events": [{ "name": "close-panel", "type": "CustomEvent" }],
|
|
58
|
+
"js": {
|
|
59
|
+
"properties": [
|
|
60
|
+
{ "name": "internals", "type": "ElementInternals" },
|
|
61
|
+
{
|
|
62
|
+
"name": "addEventListener",
|
|
63
|
+
"description": "Narrows listener types for the Header specific custom events.",
|
|
64
|
+
"type": "<K extends keyof HeaderEventMap>(\n type: K,\n listener: (ev: HeaderEventMap[K]) => unknown,\n options?: boolean | AddEventListenerOptions\n ) => void"
|
|
65
|
+
},
|
|
66
|
+
{ "name": "template" },
|
|
67
|
+
{ "name": "$backdropFilter" },
|
|
68
|
+
{
|
|
69
|
+
"name": "$editorSlot",
|
|
70
|
+
"description": "Landing zone for CMS authoring chrome, see the `editor` slot."
|
|
71
|
+
},
|
|
72
|
+
{ "name": "$burgerMenu" },
|
|
73
|
+
{ "name": "$slotMain" },
|
|
74
|
+
{ "name": "$targetGroupDropdown" },
|
|
75
|
+
{ "name": "$userLanguageDropdown" },
|
|
76
|
+
{ "name": "$dropDownZoneDesktop" },
|
|
77
|
+
{ "name": "$primaryNavigation" },
|
|
78
|
+
{ "name": "closeButtonAriaLabel" },
|
|
79
|
+
{ "name": "burgerMenuAriaLabel" },
|
|
80
|
+
{ "name": "backToMenuLabel" },
|
|
81
|
+
{ "name": "primaryNavigationAriaLabel" },
|
|
82
|
+
{ "name": "innerHTML" }
|
|
83
|
+
],
|
|
84
|
+
"events": [{ "name": "close-panel", "type": "CustomEvent" }]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "px-header-item",
|
|
89
|
+
"description": "\n\n---\n",
|
|
90
|
+
"doc-url": "",
|
|
91
|
+
"attributes": [
|
|
92
|
+
{ "name": "for", "value": { "type": "string" } },
|
|
93
|
+
{ "name": "href", "value": { "type": "string" } },
|
|
94
|
+
{ "name": "current", "value": { "type": "string" } }
|
|
95
|
+
],
|
|
96
|
+
"events": [],
|
|
97
|
+
"js": {
|
|
98
|
+
"properties": [
|
|
99
|
+
{ "name": "internals", "type": "ElementInternals" },
|
|
100
|
+
{ "name": "template" },
|
|
101
|
+
{ "name": "for" },
|
|
102
|
+
{ "name": "checked" },
|
|
103
|
+
{ "name": "current" },
|
|
104
|
+
{ "name": "$button" },
|
|
105
|
+
{ "name": "$a" },
|
|
106
|
+
{ "name": "adoptedStyleSheets", "type": "array" }
|
|
107
|
+
],
|
|
108
|
+
"events": []
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"name": "px-mdd-a",
|
|
113
|
+
"description": "\n\n---\n",
|
|
114
|
+
"doc-url": "",
|
|
115
|
+
"attributes": [],
|
|
116
|
+
"events": [],
|
|
117
|
+
"js": {
|
|
118
|
+
"properties": [{ "name": "template" }, { "name": "innerHTML" }],
|
|
119
|
+
"events": []
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "px-header-mobile-menu",
|
|
124
|
+
"description": "\n\n---\n",
|
|
125
|
+
"doc-url": "",
|
|
126
|
+
"attributes": [],
|
|
127
|
+
"events": [],
|
|
128
|
+
"js": {
|
|
129
|
+
"properties": [
|
|
130
|
+
{ "name": "$megaDropDown" },
|
|
131
|
+
{ "name": "innerHTML" },
|
|
132
|
+
{ "name": "adoptedStyleSheets", "type": "array" }
|
|
133
|
+
],
|
|
134
|
+
"events": []
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
]
|
|
138
|
+
},
|
|
139
|
+
"css": {
|
|
140
|
+
"properties": [],
|
|
141
|
+
"pseudo-elements": []
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|