@euro-ombudsman/ngx-modal-dialog 13.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Greentube I.E.S. GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,269 @@
+# ngx modal dialog
+[![Build Status](https://travis-ci.org/Greentube/ngx-modal.svg?branch=master)](https://travis-ci.org/Greentube/ngx-modal)
+[![npm version](https://img.shields.io/npm/v/ngx-modal-dialog.svg)](https://www.npmjs.com/package/ngx-modal-dialog)
+> Dynamic modal dialog for Angular that does not sit on DOM waiting to be triggered, but rather gets injected upon need.
+
+Made with Bootstrap 4 styles in mind, but configurable to any framework or custom set of styles.
+Simple demo can be found [here](https://greentube.github.io/ngx-modal/demo).
+
+> This documentation is for version 4.x.x and Angular 10+. If you are using older version of Angular please use [3.x version for v6-v8](https://github.com/Greentube/ngx-modal/tree/v3.x.x) or [2.x version for v2-v5](https://github.com/Greentube/ngx-modal/tree/v2.x.x).
+
+# Table of contents:
+- [Installation](#installation)
+- [How it works](#how-it-works)
+- [Styles and visuals](#styles-and-visuals)
+- [Usage](#usage)
+- [API](#api)
+    - [ModalDialogService](#modaldialogservice)
+    - [IModalDialog](#imodaldialog)
+    - [IModalDialogOptions](#imodaldialogoptions)
+    - [IModalDialogButton](#imodaldialogbutton)
+    - [IModalDialogSettings](#imodaldialogsettings)
+- [License](#license)
+
+## Installation
+
+```
+npm install --save ngx-modal-dialog
+```
+## How it works
+Modal dialog uses `ComponentFactoryResolver` to inject the given child component to the dialog.
+[ModalDialogService](#modaldialogservice) makes sure that only one instance of a modal dialog is opened at a time.
+With [IModalDialogOptions](#imodaldialogoptions) you can define which component will be rendered inside the dialog and configure it based on your needs.
+
+You can further use action buttons to control modal dialog from external component or child component. If action performed on button click is successful, modal dialog will close. Otherwise it will alert user.
+
+## Styles and visuals
+
+`Ngx-modal-dialog` is intended to be used with Bootstrap 4, however you can apply your custom styles from your desired UI framework by providing class names in [IModalDialogSettings](#imodaldialogsettings).
+
+## Usage
+
+1. Include the `ngx-modal` module in your application at any place. The recommended way is to add `forRoot` initialization in the main app module.
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalDialogModule } from 'ngx-modal-dialog';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        ModalDialogModule.forRoot()
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+2. Create a custom component that implements `IModalDialog` or use the `SimpleModalDialog` as a child component.
+
+Custom component should be inserted into both `declarations` and `entryComponents` in the NgModule they are part of. `entryComponents` has to be used since component is dynamically inserted onto the page and Angular is not aware of it.
+
+3. Inject the `ModalDialogService` where you want to open the dialog. Call `openDialog` passing parent `ViewContainerRef` and partial `IModalDialogOptions` object:
+```ts
+constructor(modalService: ModalDialogService, viewRef: ViewContainerRef) { }
+
+openNewDialog() {
+  this.modalService.openDialog(this.viewRef, {
+    title: 'Some modal title',
+    childComponent: SimpleModalComponent
+  });
+}
+```
+4. Arbitrary define `actionButtons` in modal dialog options or child component to control modal dialog.
+
+```ts
+class MyModalComponent implements IModalDialog {
+  actionButtons: IModalDialogButton[];
+
+  constructor() {
+    this.actionButtons = [
+      { text: 'Close' }, // no special processing here
+      { text: 'I will always close', onAction: () => true },
+      { text: 'I never close', onAction: () => false }
+    ];
+  }
+
+  dialogInit(reference: ComponentRef<IModalDialog>, options: Partial<IModalDialogOptions<any>>) {
+    // no processing needed
+  }
+}
+```
+
+Action button can be of two types:
+- with return value  
+  Used for controlling the dialog life.  
+  If value is `truthful` (true, successful Promise or Observable) than it will close the dialog  
+  If value is `falsy` (false, rejected Promise or failed Observable) it will trigger alert style and not close the dialog.
+- without return value  
+  Has no direct effect on dialog. Can be used to trigger some arbitrary functionality (e.g. copy values to clipboard)
+
+## API
+
+### ModalDialogService
+#### Methods:
+- `openDialog(target: ViewContainerRef, options: Partial<IModalDialogOptions<T>> = {})`: Closes existing and opens a new modal dialog according to IModalDialogOptions.
+`T` represents a type of options `data` field. If you don't care about strong typing just pass `any`.
+
+### IModalDialog
+Every component that is used as modal dialog must implement `IModalDialog`.
+#### Methods:
+- `dialogInit(reference: ComponentRef<IModalDialog>, options: Partial<IModalDialogOptions<any>>) => void`
+Mandatory: `true`
+Default: -
+This method is called after initialization of child component. Purpose of the method is to pass necessary information from outer scope to child component.
+#### Properties:
+- `actionButtons`
+Mandatory: `false`
+Default: -
+Type: `string`
+Modal heading text
+
+### IModalDialogOptions
+#### Interface:
+```ts
+interface IModalDialogOptions<T> {
+  title: string;
+  childComponent: IModalDialog;
+  onClose: ModalDialogOnAction;
+  actionButtons: IModalDialogButton[];
+  data: T;
+  placeOnTop: boolean;
+  settings: IModalDialogSettings;
+  closeDialogSubject: Subject<void>;
+}
+```
+This is generic interface, where `T` is arbitrary type of `data` section.
+#### Interface details:
+- title: `string`  
+Modal heading text
+
+- childComponent: `any`  
+Component type that will be rendered as a content of modal dialog. Component must implement `IModalDialog` interface.
+
+- onClose(): `ModalDialogOnAction`
+Function to be called on close button click. In case of Promise and Observable, modal dialog will not close unless successful resolve happens. In case of boolean, modal dialog will close only if result is `truthful`.
+
+- actionButtons: `Array<IModalDialogButton>`  
+Footer action buttons for control of modal dialog. See [IModalDialogButton](#imodaldialogbutton).
+Action buttons defined in child component have priority over action buttons defined via options.
+Action buttons close the modal dialog upon successful operation.
+
+- data: `T`  
+Arbitrary data that will be passed to child component via `dialogInit` method.
+
+- placeOnTop: `boolean`
+Flag stating whether opening the modal dialog should close all the other modal dialogs, or modal should be rendered on top of existing ones.
+
+
+- settings: `IModalDialogSettings`  
+Additional settings for granular configuration of modal dialog. See [IModalDialogSettings](#imodaldialogsettings).
+
+- closeDialogSubject:`Subject<void>`  
+Custom modal closing subject. Can be used to manually trigger modal dialog close from within the child component. 
+
+### IModalDialogButton
+#### Interface:
+```ts
+interface IModalDialogButton {
+  text: string;
+  buttonClass?: string;
+  onAction?: ModalDialogOnAction;
+}
+```
+#### Interface details:
+- text: `string`  
+Caption/text on the button
+- buttonClass: `string`  
+Default: `btn btn-primary`  
+Class name of button
+- onAction(): `Promise<any> | Observable<any> | boolean`  
+Function to be called on button click. In case of Promise and Observable, modal dialog will not close unless successful resolve happens. In case of boolean, modal dialog will close only if result is `truthful`.
+#### ModalDialogOnAction type
+```ts
+type ModalDialogOnAction = () => Promise<any> | Observable<any> | boolean | void;
+```
+Function returning Promise, Observable, boolean or no value. Modal dialog will close automatically if return of action is:
+* Promise, once promise gets resolved
+* Observable, once observable successfully finishes
+* boolean and value is `true`
+
+Action button will initiate alert behavior if return is:
+* Promise, once promise gets rejected
+* Observable, once observable fails or throws error
+* boolean and value is `false`
+
+If action button returns `void`, there are no side effects.
+
+### IModalDialogSettings
+#### Interface
+```ts
+interface IModalDialogSettings {
+  overlayClass: string;
+  overlayAnimationTriggerClass: string;
+  modalClass: string;
+  modalAnimationTriggerClass: string;
+  contentClass: string;
+  headerClass: string;
+  headerTitleClass: string;
+  closeButtonClass: string;
+  closeButtonTitle: string;
+  bodyClass: string;
+  footerClass: string;
+  alertClass: string;
+  alertDuration: number;
+  buttonClass: string;
+  notifyWithAlert: boolean;
+}
+```
+
+#### Interface details:
+- overlayClass: `string`  
+Default: `modal-backdrop fade show`  
+Style of the backdrop overlay layer
+- overlayAnimationTriggerClass: `string`  
+Default: `show`  
+Class that triggers the initial/ending animation of modal overlay
+- modalClass: `string`  
+Default: `modal fade ngx-modal`  
+Style of modal wrapper
+- modalAnimationTriggerClass: `string`  
+Default: `show`  
+Class that triggers the initial/ending animation of modal wrapper
+- modalDialogClass: `string`  
+Default: `modal-dialog modal-dialog-centered`  
+Style of modal dialog
+- contentClass: `string`  
+Default: `modal-content`  
+Modal dialog inner content class
+- headerClass: `string`  
+Default: `modal-header`  
+Modal dialog header class
+- headerTitleClass: `string`  
+Default: `modal-title`  
+Modal dialog header title class
+- closeButtonClass: `string`  
+Default: `close glyphicon glyphicon-remove`  
+Modal dialog header close button class
+- closeButtonTitle: `string`  
+Default: `CLOSE`  
+Close button title
+- bodyClass: `string`  
+Default: `modal-body`  
+Modal dialog body class
+- footerClass: `string`  
+Default: `modal-footer`  
+Modal dialog footer class
+- alertClass: `string`  
+Default: `ngx-modal-shake`  
+Style to be appended to dialog once alert happens
+- alertDuration: `number`  
+Default: `250`  
+Duration of alert animation
+- buttonClass: `string`  
+Default: `btn btn-primary`  
+Style of footer action buttons
+- notifyWithAlert: `number`  
+Default: `true`  
+Define whether modal should alert user when action fails
+
+## License
+Licensed under MIT

package/demo/README.md

@@ -0,0 +1,27 @@
+# Demo
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package/esm2020/euro-ombudsman-ngx-modal-dialog.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVyby1vbWJ1ZHNtYW4tbmd4LW1vZGFsLWRpYWxvZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ldXJvLW9tYnVkc21hbi1uZ3gtbW9kYWwtZGlhbG9nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=

package/esm2020/modal-dialog-instance.service.mjs

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ModalDialogInstanceService {
+    constructor() {
+        /**
+         * Used to make sure there is exactly one instance of Modal Dialog
+         */
+        this.componentRefs = [];
+    }
+    /**
+     * Closes existing modal dialog
+     */
+    closeAnyExistingModalDialog() {
+        while (this.componentRefs.length) {
+            this.componentRefs[this.componentRefs.length - 1].destroy();
+        }
+    }
+    /**
+     * Save component ref for future comparison
+     * @param componentRef
+     */
+    saveExistingModalDialog(componentRef) {
+        // remove overlay from top element
+        this.setOverlayForTopDialog(false);
+        // add new component
+        this.componentRefs = [...this.componentRefs, componentRef];
+        componentRef.instance.showOverlay = true;
+        componentRef.onDestroy(() => {
+            this.componentRefs.pop();
+            this.setOverlayForTopDialog(true);
+        });
+    }
+    setOverlayForTopDialog(value) {
+        if (this.componentRefs.length) {
+            this.componentRefs[this.componentRefs.length - 1].instance.showOverlay = value;
+        }
+    }
+}
+ModalDialogInstanceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModalDialogInstanceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalDialogInstanceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModalDialogInstanceService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModalDialogInstanceService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtZGlhbG9nLWluc3RhbmNlLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbW9kYWwtZGlhbG9nLWluc3RhbmNlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBSXpELE1BQU0sT0FBTywwQkFBMEI7SUFEdkM7UUFFRTs7V0FFRztRQUNLLGtCQUFhLEdBQXlDLEVBQUUsQ0FBQztLQWlDbEU7SUEvQkM7O09BRUc7SUFDSCwyQkFBMkI7UUFDekIsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sRUFBRTtZQUNoQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQzdEO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILHVCQUF1QixDQUFDLFlBQWdEO1FBQ3RFLGtDQUFrQztRQUNsQyxJQUFJLENBQUMsc0JBQXNCLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbkMsb0JBQW9CO1FBQ3BCLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsWUFBWSxDQUFDLENBQUM7UUFDM0QsWUFBWSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1FBRXpDLFlBQVksQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQzFCLElBQUksQ0FBQyxhQUFhLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDekIsSUFBSSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3BDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELHNCQUFzQixDQUFDLEtBQWM7UUFDbkMsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sRUFBRTtZQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1NBQ2hGO0lBQ0gsQ0FBQzs7dUhBcENVLDBCQUEwQjsySEFBMUIsMEJBQTBCOzJGQUExQiwwQkFBMEI7a0JBRHRDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnRSZWYsIEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1vZGFsRGlhbG9nQ29tcG9uZW50IH0gZnJvbSAnLi9tb2RhbC1kaWFsb2cuY29tcG9uZW50JztcblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIE1vZGFsRGlhbG9nSW5zdGFuY2VTZXJ2aWNlIHtcbiAgLyoqXG4gICAqIFVzZWQgdG8gbWFrZSBzdXJlIHRoZXJlIGlzIGV4YWN0bHkgb25lIGluc3RhbmNlIG9mIE1vZGFsIERpYWxvZ1xuICAgKi9cbiAgcHJpdmF0ZSBjb21wb25lbnRSZWZzOiBDb21wb25lbnRSZWY8TW9kYWxEaWFsb2dDb21wb25lbnQ+W10gPSBbXTtcblxuICAvKipcbiAgICogQ2xvc2VzIGV4aXN0aW5nIG1vZGFsIGRpYWxvZ1xuICAgKi9cbiAgY2xvc2VBbnlFeGlzdGluZ01vZGFsRGlhbG9nKCkge1xuICAgIHdoaWxlICh0aGlzLmNvbXBvbmVudFJlZnMubGVuZ3RoKSB7XG4gICAgICB0aGlzLmNvbXBvbmVudFJlZnNbdGhpcy5jb21wb25lbnRSZWZzLmxlbmd0aCAtIDFdLmRlc3Ryb3koKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogU2F2ZSBjb21wb25lbnQgcmVmIGZvciBmdXR1cmUgY29tcGFyaXNvblxuICAgKiBAcGFyYW0gY29tcG9uZW50UmVmXG4gICAqL1xuICBzYXZlRXhpc3RpbmdNb2RhbERpYWxvZyhjb21wb25lbnRSZWY6IENvbXBvbmVudFJlZjxNb2RhbERpYWxvZ0NvbXBvbmVudD4pIHtcbiAgICAvLyByZW1vdmUgb3ZlcmxheSBmcm9tIHRvcCBlbGVtZW50XG4gICAgdGhpcy5zZXRPdmVybGF5Rm9yVG9wRGlhbG9nKGZhbHNlKTtcbiAgICAvLyBhZGQgbmV3IGNvbXBvbmVudFxuICAgIHRoaXMuY29tcG9uZW50UmVmcyA9IFsuLi50aGlzLmNvbXBvbmVudFJlZnMsIGNvbXBvbmVudFJlZl07XG4gICAgY29tcG9uZW50UmVmLmluc3RhbmNlLnNob3dPdmVybGF5ID0gdHJ1ZTtcblxuICAgIGNvbXBvbmVudFJlZi5vbkRlc3Ryb3koKCkgPT4ge1xuICAgICAgdGhpcy5jb21wb25lbnRSZWZzLnBvcCgpO1xuICAgICAgdGhpcy5zZXRPdmVybGF5Rm9yVG9wRGlhbG9nKHRydWUpO1xuICAgIH0pO1xuICB9XG5cbiAgc2V0T3ZlcmxheUZvclRvcERpYWxvZyh2YWx1ZTogYm9vbGVhbikge1xuICAgIGlmICh0aGlzLmNvbXBvbmVudFJlZnMubGVuZ3RoKSB7XG4gICAgICB0aGlzLmNvbXBvbmVudFJlZnNbdGhpcy5jb21wb25lbnRSZWZzLmxlbmd0aCAtIDFdLmluc3RhbmNlLnNob3dPdmVybGF5ID0gdmFsdWU7XG4gICAgfVxuICB9XG59XG4iXX0=