@studiohyperdrive/ngx-gov-flanders
Version:
An integrated Angular approach to common use-cases for applications for the Flemish Government.
140 lines (136 loc) • 7.61 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, RendererFactory2, Injectable } from '@angular/core';
import { NgxWindowService } from '@studiohyperdrive/ngx-core';
import { switchMap, from, of, fromEvent, first, throwError, retry } from 'rxjs';
import { map } from 'rxjs/operators';
/**
* The `NgxAcmComponentInjectionService` is a service that provides methods to inject either a GlobalHeader or a GlobalFooter by ACM to your application.
*/
class NgxAcmComponentInjectionService {
constructor() {
/**
* An instance of the RendererFactory2
*/
this.rendererFactory = inject(RendererFactory2);
/**
* An instance of the Renderer2
*/
this.renderer = this.rendererFactory.createRenderer(null, null);
/**
* An instance of the NgxWindowService
*/
this.windowService = inject(NgxWindowService);
}
/**
* Initializes the VO Global Header widget and sets optional applicationMenuLinks.
*
* @param selector - The selector of the element where the header widget should be mounted.
* @param configuration - The configuration object
* @param configuration.url - The URL of the widget (e.g. 'https://<environment>.widgets.burgerprofiel.vlaanderen.be/')
* @param configuration.id - The ID of the widget (e.g. '7502b557-5d49-4ab3-9995-168718b81be5')
* @param configuration.profile - The profile configuration object
* @param links - Optional application menu links
*
* @returns The GlobalHeaderClient object will be returned to allow for custom implementations that are not supported out of the box, see: https://test.widgets.burgerprofiel.dev-vlaanderen.be/docs/global-header/ for more information.
*/
injectGlobalHeaderComponent({ selector, configuration, links, }) {
// Denis: The following code should only run in the browser.
return this.windowService.runInBrowser(({ browserWindow, browserDocument }) => {
// Denis: Create a new script tag
return this.injectComponent(browserDocument, selector, configuration, 'GlobalHeaderComponent').pipe(switchMap((headerElement) => {
// Denis: Get the GlobalHeaderClient object
const headerClient = browserWindow.globalHeaderClient;
return from(headerClient.mount(headerElement));
}), switchMap(() => {
// Denis: If there are no links, fallback to the default links
if (!Array.isArray(links) || !links.length) {
return of(null);
}
// Denis: Get the GlobalHeaderClient object
const headerClient = browserWindow.globalHeaderClient;
// Denis: Set the optional application menu links
return from(headerClient.accessMenu.setApplicationMenuLinks(links));
}), switchMap(() => {
// Denis: Get the GlobalHeaderClient object
const headerClient = browserWindow.globalHeaderClient;
// Denis: Set the provided ProfileConfig
return headerClient.accessMenu.setProfile(configuration.profile);
}), map(() => browserWindow.globalHeaderClient));
});
}
/**
* Initializes the VO Global Footer widget and sets optional navigation links.
*
* @param selector - The selector of the element where the footer widget should be mounted.
* @param configuration - The configuration object
* @param configuration.url - The URL of the widget (e.g. 'https://<environment>.widgets.burgerprofiel.vlaanderen.be/')
* @param configuration.id - The ID of the widget (e.g. '7502b557-5d49-4ab3-9995-168718b81be5')
* @param links - Optional navigation links
*
* @returns The GlobalFooterClient object will be returned to allow for custom implementations that are not supported out of the box, see: https://test.widgets.burgerprofiel.dev-vlaanderen.be/docs/global-footer/ for more information.
*/
injectGlobalFooterComponent({ selector, configuration, links, }) {
// Denis: The following code should only run in the browser.
return this.windowService.runInBrowser(({ browserWindow, browserDocument }) => {
// Denis: Create a new script tag
return this.injectComponent(browserDocument, selector, configuration, 'GlobalFooterComponent').pipe(switchMap((footerElement) => {
// Denis: When the script is loaded, get the GlobalHeaderClient object
const footerClient = browserWindow.globalFooterClient;
return from(footerClient.mount(footerElement));
}), switchMap(() => {
// Denis: If there are no links, fallback to the default links
if (!Array.isArray(links) || !links.length) {
return of(null);
}
// Denis: Get the GlobalHeaderClient object
const footerClient = browserWindow.globalFooterClient;
// Denis: Set the provided navigation links
return from(footerClient.setNavigationLinks(links));
}), map(() => browserWindow.globalFooterClient));
});
}
/**
* Creates a script tag for the ACMComponent and appends it to the browser
*
* @private
* @param browserDocument - An instance of the browser document
* @param configuration - The configuration of the ACM component
* @param selector - The selector of the component
* @param component - The name of the component we wish to append
*/
injectComponent(browserDocument, selector, configuration, component) {
// Denis: Create a new script tag
const script = this.renderer.createElement('script');
// Denis: Set up the script to load the header widget
script.src = configuration.url + 'api/v2/widget/' + configuration.id + '/entry';
script.type = 'text/javascript';
// Denis: Append the script to the DOM to load it.
this.renderer.appendChild(browserDocument.head, script);
return fromEvent(script, 'load').pipe(first(), switchMap(() => {
// Denis: Mount the provided widget script
const element = browserDocument.querySelector(selector);
// Iben: If no element was found, we throw an error
if (typeof element === 'undefined' || element === null) {
return throwError(() => new Error(`NGXGovFlanders: An error occurred when trying to mount the ${component}, the provided targetElement was not found.`));
}
// Iben: Return the element
return of(element);
}), retry({
count: 5,
delay: 100,
}));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxAcmComponentInjectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxAcmComponentInjectionService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxAcmComponentInjectionService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NgxAcmComponentInjectionService };
//# sourceMappingURL=studiohyperdrive-ngx-gov-flanders.mjs.map