@govflanders/vl-widget-global-header-types 2.0.4 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +2 -0
  2. package/dist/bootstrap.d.ts +1 -1
  3. package/dist/client/access-menu.d.ts +66 -0
  4. package/dist/client/branding.d.ts +89 -0
  5. package/dist/client/branding.js +1 -0
  6. package/dist/client/client.d.ts +80 -0
  7. package/dist/client/client.js +1 -0
  8. package/dist/client/contact.d.ts +70 -0
  9. package/dist/client/contact.js +1 -0
  10. package/dist/client/index.d.ts +4 -0
  11. package/dist/client/index.js +4 -0
  12. package/docs/assets/hierarchy.js +1 -1
  13. package/docs/assets/highlight.css +7 -0
  14. package/docs/assets/main.js +4 -4
  15. package/docs/assets/navigation.js +1 -1
  16. package/docs/assets/search.js +1 -1
  17. package/docs/assets/style.css +6 -6
  18. package/docs/functions/bootstrap.html +2 -2
  19. package/docs/hierarchy.html +1 -1
  20. package/docs/index.html +3 -3
  21. package/docs/interfaces/AccessMenuMethods.html +55 -0
  22. package/docs/interfaces/AlertConfig.html +5 -5
  23. package/docs/interfaces/Application.html +5 -5
  24. package/docs/interfaces/ApplicationMenuLink.html +6 -6
  25. package/docs/interfaces/Authorization.html +5 -5
  26. package/docs/interfaces/BUR.html +6 -6
  27. package/docs/interfaces/BaseConfig.html +2 -2
  28. package/docs/interfaces/BaseEntity.html +5 -5
  29. package/docs/interfaces/BrandingConfigColors.html +4 -4
  30. package/docs/interfaces/BrandingConfigHost.html +6 -6
  31. package/docs/interfaces/BrandingConfigUmbrella.html +5 -5
  32. package/docs/interfaces/BrandingMethods.html +73 -0
  33. package/docs/interfaces/Channel.html +12 -12
  34. package/docs/interfaces/ContactMethods.html +43 -0
  35. package/docs/interfaces/ContactOption.html +15 -15
  36. package/docs/interfaces/ContactOptionRef.html +5 -5
  37. package/docs/interfaces/EA.html +5 -5
  38. package/docs/interfaces/EnrichedServicePoints.html +6 -6
  39. package/docs/interfaces/GID.html +5 -5
  40. package/docs/interfaces/GlobalHeaderClient.html +32 -66
  41. package/docs/interfaces/I18n.html +2 -2
  42. package/docs/interfaces/IDPData.html +5 -5
  43. package/docs/interfaces/Image.html +5 -5
  44. package/docs/interfaces/LB.html +5 -5
  45. package/docs/interfaces/Link.html +4 -4
  46. package/docs/interfaces/LinkWithTarget.html +5 -5
  47. package/docs/interfaces/MainLink.html +6 -6
  48. package/docs/interfaces/OV.html +5 -5
  49. package/docs/interfaces/ProfileConfig.html +8 -8
  50. package/docs/interfaces/RecursiveRecord.html +1 -1
  51. package/docs/interfaces/ResolveOptions.html +2 -2
  52. package/docs/interfaces/ServicePoints.html +6 -6
  53. package/docs/interfaces/Session.html +3 -3
  54. package/docs/interfaces/Translations.html +2 -2
  55. package/docs/interfaces/User.html +4 -4
  56. package/docs/interfaces/VER.html +5 -5
  57. package/docs/modules.html +1 -1
  58. package/docs/types/AlertModifier.html +1 -1
  59. package/docs/types/BrandingConfigLevel.html +2 -2
  60. package/docs/types/CapacityCode.html +2 -2
  61. package/docs/types/ChannelIcon.html +2 -2
  62. package/docs/types/ChannelType.html +2 -2
  63. package/docs/types/CobrowseChannel.html +2 -2
  64. package/docs/types/ContactOptionSocialPlatform.html +2 -2
  65. package/docs/types/ContactServiceEndpoints.html +2 -2
  66. package/docs/types/EnrichedServicePoint.html +1 -1
  67. package/docs/types/Entity.html +2 -2
  68. package/docs/types/Language.html +1 -1
  69. package/docs/types/ServicePoint.html +2 -2
  70. package/docs/types/Translatable.html +2 -2
  71. package/docs/variables/languages.html +2 -2
  72. package/package.json +6 -6
  73. package/dist/client.d.ts +0 -302
  74. package/docs/assets/typedoc-github-style.css +0 -430
  75. /package/dist/{client.js → client/access-menu.js} +0 -0
