Safety and interlocks

Cause and Effect Matrix <smart-cause-effect-matrix>

CauseEffectMatrix displays the cause and effect chart of a safety instrumented system as a live matrix.

Stylesheet

The component is styled by source/styles/default/smart.causeeffectmatrix.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 13 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-cause-effect-matrix, 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-cause-effect-matrix {
    --smart-cem-cell-size: ...;
    --smart-cem-cause-width: ...;
    --smart-cem-cause-max: ...;
    --smart-cem-effect-height: ...;
    --smart-cem-effect-max: ...;
    --smart-cem-gap: ...;
    --smart-cem-active: ...;
    --smart-cem-tripped: ...;
    --smart-cem-ok: ...;
    --smart-cem-panel: ...;
    --smart-cem-header: ...;
    --smart-cem-border: ...;
    --smart-cem-line: ...;
}

/* one instance */
#causeEffectMatrix {
    --smart-cem-cell-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">