SDK component playground

<!-- 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-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>

<!-- sample mode -->
<ledrapay-bank-details country="AU" employee-id="…"></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
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-bank-details
        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-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, 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-bank-details 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-bank-details
    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>

<!-- sample mode -->
<ledrapay-super-form country="AU" employee-id="…"></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
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-super-form
        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-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, 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-super-form 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-super-form
    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>

<!-- sample mode -->
<ledrapay-payroll-readiness country="AU" employee-id="…"></ledrapay-payroll-readiness>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-payroll-readiness');
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);

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

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

// 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);
  }, [token]);
  return <ledrapay-payroll-readiness 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-payroll-readiness
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :employee-id="employeeId" />
</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));
el.addEventListener('ledrapay-pay-run-created', (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-run-created=${(e) => this.onpayRunCreated(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);
    const on_ledrapay_pay_run_created = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-pay-run-created', on_ledrapay_pay_run_created);
    return () => { el.removeEventListener('ledrapay-view-pay-run', on_ledrapay_view_pay_run); el.removeEventListener('ledrapay-pay-run-created', on_ledrapay_pay_run_created); };
  }, [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)"
    @ledrapay-pay-run-created="(e) => console.log(e.detail)" />
</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-payrun-exceptions country="AU" pay-run-id="…" governance-url="…"></ledrapay-payrun-exceptions>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-payrun-exceptions');
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('governance-url', governance_url);
container.appendChild(el);

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

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

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-payrun-exceptions
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        pay-run-id=${this.payRunId}
        governance-url=${this.governanceUrl}
        @ledrapay-exceptions-verdict=${(e) => this.onexceptionsVerdict(e.detail)}>
      </ledrapay-payrun-exceptions>`;
  }
}

// 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, governanceUrl }) {
  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_exceptions_verdict = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-exceptions-verdict', on_ledrapay_exceptions_verdict);
    return () => { el.removeEventListener('ledrapay-exceptions-verdict', on_ledrapay_exceptions_verdict); };
  }, [token]);
  return <ledrapay-payrun-exceptions ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} pay-run-id={payRunId} governance-url={governanceUrl} />;
}

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

<template>
  <ledrapay-payrun-exceptions
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :pay-run-id="payRunId"
    :governance-url="governanceUrl"
    @ledrapay-exceptions-verdict="(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-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-payments country="AU" pay-run-id="…"></ledrapay-payments>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-payments');
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-download', (e) => console.log(e.detail));
el.addEventListener('ledrapay-super-batch', (e) => console.log(e.detail));

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

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-payments
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        pay-run-id=${this.payRunId}
        @ledrapay-download=${(e) => this.ondownload(e.detail)}
        @ledrapay-super-batch=${(e) => this.onsuperBatch(e.detail)}>
      </ledrapay-payments>`;
  }
}

// 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_download = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-download', on_ledrapay_download);
    const on_ledrapay_super_batch = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-super-batch', on_ledrapay_super_batch);
    return () => { el.removeEventListener('ledrapay-download', on_ledrapay_download); el.removeEventListener('ledrapay-super-batch', on_ledrapay_super_batch); };
  }, [token]);
  return <ledrapay-payments 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-payments
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :pay-run-id="payRunId"
    @ledrapay-download="(e) => console.log(e.detail)"
    @ledrapay-super-batch="(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-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-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-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-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-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-payroll-checklist country="AU" guide-base="…"></ledrapay-payroll-checklist>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-payroll-checklist');
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('guide-base', guide_base);
container.appendChild(el);

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

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

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

// 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, guideBase }) {
  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_check = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-check', on_ledrapay_check);
    return () => { el.removeEventListener('ledrapay-check', on_ledrapay_check); };
  }, [token]);
  return <ledrapay-payroll-checklist ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} guide-base={guideBase} />;
}

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

<template>
  <ledrapay-payroll-checklist
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :guide-base="guideBase"
    @ledrapay-check="(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-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-overview country="AU" financial-year="…"></ledrapay-super-overview>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-super-overview');
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('financial-year', financial_year);
container.appendChild(el);

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

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

// 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, financialYear }) {
  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-super-overview ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} financial-year={financialYear} />;
}

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

