@govflanders/vl-widget-global-header-types 2.0.2 → 2.0.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.
- package/dist/access-menu.js +1 -0
- package/dist/alert.js +1 -0
- package/dist/bootstrap.d.ts +17 -0
- package/dist/bootstrap.js +42 -0
- package/dist/branding.js +1 -0
- package/dist/client.js +1 -0
- package/dist/config.js +4 -0
- package/dist/contact.js +12 -0
- package/dist/i18n.d.ts +1 -1
- package/dist/i18n.js +1 -0
- package/dist/idp.d.ts +4 -16
- package/dist/idp.js +1 -0
- package/dist/image.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +11 -0
- package/dist/link.js +1 -0
- package/docs/assets/hierarchy.js +1 -0
- package/docs/assets/icons.js +1 -1
- package/docs/assets/icons.svg +1 -1
- package/docs/assets/main.js +5 -5
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/assets/style.css +1405 -1288
- package/docs/assets/typedoc-github-style.css +49 -54
- package/docs/functions/bootstrap.html +8 -0
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +22 -22
- package/docs/interfaces/AlertConfig.html +5 -5
- package/docs/interfaces/Application.html +7 -7
- package/docs/interfaces/ApplicationMenuLink.html +6 -6
- package/docs/interfaces/Authorization.html +9 -9
- package/docs/interfaces/BUR.html +8 -8
- package/docs/interfaces/BaseConfig.html +2 -2
- package/docs/interfaces/BaseEntity.html +6 -6
- package/docs/interfaces/BrandingConfigColors.html +4 -4
- package/docs/interfaces/BrandingConfigHost.html +6 -6
- package/docs/interfaces/BrandingConfigUmbrella.html +5 -5
- package/docs/interfaces/Channel.html +13 -13
- package/docs/interfaces/ContactOption.html +21 -21
- package/docs/interfaces/ContactOptionRef.html +6 -6
- package/docs/interfaces/EA.html +7 -7
- package/docs/interfaces/EnrichedServicePoints.html +8 -8
- package/docs/interfaces/GID.html +7 -7
- package/docs/interfaces/GlobalHeaderClient.html +39 -66
- package/docs/interfaces/I18n.html +2 -2
- package/docs/interfaces/IDPData.html +6 -6
- package/docs/interfaces/Image.html +6 -6
- package/docs/interfaces/LB.html +6 -10
- package/docs/interfaces/Link.html +4 -4
- package/docs/interfaces/LinkWithTarget.html +5 -5
- package/docs/interfaces/MainLink.html +7 -7
- package/docs/interfaces/OV.html +6 -6
- package/docs/interfaces/ProfileConfig.html +13 -13
- package/docs/interfaces/RecursiveRecord.html +1 -1
- package/docs/interfaces/ResolveOptions.html +2 -2
- package/docs/interfaces/ServicePoints.html +9 -9
- package/docs/interfaces/Session.html +5 -5
- package/docs/interfaces/Translations.html +2 -2
- package/docs/interfaces/User.html +5 -5
- package/docs/interfaces/VER.html +6 -8
- package/docs/modules.html +1 -48
- package/docs/types/AlertModifier.html +1 -1
- package/docs/types/BrandingConfigLevel.html +2 -2
- package/docs/types/CapacityCode.html +2 -2
- package/docs/types/ChannelIcon.html +2 -2
- package/docs/types/ChannelType.html +2 -2
- package/docs/types/CobrowseChannel.html +2 -2
- package/docs/types/ContactOptionSocialPlatform.html +2 -2
- package/docs/types/ContactServiceEndpoints.html +2 -8
- package/docs/types/EnrichedServicePoint.html +1 -1
- package/docs/types/Entity.html +2 -2
- package/docs/types/Language.html +1 -1
- package/docs/types/ServicePoint.html +2 -2
- package/docs/types/Translatable.html +3 -3
- package/docs/variables/languages.html +9 -1
- package/package.json +5 -4
|
@@ -8,31 +8,43 @@
|
|
|
8
8
|
--light-color-background-secondary: #f6f8fa;
|
|
9
9
|
--light-color-background-navbar: #f6f8fa;
|
|
10
10
|
|
|
11
|
-
--light-color-accent: #
|
|
11
|
+
--light-color-accent: #eff2f5;
|
|
12
12
|
|
|
13
13
|
--light-color-text: #1f2328;
|
|
14
|
-
--light-color-text-aside: #
|
|
14
|
+
--light-color-text-aside: #59636e;
|
|
15
15
|
|
|
16
16
|
--light-color-link: #0969da;
|
|
17
17
|
|
|
18
18
|
--light-color-warning-border: #f7ebba;
|
|
19
19
|
--light-color-background-warning: #fff8c5;
|
|
20
20
|
|
|
21
|
+
--light-color-alert-note: #0969da;
|
|
22
|
+
--light-color-alert-tip: #1a7f37;
|
|
23
|
+
--light-color-alert-important: #8250df;
|
|
24
|
+
--light-color-alert-warning: #9a6700;
|
|
25
|
+
--light-color-alert-caution: #cf222e;
|
|
26
|
+
|
|
21
27
|
/* GitHub "Dark default" */
|
|
22
28
|
--dark-color-background: #0d1117;
|
|
23
|
-
--dark-color-background-secondary: #
|
|
24
|
-
--dark-color-background-navbar: #
|
|
29
|
+
--dark-color-background-secondary: #151b23;
|
|
30
|
+
--dark-color-background-navbar: #010409;
|
|
25
31
|
|
|
26
|
-
--dark-color-accent: #
|
|
32
|
+
--dark-color-accent: #262c36;
|
|
27
33
|
|
|
28
|
-
--dark-color-text: #
|
|
29
|
-
--dark-color-text-aside: #
|
|
34
|
+
--dark-color-text: #f0f6fc;
|
|
35
|
+
--dark-color-text-aside: #9198a1;
|
|
30
36
|
|
|
31
37
|
--dark-color-link: #4493f8;
|
|
32
38
|
|
|
33
39
|
--dark-color-warning-border: #3a2d12;
|
|
34
40
|
--dark-color-background-warning: #282215;
|
|
35
41
|
|
|
42
|
+
--dark-color-alert-note: #1f6feb;
|
|
43
|
+
--dark-color-alert-tip: #238636;
|
|
44
|
+
--dark-color-alert-important: #8957e5;
|
|
45
|
+
--dark-color-alert-warning: #9e6a03;
|
|
46
|
+
--dark-color-alert-caution: #da3633;
|
|
47
|
+
|
|
36
48
|
/* Link colors */
|
|
37
49
|
--color-warning-text: var(--color-text);
|
|
38
50
|
--color-icon-background: var(--color-background);
|
|
@@ -95,49 +107,45 @@ h6 {
|
|
|
95
107
|
* Links
|
|
96
108
|
*/
|
|
97
109
|
|
|
98
|
-
a,
|
|
110
|
+
.tsd-accordion-details a,
|
|
111
|
+
.tsd-accordion a,
|
|
112
|
+
.tsd-page-toolbar a.title {
|
|
113
|
+
color: var(--color-text);
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.tsd-accordion-details a:hover,
|
|
118
|
+
.tsd-page-toolbar a.title:hover,
|
|
119
|
+
.tsd-accordion a:hover,
|
|
120
|
+
.tsd-anchor-icon {
|
|
121
|
+
color: var(--color-text-aside);
|
|
122
|
+
}
|
|
123
|
+
|
|
99
124
|
.tsd-kind-class {
|
|
100
125
|
color: var(--color-link);
|
|
101
126
|
text-decoration: underline;
|
|
127
|
+
text-underline-offset: 3px;
|
|
102
128
|
}
|
|
103
129
|
|
|
104
|
-
.tsd-index-link
|
|
130
|
+
.tsd-index-link,
|
|
131
|
+
.tsd-page-navigation a:hover {
|
|
105
132
|
text-decoration: none;
|
|
106
133
|
}
|
|
107
134
|
|
|
108
135
|
.tsd-index-link:hover {
|
|
109
136
|
text-decoration: underline;
|
|
137
|
+
text-underline-offset: 3px;
|
|
110
138
|
}
|
|
111
139
|
|
|
112
|
-
|
|
140
|
+
a code,
|
|
141
|
+
.tsd-sources a,
|
|
142
|
+
.tsd-page-navigation a:hover {
|
|
113
143
|
color: var(--color-link);
|
|
114
144
|
}
|
|
115
145
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
ul,
|
|
121
|
-
ol {
|
|
122
|
-
margin-left: 20px;
|
|
123
|
-
list-style: disc;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
li::marker {
|
|
127
|
-
color: var(--color-accent);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
/*
|
|
131
|
-
* Input fields
|
|
132
|
-
*/
|
|
133
|
-
|
|
134
|
-
input {
|
|
135
|
-
background-color: var(--color-background-secondary);
|
|
136
|
-
color: var(--color-text);
|
|
137
|
-
border: 1px solid var(--color-accent);
|
|
138
|
-
border-radius: 6px;
|
|
139
|
-
padding: 8px;
|
|
140
|
-
width: 100%;
|
|
146
|
+
a.external[target='_blank'] {
|
|
147
|
+
background-image: none;
|
|
148
|
+
padding-right: 0px;
|
|
141
149
|
}
|
|
142
150
|
|
|
143
151
|
/*
|
|
@@ -277,10 +285,6 @@ code.tsd-tag {
|
|
|
277
285
|
border-bottom-color: var(--color-accent);
|
|
278
286
|
}
|
|
279
287
|
|
|
280
|
-
.tsd-page-toolbar a.title:hover {
|
|
281
|
-
text-decoration: none;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
288
|
#tsd-search.has-focus {
|
|
285
289
|
background-color: var(--color-background-navbar);
|
|
286
290
|
}
|
|
@@ -295,6 +299,10 @@ code.tsd-tag {
|
|
|
295
299
|
margin-bottom: 0px;
|
|
296
300
|
}
|
|
297
301
|
|
|
302
|
+
#tsd-search .results li a {
|
|
303
|
+
color: var(--color-text);
|
|
304
|
+
}
|
|
305
|
+
|
|
298
306
|
#tsd-search .results li:hover:not(.no-results) {
|
|
299
307
|
background-color: var(--color-accent);
|
|
300
308
|
}
|
|
@@ -404,12 +412,12 @@ footer p {
|
|
|
404
412
|
* Fix collapsed margin
|
|
405
413
|
*/
|
|
406
414
|
|
|
407
|
-
.tsd-accordion-summary
|
|
415
|
+
.tsd-accordion-summary > h3 {
|
|
408
416
|
margin-top: 0px;
|
|
409
417
|
margin-bottom: 0px;
|
|
410
418
|
}
|
|
411
419
|
|
|
412
|
-
.tsd-
|
|
420
|
+
.tsd-page-navigation:not([open]) > .tsd-accordion-summary {
|
|
413
421
|
margin-bottom: 0px;
|
|
414
422
|
}
|
|
415
423
|
|
|
@@ -417,19 +425,6 @@ footer p {
|
|
|
417
425
|
* Fix collapse arrow position
|
|
418
426
|
*/
|
|
419
427
|
|
|
420
|
-
.tsd-accordion-summary:has(svg) > * {
|
|
421
|
-
display: inline-flex;
|
|
422
|
-
align-items: center;
|
|
423
|
-
line-height: normal;
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
.tsd-accordion-summary > * > svg {
|
|
427
|
-
padding-top: 0px;
|
|
428
|
-
position: relative;
|
|
429
|
-
left: 0px;
|
|
430
|
-
top: 50%;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
428
|
.tsd-accordion-summary svg {
|
|
434
429
|
transition: transform 0.1s ease-in-out;
|
|
435
430
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>bootstrap | Global Header</title><meta name="description" content="Documentation for Global Header"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script><link rel="stylesheet" href="../assets/typedoc-github-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Global Header</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Global Header</a></li><li><a href="bootstrap.html">bootstrap</a></li></ul><h1>Function bootstrap</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Bootstraps the GlobalHeaderClient by loading it from the specified entry URL.</p>
|
|
2
|
+
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link"><a id="example" class="tsd-anchor"></a>Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="ts"><span class="hl-12">import</span><span class="hl-2"> { </span><span class="hl-6">bootstrap</span><span class="hl-2"> } </span><span class="hl-12">from</span><span class="hl-2"> </span><span class="hl-11">'@govflanders/vl-widget-global-header-types'</span><span class="hl-2">;</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">url</span><span class="hl-2"> = </span><span class="hl-11">'https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/your-widget-id/entry'</span><span class="hl-2">;</span><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">client</span><span class="hl-2"> = </span><span class="hl-12">await</span><span class="hl-2"> </span><span class="hl-7">bootstrap</span><span class="hl-2">(</span><span class="hl-6">url</span><span class="hl-2">);</span><br/><span class="hl-8">// Use the GlobalHeaderClient instance</span><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">config</span><span class="hl-2"> = </span><span class="hl-12">await</span><span class="hl-2"> </span><span class="hl-6">client</span><span class="hl-2">.</span><span class="hl-7">getConfig</span><span class="hl-2">();</span>
|
|
3
|
+
</code><button type="button">Copy</button></pre>
|
|
4
|
+
|
|
5
|
+
</div></div></section><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="bootstrap" class="tsd-anchor"></a><span class="tsd-kind-call-signature">bootstrap</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><a href="../interfaces/GlobalHeaderClient.html" class="tsd-signature-type tsd-kind-interface">GlobalHeaderClient</a><span class="tsd-signature-symbol">></span><a href="#bootstrap" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The entry URL which has a form like this:
|
|
6
|
+
<code>https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/your-widget-id/entry</code></p>
|
|
7
|
+
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><a href="../interfaces/GlobalHeaderClient.html" class="tsd-signature-type tsd-kind-interface">GlobalHeaderClient</a><span class="tsd-signature-symbol">></span></h4><p>The GlobalHeaderClient object.</p>
|
|
8
|
+
<div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://bitbucket.org/vlaamseoverheid/vl-widgets/src/8efd4b3d36e7b98e5a9c1de12fe855874150d126/packages/global-header-types/src/bootstrap.ts#lines-21">global-header-types/src/bootstrap.ts:21</a></li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Global Header</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a> with <a href="https://github.com/KillerJulian/typedoc-github-theme" target="_blank">typedoc-github-theme</a></p></footer><div class="overlay"></div></body></html>
|
package/docs/hierarchy.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Global Header</title><meta name="description" content="Documentation for Global Header"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><link rel="stylesheet" href="assets/typedoc-github-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Global Header</title><meta name="description" content="Documentation for Global Header"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script><link rel="stylesheet" href="assets/typedoc-github-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Global Header</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>Global Header</h1></div><h2>Hierarchy Summary</h2><ul class="tsd-full-hierarchy"><li data-refl="356"><a id="BaseEntity" class="tsd-anchor"></a><a href="interfaces/BaseEntity.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>BaseEntity</a><ul><li data-refl="360"><a id="GID" class="tsd-anchor"></a><a href="interfaces/GID.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>GID</a></li><li data-refl="364"><a id="VER" class="tsd-anchor"></a><a href="interfaces/VER.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>VER</a></li><li data-refl="368"><a id="LB" class="tsd-anchor"></a><a href="interfaces/LB.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>LB</a></li><li data-refl="372"><a id="OV" class="tsd-anchor"></a><a href="interfaces/OV.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>OV</a></li><li data-refl="376"><a id="EA" class="tsd-anchor"></a><a href="interfaces/EA.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>EA</a></li><li data-refl="380"><a id="BUR" class="tsd-anchor"></a><a href="interfaces/BUR.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>BUR</a></li></ul></li></ul><ul class="tsd-full-hierarchy"><li data-refl="401"><a id="Link" class="tsd-anchor"></a><a href="interfaces/Link.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>Link</a><ul><li data-refl="404"><a id="LinkWithTarget" class="tsd-anchor"></a><a href="interfaces/LinkWithTarget.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>LinkWithTarget</a><ul><li data-refl="6"><a id="BrandingConfigUmbrella" class="tsd-anchor"></a><a href="interfaces/BrandingConfigUmbrella.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>BrandingConfigUmbrella</a></li><li data-refl="10"><a id="BrandingConfigHost" class="tsd-anchor"></a><a href="interfaces/BrandingConfigHost.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>BrandingConfigHost</a></li></ul></li></ul></li></ul><ul class="tsd-full-hierarchy"><li data-refl="281"><a id="ServicePoints" class="tsd-anchor"></a><a href="interfaces/ServicePoints.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>ServicePoints</a><ul><li data-refl="286"><a id="EnrichedServicePoints" class="tsd-anchor"></a><a href="interfaces/EnrichedServicePoints.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>EnrichedServicePoints</a></li></ul></li></ul></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current">Global Header</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a> with <a href="https://github.com/KillerJulian/typedoc-github-theme" target="_blank">typedoc-github-theme</a></p></footer><div class="overlay"></div></body></html>
|
package/docs/index.html
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Global Header</title><meta name="description" content="Documentation for Global Header"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><link rel="stylesheet" href="assets/typedoc-github-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"
|
|
2
|
-
<a id="
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Global Header</title><meta name="description" content="Documentation for Global Header"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script><link rel="stylesheet" href="assets/typedoc-github-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Global Header</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>Global Header</h1></div><div class="tsd-panel tsd-typography"><a id="introduction" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Introduction<a href="#introduction" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This guide is for developers looking to integrate the Flanders Global Header into their websites.</p>
|
|
2
|
+
<a id="adding-a-flanders-global-header-to-your-website" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Adding a Flanders Global Header to Your Website<a href="#adding-a-flanders-global-header-to-your-website" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>You can integrate the <strong>Flanders Global Header</strong> into your website using one of two methods: the <strong>entry script</strong> or the <strong>embed script</strong>. Each serves a different purpose.</p>
|
|
3
3
|
<p>💡 Note: the embed url differs from the previous one. Now it's <code>api/v2</code> instead of <code>api/v1</code>.</p>
|
|
4
|
-
<a id="
|
|
4
|
+
<a id="using-the-embed-script-automatic-mounting" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Using the Embed Script (Automatic Mounting)<a href="#using-the-embed-script-automatic-mounting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Use the embed script for quick and automatic integration with minimal setup. The embed script is meant to be placed directly inside the DOM where you want the header to appear. It automatically renders the header at the script's location in the HTML.</p>
|
|
5
5
|
<p>Example of using the embed script:</p>
|
|
6
6
|
<pre><code class="html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-2"> </span><span class="hl-3">lang</span><span class="hl-2">=</span><span class="hl-4">"nl"</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"UTF-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1.0"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">Global header embed script example</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/embed"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">div</span><span class="hl-2"> </span><span class="hl-3">class</span><span class="hl-2">=</span><span class="hl-4">"your-website-code"</span><span class="hl-0">></span><span class="hl-2">👋 Hello world</span><span class="hl-0"></</span><span class="hl-1">div</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
7
7
|
</code><button type="button">Copy</button></pre>
|
|
8
8
|
|
|
9
9
|
<p>⚠️ Warning: the <code>window.globalHeaderClient</code> object will only be available after the scrip is resolved. If it's necessary to have direct access to the <code>window.globalHeaderClient</code>, use the entry script.</p>
|
|
10
|
-
<a id="
|
|
10
|
+
<a id="using-the-entry-script-manual-mounting" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Using the Entry Script (Manual Mounting)<a href="#using-the-entry-script-manual-mounting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Use the entry script if you need more control over when, where and how the header is mounted. The entry script should be placed in the <code><head></code> section of your HTML, preferably at the top. This is essential because the <code>window.globalHeaderClient</code> object is only available after this script has loaded. With the entry script, the header does not render automatically, so you'll need to call the <code>mount</code> method to display it.</p>
|
|
11
11
|
<p>Example of using the entry script:</p>
|
|
12
12
|
<pre><code class="html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-2"> </span><span class="hl-3">lang</span><span class="hl-2">=</span><span class="hl-4">"nl"</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/entry"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"UTF-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1.0"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">Global header entry script example</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">div</span><span class="hl-2"> </span><span class="hl-3">class</span><span class="hl-2">=</span><span class="hl-4">"your-website-code"</span><span class="hl-0">></span><span class="hl-2">👋 Hello world</span><span class="hl-0"></</span><span class="hl-1">div</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">window</span><span class="hl-5">.</span><span class="hl-6">globalHeaderClient</span><span class="hl-5">.</span><span class="hl-7">mount</span><span class="hl-5">(); </span><span class="hl-8">// Mount the header manually after the script has loaded</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
13
13
|
</code><button type="button">Copy</button></pre>
|
|
14
14
|
|
|
15
|
-
<a id="
|
|
15
|
+
<a id="summary" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Summary<a href="#summary" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
16
16
|
<li><strong>Entry script</strong>: Use in the <code><head></code>, requires manual mounting with <code>window.globalHeaderClient.mount()</code> method.</li>
|
|
17
17
|
<li><strong>Embed script</strong>: Place directly in the DOM, automatically renders the header at the script's location.</li>
|
|
18
18
|
</ul>
|
|
19
|
-
<a id="
|
|
19
|
+
<a id="using-the-windowglobalheaderclient-api" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Using the <code>window.globalHeaderClient</code> API<a href="#using-the-windowglobalheaderclient-api" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The widget is available on the global window object as <code>window.globalHeaderClient</code>. You can import the types from global-header-types to use them in your project, if you're using typescript (more info <a href="#typescript-support">here</a>).</p>
|
|
20
20
|
<p>Example of using the <code>window.globalHeaderClient</code> object in javascript:</p>
|
|
21
21
|
<pre><code class="javascript"><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">client</span><span class="hl-2"> = </span><span class="hl-6">window</span><span class="hl-2">.</span><span class="hl-6">globalHeaderClient</span><span class="hl-2">;</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">contactLink</span><span class="hl-2"> = {</span><br/><span class="hl-2"> </span><span class="hl-6">label:</span><span class="hl-2"> </span><span class="hl-11">'Contact'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">href:</span><span class="hl-2"> </span><span class="hl-11">'/contact'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">feedbackLink</span><span class="hl-2"> = {</span><br/><span class="hl-2"> </span><span class="hl-6">label:</span><span class="hl-2"> </span><span class="hl-11">'Feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">href:</span><span class="hl-2"> </span><span class="hl-11">'https://example.com/feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">isExternal:</span><span class="hl-2"> </span><span class="hl-9">true</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">target:</span><span class="hl-2"> </span><span class="hl-11">'_blank'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-6">client</span><span class="hl-2">.</span><span class="hl-6">accessMenu</span><span class="hl-2">.</span><span class="hl-7">setMainLinks</span><span class="hl-2">([</span><br/><span class="hl-2"> </span><span class="hl-6">contactLink</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">feedbackLink</span><span class="hl-2">,</span><br/><span class="hl-2">]);</span>
|
|
22
22
|
</code><button type="button">Copy</button></pre>
|
|
23
23
|
|
|
24
24
|
<p>Checkout the <a href="./interfaces/GlobalHeaderClient.html">GlobalHeaderClient</a> here to see all the available methods.</p>
|
|
25
|
-
<a id="
|
|
26
|
-
<a id="
|
|
25
|
+
<a id="migration-guide-upgrading-from-v4-to-v5" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Migration guide: Upgrading from v4 to v5<a href="#migration-guide-upgrading-from-v4-to-v5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>If you’re currently using version 4 of the Global Header Widget, please follow this guide to upgrade to version 5. This guide highlights the key changes and steps you need to take to ensure a smooth transition.</p>
|
|
26
|
+
<a id="remove-client-library-script-links" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Remove client library script links<a href="#remove-client-library-script-links" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>No more client library or polyfill scripts: In version 5, you no longer need to include any additional client library or polyfill script links in your HTML. Access to the <code>window.globalHeaderClient</code> object is automatically provided when you include either the entry script or the embed script (after the script is loaded).
|
|
27
27
|
Action Required:</p>
|
|
28
28
|
<ul>
|
|
29
29
|
<li>Remove any <code><script></code> tags that reference client libraries or polyfill libraries for the widget.</li>
|
|
30
30
|
<li>Ensure that either the entry script or the embed script is included in your HTML.</li>
|
|
31
31
|
</ul>
|
|
32
|
-
<a id="
|
|
32
|
+
<a id="eliminate-installable-packages" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Eliminate installable packages<a href="#eliminate-installable-packages" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Script-based integration only: Version 5 removes the need for installable packages via npm or yarn. All functionalities are now accessible by including script tags directly in your HTML’s <code><head></code> or <code><body></code> section.</p>
|
|
33
33
|
<p>Action Required:</p>
|
|
34
34
|
<ul>
|
|
35
35
|
<li>Uninstall any npm or yarn packages related to the widget</li>
|
|
36
36
|
<li>Delete any import or require statements in your JavaScript code that reference the widget.</li>
|
|
37
37
|
</ul>
|
|
38
|
-
<a id="
|
|
39
|
-
<a id="
|
|
38
|
+
<a id="update-embed-script-links" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Update Embed script links<a href="#update-embed-script-links" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Version Update in Embed Links: If you’re using the embed script method to include the widget, you need to update the version number in your script’s src URL from 'v1' to 'v2'. <a href="#adding-a-flanders-global-header-to-your-website">Example here</a>.</p>
|
|
39
|
+
<a id="update-api-usage" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Update API usage<a href="#update-api-usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>API Changes: The <code>window.globalHeaderClient</code> API has been updated in version 5. Methods, their signatures, and usage patterns may have changed. Refer to the <a href="./interfaces/GlobalHeaderClient.html">GlobalHeaderClient</a> section for detailed information on the new methods and their parameters.</p>
|
|
40
40
|
<p>Action Required:</p>
|
|
41
41
|
<ul>
|
|
42
42
|
<li>Review all instances where you interact with <code>window.globalHeaderClient</code>.</li>
|
|
@@ -57,21 +57,21 @@ Action Required:</p>
|
|
|
57
57
|
+ globalHeaderClient.contact.resetServicePoints();
|
|
58
58
|
</code><button type="button">Copy</button></pre>
|
|
59
59
|
|
|
60
|
-
<a id="
|
|
60
|
+
<a id="accessing-windowglobalheaderclient" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Accessing <code>window.globalHeaderClient</code><a href="#accessing-windowglobalheaderclient" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Unified Access via Scripts: In version 5, you can access the <code>window.globalHeaderClient</code> object regardless of whether you use the entry script or the embed script.</p>
|
|
61
61
|
<p>Action Required:</p>
|
|
62
62
|
<ul>
|
|
63
63
|
<li>Ensure that you include either the entry script or the embed script in your HTML.</li>
|
|
64
64
|
<li>Remove any additional scripts previously used to access <code>window.globalHeaderClient</code>.</li>
|
|
65
65
|
</ul>
|
|
66
|
-
<a id="
|
|
66
|
+
<a id="verify-styling-and-rendering" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Verify Styling and Rendering<a href="#verify-styling-and-rendering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>After integrating version 5 of the widget into your website, it’s important to thoroughly review its appearance and functionality to ensure everything works as expected. Some styling adjustments might be necessary due to changes in the widget’s design or your site’s CSS.</p>
|
|
67
67
|
<p>Action Required:</p>
|
|
68
68
|
<ul>
|
|
69
69
|
<li>Test Across Browsers: Check the widget in all supported browsers to confirm consistent styling and behavior.</li>
|
|
70
70
|
<li>Inspect for Conflicts: Look for any CSS conflicts between the widget and your site’s stylesheets.</li>
|
|
71
71
|
<li>Adjust Styles if Needed: Modify your CSS or override styles to resolve any layout or design issues.</li>
|
|
72
|
-
<li>Seek Assistance: If problems persist, don’t hesitate to <a href="#
|
|
72
|
+
<li>Seek Assistance: If problems persist, don’t hesitate to <a href="#contact-information">contact us</a> for support.</li>
|
|
73
73
|
</ul>
|
|
74
|
-
<a id="
|
|
74
|
+
<a id="language-switching" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Language Switching<a href="#language-switching" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The <strong>Global Header Widget</strong> v5 now supports multiple languages. The widget automatically adapts to the language of the document. It observes the <code>lang</code> attribute on the <code><html></code> tag, so it's the implementer's responsibility to handle any language switching functionality. If the <code>lang</code> attribute changes, the widget will update to display the correct language.</p>
|
|
75
75
|
<p>Supported languages:</p>
|
|
76
76
|
<ul>
|
|
77
77
|
<li>nl (Dutch)</li>
|
|
@@ -90,7 +90,7 @@ Action Required:</p>
|
|
|
90
90
|
<li>Lang tag variants are also handled correctly (for example, like <code>NL</code> or <code>nl-BE</code>)</li>
|
|
91
91
|
<li>Take a look at the documentation for multilingual objects <a href="./types/Translatable.html">here</a>.</li>
|
|
92
92
|
</ul>
|
|
93
|
-
<a id="
|
|
93
|
+
<a id="browser-support" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Browser Support<a href="#browser-support" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The <strong>Global Header Widget</strong> supports the two most recent versions of all major browsers:</p>
|
|
94
94
|
<ul>
|
|
95
95
|
<li>Google Chrome</li>
|
|
96
96
|
<li>Mozilla Firefox</li>
|
|
@@ -98,9 +98,9 @@ Action Required:</p>
|
|
|
98
98
|
<li>Safari</li>
|
|
99
99
|
</ul>
|
|
100
100
|
<p>Please ensure your users are on the latest versions of these browsers to guarantee full functionality of the widget.</p>
|
|
101
|
-
<a id="
|
|
101
|
+
<a id="typescript-support" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Typescript Support<a href="#typescript-support" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The <strong><code>@govflanders/vl-widget-global-header-types</code></strong> package provides TypeScript types and interfaces for interacting with the <strong>Global Header Widget</strong>. This widget is embedded in customer web pages and exposes a client object (<code>window.globalHeaderClient</code>) that allows for dynamic configuration and interaction with the global header.</p>
|
|
102
102
|
<p>By using the types defined in this package, developers can ensure type-safe interactions with the widget while improving their development experience (DX) by utilizing autocompletion and built-in documentation.</p>
|
|
103
|
-
<a id="
|
|
103
|
+
<a id="installation" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>To install the <code>global-header-types</code> package, use the following command:</p>
|
|
104
104
|
<pre><code class="bash"><span class="hl-7">npm</span><span class="hl-2"> </span><span class="hl-11">install</span><span class="hl-2"> </span><span class="hl-9">-D</span><span class="hl-2"> </span><span class="hl-11">@govflanders/vl-widget-global-header-types</span>
|
|
105
105
|
</code><button type="button">Copy</button></pre>
|
|
106
106
|
|
|
@@ -109,16 +109,16 @@ Action Required:</p>
|
|
|
109
109
|
</code><button type="button">Copy</button></pre>
|
|
110
110
|
|
|
111
111
|
<p><strong>Note:</strong> It’s recommended to use the caret (^) symbol in your package.json to stay updated with the latest minor and patch versions.</p>
|
|
112
|
-
<a id="
|
|
112
|
+
<a id="usage-example" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Usage example<a href="#usage-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Example of using the types to interact with the widget:</p>
|
|
113
113
|
<pre><code class="typescript"><span class="hl-12">import</span><span class="hl-2"> { </span><span class="hl-6">GlobalHeaderClient</span><span class="hl-2">, </span><span class="hl-6">MainLink</span><span class="hl-2"> } </span><span class="hl-12">from</span><span class="hl-2"> </span><span class="hl-11">'@govflanders/vl-widget-global-header-types'</span><span class="hl-2">;</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">client</span><span class="hl-2">: </span><span class="hl-13">GlobalHeaderClient</span><span class="hl-2"> = </span><span class="hl-6">window</span><span class="hl-2">.</span><span class="hl-6">globalHeaderClient</span><span class="hl-2">;</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">contactLink</span><span class="hl-2">: </span><span class="hl-13">MainLink</span><span class="hl-2"> = {</span><br/><span class="hl-2"> </span><span class="hl-6">label:</span><span class="hl-2"> </span><span class="hl-11">'Contact'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">href:</span><span class="hl-2"> </span><span class="hl-11">'/contact'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">feedbackLink</span><span class="hl-2">: </span><span class="hl-13">MainLink</span><span class="hl-2"> = {</span><br/><span class="hl-2"> </span><span class="hl-6">label:</span><span class="hl-2"> </span><span class="hl-11">'Feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">href:</span><span class="hl-2"> </span><span class="hl-11">'https://example.com/feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">isExternal:</span><span class="hl-2"> </span><span class="hl-9">true</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">target:</span><span class="hl-2"> </span><span class="hl-11">'_blank'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-6">client</span><span class="hl-2">.</span><span class="hl-6">accessMenu</span><span class="hl-2">.</span><span class="hl-7">setMainLinks</span><span class="hl-2">([</span><br/><span class="hl-2"> </span><span class="hl-6">contactLink</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-6">feedbackLink</span><span class="hl-2">,</span><br/><span class="hl-2">]);</span>
|
|
114
114
|
</code><button type="button">Copy</button></pre>
|
|
115
115
|
|
|
116
|
-
<a id="
|
|
116
|
+
<a id="contact-information" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Contact Information<a href="#contact-information" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>If you need assistance or have any questions regarding the <strong>Global Header Widget</strong>, feel free to reach out to us:</p>
|
|
117
117
|
<ul>
|
|
118
118
|
<li><strong>Support Portal</strong>: <a href="https://vlaamseoverheid.atlassian.net/wiki/spaces/IKPubliek/pages/2339897467/Widget-platform" target="_blank" class="external">Widget platform</a></li>
|
|
119
119
|
</ul>
|
|
120
120
|
<p>Our team is here to help with any issues or inquiries you might have.</p>
|
|
121
|
-
<a id="
|
|
121
|
+
<a id="search-keywords" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Search Keywords<a href="#search-keywords" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
|
|
122
122
|
<li>Global Header Integration</li>
|
|
123
123
|
<li>Flanders Widget Setup</li>
|
|
124
124
|
<li>Flanders Global Header</li>
|
|
@@ -135,4 +135,4 @@ Action Required:</p>
|
|
|
135
135
|
<li>Flanders Widget API Usage</li>
|
|
136
136
|
<li>V4 to V5 Migration Guide</li>
|
|
137
137
|
</ul>
|
|
138
|
-
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#
|
|
138
|
+
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#introduction"><span>Introduction</span></a><a href="#adding-a-flanders-global-header-to-your-website"><span>Adding a <wbr/>Flanders <wbr/>Global <wbr/>Header to <wbr/>Your <wbr/>Website</span></a><ul><li><a href="#using-the-embed-script-automatic-mounting"><span>Using the <wbr/>Embed <wbr/>Script (<wbr/>Automatic <wbr/>Mounting)</span></a></li><li><a href="#using-the-entry-script-manual-mounting"><span>Using the <wbr/>Entry <wbr/>Script (<wbr/>Manual <wbr/>Mounting)</span></a></li><li><a href="#summary"><span>Summary</span></a></li></ul><a href="#using-the-windowglobalheaderclient-api"><span>Using the window.global<wbr/>Header<wbr/>Client API</span></a><a href="#migration-guide-upgrading-from-v4-to-v5"><span>Migration guide: <wbr/>Upgrading from v4 to v5</span></a><ul><li><a href="#remove-client-library-script-links"><span>Remove client library script links</span></a></li><li><a href="#eliminate-installable-packages"><span>Eliminate installable packages</span></a></li><li><a href="#update-embed-script-links"><span>Update <wbr/>Embed script links</span></a></li><li><a href="#update-api-usage"><span>Update API usage</span></a></li><li><a href="#accessing-windowglobalheaderclient"><span>Accessing window.global<wbr/>Header<wbr/>Client</span></a></li><li><a href="#verify-styling-and-rendering"><span>Verify <wbr/>Styling and <wbr/>Rendering</span></a></li></ul><a href="#language-switching"><span>Language <wbr/>Switching</span></a><a href="#browser-support"><span>Browser <wbr/>Support</span></a><a href="#typescript-support"><span>Typescript <wbr/>Support</span></a><ul><li><a href="#installation"><span>Installation</span></a></li><li><a href="#usage-example"><span>Usage example</span></a></li></ul><a href="#contact-information"><span>Contact <wbr/>Information</span></a><a href="#search-keywords"><span>Search <wbr/>Keywords</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current">Global Header</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a> with <a href="https://github.com/KillerJulian/typedoc-github-theme" target="_blank">typedoc-github-theme</a></p></footer><div class="overlay"></div></body></html>
|