Acorn Finance Open Calculator Web Component

Key Features

Base + optional amount inputs with formatting
Loan range validation ($1K–$100K)
Remaining optional allowance hint
Illustrative monthly payment calc
URL & attribute parameter ingestion
Automatic layout selection (standard vs additional) based on loanAmount URL param
Dynamic “Check offers” link assembly
Disclosure modal + events
Lightweight: CDN Lit import (or bundle locally)
Emits validity-change, parameters-loaded, disclosure-open
Easy drop‑in for CMS & SPA frameworks

Layout Variants

The component supports two display modes controlled by a layout attribute or automatically selected from the URL:

standard: Single total amount input; default when no loanAmount query parameter is present.
additional: Two-field layout (required + optional) activated automatically when a ?loanAmount= value is in the URL, unless you explicitly set layout="standard".

Explicitly set layout to override auto detection. The following URLs demonstrate behavior:

// Standard (auto - no loanAmount param)
demo/test.html

// Additional (auto - loanAmount present)
demo/test.html?loanAmount=18000

// Force standard even with param
demo/test.html?loanAmount=18000&layout=standard

// Force additional without param
demo/test.html?layout=additional

Play with the Demos

Simple Demo

Interactive sample with event log and alternate hero layout.

Open Simple Demo

Full Demo (Index)

Legacy / root demo directory entry point (if present).

Open Demo Index

Speed Test Demo

Performance & parameter ingestion harness (FCP/LCP/CLS + timing). Use the buttons to compare standard vs additional layout paths.

Standard Layout Additional Layout

Documentation

Rendered HTML docs generated directly from the Markdown source.

Open README.html

Quick Embed Snippet

Copy this snippet to drop the component into any HTML page.

<script type="module" src="widgets/calculator-open/src/af-calculator-open-component.js"></script>
<!-- Standard layout (auto) -->
<af-calculator-open-component loanAmount="15000" d="SITE-01"></af-calculator-open-component>

<!-- Force additional layout (two-field) -->
<af-calculator-open-component layout="additional" loanAmount="15000" d="SITE-01"></af-calculator-open-component>

More Examples

Event Overview

Listen for lifecycle & interaction events:

const el = document.querySelector('af-calculator-open-component');
el.addEventListener('parameters-loaded', e => console.log(e.detail));
el.addEventListener('validity-change',   e => console.log(e.detail));
el.addEventListener('disclosure-open',   e => console.log(e.detail));
el.addEventListener('check-offers-clicked', e => console.log(e.detail));

See Documentation > Events for details.

Bundling Option (Rollup)

Replace the CDN import with a local dependency:

import { LitElement, html, css } from 'lit';

Then produce a distributable file (e.g. dist/af-calculator-open-component.esm.js) and update script tag references.