css vars support

descope · Nov 21, 2024 · 3a9c024 · 3a9c024
1 parent 0b7b7f5
commit 3a9c024
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/packages/sdks/web-component/src/lib/descope-wc/DescopeWc.ts b/packages/sdks/web-component/src/lib/descope-wc/DescopeWc.ts
@@ -994,8 +994,10 @@ class DescopeWc extends BaseDescopeWc {
 
     updateTemplateFromScreenState(
       clone,
+      this.rootElement,
       screenState,
       screenState.componentsConfig,
+      screenState.cssVars,
       this.formConfig,
       this.errorTransformer,
       this.loggerWrapper,

diff --git a/packages/sdks/web-component/src/lib/helpers/templates.ts b/packages/sdks/web-component/src/lib/helpers/templates.ts
@@ -4,7 +4,7 @@ import {
   DESCOPE_ATTRIBUTE_EXCLUDE_FIELD,
   HAS_DYNAMIC_VALUES_ATTR_NAME,
 } from '../constants';
-import { ComponentsConfig, ScreenState } from '../types';
+import { ComponentsConfig, CssVars, ScreenState } from '../types';
 import { shouldHandleMarkdown } from './helpers';
 
 const ALLOWED_INPUT_CONFIG_ATTRS = ['disabled'];
@@ -141,6 +141,53 @@ const setFormConfigValues = (
   });
 };
 
+const setCssVars = (
+  nextPageTemplate: DocumentFragment,
+  rootEle: HTMLElement,
+  cssVars: CssVars,
+  logger: {
+    error: (message: string, description: string) => void,
+    info: (message: string, description: string) => void,
+  }
+) => {
+  if (!cssVars) {
+    return;
+  }
+
+  Object.keys(cssVars).forEach((componentName) => {
+    if(!nextPageTemplate.querySelector(componentName)){
+      logger.info(`Skipping css vars for component "${componentName}}"`, `Got css vars for component ${componentName} but Could not find it on next page` );
+    }
+    const componentClass: CustomElementConstructor & { cssVarList: CssVars } | undefined = customElements.get(componentName) as any;
+
+    if (!componentClass) {
+      logger.error(
+        `Could not find component class for ${componentName}`,
+        'Check if the component is registered',
+      );
+      return;
+    }
+
+    Object.keys(cssVars[componentName]).forEach((cssVarKey) => {
+      const componentCssVars = cssVars[componentName];
+      const varName = componentClass?.cssVarList?.[cssVarKey];
+
+      if (!varName) {
+        logger.error(
+          `Could not find css variable name for ${cssVarKey} in ${componentName}`,
+          'Check if the css variable is defined in the component',
+        );
+        return;
+      }
+
+      const value = componentCssVars[cssVarKey];
+
+      rootEle.style.setProperty(varName, value);
+    })
+  });
+}
+
+
 const setElementConfig = (
   baseEle: DocumentFragment,
   componentsConfig: ComponentsConfig,
@@ -175,6 +222,8 @@ const setElementConfig = (
   });
 };
 
+
+
 const setImageVariable = (
   rootEle: HTMLElement,
   name: string,
@@ -201,8 +250,10 @@ const setImageVariable = (
  */
 export const updateTemplateFromScreenState = (
   baseEle: DocumentFragment,
+  rootEle: HTMLElement,
   screenState?: ScreenState,
   componentsConfig?: ComponentsConfig,
+  cssVars?: CssVars,
   flowInputs?: Record<string, string>,
   errorTransformer?: (error: { text: string; type: string }) => string,
   logger?: { error: (message: string, description: string) => void },
@@ -222,6 +273,7 @@ export const updateTemplateFromScreenState = (
   replaceHrefByDataType(baseEle, 'notp-link', screenState?.notp?.redirectUrl);
   replaceElementTemplates(baseEle, screenState);
   setElementConfig(baseEle, componentsConfig, logger);
+  setCssVars(baseEle, rootEle, cssVars, logger);
   replaceTemplateDynamicAttrValues(baseEle, screenState);
   setFormConfigValues(baseEle, flowInputs);
 };

diff --git a/packages/sdks/web-component/src/lib/types.ts b/packages/sdks/web-component/src/lib/types.ts
@@ -8,6 +8,7 @@ export type Sdk = ReturnType<typeof createSdk>;
 export type SdkFlowNext = Sdk['flow']['next'];
 
 export type ComponentsConfig = Record<string, any>;
+export type CssVars = Record<string, any>;
 
 type OmitFirstArg<F> = F extends (x: any, ...args: infer P) => infer R
   ? (...args: P) => R
@@ -27,6 +28,7 @@ export interface ScreenState {
   errorText?: string;
   errorType?: string;
   componentsConfig?: ComponentsConfig;
+  cssVars?: CssVars;
   form?: Record<string, string>;
   inputs?: Record<string, string>; // Backward compatibility
   lastAuth?: LastAuthState;