Transaction components
@paprel/embed-accounting covers transaction review, matching, exclusion/restoration, and transaction locks.
| Element | Main attributes | Events and methods |
|---|---|---|
paprel-transaction-inbox | bank-account-id, inbox, page, page-size, search, currency, show-inbox-tabs | Shared view/resource events, transaction-select, refresh() |
paprel-transaction-detail | transaction-id, show-actions | transaction-excluded, transaction-restored, refresh() |
paprel-transaction-match-sheet | transaction-id | transaction-matched, refresh() |
paprel-transaction-locks | page, page-size | paprel:operation-success, openCreate(), refresh() |
HTML
<paprel-transaction-inbox
bank-account-id="BANK_ACCOUNT_ID"
inbox="uncategorized"
page="1"
page-size="25"
></paprel-transaction-inbox>
<paprel-transaction-detail transaction-id="TRANSACTION_ID"></paprel-transaction-detail>
<paprel-transaction-match-sheet transaction-id="TRANSACTION_ID"></paprel-transaction-match-sheet>
The inbox emits paprel:view-change with its complete filter and pagination state and paprel:resource-open when a user selects a transaction. This lets the host own URLs and detail routes.
Host-owned lock action
Transaction-lock creation belongs in the host page header. Call the public method from your CTA:
TypeScript
const locks = document.querySelector("paprel-transaction-locks");
newLockButton.addEventListener("click", () => locks?.openCreate());