Skip to main content
Version: 3.0.0

sodexo-app-provider

The sodexo-app-provider component contains the main configuration and should be used to wrap every template.

Properties​

PropertyHTML AttributeTypeDefaultDescription
theme-ThemeDefault Sodexo themeCustomization variables for Sodexo components theme
apiKeyapi-keystring-X-API-key for Sodexo API
authConfig-AuthConfig-Authentication configuration provided by Sodexo.

Types​

interface Theme {
  "--sodexo-primary-color": string;
  "--sodexo-primary-text-color": string;
  "--sodexo-primary-background-color": string;
  "--sodexo-container-background-color": string;
  "--sodexo-font-family": string;
}
interface AuthConfig {
  domain: string;
  clientId: string;
  audience: string;
  redirectUri: string;
  redirectLogoutUri: string;
  scope: string;
  connection?: string;
}

Usage​

<!DOCTYPE html>
<html>
<body>
 <sodexo-app-provider
    api-key="your-api-key"
  >
    <!-- Insert your sodexo webcomponent inside the provider -->
  </sodexo-app-provider>

  <script>
    const element = document.querySelector('sodexo-bookings-template');

    element.theme = {
      '--sodexo-primary-color': '#283897',
      '--sodexo-primary-text-color': '#283897',
      '--sodexo-primary-background-color': '#f7f8ff',
      '--sodexo-primary-background-color': 'white',
      '--sodexo-container-background-color': 'white',
      '--sodexo-font-family': 'Open Sans',
    };

    element.authConfig = {
      'domain': 'my-domain',
      'clientId': 'my-client-id',
      'redirectUri': 'my-redirect-uir',
      'audience': 'my-audience',
      'scope': 'my-scope'
    };
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

  • In HTML: Use kebab-case (e.g., api-key, token)
  • In JavaScript: Use camelCase (e.g., apiKey, token)