Reports widgets

Overview

The reports bundle ships two embeddable web components in a single ES module:

• <ic-report-hero> — a magazine-style hero for the most recently published report (cover, eyebrow, title, three quick-action links, CEO quote).
• <ic-reports-archive> — a year-grouped archive of every published report, with a year filter and per-row Report / Webcast / Presentation links (or a single "Download annual report" button for annual reports).

Both are server-driven over SSE and themed per team. The financial calendar (<ic-financial-calendar>) ships in the same bundle.

How to Embed

Add the shared Datastar runtime importmap, the reports bundle, and the widget elements to your HTML page:

<!-- 1. Shared Datastar runtime. Both ic-reports.js and ic-event.js import the
     bare specifier `datastar-pro-alpha1`; this importmap resolves it so the
     two widgets share one runtime. Required once per page. -->
<script type="importmap">
  {
    "imports": {
      "datastar-pro-alpha1": "https://events-cdn.investorcaller.com/widget/v1/datastar-pro-alpha1.js"
    }
  }
</script>

<!-- 2. Reports bundle (registers all three report/calendar elements) -->
<script type="module" src="https://events-cdn.investorcaller.com/widget-reports/v1/ic-reports.js"></script>

<!-- 3. Optional: the event widget, so the archive's Webcast quick-action opens
     in an in-page popover. Without it, the Webcast slot is rendered disabled. -->
<script type="module" src="https://events-cdn.investorcaller.com/widget/v1/ic-event.js"></script>

<!-- 4. Add the widget elements -->
<ic-report-hero team="your-team-slug" locale="en"></ic-report-hero>
<ic-reports-archive team="your-team-slug" locale="en"></ic-reports-archive>

Staging / custom API origin

Override the API origin for every widget on the page by adding data-api-url to the loading <script> tag. An explicit api-url attribute on an individual element takes precedence.

<script
  type="module"
  src="https://events-cdn.investorcaller.com/widget-reports/v1/ic-reports.js"
  data-api-url="https://staging.events.investorcaller.com"
></script>

<ic-report-hero> Attributes

Attribute	Type	Default	Description
team	string	required	Team slug. Normalized to trimmed, lower-case, kebab-case.
api-url	string	https://events.investorcaller.com	Override the API origin (useful for staging).
locale	string	team default → en	BCP-47 locale forwarded to the SSE stream as ?locale=. See Localization.
actions-style	string	"links"	Visual style of the quick-action buttons. Options: "links", "pills".

<ic-reports-archive> Attributes

Attribute	Type	Default	Description
team	string	required	Team slug. Normalized to trimmed, lower-case, kebab-case.
api-url	string	https://events.investorcaller.com	Override the API origin (useful for staging).
locale	string	team default → en	BCP-47 locale forwarded to the SSE stream as ?locale=. See Localization.
filter-style	string	"pills"	Year-filter UI. Options: "pills", "dropdowns".
actions-style	string	"links"	Per-row quick-action style. Options: "links", "icons".

Examples

<!-- Pill-style hero actions -->
<ic-report-hero team="acme" actions-style="pills"></ic-report-hero>

<!-- Archive with dropdown year filter and icon actions, in Finnish -->
<ic-reports-archive team="acme" locale="fi" filter-style="dropdowns" actions-style="icons"></ic-reports-archive>

Quick-action Behavior

The archive lists every public team event whose type is one of Q1, Q2, Q3, Q4, AGM, AGN, or CMD. A matching report is optional — events without one still appear, with the relevant button disabled.

• Report — direct link to the best-language report PDF (prefers the resolved request language, falls back to en). Disabled when no matching report file exists.
• Presentation — opens the dynamic /api/events/<team>/<event>/slides.pdf deck compiled from the event's slide images.
• Webcast — opens the event in an in-page popover. Requires the event widget (ic-event.js) to be loaded; without it the slot is rendered disabled and one console.warn is emitted. The popover dismisses via Escape, the close button, or the backdrop.
• Download annual report (annual rows) — downloads the best-language annual report PDF, or is disabled when none matches.

Theming

Each widget tags its root with data-ic-team="<slug>". The server emits one scoped <style id="ic-theme-<slug>"> block per team per page lifetime, mapping a canonical token vocabulary to --ic-* CSS custom properties. Type scale, font weights, and spacing are hard-coded in the widget CSS; only the role-based design tokens below are customizable.

Group	Tokens
color	color.brand, color.brandHover, color.accent, color.fg, color.fgMuted, color.fgFaint, color.border
font	font.sans, font.display
radius	radius.sm, radius.md, radius.lg, radius.pill
shadow	shadow.card, shadow.cardHover, shadow.cover
asset	asset.logoUrl, asset.logoWhiteUrl

Each token name maps to a CSS variable with the prefix --ic- and a kebab-cased path (e.g. color.brandHover → --ic-color-brand-hover). Widgets render font-family: var(--ic-font-sans, inherit), so a team that supplies no font token inherits the host page's typography rather than imposing a family. Themes are provisioned during customer onboarding (a design handoff is imported into the team's token set) — they are not set via widget attributes.

Localization

UI strings ship in English (en), Finnish (fi), and Swedish (sv). The server resolves the locale per request:

1. The locale attribute (forwarded as ?locale=).
2. The team's configured default locale.
3. The literal en.

If the team restricts its supported locales and the requested one is not allowed, the server falls back to the team default.

Troubleshooting

Widget not loading

• Ensure both <script> tags have type="module".
• Confirm the datastar-pro-alpha1 importmap is present on the page.
• Check the browser console for JavaScript errors and verify the bundle URL is reachable.

Webcast button is disabled

• The Webcast quick-action needs the event widget. Add the ic-event.js script tag (step 3 above).
• Look for [ic-reports] warnings in the console.

Wrong language

• Set the locale attribute explicitly, or configure the team default.
• Confirm the requested locale is in the team's supported set.

CORS errors

• The API allows requests from *.investorcaller.com by default.
• For other domains, contact support to add the origin to the allowlist.