@govflanders/vl-widget-global-header-types 2.0.25 → 2.0.27
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 +69 -44
- package/dist/access-menu.d.ts +18 -1
- package/dist/client/access-menu.d.ts +27 -15
- package/dist/client/contact.d.ts +6 -2
- package/dist/contact.d.ts +21 -3
- package/dist/idp.d.ts +18 -4
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/functions/bootstrap.html +2 -2
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +33 -7
- package/docs/interfaces/AccessMenuMethods.html +11 -11
- package/docs/interfaces/AlertConfig.html +5 -5
- package/docs/interfaces/Application.html +5 -5
- package/docs/interfaces/ApplicationMenuLink.html +6 -6
- package/docs/interfaces/Authorization.html +7 -7
- package/docs/interfaces/BUR.html +6 -6
- package/docs/interfaces/BaseConfig.html +2 -2
- package/docs/interfaces/BaseEntity.html +5 -5
- package/docs/interfaces/BrandingConfigColors.html +4 -4
- package/docs/interfaces/BrandingConfigHost.html +6 -6
- package/docs/interfaces/BrandingConfigUmbrella.html +5 -5
- package/docs/interfaces/BrandingMethods.html +12 -12
- package/docs/interfaces/Channel.html +14 -14
- package/docs/interfaces/ContactMethods.html +9 -9
- package/docs/interfaces/ContactOption.html +16 -16
- package/docs/interfaces/ContactOptionRef.html +5 -5
- package/docs/interfaces/EA.html +5 -5
- package/docs/interfaces/EnrichedServicePoints.html +6 -6
- package/docs/interfaces/GID.html +5 -5
- package/docs/interfaces/GlobalHeaderClient.html +10 -10
- package/docs/interfaces/I18n.html +2 -2
- package/docs/interfaces/IDPData.html +5 -5
- package/docs/interfaces/Image.html +5 -5
- package/docs/interfaces/LB.html +5 -5
- package/docs/interfaces/LanguageLink.html +3 -3
- package/docs/interfaces/LanguageSwitcherMethods.html +2 -2
- package/docs/interfaces/Link.html +4 -4
- package/docs/interfaces/LinkWithTarget.html +5 -5
- package/docs/interfaces/MainLink.html +6 -6
- package/docs/interfaces/OV.html +5 -5
- package/docs/interfaces/ProfileConfig.html +22 -9
- package/docs/interfaces/RecursiveRecord.html +1 -1
- package/docs/interfaces/ResolveOptions.html +2 -2
- package/docs/interfaces/ServicePoints.html +6 -6
- package/docs/interfaces/Session.html +3 -3
- package/docs/interfaces/Translations.html +2 -2
- package/docs/interfaces/User.html +4 -4
- package/docs/interfaces/VER.html +5 -5
- package/docs/modules.html +1 -1
- package/docs/types/AlertModifier.html +1 -1
- package/docs/types/BrandingConfigLevel.html +2 -2
- package/docs/types/CapacityCode.html +2 -2
- package/docs/types/ChannelComponent.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 -2
- package/docs/types/EnrichedServicePoint.html +1 -1
- package/docs/types/Entity.html +2 -2
- package/docs/types/Language.html +1 -1
- package/docs/types/LanguageSwitcherCallback.html +2 -2
- package/docs/types/LanguageSwitcherConfig.html +2 -2
- package/docs/types/ServicePoint.html +2 -2
- package/docs/types/Translatable.html +2 -2
- package/docs/variables/languages.html +2 -2
- package/package.json +1 -1
package/docs/hierarchy.html
CHANGED
|
@@ -1 +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>Global Header - v2.0.
|
|
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 - v2.0.26</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 - v2.0.26</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 - v2.0.26</h1></div><h2>Hierarchy Summary</h2><ul class="tsd-full-hierarchy"><li data-refl="332"><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="336"><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="340"><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="344"><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="348"><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="352"><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="356"><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="387"><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="390"><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="250"><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="255"><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">Global Header - v2.0.26</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
|
@@ -1,9 +1,9 @@
|
|
|
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 - v2.0.
|
|
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 - v2.0.26</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 - v2.0.26</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 - v2.0.26</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
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
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
|
-
<pre><code class="html"><span class="hl-0"><!</span><span class="hl-1">
|
|
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
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>
|
|
@@ -11,9 +11,36 @@
|
|
|
11
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
12
|
</code><button type="button">Copy</button></pre>
|
|
13
13
|
|
|
14
|
+
<a id="widget-events" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Widget Events<a href="#widget-events" 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 dispatches the following events that you can listen for:</p>
|
|
15
|
+
<table>
|
|
16
|
+
<thead>
|
|
17
|
+
<tr>
|
|
18
|
+
<th>Event</th>
|
|
19
|
+
<th>Description</th>
|
|
20
|
+
</tr>
|
|
21
|
+
</thead>
|
|
22
|
+
<tbody>
|
|
23
|
+
<tr>
|
|
24
|
+
<td><code>widget.global_header.mounted</code></td>
|
|
25
|
+
<td>Fired when the widget is mounted and ready for interaction</td>
|
|
26
|
+
</tr>
|
|
27
|
+
<tr>
|
|
28
|
+
<td><code>widget.global_header.contact.opened</code></td>
|
|
29
|
+
<td>Fired when the contact menu is opened</td>
|
|
30
|
+
</tr>
|
|
31
|
+
<tr>
|
|
32
|
+
<td><code>widget.global_header.contact.closed</code></td>
|
|
33
|
+
<td>Fired when the contact menu is closed</td>
|
|
34
|
+
</tr>
|
|
35
|
+
</tbody>
|
|
36
|
+
</table>
|
|
37
|
+
<p>Example usage:</p>
|
|
38
|
+
<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.contact.opened'</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-7">console</span><span class="hl-2">.</span><span class="hl-8">log</span><span class="hl-2">(</span><span class="hl-9">'Contact menu opened'</span><span class="hl-2">);</span><br/><span class="hl-2">});</span><br/><br/><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.contact.closed'</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-7">console</span><span class="hl-2">.</span><span class="hl-8">log</span><span class="hl-2">(</span><span class="hl-9">'Contact menu closed'</span><span class="hl-2">);</span><br/><span class="hl-2">});</span>
|
|
39
|
+
</code><button type="button">Copy</button></pre>
|
|
40
|
+
|
|
14
41
|
<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>
|
|
15
42
|
<p>Example of using the entry script:</p>
|
|
16
|
-
<pre><code class="html"><span class="hl-0"><!</span><span class="hl-1">
|
|
43
|
+
<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>
|
|
17
44
|
</code><button type="button">Copy</button></pre>
|
|
18
45
|
|
|
19
46
|
<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>
|
|
@@ -22,7 +49,7 @@
|
|
|
22
49
|
</ul>
|
|
23
50
|
<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>
|
|
24
51
|
<p>Example of using the <code>window.globalHeaderClient</code> object in javascript:</p>
|
|
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><
|
|
52
|
+
<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><span class="hl-7">contactLink</span><span class="hl-2">, </span><span class="hl-7">feedbackLink</span><span class="hl-2">]);</span>
|
|
26
53
|
</code><button type="button">Copy</button></pre>
|
|
27
54
|
|
|
28
55
|
<p>Checkout the <a href="./interfaces/GlobalHeaderClient.html">GlobalHeaderClient</a> here to see all the available methods.</p>
|
|
@@ -98,7 +125,6 @@ Action Required:</p>
|
|
|
98
125
|
<p>Action Required:</p>
|
|
99
126
|
<ul>
|
|
100
127
|
<li>Ensure that you include either the entry script or the embed script in your HTML.</li>
|
|
101
|
-
<li>Remove any additional scripts previously used to access <code>window.globalHeaderClient</code>.</li>
|
|
102
128
|
</ul>
|
|
103
129
|
<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>
|
|
104
130
|
<p>Action Required:</p>
|
|
@@ -147,7 +173,7 @@ Action Required:</p>
|
|
|
147
173
|
|
|
148
174
|
<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>
|
|
149
175
|
<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>
|
|
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><
|
|
176
|
+
<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><span class="hl-7">contactLink</span><span class="hl-2">, </span><span class="hl-7">feedbackLink</span><span class="hl-2">]);</span>
|
|
151
177
|
</code><button type="button">Copy</button></pre>
|
|
152
178
|
|
|
153
179
|
<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>
|
|
@@ -308,4 +334,4 @@ Action Required:</p>
|
|
|
308
334
|
<li>Flanders Widget API Usage</li>
|
|
309
335
|
<li>V4 to V5 Migration Guide</li>
|
|
310
336
|
</ul>
|
|
311
|
-
</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><ul><li><a href="#changes-in-session-management"><span>Changes in <wbr/>Session <wbr/>Management</span></a></li><li><a href="#changes-in-the-profile-method"><span>Changes in the <wbr/>Profile <wbr/>Method</span></a></li></ul></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="#content-security-policy-csp"><span>Content <wbr/>Security <wbr/>Policy (CSP)</span></a><ul><li><a href="#production-environment-csp-configuration"><span>Production <wbr/>Environment CSP <wbr/>Configuration</span></a></li><li><a href="#tni-environment-csp-configuration"><span>TNI <wbr/>Environment CSP <wbr/>Configuration</span></a></li><li><a href="#additional-csp-for-screensharing"><span>Additional CSP for <wbr/>Screensharing</span></a></li><li><a href="#further-information"><span>Further <wbr/>Information</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">Global Header - v2.0.
|
|
337
|
+
</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></ul><a href="#widget-events"><span>Widget <wbr/>Events</span></a><ul><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><ul><li><a href="#changes-in-session-management"><span>Changes in <wbr/>Session <wbr/>Management</span></a></li><li><a href="#changes-in-the-profile-method"><span>Changes in the <wbr/>Profile <wbr/>Method</span></a></li></ul></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="#content-security-policy-csp"><span>Content <wbr/>Security <wbr/>Policy (CSP)</span></a><ul><li><a href="#production-environment-csp-configuration"><span>Production <wbr/>Environment CSP <wbr/>Configuration</span></a></li><li><a href="#tni-environment-csp-configuration"><span>TNI <wbr/>Environment CSP <wbr/>Configuration</span></a></li><li><a href="#additional-csp-for-screensharing"><span>Additional CSP for <wbr/>Screensharing</span></a></li><li><a href="#further-information"><span>Further <wbr/>Information</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">Global Header - v2.0.26</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>
|