SDK component playground

<!-- sample mode -->
<ledrapay-award-config country="AU"></ledrapay-award-config>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-award-config');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-award-config
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}>
      </ledrapay-award-config>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-award-config ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-award-config
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token" />
</template>

<!-- sample mode -->
<ledrapay-bank-details country="AU"></ledrapay-bank-details>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-bank-details');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-save', (e) => console.log(e.detail));
el.addEventListener('ledrapay-cancel', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-bank-details
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-save=${(e) => this.onsave(e.detail)}
        @ledrapay-cancel=${(e) => this.oncancel(e.detail)}>
      </ledrapay-bank-details>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_save = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-save', on_ledrapay_save);
    const on_ledrapay_cancel = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-cancel', on_ledrapay_cancel);
    return () => { el.removeEventListener('ledrapay-save', on_ledrapay_save); el.removeEventListener('ledrapay-cancel', on_ledrapay_cancel); };
  }, [token]);
  return <ledrapay-bank-details ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-bank-details
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-save="(e) => console.log(e.detail)"
    @ledrapay-cancel="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-cost-centres country="AU"></ledrapay-cost-centres>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-cost-centres');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-cost-centres
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}>
      </ledrapay-cost-centres>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-cost-centres ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-cost-centres
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token" />
</template>

<!-- sample mode -->
<ledrapay-dashboard country="AU"></ledrapay-dashboard>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-dashboard');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-dashboard
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}>
      </ledrapay-dashboard>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-dashboard ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-dashboard
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token" />
</template>

<!-- sample mode -->
<ledrapay-employee-onboarding country="AU"></ledrapay-employee-onboarding>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-employee-onboarding');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-complete', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-employee-onboarding
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-complete=${(e) => this.oncomplete(e.detail)}>
      </ledrapay-employee-onboarding>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_complete = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-complete', on_ledrapay_complete);
    return () => { el.removeEventListener('ledrapay-complete', on_ledrapay_complete); };
  }, [token]);
  return <ledrapay-employee-onboarding ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-employee-onboarding
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-complete="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-employees-list country="AU" as-of="…"></ledrapay-employees-list>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-employees-list');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
el.setAttribute('as-of', as_of);
container.appendChild(el);

el.addEventListener('ledrapay-view-employee', (e) => console.log(e.detail));
el.addEventListener('ledrapay-employee-terminated', (e) => console.log(e.detail));
el.addEventListener('ledrapay-employee-reactivated', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-employees-list
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        as-of=${this.asOf}
        @ledrapay-view-employee=${(e) => this.onviewEmployee(e.detail)}
        @ledrapay-employee-terminated=${(e) => this.onemployeeTerminated(e.detail)}
        @ledrapay-employee-reactivated=${(e) => this.onemployeeReactivated(e.detail)}>
      </ledrapay-employees-list>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token, asOf }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_view_employee = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-view-employee', on_ledrapay_view_employee);
    const on_ledrapay_employee_terminated = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-employee-terminated', on_ledrapay_employee_terminated);
    const on_ledrapay_employee_reactivated = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-employee-reactivated', on_ledrapay_employee_reactivated);
    return () => { el.removeEventListener('ledrapay-view-employee', on_ledrapay_view_employee); el.removeEventListener('ledrapay-employee-terminated', on_ledrapay_employee_terminated); el.removeEventListener('ledrapay-employee-reactivated', on_ledrapay_employee_reactivated); };
  }, [token]);
  return <ledrapay-employees-list ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} as-of={asOf} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token', 'asOf']);
</script>

<template>
  <ledrapay-employees-list
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :as-of="asOf"
    @ledrapay-view-employee="(e) => console.log(e.detail)"
    @ledrapay-employee-terminated="(e) => console.log(e.detail)"
    @ledrapay-employee-reactivated="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-employee-detail country="AU" employee-id="…" as-of="…"></ledrapay-employee-detail>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-employee-detail');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
