@govflanders/vl-widget-global-header-types 2.0.18 → 2.0.19
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/README.md +14 -2
- package/docs/assets/highlight.css +6 -6
- package/docs/functions/bootstrap.html +2 -2
- package/docs/index.html +10 -6
- package/docs/interfaces/AccessMenuMethods.html +19 -19
- package/docs/interfaces/AlertConfig.html +4 -4
- package/docs/interfaces/Application.html +4 -4
- package/docs/interfaces/ApplicationMenuLink.html +5 -5
- package/docs/interfaces/Authorization.html +4 -4
- package/docs/interfaces/BUR.html +5 -5
- package/docs/interfaces/BaseEntity.html +4 -4
- package/docs/interfaces/BrandingConfigColors.html +3 -3
- package/docs/interfaces/BrandingConfigHost.html +5 -5
- package/docs/interfaces/BrandingConfigUmbrella.html +4 -4
- package/docs/interfaces/BrandingMethods.html +23 -23
- package/docs/interfaces/Channel.html +11 -11
- package/docs/interfaces/ContactMethods.html +15 -15
- package/docs/interfaces/ContactOption.html +15 -15
- package/docs/interfaces/ContactOptionRef.html +5 -5
- package/docs/interfaces/EA.html +4 -4
- package/docs/interfaces/EnrichedServicePoints.html +5 -5
- package/docs/interfaces/GID.html +4 -4
- package/docs/interfaces/GlobalHeaderClient.html +13 -13
- package/docs/interfaces/IDPData.html +4 -4
- package/docs/interfaces/Image.html +4 -4
- package/docs/interfaces/LB.html +4 -4
- package/docs/interfaces/LanguageLink.html +2 -2
- package/docs/interfaces/LanguageSwitcherMethods.html +3 -3
- package/docs/interfaces/Link.html +3 -3
- package/docs/interfaces/LinkWithTarget.html +4 -4
- package/docs/interfaces/MainLink.html +5 -5
- package/docs/interfaces/OV.html +4 -4
- package/docs/interfaces/ProfileConfig.html +7 -7
- package/docs/interfaces/ServicePoints.html +5 -5
- package/docs/interfaces/Session.html +2 -2
- package/docs/interfaces/User.html +3 -3
- package/docs/interfaces/VER.html +4 -4
- package/docs/types/AlertModifier.html +1 -1
- package/docs/types/BrandingConfigLevel.html +1 -1
- package/docs/types/CapacityCode.html +1 -1
- package/docs/types/ChannelIcon.html +1 -1
- package/docs/types/ChannelType.html +1 -1
- package/docs/types/CobrowseChannel.html +1 -1
- package/docs/types/ContactOptionSocialPlatform.html +1 -1
- package/docs/types/ContactServiceEndpoints.html +1 -1
- package/docs/types/EnrichedServicePoint.html +1 -1
- package/docs/types/Entity.html +1 -1
- package/docs/types/LanguageSwitcherCallback.html +1 -1
- package/docs/types/LanguageSwitcherConfig.html +2 -2
- package/docs/types/ServicePoint.html +1 -1
- package/docs/types/Translatable.html +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,7 +31,17 @@ Example of using the embed script:
|
|
|
31
31
|
</html>
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
⚠️ Warning: the `window.globalHeaderClient` object will only be available after the
|
|
34
|
+
⚠️ Warning: the `window.globalHeaderClient` object will only be available after the script is resolved. If it's necessary to have direct access to the `window.globalHeaderClient`, use the entry script or listen for the `widget.global_header.mounted` event.
|
|
35
|
+
|
|
36
|
+
**💡 Tip:** The widget dispatches a `widget.global_header.mounted` event when it's ready. You can listen for this event to know when the widget is mounted and ready for interaction:
|
|
37
|
+
|
|
38
|
+
```javascript
|
|
39
|
+
window.addEventListener('widget.global_header.mounted', async () => {
|
|
40
|
+
// Widget is now mounted and ready
|
|
41
|
+
const config = await window.globalHeaderClient.getConfig();
|
|
42
|
+
console.log('Global Header Widget mounted', config);
|
|
43
|
+
});
|
|
44
|
+
```
|
|
35
45
|
|
|
36
46
|
### Using the Entry Script (Manual Mounting)
|
|
37
47
|
|
|
@@ -92,6 +102,8 @@ client.accessMenu.setMainLinks([
|
|
|
92
102
|
|
|
93
103
|
Checkout the [GlobalHeaderClient](./interfaces/GlobalHeaderClient.html) here to see all the available methods.
|
|
94
104
|
|
|
105
|
+
|
|
106
|
+
|
|
95
107
|
## Migration guide: Upgrading from v4 to v5
|
|
96
108
|
|
|
97
109
|
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.
|
|
@@ -357,4 +369,4 @@ Our team is here to help with any issues or inquiries you might have.
|
|
|
357
369
|
- Dynamic Header Links
|
|
358
370
|
- TypeScript Widget Integration
|
|
359
371
|
- Flanders Widget API Usage
|
|
360
|
-
- V4 to V5 Migration Guide
|
|
372
|
+
- V4 to V5 Migration Guide
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
--dark-hl-7: #9CDCFE;
|
|
18
18
|
--light-hl-8: #795E26;
|
|
19
19
|
--dark-hl-8: #DCDCAA;
|
|
20
|
-
--light-hl-9: #
|
|
21
|
-
--dark-hl-9: #
|
|
22
|
-
--light-hl-10: #
|
|
23
|
-
--dark-hl-10: #
|
|
24
|
-
--light-hl-11: #
|
|
25
|
-
--dark-hl-11: #
|
|
20
|
+
--light-hl-9: #A31515;
|
|
21
|
+
--dark-hl-9: #CE9178;
|
|
22
|
+
--light-hl-10: #0000FF;
|
|
23
|
+
--dark-hl-10: #569CD6;
|
|
24
|
+
--light-hl-11: #0070C1;
|
|
25
|
+
--dark-hl-11: #4FC1FF;
|
|
26
26
|
--light-hl-12: #AF00DB;
|
|
27
27
|
--dark-hl-12: #C586C0;
|
|
28
28
|
--light-hl-13: #267F99;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
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></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-7">bootstrap</span><span class="hl-2"> } </span><span class="hl-12">from</span><span class="hl-2"> </span><span class="hl-
|
|
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-7">bootstrap</span><span class="hl-2"> } </span><span class="hl-12">from</span><span class="hl-2"> </span><span class="hl-9">'@govflanders/vl-widget-global-header-types'</span><span class="hl-2">;</span><br/><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">url</span><span class="hl-2"> = </span><span class="hl-9">'https://widgets.vlaanderen.be/api/v2/widget/your-widget-id/entry'</span><span class="hl-2">;</span><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">client</span><span class="hl-2"> = </span><span class="hl-12">await</span><span class="hl-2"> </span><span class="hl-8">bootstrap</span><span class="hl-2">(</span><span class="hl-7">url</span><span class="hl-2">);</span><br/><span class="hl-5">// Use the GlobalHeaderClient instance</span><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">config</span><span class="hl-2"> = </span><span class="hl-12">await</span><span class="hl-2"> </span><span class="hl-7">client</span><span class="hl-2">.</span><span class="hl-8">getConfig</span><span class="hl-2">();</span>
|
|
3
3
|
</code><button type="button">Copy</button></pre>
|
|
4
4
|
|
|
5
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
6
|
<code>https://widgets.vlaanderen.be/api/v2/widget/your-widget-id/entry</code></p>
|
|
7
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/
|
|
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/af87457aabf001c94b633577893633ebce799db3/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></p></footer><div class="overlay"></div></body></html>
|
package/docs/index.html
CHANGED
|
@@ -6,7 +6,11 @@
|
|
|
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-5"><!-- For the UUID, you should use your widget-id --></span><br/><span class="hl-2"> </span><span class="hl-5"><!-- If you want to use the TNI environment, use https://widgets.tni-vlaanderen.be instead --></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-6"> </span><span class="hl-3">src</span><span class="hl-6">=</span><span class="hl-4">"https://widgets.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
|
-
<p>⚠️ Warning: the <code>window.globalHeaderClient</code> object will only be available after the
|
|
9
|
+
<p>⚠️ Warning: the <code>window.globalHeaderClient</code> object will only be available after the script is resolved. If it's necessary to have direct access to the <code>window.globalHeaderClient</code>, use the entry script or listen for the <code>widget.global_header.mounted</code> event.</p>
|
|
10
|
+
<p><strong>💡 Tip:</strong> The widget dispatches a <code>widget.global_header.mounted</code> event when it's ready. You can listen for this event to know when the widget is mounted and ready for interaction:</p>
|
|
11
|
+
<pre><code class="javascript"><span class="hl-7">window</span><span class="hl-2">.</span><span class="hl-8">addEventListener</span><span class="hl-2">(</span><span class="hl-9">'widget.global_header.mounted'</span><span class="hl-2">, </span><span class="hl-10">async</span><span class="hl-2"> () </span><span class="hl-10">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-5">// Widget is now mounted and ready</span><br/><span class="hl-2"> </span><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">config</span><span class="hl-2"> = </span><span class="hl-12">await</span><span class="hl-2"> </span><span class="hl-7">window</span><span class="hl-2">.</span><span class="hl-7">globalHeaderClient</span><span class="hl-2">.</span><span class="hl-8">getConfig</span><span class="hl-2">();</span><br/><span class="hl-2"> </span><span class="hl-7">console</span><span class="hl-2">.</span><span class="hl-8">log</span><span class="hl-2">(</span><span class="hl-9">'Global Header Widget mounted'</span><span class="hl-2">, </span><span class="hl-7">config</span><span class="hl-2">);</span><br/><span class="hl-2">});</span>
|
|
12
|
+
</code><button type="button">Copy</button></pre>
|
|
13
|
+
|
|
10
14
|
<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
15
|
<p>Example of using the entry script:</p>
|
|
12
16
|
<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-5"><!-- For the UUID, you should use your widget-id --></span><br/><span class="hl-2"> </span><span class="hl-5"><!-- If you want to use the TNI environment, use https://widgets.tni-vlaanderen.be instead --></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-6"> </span><span class="hl-3">src</span><span class="hl-6">=</span><span class="hl-4">"https://widgets.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-6"> </span><span class="hl-7">window</span><span class="hl-6">.</span><span class="hl-7">globalHeaderClient</span><span class="hl-6">.</span><span class="hl-8">mount</span><span class="hl-6">(); </span><span class="hl-5">// Mount the header manually after the script has loaded</span><br/><span class="hl-6"> </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>
|
|
@@ -18,7 +22,7 @@
|
|
|
18
22
|
</ul>
|
|
19
23
|
<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
24
|
<p>Example of using the <code>window.globalHeaderClient</code> object in javascript:</p>
|
|
21
|
-
<pre><code class="javascript"><span class="hl-
|
|
25
|
+
<pre><code class="javascript"><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">client</span><span class="hl-2"> = </span><span class="hl-7">window</span><span class="hl-2">.</span><span class="hl-7">globalHeaderClient</span><span class="hl-2">;</span><br/><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">contactLink</span><span class="hl-2"> = {</span><br/><span class="hl-2"> </span><span class="hl-7">label:</span><span class="hl-2"> </span><span class="hl-9">'Contact'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">href:</span><span class="hl-2"> </span><span class="hl-9">'/contact'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">feedbackLink</span><span class="hl-2"> = {</span><br/><span class="hl-2"> </span><span class="hl-7">label:</span><span class="hl-2"> </span><span class="hl-9">'Feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">href:</span><span class="hl-2"> </span><span class="hl-9">'https://example.com/feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">isExternal:</span><span class="hl-2"> </span><span class="hl-10">true</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">target:</span><span class="hl-2"> </span><span class="hl-9">'_blank'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-7">client</span><span class="hl-2">.</span><span class="hl-7">accessMenu</span><span class="hl-2">.</span><span class="hl-8">setMainLinks</span><span class="hl-2">([</span><br/><span class="hl-2"> </span><span class="hl-7">contactLink</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">feedbackLink</span><span class="hl-2">,</span><br/><span class="hl-2">]);</span>
|
|
22
26
|
</code><button type="button">Copy</button></pre>
|
|
23
27
|
|
|
24
28
|
<p>Checkout the <a href="./interfaces/GlobalHeaderClient.html">GlobalHeaderClient</a> here to see all the available methods.</p>
|
|
@@ -113,7 +117,7 @@ Action Required:</p>
|
|
|
113
117
|
<li>en (English)</li>
|
|
114
118
|
</ul>
|
|
115
119
|
<p>To change the document language, you can use the following JavaScript snippet:</p>
|
|
116
|
-
<pre><code class="js"><span class="hl-7">window</span><span class="hl-2">.</span><span class="hl-7">document</span><span class="hl-2">.</span><span class="hl-7">documentElement</span><span class="hl-2">.</span><span class="hl-7">lang</span><span class="hl-2"> = </span><span class="hl-
|
|
120
|
+
<pre><code class="js"><span class="hl-7">window</span><span class="hl-2">.</span><span class="hl-7">document</span><span class="hl-2">.</span><span class="hl-7">documentElement</span><span class="hl-2">.</span><span class="hl-7">lang</span><span class="hl-2"> = </span><span class="hl-9">'nl'</span><span class="hl-2">; </span><span class="hl-5">// 'nl', 'en', 'de' or 'fr'</span>
|
|
117
121
|
</code><button type="button">Copy</button></pre>
|
|
118
122
|
|
|
119
123
|
<p>This will switch the document's language to Dutch, and the widget will automatically reflect the change.</p>
|
|
@@ -134,16 +138,16 @@ Action Required:</p>
|
|
|
134
138
|
<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>
|
|
135
139
|
<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>
|
|
136
140
|
<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>
|
|
137
|
-
<pre><code class="bash"><span class="hl-8">npm</span><span class="hl-2"> </span><span class="hl-
|
|
141
|
+
<pre><code class="bash"><span class="hl-8">npm</span><span class="hl-2"> </span><span class="hl-9">install</span><span class="hl-2"> </span><span class="hl-10">-D</span><span class="hl-2"> </span><span class="hl-9">@govflanders/vl-widget-global-header-types</span>
|
|
138
142
|
</code><button type="button">Copy</button></pre>
|
|
139
143
|
|
|
140
144
|
<p>or</p>
|
|
141
|
-
<pre><code class="bash"><span class="hl-8">yarn</span><span class="hl-2"> </span><span class="hl-
|
|
145
|
+
<pre><code class="bash"><span class="hl-8">yarn</span><span class="hl-2"> </span><span class="hl-9">add</span><span class="hl-2"> </span><span class="hl-10">-D</span><span class="hl-2"> </span><span class="hl-9">@govflanders/vl-widget-global-header-types</span>
|
|
142
146
|
</code><button type="button">Copy</button></pre>
|
|
143
147
|
|
|
144
148
|
<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>
|
|
145
149
|
<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>
|
|
146
|
-
<pre><code class="typescript"><span class="hl-12">import</span><span class="hl-2"> { </span><span class="hl-7">GlobalHeaderClient</span><span class="hl-2">, </span><span class="hl-7">MainLink</span><span class="hl-2"> } </span><span class="hl-12">from</span><span class="hl-2"> </span><span class="hl-
|
|
150
|
+
<pre><code class="typescript"><span class="hl-12">import</span><span class="hl-2"> { </span><span class="hl-7">GlobalHeaderClient</span><span class="hl-2">, </span><span class="hl-7">MainLink</span><span class="hl-2"> } </span><span class="hl-12">from</span><span class="hl-2"> </span><span class="hl-9">'@govflanders/vl-widget-global-header-types'</span><span class="hl-2">;</span><br/><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">client</span><span class="hl-2">: </span><span class="hl-13">GlobalHeaderClient</span><span class="hl-2"> = </span><span class="hl-7">window</span><span class="hl-2">.</span><span class="hl-7">globalHeaderClient</span><span class="hl-2">;</span><br/><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">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-7">label:</span><span class="hl-2"> </span><span class="hl-9">'Contact'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">href:</span><span class="hl-2"> </span><span class="hl-9">'/contact'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-10">const</span><span class="hl-2"> </span><span class="hl-11">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-7">label:</span><span class="hl-2"> </span><span class="hl-9">'Feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">href:</span><span class="hl-2"> </span><span class="hl-9">'https://example.com/feedback'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">isExternal:</span><span class="hl-2"> </span><span class="hl-10">true</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">target:</span><span class="hl-2"> </span><span class="hl-9">'_blank'</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-7">client</span><span class="hl-2">.</span><span class="hl-7">accessMenu</span><span class="hl-2">.</span><span class="hl-8">setMainLinks</span><span class="hl-2">([</span><br/><span class="hl-2"> </span><span class="hl-7">contactLink</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-7">feedbackLink</span><span class="hl-2">,</span><br/><span class="hl-2">]);</span>
|
|
147
151
|
</code><button type="button">Copy</button></pre>
|
|
148
152
|
|
|
149
153
|
<a id="content-security-policy-csp" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Content Security Policy (CSP)<a href="#content-security-policy-csp" 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>To ensure the secure integration of the <strong>Global Header Widget</strong>, you need to configure your Content Security Policy (CSP) with the following directives:</p>
|