NgxSscPopover

Angular Scania Shared Components Popover

This library was generated with Angular CLI version 12.2.0 & build on Angular Material.

Installation

Run npm install ngx-ssc-popover --save in your Angular project.

Note: Don't forget to install ng add @angular/materialnpm if you don't have it in your project

Import NgxSscPopoverModule in your app.module.ts file.

Import @import "../node_modules/ngx-ssc-popover/ngx-ssc-popover.scss" in your global style file styles.scss/less/css file.

Usage

<mat-icon
        headerTitle="Popover Title"
        placement="above"
        
        [headerIcon]="ngxSscPopoverHeaderIcon"
        [sscPopoverErrorMessage]="ngxSscPopoverErrorMessage"
        [sscPopover]="ngxSscPopoverContent"
       
        (reFetchContent)="onFetchPopoverContent()"
>info</mat-icon>

Development workflow

First Header	type	default	usage
placement	PopoverPlacement [left, right, above, below, auto]	above	To defined the popover placement.
delay	number	500	Popover delay when opening.
[headerIcon]	SSCIcon, undefined	undefined	To add an icon in the header of the popover that emits an event.
[headerTitle]	string, undefined	undefined	To add a title in the header of the popover.
[sscPopover]	string, undefined	undefined	Popover content
[sscPopoverErrorMessage]	string, undefined	undefined	Popover error message if an error happened during fetching the content
(reFetchContent)	Event		Emit an event if the header icon got clicked.

SSCIcon class that is used as a type for headerIcon take two properties

Properties	types	default	usage
name	string, undefined	undefined	The icon name, can add find the list of icons under https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list
color	success, info, danger, warning	info	The icon color

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.