Electronic records (21 CFR Part 11)

Audit Trail <smart-audit-trail>

AuditTrail displays audit trail entries for review, as required by 21 CFR Part 11 §11.10(e).

Stylesheet

The component is styled by source/styles/default/smart.audittrail.css, which is included in smart.industrial-elements.css. It uses the theme's CSS variables and the Industrial tokens (--smart-industrial-*) described in the Themes and Styling guide, so it follows the theme applied to the page.

CSS variables

The component declares 10 CSS variables of its own, on the component itself. Set them in a rule that selects the component, loaded after the component's stylesheet: smart-audit-trail, or a class or an id on it. A value set on a container does not reach the component, because the component's own declaration replaces the inherited one.

smart-audit-trail {
    --smart-audit-size: ...;
    --smart-audit-background: ...;
    --smart-audit-header-background: ...;
    --smart-audit-border: ...;
    --smart-audit-primary: ...;
    --smart-audit-primary-text: ...;
    --smart-audit-ok-text: ...;
    --smart-audit-error-text: ...;
    --smart-audit-selected: ...;
    --smart-audit-readout-font: ...;
}

/* one instance */
#auditTrail {
    --smart-audit-size: ...;
}

Themes

Two ISA-101 themes ship with the package: smart.industrial.css and smart.industrial-dark.css. Load one after the base theme and set theme="industrial" or theme="industrial-dark" on the body element. The demo page switches between the three.

<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" />
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-elements.css" />
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial.css" />

<body theme="industrial">