From ab4bfce9bb6abf6978640f8aade7f3449ae0848c Mon Sep 17 00:00:00 2001
From: Waldemar Mazurek <waldemar.mazurek@sap.com>
Date: Mon, 25 Nov 2024 10:08:22 +0100
Subject: [PATCH] Improves typings in Luigi container (#4030)

---
 container/package.json                        |   2 +-
 container/src/LuigiCompoundContainer.svelte   |  19 +-
 container/src/LuigiContainer.svelte           |  24 +-
 container/src/api/container-api.ts            |  23 +-
 container/src/constants/container.model.ts    |  58 +++
 container/src/constants/event-type.ts         |  10 +-
 container/src/main.ts                         |   5 +-
 container/src/services/container.service.ts   |  21 +-
 container/src/services/iframe-helpers.ts      |   2 +-
 .../src/services/web-component-helpers.ts     |  67 ++-
 .../src/services/webcomponents.service.ts     |  88 ++--
 container/src/utilities/helpers.ts            |  16 +-
 container/test/api/container-api.spec.ts      | 438 +++++++++---------
 .../test/services/container.service.spec.ts   |  33 +-
 .../services/web-component-helpers.spec.ts    | 208 ++++-----
 container/test/utilities/helpers.spec.ts      | 323 +++++++------
 container/tsconfig.json                       |   1 +
 container/typings/constants/event-type.d.ts   |  26 +-
 18 files changed, 749 insertions(+), 615 deletions(-)
 create mode 100644 container/src/constants/container.model.ts

diff --git a/container/package.json b/container/package.json
index 6f1fdfee1a..97b74199e6 100644
--- a/container/package.json
+++ b/container/package.json
@@ -46,6 +46,7 @@
     "@types/jest": "^29.5.12",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/parser": "^8.13.0",
+    "@typescript-eslint/typescript-estree": "^8.13.0",
     "chokidar-cli": "^3.0.0",
     "cli-color": "^2.0.4",
     "concurrently": "^7.6.0",
@@ -65,7 +66,6 @@
     "svelte-preprocess": "5.0.4",
     "tslib": "2.6.1",
     "typescript": "5.1.6",
-    "@typescript-eslint/typescript-estree": "^8.13.0",
     "typescript-eslint": "^8.13.0"
   },
   "engines": {
diff --git a/container/src/LuigiCompoundContainer.svelte b/container/src/LuigiCompoundContainer.svelte
index 9a6fe53660..2360c3dd87 100644
--- a/container/src/LuigiCompoundContainer.svelte
+++ b/container/src/LuigiCompoundContainer.svelte
@@ -62,11 +62,13 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { Events } from './constants/communication';
+  import type { ContainerElement } from './constants/container.model';
   import { ContainerService } from './services/container.service';
   import { WebComponentService } from './services/webcomponents.service';
-  import { Events } from './constants/communication';
   import { GenericHelperFunctions } from './utilities/helpers';
 
+  /* eslint-disable */
   export let activeFeatureToggleList: string[];
   export let anchor: string;
   export let clientPermissions: any;
@@ -86,10 +88,11 @@
   export let userSettings: any;
   export let viewurl: string;
   export let webcomponent: any;
+  /* eslint-enable */
 
   let containerInitialized = false;
-  let mainComponent: HTMLElement;
-  let eventBusElement: HTMLElement;
+  let mainComponent: ContainerElement;
+  let eventBusElement: ContainerElement;
 
   const containerService = new ContainerService();
   const webcomponentService = new WebComponentService();
@@ -114,11 +117,12 @@
     );
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const initialize = (thisComponent: any) => {
     if (!compoundConfig || containerInitialized) {
       return;
     }
-    thisComponent.updateContext = (contextObj: any, internal?: any) => {
+    thisComponent.updateContext = (contextObj: object, internal?: object) => {
       const rootElement = thisComponent.getNoShadow() ? thisComponent : mainComponent;
       rootElement._luigi_mfe_webcomponent.context = contextObj;
 
@@ -149,14 +153,14 @@
     }
     webcomponentService
       .renderWebComponentCompound(node, thisComponent.getNoShadow() ? thisComponent : mainComponent, ctx)
-      .then((compCnt) => {
-        eventBusElement = compCnt as HTMLElement;
+      .then((compCnt: ContainerElement) => {
+        eventBusElement = compCnt;
         if (skipInitCheck || !node.viewUrl) {
           thisComponent.initialized = true;
           setTimeout(() => {
             webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
           });
-        } else if ((eventBusElement as any).LuigiClient && !(eventBusElement as any).deferLuigiClientWCInit) {
+        } else if (eventBusElement.LuigiClient && !eventBusElement.deferLuigiClientWCInit) {
           thisComponent.initialized = true;
           webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
         }
@@ -166,6 +170,7 @@
   };
 
   onMount(async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const thisComponent: any =
       mainComponent.getRootNode() === document
         ? mainComponent.parentNode
diff --git a/container/src/LuigiContainer.svelte b/container/src/LuigiContainer.svelte
index 1f848191f4..120f6f6e0f 100644
--- a/container/src/LuigiContainer.svelte
+++ b/container/src/LuigiContainer.svelte
@@ -58,13 +58,15 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { containerService } from './services/container.service';
-  import { WebComponentService } from './services/webcomponents.service';
   import { ContainerAPI } from './api/container-api';
   import { Events } from './constants/communication';
-  import { GenericHelperFunctions } from './utilities/helpers';
+  import type { IframeHandle, ContainerElement } from './constants/container.model';
+  import { containerService } from './services/container.service';
   import { getAllowRules } from './services/iframe-helpers';
+  import { WebComponentService } from './services/webcomponents.service';
+  import { GenericHelperFunctions } from './utilities/helpers';
 
+  /* eslint-disable */
   export let activeFeatureToggleList: string[];
   export let allowRules: string[];
   export let anchor: string;
@@ -88,9 +90,10 @@
   export let userSettings: any;
   export let viewurl: string;
   export let webcomponent: any;
+  /* eslint-enable */
 
-  const iframeHandle: { iframe: HTMLIFrameElement } | any = {};
-  let mainComponent: HTMLElement;
+  const iframeHandle: IframeHandle = {};
+  let mainComponent: ContainerElement;
   let containerInitialized = false;
 
   const webcomponentService = new WebComponentService();
@@ -119,9 +122,10 @@
     );
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const initialize = (thisComponent: any) => {
     if (!containerInitialized) {
-      thisComponent.sendCustomMessage = (id: string, data?: any) => {
+      thisComponent.sendCustomMessage = (id: string, data?: object) => {
         ContainerAPI.sendCustomMessage(
           id,
           thisComponent.getNoShadow() ? thisComponent : mainComponent,
@@ -131,7 +135,7 @@
         );
       };
 
-      thisComponent.updateContext = (contextObj: any, internal?: any) => {
+      thisComponent.updateContext = (contextObj: object, internal?: object) => {
         if (webcomponent) {
           (thisComponent.getNoShadow() ? thisComponent : mainComponent)._luigi_mfe_webcomponent.context = contextObj;
         } else {
@@ -139,7 +143,7 @@
         }
       };
 
-      thisComponent.closeAlert = (id: any, dismissKey: any) => {
+      thisComponent.closeAlert = (id: string, dismissKey: string) => {
         ContainerAPI.closeAlert(id, dismissKey, iframeHandle);
       };
 
@@ -179,8 +183,7 @@
       } else if (webcomponent) {
         (thisComponent.getNoShadow() ? thisComponent : mainComponent).addEventListener('wc_ready', () => {
           if (
-            !(thisComponent.getNoShadow() ? thisComponent : (mainComponent as any))._luigi_mfe_webcomponent
-              ?.deferLuigiClientWCInit
+            !(thisComponent.getNoShadow() ? thisComponent : mainComponent)._luigi_mfe_webcomponent?.deferLuigiClientWCInit
           ) {
             thisComponent.initialized = true;
             webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
@@ -193,6 +196,7 @@
   };
 
   onMount(async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const thisComponent: any = mainComponent.parentNode;
     thisComponent.iframeHandle = iframeHandle;
     thisComponent.init = () => {
diff --git a/container/src/api/container-api.ts b/container/src/api/container-api.ts
index 6e80dad1b4..632bf67a44 100644
--- a/container/src/api/container-api.ts
+++ b/container/src/api/container-api.ts
@@ -1,3 +1,4 @@
+import type { IframeHandle, ContainerElement } from '../constants/container.model';
 import { LuigiInternalMessageID } from '../constants/internal-communication';
 import { containerService } from '../services/container.service';
 
@@ -8,7 +9,7 @@ export class ContainerAPIFunctions {
    * @param internal internal luigi legacy data
    * @param iframeHandle a reference to the iframe that is needed to send a message to it internally
    */
-  updateContext = (contextObj: any, internal?: any, iframeHandle?: any) => {
+  updateContext = (contextObj: object, internal?: object, iframeHandle?: IframeHandle) => {
     if (iframeHandle) {
       const internalParameter = internal || {};
       containerService.sendCustomMessageToIframe(
@@ -31,7 +32,7 @@ export class ContainerAPIFunctions {
    * @param iframeHandle a reference to the iframe that is needed to send a message to it internally
    * @param authData the authData object being sent to the microfrontend
    */
-  updateAuthData = (iframeHandle: any, authData: any) => {
+  updateAuthData = (iframeHandle: IframeHandle, authData: object) => {
     if (iframeHandle && authData) {
       containerService.sendCustomMessageToIframe(iframeHandle, { authData }, LuigiInternalMessageID.AUTH_SET_TOKEN);
     } else {
@@ -47,15 +48,21 @@ export class ContainerAPIFunctions {
    * @param iframeHandle a reference to the iframe to be affected
    * @param data data to be sent alongside the custom message
    */
-  sendCustomMessage = (id: string, mainComponent: any, isWebcomponent: boolean, iframeHandle: any, data?: any) => {
-    if (isWebcomponent && (mainComponent as any)._luigi_mfe_webcomponent) {
-      containerService.dispatch(id, (mainComponent as any)._luigi_mfe_webcomponent, data);
+  sendCustomMessage = (
+    id: string,
+    mainComponent: ContainerElement,
+    isWebcomponent: boolean,
+    iframeHandle: IframeHandle,
+    data?: object
+  ) => {
+    if (isWebcomponent && mainComponent._luigi_mfe_webcomponent) {
+      containerService.dispatch(id, mainComponent._luigi_mfe_webcomponent, data);
     } else {
       const msg = { ...data };
-      if (msg.id) {
+      if (msg['id']) {
         console.warn('Property "id" is reserved and can not be used in custom message data');
       }
-      msg.id = id;
+      msg['id'] = id;
       containerService.sendCustomMessageToIframe(iframeHandle, msg);
     }
   };
@@ -66,7 +73,7 @@ export class ContainerAPIFunctions {
    * @param dismissKey the dismiss key being sent if any
    * @param iframeHandle the handle of the iframe to send the message to
    */
-  closeAlert(id: any, dismissKey: any, iframeHandle: any) {
+  closeAlert(id: string, dismissKey: string, iframeHandle: IframeHandle) {
     containerService.sendCustomMessageToIframe(iframeHandle, { id, dismissKey }, LuigiInternalMessageID.ALERT_CLOSED);
   }
 }
diff --git a/container/src/constants/container.model.ts b/container/src/constants/container.model.ts
new file mode 100644
index 0000000000..f1321bf1bc
--- /dev/null
+++ b/container/src/constants/container.model.ts
@@ -0,0 +1,58 @@
+export interface IframeHandle {
+  data?: string;
+  iframe: HTMLIFrameElement;
+}
+
+export interface ContainerElement extends HTMLElement {
+  iframeHandle?: IframeHandle;
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export interface LayoutConfig {
+  column?: string;
+  row?: string;
+  slot?: string;
+}
+
+export interface RendererLayout {
+  columns?: string;
+  gap?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  rows?: string;
+}
+
+export interface RendererConfig extends RendererLayout {
+  layouts?: RendererLayout[];
+}
+
+export interface RendererUseProps {
+  attachCompoundItem?: (compoundCnt, compoundItemCnt, renderer) => void;
+  createCompoundContainer?: (config, renderer) => HTMLDivElement;
+  createCompoundItemContainer?: (layoutConfig, config?, renderer?) => HTMLDivElement;
+  extends?: string;
+}
+
+export interface RendererObject {
+  config?: RendererConfig;
+  use?: RendererUseProps | string;
+}
+
+export interface WebComponentNode {
+  compound?: {
+    renderer?: RendererObject;
+    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  };
+  webcomponent?: {
+    selfRegistered?: boolean;
+    tagName?: string;
+    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  };
+  viewUrl?: string;
+}
+
+export interface WebComponentRenderer {
+  createCompoundContainer?: () => HTMLDivElement;
+  viewUrl?: string;
+}
diff --git a/container/src/constants/event-type.ts b/container/src/constants/event-type.ts
index 4ce4a02f51..587841bffe 100644
--- a/container/src/constants/event-type.ts
+++ b/container/src/constants/event-type.ts
@@ -1,5 +1,9 @@
-// TODO: Add and extend event to inclide custom typings/interface to make it easier to use on the listener parameter
-export interface ParamsEvent extends Event {}
+/**
+ * ParamsEvent interface is used to make the handling of listener parameter easier
+ */
+export interface ParamsEvent extends Event {
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
 
 /**
  * PathExistsEvent interface is used to make it easier to use the linkManager().pathExists() promise based function
@@ -7,7 +11,7 @@ export interface ParamsEvent extends Event {}
  * It enforces the use of the callback function, since the latter is hardcoded to be 'callback'.
  * This allows to send back the boolean value if the path exists or not.
  * Example Usage:
- * addEventListener('my-event-id' event: PathExistsEvent => {
+ * addEventListener('my-event-id', event: PathExistsEvent => {
  *      event.callback(true);
  *   }
  * };
diff --git a/container/src/main.ts b/container/src/main.ts
index 263b866f72..d091fcbe5d 100644
--- a/container/src/main.ts
+++ b/container/src/main.ts
@@ -1,3 +1,4 @@
+import type { ComponentType } from 'svelte';
 import LuigiContainer from './LuigiContainer.svelte';
 import LuigiCompoundContainer from './LuigiCompoundContainer.svelte';
 import { Events } from './constants/communication';
@@ -8,9 +9,9 @@ export type { PathExistsEvent } from './constants/event-type';
 export default Events;
 
 if (!customElements.get('luigi-container')) {
-  customElements.define('luigi-container', (LuigiContainer as any).element);
+  customElements.define('luigi-container', (LuigiContainer as ComponentType).element);
 }
 
 if (!customElements.get('luigi-compound-container')) {
-  customElements.define('luigi-compound-container', (LuigiCompoundContainer as any).element);
+  customElements.define('luigi-compound-container', (LuigiCompoundContainer as ComponentType).element);
 }
diff --git a/container/src/services/container.service.ts b/container/src/services/container.service.ts
index ef4d6d0313..17d90b1869 100644
--- a/container/src/services/container.service.ts
+++ b/container/src/services/container.service.ts
@@ -1,4 +1,5 @@
 import { Events } from '../constants/communication';
+import type { IframeHandle, ContainerElement } from '../constants/container.model';
 import { LuigiInternalMessageID } from '../constants/internal-communication';
 import { GenericHelperFunctions } from '../utilities/helpers';
 
@@ -20,7 +21,7 @@ export class ContainerService {
    * @param msg the message to be sent
    * @param msgName the optional message name
    */
-  sendCustomMessageToIframe(iframeHandle: any, msg: any, msgName?: string) {
+  sendCustomMessageToIframe(iframeHandle: IframeHandle, msg: object, msgName?: string) {
     const messageName = msgName || 'custom';
 
     if (iframeHandle.iframe.contentWindow) {
@@ -38,16 +39,22 @@ export class ContainerService {
   /**
    * Dispatch an event to the given target container
    * @param {string} msg the event message
-   * @param {HTMLElement} targetCnt the targeted HTML element onto which the event is dispatched
-   * @param {any} data custom data added to the event to be dispatched
+   * @param {ContainerElement} targetCnt the targeted HTML element onto which the event is dispatched
+   * @param {Object} data custom data added to the event to be dispatched
    * @param {Function} callback
    * @param {string} callbackName
    */
-  dispatch(msg: string, targetCnt: HTMLElement, data: any, callback?: (any) => void, callbackName?: string): void {
+  dispatch(
+    msg: string,
+    targetCnt: ContainerElement,
+    data: object,
+    callback?: (arg?) => void,
+    callbackName?: string
+  ): void {
     const customEvent = new CustomEvent(msg, { detail: data });
 
     if (callback && GenericHelperFunctions.isFunction(callback) && callbackName) {
-      (customEvent as any)[callbackName] = (data) => {
+      customEvent[callbackName] = (data) => {
         callback(data);
       };
     }
@@ -59,9 +66,9 @@ export class ContainerService {
    * Retrieves the target container based on the event source.
    *
    * @param event The event object representing the source of the container.
-   * @returns {Object| undefined} The target container object or undefined if not found.
+   * @returns {ContainerElement | undefined} The target container object or undefined if not found.
    */
-  getTargetContainer(event) {
+  getTargetContainer(event): ContainerElement | undefined {
     let cnt;
 
     globalThis.__luigi_container_manager.container.forEach((element) => {
diff --git a/container/src/services/iframe-helpers.ts b/container/src/services/iframe-helpers.ts
index 7a31684586..7051a62a44 100644
--- a/container/src/services/iframe-helpers.ts
+++ b/container/src/services/iframe-helpers.ts
@@ -8,7 +8,7 @@ export const getAllowRules = (allowRules: string[]) => {
   const rules = allowRules;
   rules.forEach((rule, index) => {
     rules[index] = rule + (rule.indexOf(';') != -1 ? '' : ';');
-    rules[index] = (allowRules[index] as any).replaceAll('"', "'");
+    rules[index] = allowRules[index].replaceAll('"', "'");
   });
   return rules.join(' ');
 };
diff --git a/container/src/services/web-component-helpers.ts b/container/src/services/web-component-helpers.ts
index c904ec8d23..75b40c3076 100644
--- a/container/src/services/web-component-helpers.ts
+++ b/container/src/services/web-component-helpers.ts
@@ -1,11 +1,19 @@
+import type {
+  LayoutConfig,
+  RendererConfig,
+  RendererLayout,
+  RendererObject,
+  RendererUseProps
+} from '../constants/container.model';
+
 /**
  * Default compound renderer.
  */
 export class DefaultCompoundRenderer {
-  rendererObject: any;
-  config: any;
+  rendererObject: RendererObject;
+  config: RendererConfig;
 
-  constructor(rendererObj?: any) {
+  constructor(rendererObj?: RendererObject) {
     if (rendererObj) {
       this.rendererObject = rendererObj;
       this.config = rendererObj.config || {};
@@ -14,15 +22,15 @@ export class DefaultCompoundRenderer {
     }
   }
 
-  createCompoundContainer() {
+  createCompoundContainer(): HTMLDivElement {
     return document.createElement('div');
   }
 
-  createCompoundItemContainer(layoutConfig?: any): HTMLDivElement {
+  createCompoundItemContainer(layoutConfig?: object): HTMLDivElement {
     return document.createElement('div');
   }
 
-  attachCompoundItem(compoundCnt, compoundItemCnt): void {
+  attachCompoundItem(compoundCnt: HTMLElement, compoundItemCnt: HTMLElement): void {
     compoundCnt.appendChild(compoundItemCnt);
   }
 }
@@ -33,19 +41,19 @@ export class DefaultCompoundRenderer {
 export class CustomCompoundRenderer extends DefaultCompoundRenderer {
   superRenderer: DefaultCompoundRenderer;
 
-  constructor(rendererObj) {
+  constructor(rendererObj: RendererObject) {
     super(rendererObj || { use: {} });
-    if (rendererObj && rendererObj.use && rendererObj.use.extends) {
+    if (rendererObj && rendererObj.use && (rendererObj.use as RendererUseProps).extends) {
       this.superRenderer = resolveRenderer({
-        use: rendererObj.use.extends,
+        use: (rendererObj.use as RendererUseProps).extends,
         config: rendererObj.config
       });
     }
   }
 
   createCompoundContainer(): HTMLDivElement {
-    if (this.rendererObject.use.createCompoundContainer) {
-      return this.rendererObject.use.createCompoundContainer(this.config, this.superRenderer);
+    if ((this.rendererObject.use as RendererUseProps).createCompoundContainer) {
+      return (this.rendererObject.use as RendererUseProps).createCompoundContainer(this.config, this.superRenderer);
     } else if (this.superRenderer) {
       return this.superRenderer.createCompoundContainer();
     }
@@ -53,8 +61,12 @@ export class CustomCompoundRenderer extends DefaultCompoundRenderer {
   }
 
   createCompoundItemContainer(layoutConfig): HTMLDivElement {
-    if (this.rendererObject.use.createCompoundItemContainer) {
-      return this.rendererObject.use.createCompoundItemContainer(layoutConfig, this.config, this.superRenderer);
+    if ((this.rendererObject.use as RendererUseProps).createCompoundItemContainer) {
+      return (this.rendererObject.use as RendererUseProps).createCompoundItemContainer(
+        layoutConfig,
+        this.config,
+        this.superRenderer
+      );
     } else if (this.superRenderer) {
       return this.superRenderer.createCompoundItemContainer(layoutConfig);
     }
@@ -62,8 +74,12 @@ export class CustomCompoundRenderer extends DefaultCompoundRenderer {
   }
 
   attachCompoundItem(compoundCnt, compoundItemCnt): void {
-    if (this.rendererObject.use.attachCompoundItem) {
-      this.rendererObject.use.attachCompoundItem(compoundCnt, compoundItemCnt, this.superRenderer);
+    if ((this.rendererObject.use as RendererUseProps).attachCompoundItem) {
+      (this.rendererObject.use as RendererUseProps).attachCompoundItem(
+        compoundCnt,
+        compoundItemCnt,
+        this.superRenderer
+      );
     } else if (this.superRenderer) {
       this.superRenderer.attachCompoundItem(compoundCnt, compoundItemCnt);
     } else {
@@ -76,14 +92,14 @@ export class CustomCompoundRenderer extends DefaultCompoundRenderer {
  * Compound Renderer for a css grid compound view.
  */
 export class GridCompoundRenderer extends DefaultCompoundRenderer {
-  createCompoundContainer() {
+  createCompoundContainer(): HTMLDivElement {
     const containerClass = '__lui_compound_' + new Date().getTime();
     const compoundCnt = document.createElement('div');
     compoundCnt.classList.add(containerClass);
     let mediaQueries = '';
 
     if (this.config.layouts) {
-      this.config.layouts.forEach((el) => {
+      this.config.layouts.forEach((el: RendererLayout) => {
         if (el.minWidth || el.maxWidth) {
           let mq = '@media only screen ';
           if (el.minWidth != null) {
@@ -121,7 +137,7 @@ export class GridCompoundRenderer extends DefaultCompoundRenderer {
     return compoundCnt;
   }
 
-  createCompoundItemContainer(layoutConfig): HTMLDivElement {
+  createCompoundItemContainer(layoutConfig: LayoutConfig): HTMLDivElement {
     const config = layoutConfig || {};
     const compoundItemCnt = document.createElement('div');
     compoundItemCnt.setAttribute('style', `grid-row: ${config.row || 'auto'}; grid-column: ${config.column || 'auto'}`);
@@ -136,16 +152,16 @@ export class GridCompoundRenderer extends DefaultCompoundRenderer {
  *
  * @param {*} rendererConfig the renderer config object defined in luigi config
  */
-export const resolveRenderer = (rendererConfig) => {
-  const rendererDef = rendererConfig.use;
+export const resolveRenderer = (rendererConfig: RendererObject) => {
+  const rendererDef: RendererUseProps | string = rendererConfig.use;
   if (!rendererDef) {
     return new DefaultCompoundRenderer(rendererConfig);
   } else if (rendererDef === 'grid') {
     return new GridCompoundRenderer(rendererConfig);
   } else if (
-    rendererDef.createCompoundContainer ||
-    rendererDef.createCompoundItemContainer ||
-    rendererDef.attachCompoundItem
+    (rendererDef as RendererUseProps).createCompoundContainer ||
+    (rendererDef as RendererUseProps).createCompoundItemContainer ||
+    (rendererDef as RendererUseProps).attachCompoundItem
   ) {
     return new CustomCompoundRenderer(rendererConfig);
   }
@@ -193,8 +209,9 @@ export const deSanitizeParamsMap = (paramsMap) => {
   }, {});
 };
 
-function deSanitizeParam(param: any) {
-  const desani = (String as any)(param)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function deSanitizeParam(value: any): string {
+  const desani = String(value)
     .replaceAll('&lt;', '<')
     .replaceAll('&gt;', '>')
     .replaceAll('&quot;', '"')
diff --git a/container/src/services/webcomponents.service.ts b/container/src/services/webcomponents.service.ts
index 0e97a753a9..d3762b818a 100644
--- a/container/src/services/webcomponents.service.ts
+++ b/container/src/services/webcomponents.service.ts
@@ -7,11 +7,17 @@ import {
 } from './web-component-helpers';
 import { ContainerService } from './container.service';
 import { Events } from '../constants/communication';
+import type {
+  ContainerElement,
+  LayoutConfig,
+  WebComponentNode,
+  WebComponentRenderer
+} from '../constants/container.model';
 
 /** Methods for dealing with web components based micro frontend handling */
 export class WebComponentService {
   containerService: ContainerService;
-  thisComponent: any;
+  thisComponent: ContainerElement;
 
   constructor() {
     this.containerService = new ContainerService();
@@ -22,7 +28,7 @@ export class WebComponentService {
     return Object.freeze(import(/* webpackIgnore: true */ viewUrl));
   }
 
-  processViewUrl(viewUrl: string, data?: any): string {
+  processViewUrl(viewUrl: string, data?: object): string {
     return viewUrl;
   }
 
@@ -41,8 +47,8 @@ export class WebComponentService {
   attachWC(
     wc_id: string,
     wcItemPlaceholder: HTMLDivElement,
-    wc_container,
-    ctx,
+    wc_container: ContainerElement,
+    ctx: object,
     viewUrl: string,
     nodeId: string,
     isCompoundChild?: boolean
@@ -70,7 +76,7 @@ export class WebComponentService {
    * @param data the data to be sent
    * @param callback the callback function to be called
    */
-  dispatchLuigiEvent(msg: string, data: any, callback?: () => void) {
+  dispatchLuigiEvent(msg: string, data: object, callback?: () => void) {
     this.containerService.dispatch(msg, this.thisComponent, data, callback);
   }
 
@@ -87,7 +93,13 @@ export class WebComponentService {
    * @param isCompoundChild defines if rendered mf is a compound child or not
    * @returns an object with the Luigi Client API
    */
-  createClientAPI(eventBusElement, nodeId: string, wc_id: string, component: HTMLElement, isCompoundChild?: boolean) {
+  createClientAPI(
+    eventBusElement: ContainerElement,
+    nodeId: string,
+    wc_id: string,
+    component: HTMLElement,
+    isCompoundChild?: boolean
+  ) {
     return {
       linkManager: () => {
         let fromContext = null;
@@ -353,11 +365,11 @@ export class WebComponentService {
    * @param isCompoundChild defines if rendered mf is a compound child or not
    */
   initWC(
-    wc: HTMLElement | any,
-    wc_id,
-    eventBusElement,
+    wc: HTMLElement | any, // eslint-disable-line @typescript-eslint/no-explicit-any
+    wc_id: string,
+    eventBusElement: ContainerElement,
     viewUrl: string,
-    ctx,
+    ctx: object,
     nodeId: string,
     isCompoundChild?: boolean
   ) {
@@ -380,7 +392,7 @@ export class WebComponentService {
    * returns a string that can be used as part of a tagname, only alphanumeric
    * characters and no whitespaces.
    */
-  generateWCId(viewUrl: string) {
+  generateWCId(viewUrl: string): string {
     let charRep = '';
     const normalizedViewUrl = new URL(viewUrl, encodeURI(location.href)).href;
     for (let i = 0; i < normalizedViewUrl.length; i++) {
@@ -397,7 +409,7 @@ export class WebComponentService {
    * @param wc_id a tagname that is used when creating the web component element
    * @returns a promise that gets resolved after successfull import
    */
-  registerWCFromUrl(viewUrl: string, wc_id: string) {
+  registerWCFromUrl(viewUrl: string, wc_id: string): Promise<unknown> {
     const i18nViewUrl = this.processViewUrl(viewUrl);
     return new Promise((resolve, reject) => {
       if (this.checkWCUrl(i18nViewUrl)) {
@@ -440,7 +452,7 @@ export class WebComponentService {
    * @param {*} viewUrl the source of the wc bundle
    * @param {*} onload callback function executed after script attached and loaded
    */
-  includeSelfRegisteredWCFromUrl(node, viewUrl, onload) {
+  includeSelfRegisteredWCFromUrl(node: WebComponentNode, viewUrl: string, onload: () => void) {
     if (this.checkWCUrl(viewUrl)) {
       /** Append reg function to luigi object if not present */
       if (!this.containerService.getContainerManager()._registerWebcomponent) {
@@ -481,7 +493,7 @@ export class WebComponentService {
    *
    * @param {*} url the url string to check
    */
-  checkWCUrl(url: string) {
+  checkWCUrl(url: string): boolean {
     // if (url.indexOf('://') > 0 || url.trim().indexOf('//') === 0) {
     //   const ur = new URL(url);
     //   if (ur.host === window.location.host) {
@@ -522,10 +534,10 @@ export class WebComponentService {
    */
   renderWebComponent(
     viewUrl: string,
-    wc_container: HTMLElement | any,
-    context: any,
-    node: any,
-    nodeId?: any,
+    wc_container: HTMLElement | any, // eslint-disable-line @typescript-eslint/no-explicit-any
+    context: object,
+    node: WebComponentNode,
+    nodeId?: string,
     isCompoundChild?: boolean
   ) {
     const i18nViewUrl = this.processViewUrl(viewUrl, { context });
@@ -538,11 +550,13 @@ export class WebComponentService {
       this.attachWC(wc_id, wcItemPlaceholder, wc_container, context, i18nViewUrl, nodeId, isCompoundChild);
     } else {
       /** Custom import function, if defined */
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if ((window as any).luigiWCFn) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).luigiWCFn(i18nViewUrl, wc_id, wcItemPlaceholder, () => {
           this.attachWC(wc_id, wcItemPlaceholder, wc_container, context, i18nViewUrl, nodeId, isCompoundChild);
         });
-      } else if (node.webcomponent && node.webcomponent.selfRegistered) {
+      } else if (node?.webcomponent?.selfRegistered) {
         this.includeSelfRegisteredWCFromUrl(node, i18nViewUrl, () => {
           this.attachWC(wc_id, wcItemPlaceholder, wc_container, context, i18nViewUrl, nodeId, isCompoundChild);
         });
@@ -566,15 +580,19 @@ export class WebComponentService {
    *
    * @param {DefaultCompoundRenderer} renderer
    */
-  createCompoundContainerAsync(renderer: any, ctx: any, navNode: any): Promise<HTMLElement> {
+  createCompoundContainerAsync(
+    renderer: WebComponentRenderer,
+    ctx: object,
+    navNode: WebComponentNode
+  ): Promise<HTMLElement> {
     return new Promise((resolve, reject) => {
       if (renderer.viewUrl) {
         try {
           const wc_id = navNode?.webcomponent?.tagName || this.generateWCId(renderer.viewUrl);
-          if (navNode.webcomponent && navNode.webcomponent.selfRegistered) {
+          if (navNode?.webcomponent?.selfRegistered) {
             this.includeSelfRegisteredWCFromUrl(navNode, renderer.viewUrl, () => {
               const wc = document.createElement(wc_id);
-              wc.setAttribute('lui_web_component', true);
+              wc.setAttribute('lui_web_component', 'true');
               this.initWC(wc, wc_id, wc, renderer.viewUrl, ctx, '_root');
               resolve(wc);
             });
@@ -582,7 +600,7 @@ export class WebComponentService {
             this.registerWCFromUrl(renderer.viewUrl, wc_id)
               .then(() => {
                 const wc = document.createElement(wc_id);
-                wc.setAttribute('lui_web_component', true);
+                wc.setAttribute('lui_web_component', 'true');
                 this.initWC(wc, wc_id, wc, renderer.viewUrl, ctx, '_root');
                 resolve(wc);
               })
@@ -606,17 +624,21 @@ export class WebComponentService {
    * micro frontend.
    *
    * @param {*} navNode the navigation node defining the compound
-   * @param {HTMLElement} wc_container the web component container dom element
+   * @param {ContainerElement} wc_container the web component container dom element
    * @param {*} context the luigi node context
    */
-  renderWebComponentCompound(navNode, wc_container: HTMLElement, context) {
+  renderWebComponentCompound(
+    navNode: WebComponentNode,
+    wc_container: ContainerElement,
+    context: object
+  ): Promise<ContainerElement> {
     let renderer;
     if (navNode.webcomponent && navNode.viewUrl) {
       renderer = new DefaultCompoundRenderer();
       renderer.viewUrl = this.processViewUrl(navNode.viewUrl, { context });
-      renderer.createCompoundItemContainer = (layoutConfig) => {
+      renderer.createCompoundItemContainer = (layoutConfig: LayoutConfig) => {
         const cnt = document.createElement('div');
-        if (layoutConfig && layoutConfig.slot) {
+        if (layoutConfig?.slot) {
           cnt.setAttribute('slot', layoutConfig.slot);
         }
         return cnt;
@@ -628,11 +650,11 @@ export class WebComponentService {
     renderer = renderer || new DefaultCompoundRenderer();
     return new Promise((resolve) => {
       this.createCompoundContainerAsync(renderer, context, navNode)
-        .then((compoundCnt: HTMLElement) => {
-          (wc_container as any)._luigi_mfe_webcomponent = compoundCnt;
-          (wc_container as any)._luigi_node = navNode;
+        .then((compoundCnt: ContainerElement) => {
+          wc_container._luigi_mfe_webcomponent = compoundCnt;
+          wc_container._luigi_node = navNode;
           const ebListeners = {};
-          (compoundCnt as any).eventBus = {
+          compoundCnt.eventBus = {
             listeners: ebListeners,
             onPublishEvent: (event, srcNodeId, wcId) => {
               const listeners = ebListeners[srcNodeId + '.' + event.type] || [];
@@ -653,11 +675,11 @@ export class WebComponentService {
               });
             }
           };
-          navNode.compound?.children.forEach((wc, index) => {
+          navNode.compound?.children?.forEach((wc, index) => {
             const ctx = { ...context, ...wc.context };
             const compoundItemCnt = renderer.createCompoundItemContainer(wc.layoutConfig);
 
-            compoundItemCnt.eventBus = (compoundCnt as any).eventBus;
+            compoundItemCnt.eventBus = compoundCnt.eventBus;
             renderer.attachCompoundItem(compoundCnt, compoundItemCnt);
 
             const nodeId = wc.id || 'gen_' + index;
diff --git a/container/src/utilities/helpers.ts b/container/src/utilities/helpers.ts
index 408f2cf592..9ec1d13a9c 100644
--- a/container/src/utilities/helpers.ts
+++ b/container/src/utilities/helpers.ts
@@ -4,26 +4,26 @@ export class GenericHelpersClass {
    * Keep one in the end
    *
    * Checks if input is a function.
-   * @param {any} functionToCheck function to check
+   * @param {Function} functionToCheck function to check
    * @returns {boolean}
    */
-  isFunction(functionToCheck: any): boolean {
+  isFunction(functionToCheck: (arg) => void): boolean {
     return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
   }
 
   /**
    * Checks if input is an object.
-   * @param objectToCheck mixed
+   * @param {Object} objectToCheck mixed
    * @returns {boolean}
    */
-  isObject(objectToCheck): boolean {
+  isObject(objectToCheck: object): boolean {
     return !!(objectToCheck && typeof objectToCheck === 'object' && !Array.isArray(objectToCheck));
   }
 
   /**
    * Checks whether web component is an attribute or property. In case of attribute, it returns the parsed value.
-   * @param {object | boolean | string} webcomponent value can either be an object, boolean or a stringified object, e.g webcomponent='{"selfregistered":"true"}'
-   * @returns {object | boolean} webcomponent returns the parsed webcomponent value.
+   * @param {Object | boolean | string} webcomponent value can either be an object, boolean or a stringified object, e.g webcomponent='{"selfregistered":"true"}'
+   * @returns {Object | boolean} webcomponent returns the parsed webcomponent value.
    */
   checkWebcomponentValue(webcomponent: object | boolean | string): object | boolean {
     if (typeof webcomponent === 'string') {
@@ -38,8 +38,8 @@ export class GenericHelpersClass {
   /**
    * Resolves the context to an object. If the context is a string, it attempts to parse
    * it as JSON. If parsing fails JSON parse error will be thrown.
-   * @param {object | string} context - The context to be resolved.
-   * @returns {object} The resolved context as an object.
+   * @param {Object | string} context - The context to be resolved.
+   * @returns {Object} The resolved context as an object.
    */
   resolveContext(context: object | string): object {
     return context ? (typeof context === 'string' ? JSON.parse(context) : context) : {};
diff --git a/container/test/api/container-api.spec.ts b/container/test/api/container-api.spec.ts
index 5bbdfb0c2f..2cb8f7c576 100644
--- a/container/test/api/container-api.spec.ts
+++ b/container/test/api/container-api.spec.ts
@@ -1,229 +1,239 @@
-import { LuigiInternalMessageID } from '../../src/constants/internal-communication';
-import { Events } from '../../src/constants/communication';
 import { ContainerAPIFunctions } from '../../src/api/container-api';
+import { LuigiInternalMessageID } from '../../src/constants/internal-communication';
+import type { IframeHandle, ContainerElement } from '../../src/constants/container.model';
 import { containerService } from '../../src/services/container.service';
 
-
 describe('Container Service', () => {
-    describe('updateContext', () => {
-        let containerAPI = new ContainerAPIFunctions();
-
-        it('iframeHandle exists, WITH internalParam', () => {
-            // mock and spy
-            const contextObj = {};
-            const internal = { empty: false };
-            const iframeHandle = {
-                data: 'test'
-            };
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-
-            // act
-            containerAPI.updateContext(contextObj, internal, iframeHandle);
-
-            // assert
-            expect(spy).toHaveBeenCalledWith(iframeHandle, { context: contextObj, internal: internal, withoutSync: true }, LuigiInternalMessageID.SEND_CONTEXT_OBJECT)
-        });
-
-        it('iframeHandle exists, UNDEFINED internalParam ', () => {
-            // mock and spy
-            const contextObj = {};
-            const internal = undefined;
-            const iframeHandle = {
-                data: 'test'
-            };
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-
-            // act
-            containerAPI.updateContext(contextObj, internal, iframeHandle);
-
-            // assert
-            expect(spy).toHaveBeenCalledWith(iframeHandle, { context: contextObj, internal: {}, withoutSync: true }, LuigiInternalMessageID.SEND_CONTEXT_OBJECT)
-        });
-
-
-        it('iframeHandle NOT exists', () => {
-            // mock and spy
-            const contextObj = {};
-            const internal = {};
-            const iframeHandle = undefined;
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-            const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
-
-            // act
-            containerAPI.updateContext(contextObj, internal, iframeHandle);
-
-            // assert
-            expect(sendCustomMSGSpy).not.toHaveBeenCalled();
-            expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update context on inexisting iframe')
-        });
+  describe('updateContext', () => {
+    const containerAPI = new ContainerAPIFunctions();
+
+    it('iframeHandle exists, WITH internalParam', () => {
+      // mock and spy
+      const contextObj = {};
+      const internal = { empty: false };
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+
+      // act
+      containerAPI.updateContext(contextObj, internal, iframeHandle);
+
+      // assert
+      expect(spy).toHaveBeenCalledWith(
+        iframeHandle,
+        { context: contextObj, internal: internal, withoutSync: true },
+        LuigiInternalMessageID.SEND_CONTEXT_OBJECT
+      );
+    });
+
+    it('iframeHandle exists, UNDEFINED internalParam ', () => {
+      // mock and spy
+      const contextObj = {};
+      const internal = undefined;
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+
+      // act
+      containerAPI.updateContext(contextObj, internal, iframeHandle);
+
+      // assert
+      expect(spy).toHaveBeenCalledWith(
+        iframeHandle,
+        { context: contextObj, internal: {}, withoutSync: true },
+        LuigiInternalMessageID.SEND_CONTEXT_OBJECT
+      );
     });
 
-    describe('updateAuthData', () => {
-        let containerAPI = new ContainerAPIFunctions();
-
-        it('iframeHandle exists, authData exists', () => {
-            // mock and spy
-            const authData = { someData: 'mytoken'};
-            const iframeHandle = {
-                data: 'test'
-            };
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-
-            // act
-            containerAPI.updateAuthData(iframeHandle, authData);
-
-            // assert
-            expect(spy).toHaveBeenCalledWith(iframeHandle, {authData}, LuigiInternalMessageID.AUTH_SET_TOKEN)
-        });
-
-        it('iframeHandle undefined, authData exists', () => {
-             // mock and spy
-             const authData = undefined;
-             const iframeHandle = undefined;
-             containerService.sendCustomMessageToIframe = jest.fn();
-             const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-             const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
- 
-             // act
-             containerAPI.updateAuthData(iframeHandle, authData);
- 
-             // assert
-             expect(sendCustomMSGSpy).not.toHaveBeenCalled();
-             expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update auth data on inexisting iframe or authData')
-        });
-
-
-        it('iframeHandle exists, authData undefined', () => {
-             // mock and spy
-             const authData = undefined;
-             const iframeHandle = undefined;
-             containerService.sendCustomMessageToIframe = jest.fn();
-             const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-             const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
- 
-             // act
-             containerAPI.updateAuthData(iframeHandle, authData);
- 
-             // assert
-             expect(sendCustomMSGSpy).not.toHaveBeenCalled();
-             expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update auth data on inexisting iframe or authData')
-        });
-
-        it('iframeHandle undefined, authData undefined', () => {
-            // mock and spy
-            const authData = undefined;
-            const iframeHandle = undefined;
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-            const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
-
-            // act
-            containerAPI.updateAuthData(iframeHandle, authData);
-
-            // assert
-            expect(sendCustomMSGSpy).not.toHaveBeenCalled();
-            expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update auth data on inexisting iframe or authData')
-        });
+    it('iframeHandle NOT exists', () => {
+      // mock and spy
+      const contextObj = {};
+      const internal = {};
+      const iframeHandle = undefined;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+
+      // act
+      containerAPI.updateContext(contextObj, internal, iframeHandle);
+
+      // assert
+      expect(sendCustomMSGSpy).not.toHaveBeenCalled();
+      expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update context on inexisting iframe');
     });
+  });
+
+  describe('updateAuthData', () => {
+    const containerAPI = new ContainerAPIFunctions();
 
-    describe('closeAlert', () => {
-        let containerAPI = new ContainerAPIFunctions();
+    it('iframeHandle exists, authData exists', () => {
+      // mock and spy
+      const authData = { someData: 'mytoken' };
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
 
-        it('internal method properly called', () => {
-            // mock and spy
-            const id = 'some-id';
-            const dismissKey = 'key';
-            const iframeHandle = {
-                data: 'test'
-            };
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      // act
+      containerAPI.updateAuthData(iframeHandle, authData);
+
+      // assert
+      expect(spy).toHaveBeenCalledWith(iframeHandle, { authData }, LuigiInternalMessageID.AUTH_SET_TOKEN);
+    });
 
-            containerAPI.closeAlert(id, dismissKey, iframeHandle);
+    it('iframeHandle undefined, authData exists', () => {
+      // mock and spy
+      const authData = undefined;
+      const iframeHandle = undefined;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+
+      // act
+      containerAPI.updateAuthData(iframeHandle, authData);
+
+      // assert
+      expect(sendCustomMSGSpy).not.toHaveBeenCalled();
+      expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update auth data on inexisting iframe or authData');
+    });
+
+    it('iframeHandle exists, authData undefined', () => {
+      // mock and spy
+      const authData = undefined;
+      const iframeHandle = undefined;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+
+      // act
+      containerAPI.updateAuthData(iframeHandle, authData);
+
+      // assert
+      expect(sendCustomMSGSpy).not.toHaveBeenCalled();
+      expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update auth data on inexisting iframe or authData');
+    });
+
+    it('iframeHandle undefined, authData undefined', () => {
+      // mock and spy
+      const authData = undefined;
+      const iframeHandle = undefined;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+
+      // act
+      containerAPI.updateAuthData(iframeHandle, authData);
+
+      // assert
+      expect(sendCustomMSGSpy).not.toHaveBeenCalled();
+      expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update auth data on inexisting iframe or authData');
+    });
+  });
+
+  describe('closeAlert', () => {
+    const containerAPI = new ContainerAPIFunctions();
+
+    it('internal method properly called', () => {
+      // mock and spy
+      const id = 'some-id';
+      const dismissKey = 'key';
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+
+      containerAPI.closeAlert(id, dismissKey, iframeHandle);
+
+      expect(spy).toHaveBeenCalledWith(iframeHandle, { id, dismissKey }, LuigiInternalMessageID.ALERT_CLOSED);
+    });
+  });
+
+  describe('sendCustomMessage', () => {
+    const containerAPI = new ContainerAPIFunctions();
+
+    beforeEach(() => {
+      // jest.restoreAllMocks();
+      jest.resetAllMocks();
+    });
+
+    it('isWebComponent microfrontend', () => {
+      // mock and spy
+      const id = 'some-id';
+      const mainComponent = {
+        _luigi_mfe_webcomponent: {
+          testData: 'your wc data'
+        }
+      } as unknown as ContainerElement;
+      const data = {
+        sample: 'test'
+      };
+      const isWebComponent = true;
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+
+      containerService.dispatch = jest.fn();
+      const spy = jest.spyOn(containerService, 'dispatch');
+
+      containerAPI.sendCustomMessage(id, mainComponent, isWebComponent, iframeHandle, data);
+
+      expect(spy).toHaveBeenCalledWith(id, mainComponent._luigi_mfe_webcomponent, data);
+    });
 
-            expect(spy).toHaveBeenCalledWith(iframeHandle, { id, dismissKey }, LuigiInternalMessageID.ALERT_CLOSED)
-        });
+    it('isWebComponent FALSE, WITH msg ID', () => {
+      // mock and spy
+      const id = 'some-id';
+      const mainComponent = {} as unknown as ContainerElement;
+      const data = {
+        id: id
+      };
+      const isWebComponent = false;
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+
+      // act
+      containerAPI.sendCustomMessage(id, mainComponent, isWebComponent, iframeHandle, data);
+
+      // assert
+      expect(sendCustomMSGSpy).toHaveBeenCalledWith(iframeHandle, data);
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Property "id" is reserved and can not be used in custom message data'
+      );
     });
 
-    describe('sendCustomMessage', () => {
-        let containerAPI = new ContainerAPIFunctions();
-        beforeEach(() => {
-            // jest.restoreAllMocks();
-            jest.resetAllMocks();
-        });
-
-        it('isWebComponent microfrontend', () => {
-            // mock and spy
-            const id = 'some-id';
-            const mainComponent = {
-                _luigi_mfe_webcomponent: {
-                    testData: 'your wc data'
-                }
-            };
-            const data = {
-                sample: 'test'
-            };
-            const isWebComponent = true;
-            const iframeHandle = {
-                data: 'test'
-            };
-
-            containerService.dispatch = jest.fn();
-            const spy = jest.spyOn(containerService, 'dispatch');
-
-            containerAPI.sendCustomMessage(id, mainComponent, isWebComponent, iframeHandle, data);
-
-            expect(spy).toHaveBeenCalledWith(id, mainComponent._luigi_mfe_webcomponent, data)
-        });
-
-        it('isWebComponent FALSE, WITH msg ID', () => {
-            // mock and spy
-            const id = 'some-id';
-            const mainComponent = {};
-            const data = {
-                id: id
-            };
-            const isWebComponent = false;
-            const iframeHandle = {
-                data: 'test'
-            };
-
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-            const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
-
-            // act
-            containerAPI.sendCustomMessage(id, mainComponent, isWebComponent, iframeHandle, data);
-
-            // assert
-            expect(sendCustomMSGSpy).toHaveBeenCalledWith(iframeHandle, data)
-            expect(consoleWarnSpy).toHaveBeenCalledWith('Property "id" is reserved and can not be used in custom message data')
-        });
-
-        it('isWebComponent FALSE, UNDEFINED msg ID', () => {
-            // mock and spy
-            const id = 'some-id';
-            const mainComponent = {};
-            const data = {};
-            const isWebComponent = false;
-            const iframeHandle = {
-                data: 'test'
-            };
-
-            containerService.sendCustomMessageToIframe = jest.fn();
-            const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
-            const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => { jest.fn() });
-
-            // act
-            containerAPI.sendCustomMessage(id, mainComponent, isWebComponent, iframeHandle, data);
-
-            // assert
-            expect(sendCustomMSGSpy).toHaveBeenCalledWith(iframeHandle, { id })
-            expect(consoleWarnSpy).not.toHaveBeenCalled();
-        });
+    it('isWebComponent FALSE, UNDEFINED msg ID', () => {
+      // mock and spy
+      const id = 'some-id';
+      const mainComponent = {} as unknown as ContainerElement;
+      const data = {};
+      const isWebComponent = false;
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {
+        jest.fn();
+      });
+
+      // act
+      containerAPI.sendCustomMessage(id, mainComponent, isWebComponent, iframeHandle, data);
+
+      // assert
+      expect(sendCustomMSGSpy).toHaveBeenCalledWith(iframeHandle, { id });
+      expect(consoleWarnSpy).not.toHaveBeenCalled();
     });
+  });
 });
diff --git a/container/test/services/container.service.spec.ts b/container/test/services/container.service.spec.ts
index 3a922af00f..0e2d44a6b3 100644
--- a/container/test/services/container.service.spec.ts
+++ b/container/test/services/container.service.spec.ts
@@ -1,5 +1,6 @@
 import { LuigiInternalMessageID } from '../../src/constants/internal-communication';
 import { Events } from '../../src/constants/communication';
+import type { IframeHandle, ContainerElement } from '../../src/constants/container.model';
 import { ContainerService } from '../../src/services/container.service';
 
 describe('getContainerManager messageListener', () => {
@@ -28,7 +29,7 @@ describe('getContainerManager messageListener', () => {
         dispatchEvent: (customEvent) => {
           dispatchedEvent = customEvent;
         }
-      };
+      } as ContainerElement;
     });
   });
 
@@ -419,13 +420,13 @@ describe('sendCustomMessageToIframe', () => {
 
   it('should send a custom message to the iframe', () => {
     // Arrange
-    const iframeHandle = {
+    const iframeHandle: IframeHandle = {
       iframe: {
         contentWindow: {
           postMessage: jest.fn()
         },
         src: 'https://example.com'
-      }
+      } as unknown as HTMLIFrameElement
     };
     const message = { key: 'value' };
 
@@ -441,13 +442,13 @@ describe('sendCustomMessageToIframe', () => {
 
   it('should send a named message to the iframe', () => {
     // Arrange
-    const iframeHandle = {
+    const iframeHandle: IframeHandle = {
       iframe: {
         contentWindow: {
           postMessage: jest.fn()
         },
         src: 'https://example.com'
-      }
+      } as unknown as HTMLIFrameElement
     };
     const message = { key: 'value' };
 
@@ -463,8 +464,8 @@ describe('sendCustomMessageToIframe', () => {
 
   it('should log an error if contentWindow is not available', () => {
     // Arrange
-    const iframeHandle = {
-      iframe: {}
+    const iframeHandle: IframeHandle = {
+      iframe: {} as unknown as HTMLIFrameElement
     };
     const message = { key: 'value' };
 
@@ -507,7 +508,7 @@ describe('dispatch', () => {
 
   it('should execute the callback when provided', () => {
     // Arrange
-    const targetContainer = document.createElement('div');
+    const targetContainer = document.createElement('div') as unknown as ContainerElement;
     const eventName = 'customEvent';
     const eventData = { key: 'value' };
     targetContainer.dispatchEvent = jest.fn();
@@ -544,15 +545,15 @@ describe('getTargetContainer', () => {
       iframeHandle: {
         iframe: {
           contentWindow: 'source1'
-        }
-      }
+        } as unknown as HTMLIFrameElement
+      } as IframeHandle
     };
     const mockContainer2 = {
       iframeHandle: {
         iframe: {
           contentWindow: 'source2'
-        }
-      }
+        } as unknown as HTMLIFrameElement
+      } as IframeHandle
     };
 
     globalThis.__luigi_container_manager = {
@@ -576,15 +577,15 @@ describe('getTargetContainer', () => {
       iframeHandle: {
         iframe: {
           contentWindow: 'source1'
-        }
-      }
+        } as unknown as HTMLIFrameElement
+      } as IframeHandle
     };
     const mockContainer2 = {
       iframeHandle: {
         iframe: {
           contentWindow: 'source2'
-        }
-      }
+        } as unknown as HTMLIFrameElement
+      } as IframeHandle
     };
 
     globalThis.__luigi_container_manager = {
diff --git a/container/test/services/web-component-helpers.spec.ts b/container/test/services/web-component-helpers.spec.ts
index b50b3b75fe..c3c36f4452 100644
--- a/container/test/services/web-component-helpers.spec.ts
+++ b/container/test/services/web-component-helpers.spec.ts
@@ -1,16 +1,21 @@
-import { GridCompoundRenderer,  CustomCompoundRenderer, deSanitizeParamsMap, DefaultCompoundRenderer } from "../../src/services/web-component-helpers";
-import * as helperFunctions from  "../../src/services/web-component-helpers";
+import type { LayoutConfig, RendererObject, RendererUseProps } from '../../src/constants/container.model';
+import {
+  CustomCompoundRenderer,
+  DefaultCompoundRenderer,
+  GridCompoundRenderer
+} from '../../src/services/web-component-helpers';
+import * as helperFunctions from '../../src/services/web-component-helpers';
 
 describe('DefaultCompoundRenderer', () => {
   it('should create a compound container', () => {
-      // Arrange
-      const renderer = new DefaultCompoundRenderer();
+    // Arrange
+    const renderer = new DefaultCompoundRenderer();
 
-      // Act
-      const compoundContainer = renderer.createCompoundContainer();
+    // Act
+    const compoundContainer = renderer.createCompoundContainer();
 
-      // Assert
-      expect(compoundContainer).toBeInstanceOf(HTMLDivElement);
+    // Assert
+    expect(compoundContainer).toBeInstanceOf(HTMLDivElement);
   });
 
   it('should create a compound item container', () => {
@@ -49,9 +54,9 @@ describe('DefaultCompoundRenderer', () => {
     // Arrange
     const rendererObject = {
       config: {
-        key: 'value',
-      },
-    };
+        key: 'value'
+      }
+    } as RendererObject;
 
     // Act
     const renderer = new DefaultCompoundRenderer(rendererObject);
@@ -71,10 +76,10 @@ describe('CustomCompoundRenderer', () => {
         },
         config: {}
       };
-  
+
       // Act
       const renderer = new CustomCompoundRenderer(rendererObj);
-  
+
       // Assert
       expect(renderer).toBeInstanceOf(CustomCompoundRenderer);
       expect(renderer.superRenderer).toBeDefined();
@@ -90,8 +95,8 @@ describe('CustomCompoundRenderer', () => {
           createCompoundContainer: (config, superRenderer) => {
             // Custom logic for creating a compound container
             return document.createElement('div');
-          },
-        },
+          }
+        }
       };
       const customRenderer = new CustomCompoundRenderer(rendererObj);
 
@@ -103,7 +108,6 @@ describe('CustomCompoundRenderer', () => {
       // You can add more specific assertions for the custom logic
     });
 
-
     it('should create a custom compound container when defined', () => {
       // Arrange
       const rendererObj = {
@@ -111,8 +115,8 @@ describe('CustomCompoundRenderer', () => {
           createCompoundContainer: (config, superRenderer) => {
             // Custom logic for creating a compound container
             return document.createElement('div');
-          },
-        },
+          }
+        }
       };
       const customRenderer = new CustomCompoundRenderer(rendererObj);
 
@@ -127,14 +131,14 @@ describe('CustomCompoundRenderer', () => {
     it('should call the provided createCompoundContainer function', () => {
       const rendererObj = {
         use: {
-          createCompoundContainer: jest.fn(),
+          createCompoundContainer: jest.fn()
         },
-        config: {},
+        config: {}
       };
       // Arrange
       const renderer = new CustomCompoundRenderer(rendererObj);
       const createCompoundContainerFn = jest.fn();
-      renderer.rendererObject.use.createCompoundContainer = createCompoundContainerFn;
+      (renderer.rendererObject.use as RendererUseProps).createCompoundContainer = createCompoundContainerFn;
 
       // Act
       const result = renderer.createCompoundContainer();
@@ -144,36 +148,32 @@ describe('CustomCompoundRenderer', () => {
       expect(createCompoundContainerFn).toHaveBeenCalledWith(renderer.config, renderer.superRenderer);
     });
 
-    it('should call the superRenderer\'s createCompoundContainer when no function is provided', () => {
+    it("should call the superRenderer's createCompoundContainer when no function is provided", () => {
       // Arrange
       const rendererObj = {
-        use: {
-        },
-        config: {},
+        use: {},
+        config: {}
       };
       const renderer = new CustomCompoundRenderer(rendererObj);
-    
+
       const superRenderer = new CustomCompoundRenderer(rendererObj); // Create a mock superRenderer
       renderer.superRenderer = superRenderer;
-      const mockElm = document.createElement('div')
+      const mockElm = document.createElement('div');
       const createCompoundContainerSpy = jest.spyOn(superRenderer, 'createCompoundContainer').mockReturnValue(mockElm);
 
-
       // Act
       const result = renderer.createCompoundContainer();
 
       // Assert
       expect(result).toEqual(mockElm);
-      expect(createCompoundContainerSpy ).toHaveBeenCalled();
+      expect(createCompoundContainerSpy).toHaveBeenCalled();
     });
 
-
     it('should call the super.createCompoundContainer when no function or superRenderer is provided', () => {
       // Arrange
       const rendererObj = {
-        use: {
-        },
-        config: {},
+        use: {},
+        config: {}
       };
       const renderer = new CustomCompoundRenderer(rendererObj);
 
@@ -185,60 +185,58 @@ describe('CustomCompoundRenderer', () => {
     });
   });
 
-
   describe('createCompoundItemContainer', () => {
-      it('should create a compound item container when defined', () => {
-        // Arrange
-        const rendererObj = {
-          use: {
-            createCompoundItemContainer: (layoutConfig, config, superRenderer) => {
-              // Custom logic for creating a compound item container
-              return document.createElement('span');
-            },
-          },
-        };
-        const customRenderer = new CustomCompoundRenderer(rendererObj);
-
-        // Act
-        const compoundItemContainer = customRenderer.createCompoundItemContainer({ layout: 'custom' });
-
-        // Assert
-        expect(compoundItemContainer).toBeInstanceOf(HTMLSpanElement);
-      });
-    
-      it('should create a compound item container from superRenderer', () => {
-        // Arrange
-        const rendererObj = {
-          use: {
-            createCompoundItemContainer: undefined,
-            extends: 'test'
-          },
-        };
-        const customRenderer = new CustomCompoundRenderer(rendererObj);
-
-        const mockDiv = document.createElement('div');
-        mockDiv.style.color = 'red';
-        
-        // Act
-        const compoundItemContainer = customRenderer.createCompoundItemContainer({ layout: 'custom' });
-
-        // Assert
-        expect(compoundItemContainer).toBeInstanceOf(HTMLDivElement);
+    it('should create a compound item container when defined', () => {
+      // Arrange
+      const rendererObj = {
+        use: {
+          createCompoundItemContainer: (layoutConfig, config, superRenderer) => {
+            // Custom logic for creating a compound item container
+            return document.createElement('span');
+          }
+        }
+      } as RendererObject;
+      const customRenderer = new CustomCompoundRenderer(rendererObj);
+
+      // Act
+      const compoundItemContainer = customRenderer.createCompoundItemContainer({ layout: 'custom' });
+
+      // Assert
+      expect(compoundItemContainer).toBeInstanceOf(HTMLSpanElement);
     });
 
+    it('should create a compound item container from superRenderer', () => {
+      // Arrange
+      const rendererObj = {
+        use: {
+          createCompoundItemContainer: undefined,
+          extends: 'test'
+        }
+      };
+      const customRenderer = new CustomCompoundRenderer(rendererObj);
+
+      const mockDiv = document.createElement('div');
+      mockDiv.style.color = 'red';
+
+      // Act
+      const compoundItemContainer = customRenderer.createCompoundItemContainer({ layout: 'custom' });
+
+      // Assert
+      expect(compoundItemContainer).toBeInstanceOf(HTMLDivElement);
+    });
 
     it('should create a compound item container with superRenderer and use undefined', () => {
       // Arrange
       const rendererObj = {
         use: {
-          createCompoundItemContainer: undefined,
-        },
+          createCompoundItemContainer: undefined
+        }
       };
       const customRenderer = new CustomCompoundRenderer(rendererObj);
 
       const mockDiv = document.createElement('div');
       mockDiv.style.color = 'red';
-      
+
       // Act
       const compoundItemContainer = customRenderer.createCompoundItemContainer({ layout: 'custom' });
 
@@ -255,8 +253,8 @@ describe('CustomCompoundRenderer', () => {
           attachCompoundItem: (compoundCnt, compoundItemCnt, superRenderer) => {
             // Custom logic for attaching a compound item
             compoundCnt.appendChild(compoundItemCnt);
-          },
-        },
+          }
+        }
       };
       const customRenderer = new CustomCompoundRenderer(rendererObj);
       const compoundContainer = document.createElement('div');
@@ -275,7 +273,7 @@ describe('CustomCompoundRenderer', () => {
       const rendererObj = {
         use: {
           extends: 'test'
-        },
+        }
       };
       const customRenderer = new CustomCompoundRenderer(rendererObj);
       const compoundContainer = document.createElement('div');
@@ -292,7 +290,7 @@ describe('CustomCompoundRenderer', () => {
     it('should attach a compound item with use and superrenderer undefined', () => {
       // Arrange
       const rendererObj = {
-        use: {},
+        use: {}
       };
       const customRenderer = new CustomCompoundRenderer(rendererObj);
       const compoundContainer = document.createElement('div');
@@ -311,9 +309,8 @@ describe('CustomCompoundRenderer', () => {
 describe('GridCompoundRenderer', () => {
   it('should create a compound container with grid styles', () => {
     // Arrange
-    const rendererObject = 
-   {
-    config: {
+    const rendererObject = {
+      config: {
         columns: '1fr 2fr',
         rows: 'auto',
         gap: '10px',
@@ -325,15 +322,15 @@ describe('GridCompoundRenderer', () => {
             maxWidth: 150,
             columns: '1fr',
             rows: '1fr 1fr',
-            gap: 5,
-          },
-        ],
+            gap: 5
+          }
+        ]
       }
-   };
-   const config = rendererObject.config;
+    } as unknown as RendererObject;
+    const config = rendererObject.config;
     const fixedTimestamp = 1619123456789;
-    const mockDate = new Date(fixedTimestamp)
-    const spyDate = jest.spyOn(global, 'Date').mockImplementation(() => mockDate)
+    const mockDate = new Date(fixedTimestamp);
+    const spyDate = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
     const gridRenderer = new GridCompoundRenderer(rendererObject);
 
     // Act
@@ -350,8 +347,7 @@ describe('GridCompoundRenderer', () => {
     expect(compoundContainer.innerHTML).toContain(`min-height: ${config.minHeight || 'auto'};`);
     expect(compoundContainer.innerHTML).toContain(`and (max-width: ${config.maxWidth}`);
 
-
-    spyDate.mockRestore()
+    spyDate.mockRestore();
     // dateNowSpy.mockRestore();
   });
 
@@ -359,8 +355,8 @@ describe('GridCompoundRenderer', () => {
     // Arrange
     const layoutConfig = {
       row: 1,
-      column: 2,
-    };
+      column: 2
+    } as unknown as LayoutConfig;
 
     const gridRenderer = new GridCompoundRenderer();
 
@@ -386,9 +382,9 @@ describe('registerEventListeners', () => {
           source: 'source1',
           name: 'event1',
           action: 'action1',
-          dataConverter: 'converter1',
-        },
-      ],
+          dataConverter: 'converter1'
+        }
+      ]
     };
     const nodeId = 'node1';
     const wcElement = 'element1';
@@ -405,24 +401,24 @@ describe('registerEventListeners', () => {
       wcElementId: nodeId,
       wcElement: wcElement,
       action: 'action1',
-      converter: 'converter1',
+      converter: 'converter1'
     });
   });
 
   it('should register event listeners when navNode has NO eventListeners', () => {
     // Arrange
     const eventbusListeners = {
-      's.n': [{test: '123'}]
+      's.n': [{ test: '123' }]
     };
     const navNode = {
       eventListeners: [
         {
-          source:'s',
+          source: 's',
           name: 'n',
           action: 'myaction',
           dataConverter: 'myconverter'
         }
-      ],
+      ]
     };
     const nodeId = 'node1';
     const wcElement = 'element1';
@@ -440,7 +436,7 @@ describe('registerEventListeners', () => {
       wcElementId: nodeId,
       wcElement: wcElement,
       action: 'myaction',
-      converter: 'myconverter',
+      converter: 'myconverter'
     });
   });
 
@@ -453,15 +449,15 @@ describe('registerEventListeners', () => {
           source: 'source1',
           name: 'event1',
           action: 'action1',
-          dataConverter: 'converter1',
+          dataConverter: 'converter1'
         },
         {
           source: 'source2',
           name: 'event2',
           action: 'action2',
-          dataConverter: 'converter2',
-        },
-      ],
+          dataConverter: 'converter2'
+        }
+      ]
     };
     const nodeId = 'node1';
     const wcElement = 'element1';
@@ -482,7 +478,7 @@ describe('registerEventListeners', () => {
       wcElementId: nodeId,
       wcElement: wcElement,
       action: 'action1',
-      converter: 'converter1',
+      converter: 'converter1'
     });
 
     expect(listenerList2).toBeDefined();
@@ -491,7 +487,7 @@ describe('registerEventListeners', () => {
       wcElementId: nodeId,
       wcElement: wcElement,
       action: 'action2',
-      converter: 'converter2',
+      converter: 'converter2'
     });
   });
 
diff --git a/container/test/utilities/helpers.spec.ts b/container/test/utilities/helpers.spec.ts
index 8d58c5bec2..d95470e522 100644
--- a/container/test/utilities/helpers.spec.ts
+++ b/container/test/utilities/helpers.spec.ts
@@ -1,163 +1,160 @@
-import { GenericHelperFunctions } from '../../src/utilities/helpers';
-
-describe('GenericHelpers', () => {
-  describe('isFunction function', () => {
-    it('should return true for a function', () => {
-      const testFunction = function () {
-      };
-      const result = GenericHelperFunctions.isFunction(testFunction);
-      expect(result).toBe(true);
-    });
-
-    it('should return true for an arrow function', () => {
-      const testArrowFunction = () => { };
-      const result = GenericHelperFunctions.isFunction(testArrowFunction);
-      expect(result).toBe(true);
-    });
-
-    it('should return false for an object', () => {
-      const testObject = { key: 'value' };
-      const result = GenericHelperFunctions.isFunction(testObject);
-      expect(result).toBe(false);
-    });
-
-    it('should return false for an array', () => {
-      const testArray = [1, 2, 3];
-      const result = GenericHelperFunctions.isFunction(testArray);
-      expect(result).toBe(false);
-    });
-
-    it('should return false for a string', () => {
-      const testString = 'Hello, World!';
-      const result = GenericHelperFunctions.isFunction(testString);
-      expect(result).toBe(false);
-    });
-  });
-
-  describe('isObject function', () => {
-    it('should return true for an object', () => {
-      const testObject = { key: 'value' };
-      const result = GenericHelperFunctions.isObject(testObject);
-      expect(result).toBe(true);
-    });
-
-    it('should return false for an array', () => {
-      const testArray = [1, 2, 3];
-      const result = GenericHelperFunctions.isObject(testArray);
-      expect(result).toBe(false);
-    });
-
-    it('should return false for a string', () => {
-      const testString = 'Hello, World!';
-      const result = GenericHelperFunctions.isObject(testString);
-      expect(result).toBe(false);
-    });
-
-    it('should return false for null', () => {
-      const testNull = null;
-      const result = GenericHelperFunctions.isObject(testNull);
-      expect(result).toBe(false);
-    });
-
-    it('should return false for undefined', () => {
-      const testUndefined = undefined;
-      const result = GenericHelperFunctions.isObject(testUndefined);
-      expect(result).toBe(false);
-    });
-  });
-
-  describe('checkWebcomponentValue function', () => {
-    it('should return the parsed object for a valid JSON string', () => {
-      const jsonString = '{"selfRegistered": "true", "name": "MyComponent"}';
-      const result = GenericHelperFunctions.checkWebcomponentValue(jsonString);
-      expect(result).toEqual({ selfRegistered: "true", name: "MyComponent" });
-    });
-
-    it('should return the parsed object for a valid JSON string', () => {
-      const jsonString = '{"selfRegistered": true, "name": "MyComponent"}';
-      const result = GenericHelperFunctions.checkWebcomponentValue(jsonString);
-      expect(result).toEqual({ selfRegistered: true, name: "MyComponent" });
-    });
-
-    it('should return the boolean value as is', () => {
-      const booleanValue = true;
-      const result = GenericHelperFunctions.checkWebcomponentValue(booleanValue);
-      expect(result).toBe(booleanValue);
-    });
-
-    it('should return the object as is', () => {
-      const objValue = { name: "MyComponent", selfRegistered: false };
-      const result = GenericHelperFunctions.checkWebcomponentValue(objValue);
-      expect(result).toEqual(objValue);
-    });
-
-    it('should throw invalid JSON error', () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error');
-      const invalidJsonString = '{"selfRegistered": "true", "name": "MyComponent"';
-
-      jest.spyOn(JSON, 'parse').mockImplementation(() => {
-        console.error(new Error('Invalid JSON'));
-      });
-
-      const result = GenericHelperFunctions.checkWebcomponentValue(invalidJsonString);
-
-      expect(result).toEqual(undefined);
-      expect(consoleErrorSpy).toHaveBeenCalledWith(new Error('Invalid JSON'));
-
-      jest.restoreAllMocks();
-      consoleErrorSpy.mockRestore();
-    });
-
-    it('should return undefined for unsupported input types', () => {
-      const unsupportedValue = 42; // Number
-      // @ts-ignore
-      const result = GenericHelperFunctions.checkWebcomponentValue(unsupportedValue);
-      expect(result).toStrictEqual(undefined);
-    });
-  });
-
-  describe('resolveContext', () => {
-    it('should parse a valid JSON string and return an object', () => {
-      const stringObject = '{"key": "value"}';
-      const result = GenericHelperFunctions.resolveContext(stringObject);
-      expect(result).toEqual({ key: 'value' });
-    });
-
-    it('should return the input object if it is not a string', () => {
-      const object = { key: 'value' };
-      const result = GenericHelperFunctions.resolveContext(object);
-      expect(result).toEqual(object);
-    });
-
-    it('should handle an empty string and return an empty object', () => {
-      const emptyString = '';
-      const result = GenericHelperFunctions.resolveContext(emptyString);
-      expect(result).toEqual({});
-    });
-
-    it('should handle an undefined context and return an empty object', () => {
-      const input = undefined;
-      const result = GenericHelperFunctions.resolveContext(input);
-      expect(result).toEqual({});
-    });
-
-    it('should log an error invalid JSON', () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error');
-      const invalidJsonString = '{"key": "value", "missingQuotes": "invalid}';
-
-      jest.spyOn(JSON, 'parse').mockImplementation(() => {
-        console.error(new Error('Invalid JSON'));
-      });
-
-      const result = GenericHelperFunctions.resolveContext(invalidJsonString);
-
-      expect(result).toEqual(undefined);
-      expect(consoleErrorSpy).toHaveBeenCalledWith(new Error('Invalid JSON'));
-
-      jest.restoreAllMocks();
-      consoleErrorSpy.mockRestore();
-    });
-  });
-});
-
-
+import { GenericHelperFunctions } from '../../src/utilities/helpers';
+
+describe('GenericHelpers', () => {
+  describe('isFunction function', () => {
+    it('should return true for a function', () => {
+      const testFunction = function () {};
+      const result = GenericHelperFunctions.isFunction(testFunction);
+      expect(result).toBe(true);
+    });
+
+    it('should return true for an arrow function', () => {
+      const testArrowFunction = () => {};
+      const result = GenericHelperFunctions.isFunction(testArrowFunction);
+      expect(result).toBe(true);
+    });
+
+    it('should return false for an object', () => {
+      const testObject = { key: 'value' };
+      const result = GenericHelperFunctions.isFunction(testObject as any);
+      expect(result).toBe(false);
+    });
+
+    it('should return false for an array', () => {
+      const testArray = [1, 2, 3];
+      const result = GenericHelperFunctions.isFunction(testArray as any);
+      expect(result).toBe(false);
+    });
+
+    it('should return false for a string', () => {
+      const testString = 'Hello, World!';
+      const result = GenericHelperFunctions.isFunction(testString as any);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('isObject function', () => {
+    it('should return true for an object', () => {
+      const testObject = { key: 'value' };
+      const result = GenericHelperFunctions.isObject(testObject);
+      expect(result).toBe(true);
+    });
+
+    it('should return false for an array', () => {
+      const testArray = [1, 2, 3];
+      const result = GenericHelperFunctions.isObject(testArray);
+      expect(result).toBe(false);
+    });
+
+    it('should return false for a string', () => {
+      const testString = 'Hello, World!';
+      const result = GenericHelperFunctions.isObject(testString as any);
+      expect(result).toBe(false);
+    });
+
+    it('should return false for null', () => {
+      const testNull = null;
+      const result = GenericHelperFunctions.isObject(testNull);
+      expect(result).toBe(false);
+    });
+
+    it('should return false for undefined', () => {
+      const testUndefined = undefined;
+      const result = GenericHelperFunctions.isObject(testUndefined);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('checkWebcomponentValue function', () => {
+    it('should return the parsed object for a valid JSON string', () => {
+      const jsonString = '{"selfRegistered": "true", "name": "MyComponent"}';
+      const result = GenericHelperFunctions.checkWebcomponentValue(jsonString);
+      expect(result).toEqual({ selfRegistered: 'true', name: 'MyComponent' });
+    });
+
+    it('should return the parsed object for a valid JSON string', () => {
+      const jsonString = '{"selfRegistered": true, "name": "MyComponent"}';
+      const result = GenericHelperFunctions.checkWebcomponentValue(jsonString);
+      expect(result).toEqual({ selfRegistered: true, name: 'MyComponent' });
+    });
+
+    it('should return the boolean value as is', () => {
+      const booleanValue = true;
+      const result = GenericHelperFunctions.checkWebcomponentValue(booleanValue);
+      expect(result).toBe(booleanValue);
+    });
+
+    it('should return the object as is', () => {
+      const objValue = { name: 'MyComponent', selfRegistered: false };
+      const result = GenericHelperFunctions.checkWebcomponentValue(objValue);
+      expect(result).toEqual(objValue);
+    });
+
+    it('should throw invalid JSON error', () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error');
+      const invalidJsonString = '{"selfRegistered": "true", "name": "MyComponent"';
+
+      jest.spyOn(JSON, 'parse').mockImplementation(() => {
+        console.error(new Error('Invalid JSON'));
+      });
+
+      const result = GenericHelperFunctions.checkWebcomponentValue(invalidJsonString);
+
+      expect(result).toEqual(undefined);
+      expect(consoleErrorSpy).toHaveBeenCalledWith(new Error('Invalid JSON'));
+
+      jest.restoreAllMocks();
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('should return undefined for unsupported input types', () => {
+      const unsupportedValue = 42; // Number
+      // @ts-ignore
+      const result = GenericHelperFunctions.checkWebcomponentValue(unsupportedValue);
+      expect(result).toStrictEqual(undefined);
+    });
+  });
+
+  describe('resolveContext', () => {
+    it('should parse a valid JSON string and return an object', () => {
+      const stringObject = '{"key": "value"}';
+      const result = GenericHelperFunctions.resolveContext(stringObject);
+      expect(result).toEqual({ key: 'value' });
+    });
+
+    it('should return the input object if it is not a string', () => {
+      const object = { key: 'value' };
+      const result = GenericHelperFunctions.resolveContext(object);
+      expect(result).toEqual(object);
+    });
+
+    it('should handle an empty string and return an empty object', () => {
+      const emptyString = '';
+      const result = GenericHelperFunctions.resolveContext(emptyString);
+      expect(result).toEqual({});
+    });
+
+    it('should handle an undefined context and return an empty object', () => {
+      const input = undefined;
+      const result = GenericHelperFunctions.resolveContext(input);
+      expect(result).toEqual({});
+    });
+
+    it('should log an error invalid JSON', () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error');
+      const invalidJsonString = '{"key": "value", "missingQuotes": "invalid}';
+
+      jest.spyOn(JSON, 'parse').mockImplementation(() => {
+        console.error(new Error('Invalid JSON'));
+      });
+
+      const result = GenericHelperFunctions.resolveContext(invalidJsonString);
+
+      expect(result).toEqual(undefined);
+      expect(consoleErrorSpy).toHaveBeenCalledWith(new Error('Invalid JSON'));
+
+      jest.restoreAllMocks();
+      consoleErrorSpy.mockRestore();
+    });
+  });
+});
diff --git a/container/tsconfig.json b/container/tsconfig.json
index 1dd290da99..409419e2b7 100644
--- a/container/tsconfig.json
+++ b/container/tsconfig.json
@@ -12,5 +12,6 @@
   ],
   "compilerOptions": {
     "module": "ESNext",
+    "target": "ES2021"
   },
 }
\ No newline at end of file
diff --git a/container/typings/constants/event-type.d.ts b/container/typings/constants/event-type.d.ts
index c1d2960044..f4ecde9245 100644
--- a/container/typings/constants/event-type.d.ts
+++ b/container/typings/constants/event-type.d.ts
@@ -1,11 +1,15 @@
-// TODO: Add and extend event to inclide custom typings/interface to make it easier to use on the listener parameter
-export interface ParamsEvent extends Event {}
+/**
+ * ParamsEvent interface is used to make the handling of listener parameter easier
+ */
+export interface ParamsEvent extends Event {
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
 
 /**
  * PathExistsEvent interface is used to make it easier to use the `linkManager().pathExists()` promise based function
  * on the core application side.
- * 
- * It enforces the use of the callback function, since the latter is hardcoded to be **'callback'**. 
+ *
+ * It enforces the use of the callback function, since the latter is hardcoded to be **'callback'**.
  * This allows to send back the boolean value if the path exists or not.
  * @Example
  * ```
@@ -16,10 +20,10 @@ export interface ParamsEvent extends Event {}
  * ```
  */
 export interface PathExistsEvent extends Event {
-    /**
-     * 
-     * @param value the boolean value that is to be sent back to the the path exists promise i.e.: `linkManager().pathExists().then(value...) 
-     * @returns void
-     */
-    callback: (value: boolean) => void; 
-}
\ No newline at end of file
+  /**
+   *
+   * @param value the boolean value that is to be sent back to the the path exists promise i.e.: `linkManager().pathExists().then(value...)
+   * @returns void
+   */
+  callback: (value: boolean) => void;
+}