el.setAttribute('employee-id', employee_id);
el.setAttribute('as-of', as_of);
container.appendChild(el);

el.addEventListener('ledrapay-employee-terminated', (e) => console.log(e.detail));
el.addEventListener('ledrapay-employee-reactivated', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-employee-detail
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        employee-id=${this.employeeId}
        as-of=${this.asOf}
        @ledrapay-employee-terminated=${(e) => this.onemployeeTerminated(e.detail)}
        @ledrapay-employee-reactivated=${(e) => this.onemployeeReactivated(e.detail)}>
      </ledrapay-employee-detail>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token, employeeId, asOf }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_employee_terminated = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-employee-terminated', on_ledrapay_employee_terminated);
    const on_ledrapay_employee_reactivated = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-employee-reactivated', on_ledrapay_employee_reactivated);
    return () => { el.removeEventListener('ledrapay-employee-terminated', on_ledrapay_employee_terminated); el.removeEventListener('ledrapay-employee-reactivated', on_ledrapay_employee_reactivated); };
  }, [token]);
  return <ledrapay-employee-detail ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} employee-id={employeeId} as-of={asOf} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token', 'employeeId', 'asOf']);
</script>

<template>
  <ledrapay-employee-detail
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :employee-id="employeeId"
    :as-of="asOf"
    @ledrapay-employee-terminated="(e) => console.log(e.detail)"
    @ledrapay-employee-reactivated="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-governance-trail country="AU"></ledrapay-governance-trail>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-governance-trail');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-governance-trail
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}>
      </ledrapay-governance-trail>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-governance-trail ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-governance-trail
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token" />
</template>

<!-- sample mode -->
<ledrapay-leave-management country="AU"></ledrapay-leave-management>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-leave-management');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-save', (e) => console.log(e.detail));
el.addEventListener('ledrapay-cancel', (e) => console.log(e.detail));
el.addEventListener('ledrapay-leave-booked', (e) => console.log(e.detail));
el.addEventListener('ledrapay-leave-cancelled', (e) => console.log(e.detail));
el.addEventListener('ledrapay-leave-amended', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-leave-management
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-save=${(e) => this.onsave(e.detail)}
        @ledrapay-cancel=${(e) => this.oncancel(e.detail)}
        @ledrapay-leave-booked=${(e) => this.onleaveBooked(e.detail)}
        @ledrapay-leave-cancelled=${(e) => this.onleaveCancelled(e.detail)}
        @ledrapay-leave-amended=${(e) => this.onleaveAmended(e.detail)}>
      </ledrapay-leave-management>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_save = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-save', on_ledrapay_save);
    const on_ledrapay_cancel = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-cancel', on_ledrapay_cancel);
    const on_ledrapay_leave_booked = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-leave-booked', on_ledrapay_leave_booked);
    const on_ledrapay_leave_cancelled = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-leave-cancelled', on_ledrapay_leave_cancelled);
    const on_ledrapay_leave_amended = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-leave-amended', on_ledrapay_leave_amended);
    return () => { el.removeEventListener('ledrapay-save', on_ledrapay_save); el.removeEventListener('ledrapay-cancel', on_ledrapay_cancel); el.removeEventListener('ledrapay-leave-booked', on_ledrapay_leave_booked); el.removeEventListener('ledrapay-leave-cancelled', on_ledrapay_leave_cancelled); el.removeEventListener('ledrapay-leave-amended', on_ledrapay_leave_amended); };
  }, [token]);
  return <ledrapay-leave-management ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-leave-management
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-save="(e) => console.log(e.detail)"
    @ledrapay-cancel="(e) => console.log(e.detail)"
    @ledrapay-leave-booked="(e) => console.log(e.detail)"
    @ledrapay-leave-cancelled="(e) => console.log(e.detail)"
    @ledrapay-leave-amended="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-leave-request country="AU"></ledrapay-leave-request>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-leave-request');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-leave-requested', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-leave-request
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-leave-requested=${(e) => this.onleaveRequested(e.detail)}>
      </ledrapay-leave-request>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_leave_requested = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-leave-requested', on_ledrapay_leave_requested);
    return () => { el.removeEventListener('ledrapay-leave-requested', on_ledrapay_leave_requested); };
  }, [token]);
  return <ledrapay-leave-request ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-leave-request
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-leave-requested="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-leave-approvals country="AU"></ledrapay-leave-approvals>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-leave-approvals');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-leave-approved', (e) => console.log(e.detail));
el.addEventListener('ledrapay-leave-rejected', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-leave-approvals
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-leave-approved=${(e) => this.onleaveApproved(e.detail)}
        @ledrapay-leave-rejected=${(e) => this.onleaveRejected(e.detail)}>
      </ledrapay-leave-approvals>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_leave_approved = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-leave-approved', on_ledrapay_leave_approved);
    const on_ledrapay_leave_rejected = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-leave-rejected', on_ledrapay_leave_rejected);
    return () => { el.removeEventListener('ledrapay-leave-approved', on_ledrapay_leave_approved); el.removeEventListener('ledrapay-leave-rejected', on_ledrapay_leave_rejected); };
  }, [token]);
  return <ledrapay-leave-approvals ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-leave-approvals
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-leave-approved="(e) => console.log(e.detail)"
    @ledrapay-leave-rejected="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-org-setup country="AU"></ledrapay-org-setup>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-org-setup');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-save', (e) => console.log(e.detail));
