@ppwcode/ng-common-components

NgCommonComponents

This library was generated with Angular CLI version 16.2.0.

Library contents

enum

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

Theming

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