# perfect-popup

> This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6.

Latest version **0.1.3** (published 2021-01-05) · 0 weekly downloads

## Install

```sh
npm install perfect-popup
pnpm add perfect-popup
yarn add perfect-popup
bun add perfect-popup
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-01-05 |
| First published | 2020-12-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 698.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alishoghian |

## Links

- npm: https://www.npmjs.com/package/perfect-popup
- npm.io page: https://npm.io/package/perfect-popup

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 0.1.3 (latest) — 2021-01-05
- 0.0.1 — 2020-12-08

## README

# PerfectPopup

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6.

## Code scaffolding

Run `ng generate component component-name --project perfect-popup` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project perfect-popup`.
> Note: Don't forget to add `--project perfect-popup` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build perfect-popup` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

# ngx Perfect Popup

This is an Angular wrapper library for the [Perfect Popup](https://github.com/Alishoghian/ngx-perfect-poup/). To use this library you should get familiar with the Perfect Popup documentation as well since this documentation only explains details specific to this wrapper.

This documentation is for the latest 0/0.1.x version which requires Angular 10.1.3 or newer. For Angular 10.1.3 you need to use the latest 10.1.3 version. Documentation for the 10.x.x can be found from <a href="https://github.com/Alishoghian/ngx-perfect-poup/tree/master">here</a>.


### Building the library

```bash
npm install
npm run build
```

### Running the example

```bash
npm install
npm run start
```

### Installing and usage

```bash
npm install ngx-perfect-popup --save
```

##### Load the module for your app :

First you need to add the PerfectPopupModule  module in your module.

```javascript
import { PerfectPopupModule} from 'ngx-perfect-popup'


@NgModule({
  ...
  imports: [
    ...
    PerfectPopupModule
  ],
})

```
##### Use it in your components and load popup

```javascript
import { Popup,PopupModel } from 'ngx-perfect-popup'
import { TestPopupComponent } from './test-popup.component';

@Component({
  ...
})
export class AppComponent {

constructor(
    private popup: Popup
  ) { }

openPopup(){
  const config:PopupModel={
      icon: './favicon.ico',//your icon path
      styleClass: "cum-popup", // your custom class style 
      theme: "primary", //defult theme
      dragable: true, // popup can be dragable or not
      resizable: true,  // popup can be resize or not
      position: "center", //popup poditon
      multiPopup: true, // display multiple popup
      overlayBlur: true, // when you only have one popup for display and this property is true backdrop-filter active
      beforeCloseCallBack: true, //when this property is true before close you can subscribe close popup message and let for close whit other function
      toolbarAction: true, //when this property is true toolbar action is shown
      // headerTitle: "Sender Popup2",
      maxHeight: 600,
      maxWidth: 600,
      minHeight: 200,
      minwidth: 250,
      // height: 287,
      // width: 333,
      type: "BaseType2", // you can set type for popup
      data: { //pass data into your injetion component
        temp: "generat data for popup2"
      }
    }
    this.pop.open(TestPopupComponent, config)
}

```
##### subscribe before close:
 when beforeCloseCallBack is true you can resave message and prevent the popup close or colse it 

```javascript

import { Popup } from 'ngx-perfect-popup'

export class TestPopupComponent implements OnInit, OnDestroy {
      sub: Subscription = new Subscription()

  constructor(@Inject("data") public data: any,
    private popup: Popup) { }
    ngOnInit(): void {
        this.sub.add(this.popup.getCloseing().subscribe(data => {
            console.log(data);
            if (this.data.id === data) { 
                setTimeout(() => {
                this.popup.close(data) //when you whant close call close function and pass id to it
                }, 4000);
            }
            }))
    }
```
##### add your custom style whit styleClass :
add style in that component you whant call open popup 
```javascript
::ng-deep.cum-popup-style{
        border-radius: 8px;
        overflow: hidden;
    .header{
        background-color: rgb(132, 3, 158);
        color: #eee;
        .full-screen{
           fill: rgb(0, 171, 177); 
        }
        .exit-full-screen{
           fill: rgb(26, 0, 141); 

        }
        .close{
           fill: rgb(219, 10, 10); 

        }
    }
    .content{
        background-color: #eee;
        color: #333;
    }
}
const config:PopupModel={
      styleClass: "cum-popup-style",
      .
      .
      .
}

```
or you can set globaly style in style.scss 
.cum-popup-style{
        border-radius: 8px;
        overflow: hidden;
    .header{
        background-color: rgb(132, 3, 158);
        color: #eee;
        .full-screen{
           fill: rgb(0, 171, 177); 
        }
        .exit-full-screen{
           fill: rgb(26, 0, 141); 

        }
        .close{
           fill: rgb(219, 10, 10); 

        }
    }
    .content{
        background-color: #eee;
        color: #333;
    }
}

---
_Source: https://npm.io/package/perfect-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._