Popup Fusion

Popup Fusion is a lightweight and customizable popup component for Angular, designed to provide a seamless and flexible modal experience.

Installation

``sh
npm install fusion-popup
`

Usage

Import the FusionPopupComponent in your Angular module:

`typescript
import { PopupFusionModule } from "fusion-popup";

@NgModule({
imports: [FusionPopupComponent],
})
export class AppModule {}
`

Use the component in your template:

`html

Popup content goes here.

`

API

$3

| Property | Type | Default | Description |
| ----------------- | -------------------------- | -------------------------- | --------------------------------------------------------- |
| visible | boolean | false | Controls the visibility of the popup. |
| title | string | '' | Title of the popup. |
| width | string | '400px' | Width of the popup. |
| height | string | '300px' | Height of the popup. |
| shading | boolean | true | Enables/disables the background overlay. |
| shadingColor | string | 'rgba(0, 0, 0, 0.2)' | Color of the background overlay. |
| showCloseButton | boolean | true | Shows/hides the close button. |
| dragEnabled | boolean | true | Enables/disables dragging. |
| resizeEnabled | boolean | true | Enables/disables resizing. |
| animation | FusionPopupAnimationType | 'fade' | Animation type for the popup. |
| zIndex | number | auto | Sets the z-index of the popup. |
| position | FusionPopupPositionType | 'top' | Position of the popup on the screen. |
| component | any | undefined | Custom component to be displayed inside the popup. |
| customTemplate | TemplateRef | undefined | Custom template for the popup content. |
| componentInputs | Record | undefined | Dynamic inputs for the custom component. |
| targetElemntId | string | '' | Target element ID for positioning the popup. |
| dragEnabled | boolean | true | Enables/disables dragging functionality. |
| resizeEnabled | boolean | true | Enables/disables resizing functionality. |
| maxWidth | string | undefined | Maximum width of the popup. |
| minWidth | string | '100px' | Minimum width of the popup. |
| maxHeight | string | undefined | Maximum height of the popup. |
| minHeight | string | '100px' | Minimum height of the popup. |
| loading | boolean | false | Shows or hides the loading indicator. |
| showHeader | boolean | true | Shows or hides the header of the popup. |
| showFooter | boolean | true | Shows or hides the footer of the popup. |
| buttons | FusionButtonProperties[] | [] | Array of buttons to be displayed inside the popup Footer. |
| positionXY | object | { x: 0, y: 0 } | XY coordinates for the popup position. |
| |
| --------------- | ------------------------- | -------------------------- | -------------------------------------------------- |
| visible | boolean | false | Controls the visibility of the popup. |
| title | string | '' | Title of the popup. |
| width | string | '400px' | Width of the popup. |
| height | string | '300px' | Height of the popup. |
| shading | boolean | true | Enables/disables the background overlay. |
| shadingColor | string | 'rgba(0, 0, 0, 0.2)' | Color of the background overlay. |
| showCloseButton | boolean | true | Shows/hides the close button. |
| dragEnabled | boolean | true | Enables/disables dragging. |
| resizeEnabled | boolean | true | Enables/disables resizing. |
| animation | FusionPopupAnimationType | 'fade' | Animation type for the popup. |

$3

| Event | Type | Description |
| ----------------- | -------------------------------------------------------------- | -------------------------------------------------- |
| visibleChange | EventEmitter | Emitted when the visibility of the popup changes. |
| onOpened | EventEmitter | Emitted when the popup is opened. |
| onClosed | EventEmitter | Emitted when the popup is closed. |
| onOptionChanged | EventEmitter> | Emitted when an option of the popup is changed. |
| onContentLoaded | EventEmitter> | Emitted when the popup content is loaded. |
| onDrag | EventEmitter | Emitted when the drag operation of the popup ends. |
| onResize | EventEmitter | Emitted when the popup is resized. |
| onButtonClick | EventEmitter | Emitted when a button inside the popup is clicked. |

$3

| Method | Description |
| -------------------------------------- | --------------------------------------------------------------- |
| open() | Opens the popup. |
| close() | Closes the popup. |
| startLoading() | Shows a loading spinner inside the popup. |
| stopLoading() | Hides the loading spinner. |
| getComponent() | return the instance of component rendred dynamicly. |
| disableButton(id: string): void | Disables the button with the specified id. |
| enableButton(id: string): void | Enables the button with the specified id. |
| hideButton(id: string): void | Hides the button with the specified id. |
| showButton(id: string): void | Shows the button with the specified id. |
| startButtonLoading(id: string): void | Starts the loading state on the button with the specified id. |
| endButtonLoading(id: string): void | Ends the loading state on the button with the specified id. |

Dynamic Open Mode

$3

The PopupFusionService allows you to create popups dynamically without needing to define them in the template.

#### Importing the Service

`typescript
import { PopupFusionService } from "fusion-popup";
`

#### Creating a Popup Dynamically

##### step 1: set the service FusionPopupService as Application provider

`typescript
import { FusionPopupService } from 'fusion-popup';

@Component({
selector: 'app-root',
imports: [],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
providers: [FusionPopupService],
})

constructor(private popupService: PopupFusionService) {}

openPopup() {
const popupInstance = this.popupService.createPopup({
title: 'Dynamic Popup',
width: '500px',
height: '400px',
component : YourComponent
});
}
`

#### Closing a Popup

`typescript
this.popupService.closePopup(popupInstance.id);
`

Example

$3

`typescript
import { Component } from "@angular/core";
import { PopupFusionService } from "fusion-popup";

@Component({
selector: "app-root",
template: Open Popup ,
})
export class AppComponent {
constructor(private popupService: PopupFusionService) {}

openPopup() {
this.popupService.createPopup({
title: "Dynamic Popup",
width: "500px",
height: "400px",
});
}
}
`

Example

$3

`typescript
import { Component } from "@angular/core";
import { PopupFusionService } from "fusion-popup";

@Component({
selector: "app-root",
template: Open Popup ,
})
export class AppComponent {
constructor(private popupService: PopupFusionService) {}

openPopup() {
const popup = this.popupFusionService.createPopup({
width: "700px",
height: "200px",
positionXY: { x: 0, y: 0 },
title: "Popup Title",
component: AppComponent,
buttons: [
{
id: "close",
text: "Close",
type: "info",
stylingMode: "outlined",
},
],
});

popup.onButtonClick.subscribe((event: FusionButtonClickEvent) => {
if (event.button.id === "close") {
// controle the buttons properties from event.button
event.button.loading = true;
// controle the buttons properties from popup.button
popup.startButtonLoading("close");
// controle the popup form event
event.popup.close();

// controle the component rendred from outside and access to all public properties and methods
const rendredComponent = popp.getComponent();
// controle the popup from instance
popup.close();
}
});
}
}
``

License

MIT