<template>
  <ledrapay-super-overview
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :financial-year="financialYear" />
</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-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-kpi-tile country="AU" label="…" value="…" sub="…" trend="…" delta="…" loading accent="…"></ledrapay-kpi-tile>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-kpi-tile');
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('label', label);
el.setAttribute('value', value);
el.setAttribute('sub', sub);
el.setAttribute('trend', trend);
el.setAttribute('delta', delta);
el.setAttribute('accent', accent);
container.appendChild(el);

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

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-kpi-tile
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        label=${this.label}
        value=${this.value}
        sub=${this.sub}
        trend=${this.trend}
        delta=${this.delta}
        accent=${this.accent}
        ?loading=${true}>
      </ledrapay-kpi-tile>`;
  }
}

// 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, label, value, sub, trend, delta, accent }) {
  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-kpi-tile ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} label={label} value={value} sub={sub} trend={trend} delta={delta} accent={accent} loading="" />;
}

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

<template>
  <ledrapay-kpi-tile
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :label="label"
    :value="value"
    :sub="sub"
    :trend="trend"
    :delta="delta"
    :accent="accent" />
</template>

<!-- sample mode -->
<ledrapay-chart country="AU" type="…" data="…" heading="…" height="…" value-format="…"></ledrapay-chart>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-chart');
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('type', type);
el.setAttribute('data', data);
el.setAttribute('heading', heading);
el.setAttribute('height', height);
el.setAttribute('value-format', value_format);
container.appendChild(el);

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

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-chart
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        type=${this.type}
        data=${this.data}
        heading=${this.heading}
        height=${this.height}
        value-format=${this.valueFormat}>
      </ledrapay-chart>`;
  }
}

// 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, type, data, heading, height, valueFormat }) {
  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-chart ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} type={type} data={data} heading={heading} height={height} value-format={valueFormat} />;
}

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

<template>
  <ledrapay-chart
    country="AU" api-url="/v1"
    :tenant-id="tenantId"
    :embed-token.prop="token"
    :type="type"
    :data="data"
    :heading="heading"
    :height="height"
    :value-format="valueFormat" />
</template>

<!-- sample mode -->
<ledrapay-portfolio-dashboard country="AU" country="…" with-credentials></ledrapay-portfolio-dashboard>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-portfolio-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
el.setAttribute('country', country);
container.appendChild(el);

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

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-portfolio-dashboard
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        country=${this.country}
        ?with-credentials=${true}>
      </ledrapay-portfolio-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, country }) {
  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-portfolio-dashboard ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} country={country} with-credentials="" />;
}

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

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

<!-- sample mode -->
<ledrapay-client-list country="AU" with-credentials></ledrapay-client-list>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-client-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-client-select', (e) => console.log(e.detail));

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

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-client-list
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        ?with-credentials=${true}
        @ledrapay-client-select=${(e) => this.onclientSelect(e.detail)}>
      </ledrapay-client-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_client_select = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-client-select', on_ledrapay_client_select);
    return () => { el.removeEventListener('ledrapay-client-select', on_ledrapay_client_select); };
  }, [token]);
  return <ledrapay-client-list ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} with-credentials="" />;
}

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

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

<!-- sample mode -->
<ledrapay-pipeline-board country="AU" with-credentials></ledrapay-pipeline-board>

// live mode — credentials BEFORE the element connects
const el = document.createElement('ledrapay-pipeline-board');
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-run-select', (e) => console.log(e.detail));

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

class PayrollPage extends LitElement {
  render() {
    return html`
      <ledrapay-pipeline-board
        country="AU"
        api-url="/v1"
        tenant-id=${this.tenantId}
        .embedToken=${this.token}
        .tokenProvider=${() => this.refreshToken()}
        ?with-credentials=${true}
        @ledrapay-run-select=${(e) => this.onrunSelect(e.detail)}>
      </ledrapay-pipeline-board>`;
  }
}

// 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_run_select = (e) => console.log(e.detail);
    el.addEventListener('ledrapay-run-select', on_ledrapay_run_select);
    return () => { el.removeEventListener('ledrapay-run-select', on_ledrapay_run_select); };
  }, [token]);
  return <ledrapay-pipeline-board ref={ref} country="AU" api-url="/v1" tenant-id={tenantId} with-credentials="" />;
}

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

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