This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
npm install @ppwcode/ng-common-componentsThis library was generated with Angular CLI version 16.2.0.
#### 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.
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 | | | |