File List

Preview

<esa-file-list id="files"></esa-file-list>

<script>
  el.files = [
    { name: 'nesting-bird-survey-2026.pdf', href: '#' },
    { name: 'weap-signin-2026-05.pdf', href: '#' },
  ];
</script>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-file-list';

@Component({
  selector: 'app-file-list-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-file-list id="files" [files]="files"></esa-file-list>
  `,
})
export class FileListDemo {
  files = [
    { name: 'nesting-bird-survey-2026.pdf', href: '#' },
    { name: 'weap-signin-2026-05.pdf', href: '#' },
  ];
}

Download & remove

Each row can carry a download action, a remove action, or both. The editor case uses removable with downloadable=false; a read-only display uses the default (download only).

<esa-file-list downloadable removable></esa-file-list>  <!-- both -->
<esa-file-list removable downloadable="false"></esa-file-list>  <!-- remove only -->

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-file-list';

@Component({
  selector: 'app-file-list-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-file-list downloadable removable></esa-file-list>
    <!-- both -->
    <esa-file-list removable downloadable="false"></esa-file-list>
    <!-- remove only -->
  `,
})
export class FileListDemo {}

API

Events

Accessibility

• Each action button carries an explicit aria-label naming the file (e.g. “Download nesting-bird-survey.pdf”).
• File names truncate with ellipsis; the full name is available via the row title.
• Removing a row updates the local files array and emits remove; consumers persist the change.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-file-list is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.