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.