NgCommonComponents

This library was generated with Angular CLI version 16.2.0.

Library contents

$3

#### Severity

An enum that indicates the severity of a message

#### Dashboard items table

A grid that hosts dashboard items.

#### Expandable card

A card with a colored top-bar. The card can be expanded and collapsed which can optionally be disabled.

#### Message bar

A card that can show a message of a specific severity. It is colored depending on the severity.

#### Search filter

A component to show search filters in a card with a search button and a reset-form button.

#### Table

A component to render search result in a grid. All columns can be configured to render correctly.

Usage

$3

The following CSS variables are available for theming. Just add them to the body selector.

#### ppw-expandable-card

| Variable name | Extra info |
| ----------------------------------------------- | ---------------- |
| --ppw-expandable-card-header-background-color | |
| --ppw-expandable-card-header-indicator-color | |
| --ppw-expandable-card-header-text-color | |
| --ppw-expandable-card-header-height-collapsed | Defaults to 32px |
| --ppw-expandable-card-header-height-expanded | Defaults to 32px |

#### ppw-message-bar

| Variable name | Extra info |
| -------------------------------------------- | ----------------------------------------------------------- |
| --ppw-message-bar-error-background-color | |
| --ppw-message-bar-error-text-color | |
| --ppw-message-bar-info-background-color | |
| --ppw-message-bar-info-text-color | |
| --ppw-message-bar-margin | Adds extra margin to the outer section of the message bar. |
| --ppw-message-bar-spacing | Adds extra spacing to the inner section of the message bar. |
| --ppw-message-bar-success-background-color | |
| --ppw-message-bar-success-text-color | |
| --ppw-message-bar-warning-background-color | |
| --ppw-message-bar-warning-text-color | |

#### ppw-table

| Variable name | Extra info |
| --------------------------------------------------- | --------------------------------------------------------------------------- |
| --ppw-table-height | |
| --ppw-table-row-highlight-background-color | |
| --ppw-table-row-highlight-sticky-background-color | This can't be a transparent color since this would show overlapping content |

#### ppw-dashboard-items-table

> TIP: If you want the dashboard items to use all available width, set the --ppw-dashboard-items-table-width to 100%.

| Variable name | Default | Screen max-width 840px | Screen max-width 425px |
| ---------------------------------------------------- | ------- | ---------------------- | ---------------------- |
| --ppw-dashboard-wrapper-container-vertical-margin | 0 | | |
| --ppw-dashboard-items-table-width | 800px | | |
| --ppw-dashboard-item-card-margin | 8px | | |
| --ppw-dashboard-item-card-image-vertical-padding | 32px | 32px | 16px |
| --ppw-dashboard-item-card-image-horizontal-padding | 32px | 0 | 0 |
| --ppw-dashboard-item-card-image-font-size | 140px | | 60px |
| --ppw-dashboard-item-card-header-text-align | start | | center |
| --ppw-dashboard-items-table-primary-color | | | |
| --ppw-dashboard-items-table-background-color | | | |