el.addEventListener('ledrapay-cancel', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-org-setup
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-save=${(e) => this.onsave(e.detail)}
        @ledrapay-cancel=${(e) => this.oncancel(e.detail)}>
      </ledrapay-org-setup>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_save = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-save', on_ledrapay_save);
    const on_ledrapay_cancel = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-cancel', on_ledrapay_cancel);
    return () => { el.removeEventListener('ledrapay-save', on_ledrapay_save); el.removeEventListener('ledrapay-cancel', on_ledrapay_cancel); };
  }, [token]);
  return <ledrapay-org-setup ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-org-setup
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-save="(e) => console.log(e.detail)"
    @ledrapay-cancel="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-pay-item-library country="AU"></ledrapay-pay-item-library>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-pay-item-library');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-pay-item-library
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}>
      </ledrapay-pay-item-library>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-pay-item-library ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-pay-item-library
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token" />
</template>

<!-- sample mode -->
<ledrapay-pay-run-detail country="AU" pay-run-id="…"></ledrapay-pay-run-detail>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-pay-run-detail');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
el.setAttribute('pay-run-id', pay_run_id);
container.appendChild(el);

el.addEventListener('ledrapay-view-pay-run', (e) => console.log(e.detail));
el.addEventListener('ledrapay-employee-select', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-pay-run-detail
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        pay-run-id=${this.payRunId}
        @ledrapay-view-pay-run=${(e) => this.onviewPayRun(e.detail)}
        @ledrapay-employee-select=${(e) => this.onemployeeSelect(e.detail)}>
      </ledrapay-pay-run-detail>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token, payRunId }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_view_pay_run = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-view-pay-run', on_ledrapay_view_pay_run);
    const on_ledrapay_employee_select = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-employee-select', on_ledrapay_employee_select);
    return () => { el.removeEventListener('ledrapay-view-pay-run', on_ledrapay_view_pay_run); el.removeEventListener('ledrapay-employee-select', on_ledrapay_employee_select); };
  }, [token]);
  return <ledrapay-pay-run-detail ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} pay-run-id={payRunId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token', 'payRunId']);
</script>

<template>
  <ledrapay-pay-run-detail
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :pay-run-id="payRunId"
    @ledrapay-view-pay-run="(e) => console.log(e.detail)"
    @ledrapay-employee-select="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-pay-run-entry country="AU" pay-run-id="…" entry-id="…"></ledrapay-pay-run-entry>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-pay-run-entry');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
el.setAttribute('pay-run-id', pay_run_id);
el.setAttribute('entry-id', entry_id);
container.appendChild(el);

el.addEventListener('ledrapay-save', (e) => console.log(e.detail));
el.addEventListener('ledrapay-cancel', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-pay-run-entry
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        pay-run-id=${this.payRunId}
        entry-id=${this.entryId}
        @ledrapay-save=${(e) => this.onsave(e.detail)}
        @ledrapay-cancel=${(e) => this.oncancel(e.detail)}>
      </ledrapay-pay-run-entry>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token, payRunId, entryId }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_save = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-save', on_ledrapay_save);
    const on_ledrapay_cancel = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-cancel', on_ledrapay_cancel);
    return () => { el.removeEventListener('ledrapay-save', on_ledrapay_save); el.removeEventListener('ledrapay-cancel', on_ledrapay_cancel); };
  }, [token]);
  return <ledrapay-pay-run-entry ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} pay-run-id={payRunId} entry-id={entryId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token', 'payRunId', 'entryId']);
</script>

<template>
  <ledrapay-pay-run-entry
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :pay-run-id="payRunId"
    :entry-id="entryId"
    @ledrapay-save="(e) => console.log(e.detail)"
    @ledrapay-cancel="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-pay-runs-list country="AU"></ledrapay-pay-runs-list>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-pay-runs-list');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-view-pay-run', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-pay-runs-list
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-view-pay-run=${(e) => this.onviewPayRun(e.detail)}>
      </ledrapay-pay-runs-list>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_view_pay_run = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-view-pay-run', on_ledrapay_view_pay_run);
    return () => { el.removeEventListener('ledrapay-view-pay-run', on_ledrapay_view_pay_run); };
  }, [token]);
  return <ledrapay-pay-runs-list ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-pay-runs-list
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-view-pay-run="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-payroll-calendar country="AU"></ledrapay-payroll-calendar>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-payroll-calendar');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-save', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-payroll-calendar
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-save=${(e) => this.onsave(e.detail)}>
      </ledrapay-payroll-calendar>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_save = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-save', on_ledrapay_save);
    return () => { el.removeEventListener('ledrapay-save', on_ledrapay_save); };
  }, [token]);
  return <ledrapay-payroll-calendar ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-payroll-calendar
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-save="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-payslip-viewer country="AU" show-ytd show-leave show-governance pay-run-id="…"></ledrapay-payslip-viewer>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-payslip-viewer');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
el.setAttribute('pay-run-id', pay_run_id);
container.appendChild(el);