package/README.md CHANGED
@@ -43,6 +43,8 @@ Example of using the entry script:
43
43
  <!DOCTYPE html>
44
44
  <html lang="nl">
45
45
  <head>
46
+ <!-- For the UUID, you should use your widget-id -->
47
+ <!-- If you want to use the TNI environment, use 'tni' instead of 'prod' -->
46
48
  <script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/entry"></script>
47
49
  <meta charset="UTF-8" />
48
50
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
package/dist/bootstrap.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GlobalHeaderClient } from './client';
1
+ import { GlobalHeaderClient } from './client/client';
2
2
  /**
3
3
  * Bootstraps the GlobalHeaderClient by loading it from the specified entry URL.
4
4
  *
package/dist/client/access-menu.d.ts ADDED
@@ -0,0 +1,66 @@
1
+ import { Translatable } from '../i18n';
2
+ import { ApplicationMenuLink, MainLink, ProfileConfig } from '../access-menu';
3
+ export interface AccessMenuMethods {
4
+ /**
5
+ * Set the main links
6
+ * @param mainLinks The main links to set
7
+ * @returns The result of the operation
8
+ * @example
9
+ * const success = await globalHeaderClient.accessMenu.setMainLinks([{ label: 'Home', href: '/', isExternal: false }]);
10
+ */
11
+ setMainLinks: (mainLinks: Translatable<MainLink>[]) => Promise<boolean>;
12
+ /**
13
+ * Add an application menu link
14
+ * @param link The application menu link to add
15
+ * @returns The updated list of application menu links
16
+ * @example
17
+ * const updatedLinks = await globalHeaderClient.accessMenu.addApplicationMenuLink({ label: 'Dashboard', href: '/dashboard' });
18
+ */
19
+ addApplicationMenuLink: (link: Translatable<ApplicationMenuLink>) => Promise<Translatable<ApplicationMenuLink>[]>;
20
+ /**
21
+ * Add multiple application menu links
22
+ * @param links The application menu links to add
23
+ * @returns The updated list of application menu links
24
+ * @example
25
+ * const updatedLinks = await globalHeaderClient.accessMenu.addApplicationMenuLinks([{ label: 'Profile', href: '/profile' }]);
26
+ */
27
+ addApplicationMenuLinks: (links: Translatable<ApplicationMenuLink>[]) => Promise<Translatable<ApplicationMenuLink>[]>;
28
+ /**
29
+ * Set all application menu links
30
+ * @param links The application menu links to set
31
+ * @returns The updated list of application menu links
32
+ * @example
33
+ * const updatedLinks = await globalHeaderClient.accessMenu.setApplicationMenuLinks([{ label: 'Settings', href: '/settings' }]);
34
+ */
35
+ setApplicationMenuLinks: (links: Translatable<ApplicationMenuLink>[]) => Promise<Translatable<ApplicationMenuLink>[]>;
36
+ /**
37
+ * Set the profile configuration
38
+ * @param profileConfig The profile configuration to set
39
+ * @returns The result of the operation
40
+ * @example
41
+ * const success = await globalHeaderClient.accessMenu.setProfile({ active: true, loginUrl: '/login', logoutUrl: '/logout' });
42
+ */
43
+ setProfile: (profileConfig: Partial<ProfileConfig>) => Promise<boolean>;
44
+ /**
45
+ * Get the profile configuration
46
+ * @returns The profile configuration
47
+ * @example
48
+ * const profile = await globalHeaderClient.accessMenu.getProfile();
49
+ */
50
+ getProfile: () => Promise<Partial<ProfileConfig>>;
51
+ /**
52
+ * Get the application name
53
+ * @returns The application name
54
+ * @example
55
+ * const appName = await globalHeaderClient.accessMenu.getApplicationName();
56
+ */
57
+ getApplicationName: () => Promise<string>;
58
+ /**
59
+ * Set the application name
60
+ * @param applicationName The application name to set
61
+ * @returns The result of the operation
62
+ * @example
63
+ * const success = await globalHeaderClient.accessMenu.setApplicationName('My Application');
64
+ */
65
+ setApplicationName: (applicationName: Translatable<string>) => Promise<boolean>;
66
+ }
package/dist/client/branding.d.ts ADDED
@@ -0,0 +1,89 @@
1
+ import { BrandingConfigColors, BrandingConfigHost, BrandingConfigUmbrella } from '../config';
2
+ export interface BrandingMethods {
3
+ /**
4
+ * Get the branding level
5
+ * @returns The branding level
6
+ * @example
7
+ * const level = await globalHeaderClient.branding.getLevel();
8
+ */
9
+ getLevel: () => Promise<number>;
10
+ /**
11
+ * Set the branding level
12
+ * @param level The branding level to set
13
+ * @returns A boolean indicating the success of the operation
14
+ * @example
15
+ * const success = await globalHeaderClient.branding.setLevel(2);
16
+ */
17
+ setLevel: (level: number) => Promise<boolean>;
18
+ /**
19
+ * Get the branding colors
20
+ * @returns The branding colors
21
+ * @example
22
+ * const colors = await globalHeaderClient.branding.getColors();
23
+ */
24
+ getColors: () => Promise<BrandingConfigColors>;
25
+ /**
26
+ * Get a specific branding color
27
+ * @param type The type of the branding color to retrieve
28
+ * @returns The requested branding color
29
+ * @example
30
+ * const color = await globalHeaderClient.branding.getColor('primary');
31
+ */
32
+ getColor: (type: keyof BrandingConfigColors) => Promise<string>;
33
+ /**
34
+ * Set the branding colors
35
+ * @param colors The branding colors to set
36
+ * @returns A boolean indicating the success of the operation
37
+ * @example
38
+ * const success = await globalHeaderClient.branding.setColors({ primary: '#000000', functional: '#FFFFFF' });
39
+ */
40
+ setColors: (colors: BrandingConfigColors) => Promise<boolean>;
41
+ /**
42
+ * Set a specific branding color
43
+ * @param args The branding color type and value to set
44
+ * @returns A boolean indicating the success of the operation
45
+ * @example
46
+ * const success = await globalHeaderClient.branding.setColor({ type: 'primary', value: '#FF0000' });
47
+ */
48
+ setColor: (args: {
49
+ type: keyof BrandingConfigColors;
50
+ value: string;
51
+ }) => Promise<boolean>;
52
+ /**
53
+ * Get the branding host configuration
54
+ * @returns The branding host configuration
55
+ * @example
56
+ * const hostConfig = await globalHeaderClient.branding.getHost();
57
+ */
58
+ getHost: () => Promise<Partial<BrandingConfigHost>>;
59
+ /**
60
+ * Set the branding host configuration
61
+ * @param host The branding host configuration to set
62
+ * @returns A boolean indicating the success of the operation
63
+ * @example
64
+ * const success = await globalHeaderClient.branding.setHost({ label: 'My Host', href: 'https://example.com', logo: { src: 'logo.png', alt: 'Logo' } });
65
+ */
66
+ setHost: (host: Partial<BrandingConfigHost>) => Promise<boolean>;
67
+ /**
68
+ * Get the branding umbrella configuration
69
+ * @returns The branding umbrella configuration
70
+ * @example
71
+ * const umbrellaConfig = await globalHeaderClient.branding.getUmbrella();
72
+ */
73
+ getUmbrella: () => Promise<Partial<BrandingConfigUmbrella>>;
74
+ /**
75
+ * Set the branding umbrella configuration
76
+ * @param umbrella The branding umbrella configuration to set
77
+ * @returns A boolean indicating the success of the operation
78
+ * @example
79
+ * const success = await globalHeaderClient.branding.setUmbrella({ label: 'Umbrella', href: 'https://umbrella.com' });
80
+ */
81
+ setUmbrella: (umbrella: Partial<BrandingConfigUmbrella>) => Promise<boolean>;
82
+ /**
83
+ * Get the branding variables
84
+ * @returns A record of CSS variable names and their values
85
+ * @example
86
+ * const variables = await globalHeaderClient.branding.getVariables();
87
+ */
88
+ getVariables: () => Promise<Record<string, string>>;
89
+ }
package/dist/client/branding.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/client/client.d.ts ADDED
@@ -0,0 +1,80 @@
1
+ import { ContactMethods } from './contact';
2
+ import { AccessMenuMethods } from './access-menu';
3
+ import { BrandingMethods } from './branding';
4
+ import { ExtractHandlers, ExtractLinker } from '@govflanders/vl-widget-shared';
5
+ import { Config } from '../config';
6
+ /**
7
+ * The `window.globalHeaderClient` object offers several methods for interacting with the widget.
8
+ * Each method is typed and returns promises, making asynchronous operations easier to handle.
9
+ */
10
+ export interface GlobalHeaderClient {
11
+ /**
12
+ * Methods related to the **hulp nodig?** menu.
13
+ */
14
+ contact: ContactMethods;
15
+ /**
16
+ * Methods related to the **Aanmelden** menu.
17
+ */
18
+ accessMenu: AccessMenuMethods;
19
+ /**
20
+ * Methods related to the branding of the widget. This includes:
21
+ * - Colors
22
+ * - Branding level
23
+ * - Umbrella
24
+ * - Host
25
+ */
26
+ branding: BrandingMethods;
27
+ /**
28
+ * Enable or disable navigation within the global header.
29
+ * When navigation is disabled, all interactive elements like the access menu,
30
+ * contact menu, and header links will not work or be hidden.
31
+ *
32
+ * This is useful for scenarios like consent screens, where you don't want users
33
+ * to navigate away from the page by clicking on the header.
34
+ *
35
+ * @param enabled - A boolean value indicating whether navigation should be enabled (true) or disabled (false).
36
+ * @returns A promise that resolves to a boolean, confirming if the navigation state was successfully updated.
37
+ * @example
38
+ * const success = await globalHeaderClient.setNavigationEnabled(false);
39
+ */
40
+ setNavigationEnabled: (enabled: boolean) => Promise<boolean>;
41
+ /**
42
+ * Get the current configuration.
43
+ * This is the configuration for the widget ID given in the embed or entry script.
44
+ *
45
+ * @returns A promise that resolves to the current configuration.
46
+ * If an error occurs during retrieval, the promise will be rejected with an error message.
47
+ * @example
48
+ * const config = await globalHeaderClient.getConfig();
49
+ */
50
+ getConfig: () => Promise<Config>;
51
+ /**
52
+ * Mount the Global Header Widget.
53
+ * @param element The element to mount the widget to. If omitted, mounts at the top of the page.
54
+ * @returns A boolean indicating if the widget was mounted successfully.
55
+ * @example
56
+ * const success = await globalHeaderClient.mount(document.getElementById('header'));
57
+ */
58
+ mount: (element?: HTMLElement) => Promise<boolean>;
59
+ /**
60
+ * Unmount the Global Header Widget.
61
+ * @returns A boolean indicating if the widget was unmounted successfully.
62
+ * @example
63
+ * const success = await globalHeaderClient.unmount();
64
+ */
65
+ unmount: () => Promise<boolean>;
66
+ }
67
+ /**
68
+ * @ignore
69
+ */
70
+ export type Handlers = ExtractHandlers<GlobalHeaderClient>;
71
+ /**
72
+ * @ignore
73
+ */
74
+ export type Linker = ExtractLinker<GlobalHeaderClient>;
75
+ declare global {
76
+ interface Window {
77
+ globalHeaderClient: GlobalHeaderClient;
78
+ globalHeaderLinker: Linker;
79
+ }
80
+ }
package/dist/client/client.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/client/contact.d.ts ADDED
@@ -0,0 +1,70 @@
1
+ import { Translatable } from '../i18n';
2
+ import { EnrichedServicePoints, ServicePoints } from '../contact';
3
+ export interface ContactMethods {
4
+ /**
5
+ * Get the current service points
6
+ * @returns A promise that resolves to the current service points
7
+ * @example
8
+ * const servicePoints = await globalHeaderClient.contact.getServicePoints();
9
+ */
10
+ getServicePoints: () => Promise<EnrichedServicePoints>;
11
+ /**
12
+ * Set the service points
13
+ * @param servicePoints The service points to set
14
+ * @returns A promise that resolves to the set service points
15
+ * @example
16
+ * const updatedServicePoints = await globalHeaderClient.contact.setServicePoints({
17
+ * displayMode: "grouped",
18
+ * groupLabel: "Neem contact op met een woonmaatschappij",
19
+ * contextual: [
20
+ * { type: "contactOption", contactGroupId: "OVO002919" },
21
+ * { type: "contactOption", contactGroupId: "OVO002884" },
22
+ * { type: "contactOption", contactGroupId: "OVO002940" },
23
+ * { type: "contactOption", contactGroupId: "OVO039151" },
24
+ * { type: "contactOption", contactGroupId: "OVO025805" },
25
+ * { type: "contactOption", contactGroupId: "OVO002499" },
26
+ * { type: "link", href: "https://www.vlaanderen.be/wonen-in-vlaanderen/zoek-een-organisatie/", label: "Zoek een woonmaatschappij in uw buurt" }
27
+ * ],
28
+ * defaults: [
29
+ * { type: "contactOption", contactGroupId: "vlaanderen", label: "Algemene contactopties van de Vlaamse overheid" },
30
+ * { type: "link", href: "https://www.google.be" }
31
+ * ]
32
+ * });
33
+ */
34
+ setServicePoints: (args: Translatable<ServicePoints>) => Promise<Translatable<ServicePoints>>;
35
+ /**
36
+ * Reset the service points to the initial values from the configuration.
37
+ * @returns A promise that resolves when the service points have been reset.
38
+ * @example
39
+ * const success = await globalHeaderClient.contact.resetServicePoints();
40
+ */
41
+ resetServicePoints: () => Promise<boolean>;
42
+ /**
43
+ * Open the contact panel.
44
+ * @returns A promise that resolves to true if the contact panel was opened.
45
+ * @example
46
+ * const isOpen = await globalHeaderClient.contact.open();
47
+ */
48
+ open: () => Promise<boolean>;
49
+ /**
50
+ * Close the contact panel.
51
+ * @returns A promise that resolves to true if the contact panel was closed.
52
+ * @example
53
+ * const isClosed = await globalHeaderClient.contact.close();
54
+ */
55
+ close: () => Promise<boolean>;
56
+ /**
57
+ * Toggle the contact panel.
58
+ * @returns A promise that resolves to true if the contact panel is now open.
59
+ * @example
60
+ * const isToggled = await globalHeaderClient.contact.toggle();
61
+ */
62
+ toggle: () => Promise<boolean>;
63
+ /**
64
+ * Check if the contact panel is open.
65
+ * @returns A promise that resolves to true if the contact panel is open.
66
+ * @example
67
+ * const isOpen = await globalHeaderClient.contact.isOpen();
68
+ */
69
+ isOpen: () => Promise<boolean>;
70
+ }
package/dist/client/contact.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/client/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from './contact';
2
+ export * from './client';
3
+ export * from './access-menu';
4
+ export * from './branding';
package/dist/client/index.js ADDED
@@ -0,0 +1,4 @@
1
+ export * from './contact';
2
+ export * from './client';
3
+ export * from './access-menu';
4
+ export * from './branding';
package/docs/assets/hierarchy.js CHANGED
@@ -1 +1 @@
1
- window.hierarchyData = "data:application/octet-stream;base64,H4sIAAAAAAAAE5WUQW+CMBTHv8s71w1oraQ3mcSZmLi4yQ6GA4MqjbUkbbdkMXz3BQ8GFk3LhdN7v1/fv69cQDeNNcD2eEoRCUIUxWGOQPOD5KUVjTLALkC7jyrOHBgkulCVUMeXRh3EcXf+0lzKAhCchKqARVOK4FtLYCCU5fpQlNw83296qu1ZAoJSFsYAA2uqSUeZ3DqhRRAGD+2vjbGjzF2DnzWKw572nesfUfK3RihrHMZBrYcMQVkLWWmugO2jmOZXez/yVGlR1rwac4q7PX6j4+ngvgvDU2WF/XUlfSscOzSmAcKUIExjhGcRwjOKcBx0QWDav/3lauE4xHK18BySkh44S7cOcJZufcFxD7xOHNx14omdRT3sJnNgN5kvdrBoc9dWzT2x8eDR7lzpJjvPdEnQf5ZroU6ufIU6jd1HEpD86iL/XJ/C1h+FPnLXX2dYPNZPURjkbdv+ARzp0ayeBQAA"
1
+ window.hierarchyData = "eJyVlE1vwjAMhv+Lz2HL1yrojY6KISExsdEdJg5ZG2hESaUkmzSh/vepHKZ0Ykp6ycl+Xvu1nQuYtnUW0nc6SxDjBFFK9giMPDSydKrVFtILJP2jxVlCCpkRulL6+Njqgzruzh9GNo0ABCelK0jpQ4Lg0zSQgtJOmoMopb2/nXRXu3MDCMpGWAspOFtNesrkNxM6BAT/q/7UWjdKuU+IU6WUeLIv0nypUj63SjsbUBzERoghKGvVVEbqfgw02V/VfctzbVRZy2pMFTdzIlufDeYtrMy1U+475PRv4NimGcaIYY4YniJGKGIkQYzi3giG/ekvV4tAEcvVIq5JhrkHLvJtAFzk21jw1AOvswB3nUViCfWwmyKA3RSx2MGizUNbNY/E0sHR7kLuZrtYd7l/lmulTyF/lT6N3kfOr7vH+R+tN+XqV2GOMvTrDIPH6ieI4H3XdT9t4dEy"
package/docs/assets/highlight.css CHANGED
@@ -27,6 +27,8 @@
27
27
  --dark-hl-12: #C586C0;
