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). With the upcoming-event attribute it instead advertises an upcoming, not-yet-published report ahead of the event.
• <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

Hero Upcoming Mode

Set upcoming-event to use the hero as an advertisement for a future report or webcast — e.g. ahead of a results day:

<ic-report-hero team="acme" locale="en" upcoming-event="q3-2026-webcast"></ic-report-hero>

• The value is matched against the numeric event id when it is purely numeric, against the event slug otherwise. The event must be public, archive-eligible (Q1–Q4 / AGM / AGN / CMD), linked to a financial-calendar row, and still in the future.
• The hero renders an Upcoming / Tulossa badge, the event title, the release date from the linked financial calendar (plus the release time when set), and add-to-calendar links (Google / Yahoo / iCal — the same entries <ic-financial-calendar> offers). Draft editorial copy (cover image, headline, quote) appears when the period's report row already has a translation in the request language.
• Self-healing fallback: the stream is one-shot per page load; once the event's date has passed (or the identifier is unknown), the hero falls back to the latest published report on the next load — no host-page change is needed after the event day.
• Morph targets are per-instance, so a published hero and an upcoming hero can coexist on the same page.

<ic-reports-archive> Attributes

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.

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.