el.addEventListener('ledrapay-print', (e) => console.log(e.detail));
el.addEventListener('ledrapay-download', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-payslip-viewer
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        pay-run-id=${this.payRunId}
        ?show-ytd=${true}
        ?show-leave=${true}
        ?show-governance=${true}
        @ledrapay-print=${(e) => this.onprint(e.detail)}
        @ledrapay-download=${(e) => this.ondownload(e.detail)}>
      </ledrapay-payslip-viewer>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token, payRunId }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_print = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-print', on_ledrapay_print);
    const on_ledrapay_download = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-download', on_ledrapay_download);
    return () => { el.removeEventListener('ledrapay-print', on_ledrapay_print); el.removeEventListener('ledrapay-download', on_ledrapay_download); };
  }, [token]);
  return <ledrapay-payslip-viewer ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} pay-run-id={payRunId} show-ytd="" show-leave="" show-governance="" />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token', 'payRunId']);
</script>

<template>
  <ledrapay-payslip-viewer
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :pay-run-id="payRunId"
    @ledrapay-print="(e) => console.log(e.detail)"
    @ledrapay-download="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-reports-dashboard country="AU"></ledrapay-reports-dashboard>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-reports-dashboard');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-reports-dashboard
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}>
      </ledrapay-reports-dashboard>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-reports-dashboard ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-reports-dashboard
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token" />
</template>

