Shared ag-grid styles and components for payroll no ui front ends.

Prerequisites

• The VUD colour palette needs to be available as css variables on the format --neutral-05, --neutral-10, etc.
• The font Open Sans Regular needs to be available.

Usage

Wrap the grid element in an element with the class ag-theme-visma to apply the styles.

These classes can be set on a cell to trigger styling of the cell and/or the left border of its row:

• visma-not-relevant-cell
• visma-invalid-cell
• visma-warning-cell

These classes can be set on a row to trigger styling of the left border and background of the row:

• visma-invalid-row
• visma-warning-row

The class visma-mandatory-cell can be set on a cell to show a "*" in the cell when the row is expanded / in focus.

To disable styling of selected rows add the class no-row-selection-style to the same element that has the ag-theme-visma class.

To disable colored left borders on detail rows add the class visma-no-detail-border-left to the same element that has the ag-theme-visma class.

If a toolbar is present above the grid, give it the class visma-ag-grid-toolbar to remove the rounding of the grids top corners. In the same way, if a grid message is present above the grid, give it the class visma-ag-grid-message to remove the rounding of the grids top corners.

The class visma-active-icon can be set on an icon element to draw attention to that icon (e.g. the filter icon when a filter is active).

The class visma-floating-filter-row-hidden can be used on the same element that has the ag-theme-visma class to only show the filter icon next to the header name when the floating filter row is hidden.