Skip to main content
Version: 3.0.0

sodexo-deposits-template

The sodexo-deposits-template component displays a list of all deposits for a specific user badge..

Properties​

PropertyHTML AttributeTypeDefaultDescription
badgeIdbadge-idstring-Badge identifier to display deposits for

Events​

EventTypeDescription
sodexoDepositsTemplateLineClickedCustomEvent<DepositSelected>Emitted when a deposit line is clicked. Returns badgeId and depositId. Recommended action: Navigate to deposit detail page

Event Details​

DepositSelected​

interface DepositSelected {
  badgeId: string;
  depositId: string;
}

Usage​

<!DOCTYPE html>
<html>

<sodexo-deposits-template badge-id="badge-123"></sodexo-deposits-template>

  <script>
    const element = document.querySelector('sodexo-deposits-template');
    
    // Handle deposit line click
    element.addEventListener('sodexoDepositsTemplateLineClicked', (event) => {
      const { badgeId, depositId } = event.detail;
      console.log('Deposit clicked:', { badgeId, depositId });
      // Redirect to deposit detail
      window.location.href = `/deposits/${badgeId}/${depositId}`;
    });
  </script>

</html>

Property Naming Convention​

Naming Syntax

When using properties:

  • In HTML: Use kebab-case (e.g., api-key, badge-id)
  • In JavaScript: Use camelCase (e.g., apiKey, badgeId)
  • Events: Can only be handled in JavaScript, not in HTML attributes

This diagram shows the recommended navigation flow for the deposits template:

On sodexoDepositsTemplateLineClicked: Navigate to deposit detail page

const { badgeId, depositId } = event.detail;
navigate(`badges/${badgeId}/deposits/${depositId}`);