28
28
  --light-hl-13: #267F99;
29
29
  --dark-hl-13: #4EC9B0;
30
+ --light-hl-14: #098658;
31
+ --dark-hl-14: #B5CEA8;
30
32
  --light-code-background: #FFFFFF;
31
33
  --dark-code-background: #1E1E1E;
32
34
  }
@@ -46,6 +48,7 @@
46
48
  --hl-11: var(--light-hl-11);
47
49
  --hl-12: var(--light-hl-12);
48
50
  --hl-13: var(--light-hl-13);
51
+ --hl-14: var(--light-hl-14);
49
52
  --code-background: var(--light-code-background);
50
53
  } }
51
54
 
@@ -64,6 +67,7 @@
64
67
  --hl-11: var(--dark-hl-11);
65
68
  --hl-12: var(--dark-hl-12);
66
69
  --hl-13: var(--dark-hl-13);
70
+ --hl-14: var(--dark-hl-14);
67
71
  --code-background: var(--dark-code-background);
68
72
  } }
69
73
 
@@ -82,6 +86,7 @@
82
86
  --hl-11: var(--light-hl-11);
83
87
  --hl-12: var(--light-hl-12);
84
88
  --hl-13: var(--light-hl-13);
89
+ --hl-14: var(--light-hl-14);
85
90
  --code-background: var(--light-code-background);
86
91
  }
87
92
 
@@ -100,6 +105,7 @@
100
105
  --hl-11: var(--dark-hl-11);
101
106
  --hl-12: var(--dark-hl-12);
102
107
  --hl-13: var(--dark-hl-13);
108
+ --hl-14: var(--dark-hl-14);
103
109
  --code-background: var(--dark-code-background);
104
110
  }
105
111
 
@@ -117,4 +123,5 @@
117
123
  .hl-11 { color: var(--hl-11); }
118
124
  .hl-12 { color: var(--hl-12); }
119
125
  .hl-13 { color: var(--hl-13); }
126
+ .hl-14 { color: var(--hl-14); }
120
127
  pre, code { background: var(--code-background); }