<!-- sample mode -->
<ledrapay-requirements country="AU"></ledrapay-requirements>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-requirements');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-requirements
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}>
      </ledrapay-requirements>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-requirements ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-requirements
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token" />
</template>

<!-- sample mode -->
<ledrapay-stp-submission country="AU" pay-run-id="…"></ledrapay-stp-submission>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-stp-submission');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
el.setAttribute('pay-run-id', pay_run_id);
container.appendChild(el);

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-stp-submission
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        pay-run-id=${this.payRunId}>
      </ledrapay-stp-submission>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token, payRunId }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
  }, [token]);
  return <ledrapay-stp-submission ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} pay-run-id={payRunId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token', 'payRunId']);
</script>

<template>
  <ledrapay-stp-submission
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :pay-run-id="payRunId" />
</template>

<!-- sample mode -->
<ledrapay-super-form country="AU"></ledrapay-super-form>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-super-form');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
container.appendChild(el);

el.addEventListener('ledrapay-save', (e) => console.log(e.detail));
el.addEventListener('ledrapay-cancel', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-super-form
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        @ledrapay-save=${(e) => this.onsave(e.detail)}
        @ledrapay-cancel=${(e) => this.oncancel(e.detail)}>
      </ledrapay-super-form>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_save = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-save', on_ledrapay_save);
    const on_ledrapay_cancel = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-cancel', on_ledrapay_cancel);
    return () => { el.removeEventListener('ledrapay-save', on_ledrapay_save); el.removeEventListener('ledrapay-cancel', on_ledrapay_cancel); };
  }, [token]);
  return <ledrapay-super-form ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token']);
</script>

<template>
  <ledrapay-super-form
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    @ledrapay-save="(e) => console.log(e.detail)"
    @ledrapay-cancel="(e) => console.log(e.detail)" />
</template>

<!-- sample mode -->
<ledrapay-tax-declaration country="AU" employee-id="…"></ledrapay-tax-declaration>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-tax-declaration');
el.setAttribute('country', 'AU');
el.setAttribute('api-url', '/v1');
el.setAttribute('tenant-id', tenantId);
el.embedToken = token;            // property, not attribute: keeps it out of the DOM
el.setAttribute('employee-id', employee_id);
container.appendChild(el);

el.addEventListener('ledrapay-save', (e) => console.log(e.detail));
el.addEventListener('ledrapay-cancel', (e) => console.log(e.detail));

import { LitElement, html } from 'lit';
import '@ledrapay/components';

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-tax-declaration
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        employee-id=${this.employeeId}
        @ledrapay-save=${(e) => this.onsave(e.detail)}
        @ledrapay-cancel=${(e) => this.oncancel(e.detail)}>
      </ledrapay-tax-declaration>`;
  }
}

// React 19+: custom elements get first-class props/events.
// Earlier React: set the token via ref (shown) so it stays a property.
import { useEffect, useRef } from 'react';
import '@ledrapay/components';

export function Payroll({ tenantId, token, employeeId }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    el.embedToken = token;                       // property assignment
    el.tokenProvider = () => fetch('/api/embed-token').then(r => r.json()).then(d => d.token);
    const on_ledrapay_save = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-save', on_ledrapay_save);
    const on_ledrapay_cancel = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-cancel', on_ledrapay_cancel);
    return () => { el.removeEventListener('ledrapay-save', on_ledrapay_save); el.removeEventListener('ledrapay-cancel', on_ledrapay_cancel); };
  }, [token]);
  return <ledrapay-tax-declaration ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} employee-id={employeeId} />;
}

<!-- vite.config: vue({ template: { compilerOptions: {
       isCustomElement: (t) => t.startsWith('ledrapay-') } } }) -->
<script setup>
import '@ledrapay/components';
defineProps(['tenantId', 'token', 'employeeId']);
</script>

<template>
  <ledrapay-tax-declaration
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :employee-id="employeeId"
    @ledrapay-save="(e) => console.log(e.detail)"
    @ledrapay-cancel="(e) => console.log(e.detail)" />
</template>