ng-hub-ui-modal 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Carlos Morcillo
+
+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,343 @@
+# ng-hub-ui-modal
+
+This library provides a decoupled and independent modal component, originally based on the modals from ng-bootstrap but with additional features and flexibility. It aims to offer a more versatile and customizable modal solution for Angular applications.
+
+## Motivation
+
+The main motivation behind the development of this library was to decouple the modal component from ng-bootstrap, allowing it to be used autonomously without relying on the entire ng-bootstrap library. Additionally, new functionalities and customization options have been introduced to better suit the needs of different projects.
+
+## Features
+
+- **Standalone Modal Component**: No need to install ng-bootstrap or any other additional dependencies.
+- **Bootstrap-based Styling**: While using its own CSS classes, the modal's appearance follows Bootstrap's design guidelines, making it easier to customize.
+- **Flexible Content Projection**: Instead of projecting all content into a single `ng-content`, this library allows defining CSS selectors to project content into different parts of the modal (header, body, footer).
+- **Customizable Dismiss Triggers**: You can define a CSS selector for elements that will act as dismiss triggers for the modal.
+- **Data Binding to Modal Component**: It's possible to pass additional data to the modal component through the configuration options.
+- **New Control Methods**: Methods have been added to show and hide the modal on demand.
+
+## Installation
+
+```
+npm install ng-hub-ui-modal
+```
+
+## Usage
+
+1. Import the `ModalModule` into your Angular module:
+
+```typescript
+import { ModalModule } from 'ng-hub-ui-modal';
+
+@NgModule({
+  imports: [
+    // ...
+    ModalModule
+  ]
+})
+export class AppModule {}
+```
+
+2. Inject the `ModalService` into your component:
+
+```typescript
+import { ModalService } from 'ng-hub-ui-modal';
+
+@Component({...})
+export class MyComponent {
+  constructor(private modalService: ModalService) {}
+
+  openModal() {
+    const modalRef = this.modalService.open(MyModalComponent, {
+      headerSelector: '.modal-header',
+      footerSelector: '.modal-footer',
+      dismissSelector: '[data-dismiss="modal"]',
+      data: { /* additional data */ }
+    });
+  }
+}
+```
+
+3. Define the modal component:
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <div class="modal-header">
+      <h4 class="modal-title">Modal Title</h4>
+    </div>
+    <div class="modal-body">
+      Modal Body
+    </div>
+    <div class="modal-footer">
+      <button type="button" data-dismiss="modal">Close</button>
+    </div>
+  `
+})
+export class MyModalComponent {}
+```
+
+## Documentation
+
+### ModalService
+
+The `ModalService` is the main entry point for creating and managing modals in your application.
+
+#### `open(component, options?)`
+
+Opens a new modal instance with the provided component and options.
+
+**Arguments:**
+- `component` (`ComponentType<any>`): The component to be displayed in the modal.
+- `options` (`ModalOptions` | *optional*): An object containing the configuration options for the modal.
+
+**Returns:** `ModalRef`
+
+#### `ModalOptions`
+
+The `ModalOptions` object allows you to configure various aspects of the modal.
+
+- `headerSelector` (`string` | *optional*): A CSS selector for the header section of the modal content. Any elements matching this selector will be projected into the modal header.
+- `bodySelector` (`string` | *optional*): A CSS selector for the body section of the modal content. Any elements matching this selector will be projected into the modal body.
+- `footerSelector` (`string` | *optional*): A CSS selector for the footer section of the modal content. Any elements matching this selector will be projected into the modal footer.
+- `dismissSelector` (`string` | *optional*): A CSS selector for elements that should act as dismiss triggers for the modal. When clicked, these elements will dismiss the modal. Default: `'[data-dismiss="modal"]'`.
+- `data` (`any` | *optional*): An object containing additional data that will be bound to the modal component instance.
+
+#### `ModalRef`
+
+The `ModalRef` is a reference to the currently open modal instance. It provides methods to interact with the modal.
+
+- `dismiss(reason?)`: Dismisses the modal with an optional reason.
+  - `reason` (`any` | *optional*): A value that will be passed to the modal's dismissal event.
+- `result`: A promise that resolves when the modal is dismissed, providing the dismissal reason.
+
+### Modal Component
+
+The modal component is the component that you define to be displayed within the modal. It can have any structure and content you desire, but it's recommended to follow the Bootstrap modal structure for consistency.
+
+Here's an example modal component:
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-my-modal',
+  template: `
+    <div class="modal-header">
+      <h4 class="modal-title">{{ title }}</h4>
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      {{ body }}
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+      <button type="button" class="btn btn-primary" (click)="confirm()">Confirm</button>
+    </div>
+  `
+})
+export class MyModalComponent {
+  title: string;
+  body: string;
+
+  constructor(@Inject(MODAL_DATA) public data: any) {
+    this.title = data.title;
+    this.body = data.body;
+  }
+
+  confirm() {
+    // Perform any necessary actions here
+    // ...
+
+    // Dismiss the modal
+    this.modalRef.dismiss('confirmed');
+  }
+}
+```
+
+In this example, the modal component receives data through the `MODAL_DATA` injection token, which is populated with the `data` object passed in the `ModalOptions`. The component displays a modal with a header, body, and footer, with a "Cancel" button that dismisses the modal and a "Confirm" button that performs some actions and then dismisses the modal with the reason `'confirmed'`.
+
+Note that the `modalRef` instance is injected into the modal component automatically by the library, allowing you to interact with the modal from within the component.
+
+### Styling
+
+The modal component uses Bootstrap's modal styles by default, but you can override them or define your own styles by targeting the appropriate CSS classes. The modal component has the following structure:
+
+```html
+<div class="modal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <!-- Header content projected here -->
+      </div>
+      <div class="modal-body">
+        <!-- Body content projected here -->
+      </div>
+      <div class="modal-footer">
+        <!-- Footer content projected here -->
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+You can target these classes or add your own classes to customize the modal's appearance.
+
+## Examples
+
+### Basic Modal
+
+```typescript
+import { Component } from '@angular/core';
+import { ModalService } from 'ng-hub-ui-modal';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <button (click)="openModal()">Open Modal</button>
+  `
+})
+export class ExampleComponent {
+  constructor(private modalService: ModalService) {}
+
+  openModal() {
+    const modalRef = this.modalService.open(BasicModalComponent);
+  }
+}
+
+@Component({
+  selector: 'app-basic-modal',
+  template: `
+    <div class="modal-header">
+      <h4 class="modal-title">Basic Modal</h4>
+    </div>
+    <div class="modal-body">
+      This is a basic modal example.
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+    </div>
+  `
+})
+export class BasicModalComponent {}
+```
+
+### Modal with Data
+
+```typescript
+import { Component, Inject } from '@angular/core';
+import { ModalService, MODAL_DATA } from 'ng-hub-ui-modal';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <button (click)="openModal()">Open Modal</button>
+  `
+})
+export class ExampleComponent {
+  constructor(private modalService: ModalService) {}
+
+  openModal() {
+    const modalRef = this.modalService.open(DataModalComponent, {
+      data: { name: 'John Doe' }
+    });
+  }
+}
+
+@Component({
+  selector: 'app-data-modal',
+  template: `
+    <div class="modal-header">
+      <h4 class="modal-title">Modal with Data</h4>
+    </div>
+    <div class="modal-body">
+      Hello, {{ name }}!
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+    </div>
+  `
+})
+export class DataModalComponent {
+  name: string;
+
+  constructor(@Inject(MODAL_DATA) public data: any) {
+    this.name = data.name;
+  }
+}
+```
+
+### Modal with Content Projection
+
+```typescript
+import { Component } from '@angular/core';
+import { ModalService } from 'ng-hub-ui-modal';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <button (click)="openModal()">Open Modal</button>
+
+    <ng-template modalHeader>
+      <h4 class="modal-title">Modal with Content Projection</h4>
+    </ng-template>
+
+    <ng-template modalBody>
+      <p>This is the modal body content.</p>
+    </ng-template>
+
+    <ng-template modalFooter>
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      <button type="button" class="btn btn-primary">Save</button>
+    </ng-template>
+  `
+})
+export class ExampleComponent {
+  constructor(private modalService: ModalService) {}
+
+  openModal() {
+    const modalRef = this.modalService.open(null, {
+      headerSelector: '[modalHeader]',
+      bodySelector: '[modalBody]',
+      footerSelector: '[modalFooter]'
+    });
+  }
+}
+```
+
+### Modal with Dismiss Trigger
+
+```typescript
+import { Component } from '@angular/core';
+import { ModalService } from 'ng-hub-ui-modal';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <button (click)="openModal()">Open Modal</button>
+
+    <ng-template modalContent>
+      <div class="modal-header">
+        <h4 class="modal-title">Modal with Dismiss Trigger</h4>
+      </div>
+      <div class="modal-body">
+        <p>Click the button below to dismiss the modal.</p>
+        <button type="button" class="btn btn-primary" myDismissTrigger>Dismiss</button>
+      </div>
+    </ng-template>
+  `
+})
+export class ExampleComponent {
+  constructor(private modalService: ModalService) {}
+
+  openModal() {
+    const modalRef = this.modalService.open(null, {
+      bodySelector: '[modalContent]',
+      dismissSelector: '[myDismissTrigger]'
+    });
+  }
+}
+```

package/esm2022/lib/modal-backdrop.mjs

@@ -0,0 +1,51 @@
+import { Component, ElementRef, inject, Input, NgZone, ViewEncapsulation } from '@angular/core';
+import { hubRunTransition, reflow } from 'ng-hub-ui-utils';
+import { take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+export class HubModalBackdrop {
+    constructor() {
+        this._nativeElement = inject(ElementRef).nativeElement;
+        this._zone = inject(NgZone);
+    }
+    ngOnInit() {
+        this._zone.onStable
+            .asObservable()
+            .pipe(take(1))
+            .subscribe(() => {
+            hubRunTransition(this._zone, this._nativeElement, (element, animation) => {
+                if (animation) {
+                    reflow(element);
+                }
+                element.classList.add('show');
+            }, { animation: this.animation, runningTransition: 'continue' });
+        });
+    }
+    hide() {
+        return hubRunTransition(this._zone, this._nativeElement, ({ classList }) => classList.remove('show'), {
+            animation: this.animation,
+            runningTransition: 'stop'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HubModalBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: HubModalBackdrop, isStandalone: true, selector: "hub-modal-backdrop", inputs: { animation: "animation", backdropClass: "backdropClass" }, host: { properties: { "class": "\"modal-backdrop\" + (backdropClass ? \" \" + backdropClass : \"\")", "class.show": "!animation", "class.fade": "animation" }, styleAttribute: "z-index: 1055" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HubModalBackdrop, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hub-modal-backdrop',
+                    standalone: true,
+                    encapsulation: ViewEncapsulation.None,
+                    template: '',
+                    host: {
+                        '[class]': '"modal-backdrop" + (backdropClass ? " " + backdropClass : "")',
+                        '[class.show]': '!animation',
+                        '[class.fade]': 'animation',
+                        style: 'z-index: 1055'
+                    }
+                }]
+        }], propDecorators: { animation: [{
+                type: Input
+            }], backdropClass: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtYmFja2Ryb3AuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tb2RhbC9zcmMvbGliL21vZGFsLWJhY2tkcm9wLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTixTQUFTLEVBQ1QsVUFBVSxFQUNWLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxFQUVOLGlCQUFpQixFQUNqQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFM0QsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQWV0QyxNQUFNLE9BQU8sZ0JBQWdCO0lBYjdCO1FBY1MsbUJBQWMsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUMsYUFBNEIsQ0FBQztRQUNqRSxVQUFLLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0tBbUMvQjtJQTlCQSxRQUFRO1FBQ1AsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRO2FBQ2pCLFlBQVksRUFBRTthQUNkLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDYixTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ2YsZ0JBQWdCLENBQ2YsSUFBSSxDQUFDLEtBQUssRUFDVixJQUFJLENBQUMsY0FBYyxFQUNuQixDQUFDLE9BQW9CLEVBQUUsU0FBa0IsRUFBRSxFQUFFO2dCQUM1QyxJQUFJLFNBQVMsRUFBRTtvQkFDZCxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7aUJBQ2hCO2dCQUNELE9BQU8sQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQy9CLENBQUMsRUFDRCxFQUFFLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLGlCQUFpQixFQUFFLFVBQVUsRUFBRSxDQUM1RCxDQUFDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsSUFBSTtRQUNILE9BQU8sZ0JBQWdCLENBQ3RCLElBQUksQ0FBQyxLQUFLLEVBQ1YsSUFBSSxDQUFDLGNBQWMsRUFDbkIsQ0FBQyxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUMzQztZQUNDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUztZQUN6QixpQkFBaUIsRUFBRSxNQUFNO1NBQ3pCLENBQ0QsQ0FBQztJQUNILENBQUM7OEdBcENXLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLG9WQVRsQixFQUFFOzsyRkFTQSxnQkFBZ0I7a0JBYjVCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO29CQUNyQyxRQUFRLEVBQUUsRUFBRTtvQkFDWixJQUFJLEVBQUU7d0JBQ0wsU0FBUyxFQUNSLCtEQUErRDt3QkFDaEUsY0FBYyxFQUFFLFlBQVk7d0JBQzVCLGNBQWMsRUFBRSxXQUFXO3dCQUMzQixLQUFLLEVBQUUsZUFBZTtxQkFDdEI7aUJBQ0Q7OEJBS1MsU0FBUztzQkFBakIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRFbGVtZW50UmVmLFxuXHRpbmplY3QsXG5cdElucHV0LFxuXHROZ1pvbmUsXG5cdE9uSW5pdCxcblx0Vmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBodWJSdW5UcmFuc2l0aW9uLCByZWZsb3cgfSBmcm9tICduZy1odWItdWktdXRpbHMnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZSB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnaHViLW1vZGFsLWJhY2tkcm9wJyxcblx0c3RhbmRhbG9uZTogdHJ1ZSxcblx0ZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcblx0dGVtcGxhdGU6ICcnLFxuXHRob3N0OiB7XG5cdFx0J1tjbGFzc10nOlxuXHRcdFx0J1wibW9kYWwtYmFja2Ryb3BcIiArIChiYWNrZHJvcENsYXNzID8gXCIgXCIgKyBiYWNrZHJvcENsYXNzIDogXCJcIiknLFxuXHRcdCdbY2xhc3Muc2hvd10nOiAnIWFuaW1hdGlvbicsXG5cdFx0J1tjbGFzcy5mYWRlXSc6ICdhbmltYXRpb24nLFxuXHRcdHN0eWxlOiAnei1pbmRleDogMTA1NSdcblx0fVxufSlcbmV4cG9ydCBjbGFzcyBIdWJNb2RhbEJhY2tkcm9wIGltcGxlbWVudHMgT25Jbml0IHtcblx0cHJpdmF0ZSBfbmF0aXZlRWxlbWVudCA9IGluamVjdChFbGVtZW50UmVmKS5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50O1xuXHRwcml2YXRlIF96b25lID0gaW5qZWN0KE5nWm9uZSk7XG5cblx0QElucHV0KCkgYW5pbWF0aW9uOiBib29sZWFuO1xuXHRASW5wdXQoKSBiYWNrZHJvcENsYXNzOiBzdHJpbmc7XG5cblx0bmdPbkluaXQoKSB7XG5cdFx0dGhpcy5fem9uZS5vblN0YWJsZVxuXHRcdFx0LmFzT2JzZXJ2YWJsZSgpXG5cdFx0XHQucGlwZSh0YWtlKDEpKVxuXHRcdFx0LnN1YnNjcmliZSgoKSA9PiB7XG5cdFx0XHRcdGh1YlJ1blRyYW5zaXRpb24oXG5cdFx0XHRcdFx0dGhpcy5fem9uZSxcblx0XHRcdFx0XHR0aGlzLl9uYXRpdmVFbGVtZW50LFxuXHRcdFx0XHRcdChlbGVtZW50OiBIVE1MRWxlbWVudCwgYW5pbWF0aW9uOiBib29sZWFuKSA9PiB7XG5cdFx0XHRcdFx0XHRpZiAoYW5pbWF0aW9uKSB7XG5cdFx0XHRcdFx0XHRcdHJlZmxvdyhlbGVtZW50KTtcblx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHRcdGVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnc2hvdycpO1xuXHRcdFx0XHRcdH0sXG5cdFx0XHRcdFx0eyBhbmltYXRpb246IHRoaXMuYW5pbWF0aW9uLCBydW5uaW5nVHJhbnNpdGlvbjogJ2NvbnRpbnVlJyB9XG5cdFx0XHRcdCk7XG5cdFx0XHR9KTtcblx0fVxuXG5cdGhpZGUoKTogT2JzZXJ2YWJsZTx2b2lkPiB7XG5cdFx0cmV0dXJuIGh1YlJ1blRyYW5zaXRpb24oXG5cdFx0XHR0aGlzLl96b25lLFxuXHRcdFx0dGhpcy5fbmF0aXZlRWxlbWVudCxcblx0XHRcdCh7IGNsYXNzTGlzdCB9KSA9PiBjbGFzc0xpc3QucmVtb3ZlKCdzaG93JyksXG5cdFx0XHR7XG5cdFx0XHRcdGFuaW1hdGlvbjogdGhpcy5hbmltYXRpb24sXG5cdFx0XHRcdHJ1bm5pbmdUcmFuc2l0aW9uOiAnc3RvcCdcblx0XHRcdH1cblx0XHQpO1xuXHR9XG59XG4iXX0=

package/esm2022/lib/modal-config.mjs

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * A configuration service for the [`HubModal`](#/components/modal/api#HubModal) service.
+ *
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all modals used in the application.
+ *
+ * @since 3.1.0
+ */
+export class HubModalConfig {
+    constructor() {
+        this.backdrop = true;
+        this.fullscreen = false;
+        this.keyboard = true;
+        this.dismissSelector = '[data-dismiss="modal"]';
+    }
+    get animation() {
+        return this._animation ?? true /* this._hubConfig.animation */;
+    }
+    set animation(animation) {
+        this._animation = animation;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HubModalConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HubModalConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HubModalConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbW9kYWwvc3JjL2xpYi9tb2RhbC1jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBWSxNQUFNLGVBQWUsQ0FBQzs7QUE0SnJEOzs7Ozs7O0dBT0c7QUFFSCxNQUFNLE9BQU8sY0FBYztJQUQzQjtRQU9DLGFBQVEsR0FBdUIsSUFBSSxDQUFDO1FBSXBDLGVBQVUsR0FBeUQsS0FBSyxDQUFDO1FBRXpFLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFRaEIsb0JBQWUsR0FBVyx3QkFBd0IsQ0FBQztLQVFuRDtJQU5BLElBQUksU0FBUztRQUNaLE9BQU8sSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsK0JBQStCLENBQUM7SUFDaEUsQ0FBQztJQUNELElBQUksU0FBUyxDQUFDLFNBQWtCO1FBQy9CLElBQUksQ0FBQyxVQUFVLEdBQUcsU0FBUyxDQUFDO0lBQzdCLENBQUM7OEdBM0JXLGNBQWM7a0hBQWQsY0FBYyxjQURELE1BQU07OzJGQUNuQixjQUFjO2tCQUQxQixVQUFVO21CQUFDLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUsIEluamVjdG9yIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG4vLyBpbXBvcnQgeyBIdWJDb25maWcgfSBmcm9tICcuLi9odWItY29uZmlnJztcblxuLyoqXG4gKiBPcHRpb25zIGF2YWlsYWJsZSB3aGVuIG9wZW5pbmcgbmV3IG1vZGFsIHdpbmRvd3Mgd2l0aCBgSHViTW9kYWwub3BlbigpYCBtZXRob2QuXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgSHViTW9kYWxPcHRpb25zIHtcblx0LyoqXG5cdCAqIElmIGB0cnVlYCwgbW9kYWwgb3BlbmluZyBhbmQgY2xvc2luZyB3aWxsIGJlIGFuaW1hdGVkLlxuXHQgKlxuXHQgKiBAc2luY2UgOC4wLjBcblx0ICovXG5cdGFuaW1hdGlvbj86IGJvb2xlYW47XG5cblx0LyoqXG5cdCAqIGBhcmlhLWxhYmVsbGVkYnlgIGF0dHJpYnV0ZSB2YWx1ZSB0byBzZXQgb24gdGhlIG1vZGFsIHdpbmRvdy5cblx0ICpcblx0ICogQHNpbmNlIDIuMi4wXG5cdCAqL1xuXHRhcmlhTGFiZWxsZWRCeT86IHN0cmluZztcblxuXHQvKipcblx0ICogYGFyaWEtZGVzY3JpYmVkYnlgIGF0dHJpYnV0ZSB2YWx1ZSB0byBzZXQgb24gdGhlIG1vZGFsIHdpbmRvdy5cblx0ICpcblx0ICogQHNpbmNlIDYuMS4wXG5cdCAqL1xuXHRhcmlhRGVzY3JpYmVkQnk/OiBzdHJpbmc7XG5cblx0LyoqXG5cdCAqIElmIGB0cnVlYCwgdGhlIGJhY2tkcm9wIGVsZW1lbnQgd2lsbCBiZSBjcmVhdGVkIGZvciBhIGdpdmVuIG1vZGFsLlxuXHQgKlxuXHQgKiBBbHRlcm5hdGl2ZWx5LCBzcGVjaWZ5IGAnc3RhdGljJ2AgZm9yIGEgYmFja2Ryb3Agd2hpY2ggZG9lc24ndCBjbG9zZSB0aGUgbW9kYWwgb24gY2xpY2suXG5cdCAqXG5cdCAqIERlZmF1bHQgdmFsdWUgaXMgYHRydWVgLlxuXHQgKi9cblx0YmFja2Ryb3A/OiBib29sZWFuIHwgJ3N0YXRpYyc7XG5cblx0LyoqXG5cdCAqIENhbGxiYWNrIHJpZ2h0IGJlZm9yZSB0aGUgbW9kYWwgd2lsbCBiZSBkaXNtaXNzZWQuXG5cdCAqXG5cdCAqIElmIHRoaXMgZnVuY3Rpb24gcmV0dXJuczpcblx0ICogKiBgZmFsc2VgXG5cdCAqICogYSBwcm9taXNlIHJlc29sdmVkIHdpdGggYGZhbHNlYFxuXHQgKiAqIGEgcHJvbWlzZSB0aGF0IGlzIHJlamVjdGVkXG5cdCAqXG5cdCAqIHRoZW4gdGhlIG1vZGFsIHdvbid0IGJlIGRpc21pc3NlZC5cblx0ICovXG5cdGJlZm9yZURpc21pc3M/OiAoKSA9PiBib29sZWFuIHwgUHJvbWlzZTxib29sZWFuPjtcblxuXHQvKipcblx0ICogSWYgYHRydWVgLCB0aGUgbW9kYWwgd2lsbCBiZSBjZW50ZXJlZCB2ZXJ0aWNhbGx5LlxuXHQgKlxuXHQgKiBEZWZhdWx0IHZhbHVlIGlzIGBmYWxzZWAuXG5cdCAqXG5cdCAqIEBzaW5jZSAxLjEuMFxuXHQgKi9cblx0Y2VudGVyZWQ/OiBib29sZWFuO1xuXG5cdC8qKlxuXHQgKiBBIHNlbGVjdG9yIHNwZWNpZnlpbmcgdGhlIGVsZW1lbnQgYWxsIG5ldyBtb2RhbCB3aW5kb3dzIHNob3VsZCBiZSBhcHBlbmRlZCB0by5cblx0ICogU2luY2UgdjUuMy4wIGl0IGlzIGFsc28gcG9zc2libGUgdG8gcGFzcyB0aGUgcmVmZXJlbmNlIHRvIGFuIGBIVE1MRWxlbWVudGAuXG5cdCAqXG5cdCAqIElmIG5vdCBzcGVjaWZpZWQsIHdpbGwgYmUgYGJvZHlgLlxuXHQgKi9cblx0Y29udGFpbmVyPzogc3RyaW5nIHwgSFRNTEVsZW1lbnQ7XG5cblx0LyoqXG5cdCAqIElmIGB0cnVlYCBtb2RhbCB3aWxsIGFsd2F5cyBiZSBkaXNwbGF5ZWQgaW4gZnVsbHNjcmVlbiBtb2RlLlxuXHQgKlxuXHQgKiBGb3IgdmFsdWVzIGxpa2UgYCdtZCdgIGl0IG1lYW5zIHRoYXQgbW9kYWwgd2lsbCBiZSBkaXNwbGF5ZWQgaW4gZnVsbHNjcmVlbiBtb2RlXG5cdCAqIG9ubHkgaWYgdGhlIHZpZXdwb3J0IHdpZHRoIGlzIGJlbG93IGAnbWQnYC4gRm9yIGN1c3RvbSBzdHJpbmdzIChleC4gd2hlbiBwYXNzaW5nIGAnbXlzaXplJ2ApXG5cdCAqIGl0IHdpbGwgYWRkIGEgYCdtb2RhbC1mdWxsc2NyZWVuLW15c2l6ZS1kb3duJ2AgY2xhc3MuXG5cdCAqXG5cdCAqIElmIG5vdCBzcGVjaWZpZWQgd2lsbCBiZSBgZmFsc2VgLlxuXHQgKlxuXHQgKiBAc2luY2UgMTIuMS4wXG5cdCAqL1xuXHRmdWxsc2NyZWVuPzogJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyB8ICd4eGwnIHwgYm9vbGVhbiB8IHN0cmluZztcblxuXHQvKipcblx0ICogVGhlIGBJbmplY3RvcmAgdG8gdXNlIGZvciBtb2RhbCBjb250ZW50LlxuXHQgKi9cblx0aW5qZWN0b3I/OiBJbmplY3RvcjtcblxuXHQvKipcblx0ICogSWYgYHRydWVgLCB0aGUgbW9kYWwgd2lsbCBiZSBjbG9zZWQgd2hlbiBgRXNjYXBlYCBrZXkgaXMgcHJlc3NlZFxuXHQgKlxuXHQgKiBEZWZhdWx0IHZhbHVlIGlzIGB0cnVlYC5cblx0ICovXG5cdGtleWJvYXJkPzogYm9vbGVhbjtcblxuXHQvKipcblx0ICogU2Nyb2xsYWJsZSBtb2RhbCBjb250ZW50IChmYWxzZSBieSBkZWZhdWx0KS5cblx0ICpcblx0ICogQHNpbmNlIDUuMC4wXG5cdCAqL1xuXHRzY3JvbGxhYmxlPzogYm9vbGVhbjtcblxuXHQvKipcblx0ICogU2l6ZSBvZiBhIG5ldyBtb2RhbCB3aW5kb3cuXG5cdCAqL1xuXHRzaXplPzogJ3NtJyB8ICdsZycgfCAneGwnIHwgc3RyaW5nO1xuXG5cdC8qKlxuXHQgKiBBIGN1c3RvbSBjbGFzcyB0byBhcHBlbmQgdG8gdGhlIG1vZGFsIHdpbmRvdy5cblx0ICovXG5cdHdpbmRvd0NsYXNzPzogc3RyaW5nO1xuXG5cdC8qKlxuXHQgKiBBIGN1c3RvbSBjbGFzcyB0byBhcHBlbmQgdG8gdGhlIG1vZGFsIGRpYWxvZy5cblx0ICpcblx0ICogQHNpbmNlIDkuMS4wXG5cdCAqL1xuXHRtb2RhbERpYWxvZ0NsYXNzPzogc3RyaW5nO1xuXG5cdC8qKlxuXHQgKiBBIGN1c3RvbSBjbGFzcyB0byBhcHBlbmQgdG8gdGhlIG1vZGFsIGJhY2tkcm9wLlxuXHQgKlxuXHQgKiBAc2luY2UgMS4xLjBcblx0ICovXG5cdGJhY2tkcm9wQ2xhc3M/OiBzdHJpbmc7XG5cblx0LyoqXG5cdCAqIEFsbG93cyB0byBzcGVjaWZ5IGEgY3VzdG9tIHNlbGVjdG9yIGZvciB0aGUgaGVhZGVyIGVsZW1lbnQgb2YgdGhlIG1vZGFsIHdpbmRvdy4gVGhpcyBjYW4gYmUgdXNlZnVsIGlmIHlvdSB3YW50IHRvIHRhcmdldFxuXHQgKiBhIHNwZWNpZmljIGVsZW1lbnQgd2l0aGluIHRoZSBtb2RhbCB0byBhY3QgYXMgdGhlIGhlYWRlciwgZm9yIGV4YW1wbGUsIHRvIGFwcGx5IGN1c3RvbSBzdHlsaW5nIG9yIGZ1bmN0aW9uYWxpdHkgdG8gaXQuIEJ5XG5cdCAqIHByb3ZpZGluZyBhIENTUyBzZWxlY3RvciBzdHJpbmcsIHlvdSBjYW4gdGFyZ2V0IHRoZSBkZXNpcmVkXHRoZWFkZXIgZWxlbWVudCB3aXRoaW4gdGhlIG1vZGFsIGNvbnRlbnQuXG5cdCAqL1xuXHRoZWFkZXJTZWxlY3Rvcj86IHN0cmluZztcblxuXHQvKipcblx0ICogQWxsb3dzIHRvIHNwZWNpZnkgYSBjdXN0b20gc2VsZWN0b3IgZm9yIHRoZSBmb290ZXIgZWxlbWVudCBvZiB0aGUgbW9kYWwgd2luZG93LiBUaGlzIGNhbiBiZSB1c2VmdWwgaWYgeW91IHdhbnQgdG8gdGFyZ2V0XG5cdCAqIGEgc3BlY2lmaWMgZWxlbWVudCB3aXRoaW4gdGhlIG1vZGFsIHRvIGFjdCBhcyB0aGUgZm9vdGVyLCBmb3IgZXhhbXBsZSwgdG8gYXBwbHkgY3VzdG9tIHN0eWxpbmcgb3IgZnVuY3Rpb25hbGl0eSB0byBpdC4gQnlcblx0ICogcHJvdmlkaW5nIGEgQ1NTIHNlbGVjdG9yIHN0cmluZywgeW91IGNhbiB0YXJnZXQgdGhlIGRlc2lyZWQgZm9vdGVyIGVsZW1lbnQgd2l0aGluIHRoZSBtb2RhbCBjb250ZW50LlxuXHQgKi9cblx0Zm9vdGVyU2VsZWN0b3I/OiBzdHJpbmc7XG5cblx0ZGlzbWlzc1NlbGVjdG9yPzogc3RyaW5nO1xufVxuXG4vKipcbiAqIE9wdGlvbnMgdGhhdCBjYW4gYmUgY2hhbmdlZCBvbiBhbiBvcGVuZWQgbW9kYWwgd2l0aCBgSHViTW9kYWxSZWYudXBkYXRlKClgIGFuZCBgSHViQWN0aXZlTW9kYWwudXBkYXRlKClgIG1ldGhvZHMuXG4gKlxuICogQHNpbmNlIDE0LjIuMFxuICovXG5leHBvcnQgdHlwZSBIdWJNb2RhbFVwZGF0YWJsZU9wdGlvbnMgPSBQaWNrPFxuXHRIdWJNb2RhbE9wdGlvbnMsXG5cdHwgJ2FyaWFMYWJlbGxlZEJ5J1xuXHR8ICdhcmlhRGVzY3JpYmVkQnknXG5cdHwgJ2NlbnRlcmVkJ1xuXHR8ICdmdWxsc2NyZWVuJ1xuXHR8ICdiYWNrZHJvcENsYXNzJ1xuXHR8ICdzaXplJ1xuXHR8ICd3aW5kb3dDbGFzcydcblx0fCAnbW9kYWxEaWFsb2dDbGFzcydcbj47XG5cbi8qKlxuICogQSBjb25maWd1cmF0aW9uIHNlcnZpY2UgZm9yIHRoZSBbYEh1Yk1vZGFsYF0oIy9jb21wb25lbnRzL21vZGFsL2FwaSNIdWJNb2RhbCkgc2VydmljZS5cbiAqXG4gKiBZb3UgY2FuIGluamVjdCB0aGlzIHNlcnZpY2UsIHR5cGljYWxseSBpbiB5b3VyIHJvb3QgY29tcG9uZW50LCBhbmQgY3VzdG9taXplIHRoZSB2YWx1ZXMgb2YgaXRzIHByb3BlcnRpZXMgaW5cbiAqIG9yZGVyIHRvIHByb3ZpZGUgZGVmYXVsdCB2YWx1ZXMgZm9yIGFsbCBtb2RhbHMgdXNlZCBpbiB0aGUgYXBwbGljYXRpb24uXG4gKlxuICogQHNpbmNlIDMuMS4wXG4gKi9cbkBJbmplY3RhYmxlKHsgcHJvdmlkZWRJbjogJ3Jvb3QnIH0pXG5leHBvcnQgY2xhc3MgSHViTW9kYWxDb25maWcgaW1wbGVtZW50cyBSZXF1aXJlZDxIdWJNb2RhbE9wdGlvbnM+IHtcblx0Ly8gcHJpdmF0ZSBfaHViQ29uZmlnID0gaW5qZWN0KEh1YkNvbmZpZyk7XG5cdHByaXZhdGUgX2FuaW1hdGlvbjogYm9vbGVhbjtcblxuXHRhcmlhTGFiZWxsZWRCeTogc3RyaW5nO1xuXHRhcmlhRGVzY3JpYmVkQnk6IHN0cmluZztcblx0YmFja2Ryb3A6IGJvb2xlYW4gfCAnc3RhdGljJyA9IHRydWU7XG5cdGJlZm9yZURpc21pc3M6ICgpID0+IGJvb2xlYW4gfCBQcm9taXNlPGJvb2xlYW4+O1xuXHRjZW50ZXJlZDogYm9vbGVhbjtcblx0Y29udGFpbmVyOiBzdHJpbmcgfCBIVE1MRWxlbWVudDtcblx0ZnVsbHNjcmVlbjogJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyB8ICd4eGwnIHwgYm9vbGVhbiB8IHN0cmluZyA9IGZhbHNlO1xuXHRpbmplY3RvcjogSW5qZWN0b3I7XG5cdGtleWJvYXJkID0gdHJ1ZTtcblx0c2Nyb2xsYWJsZTogYm9vbGVhbjtcblx0c2l6ZTogJ3NtJyB8ICdsZycgfCAneGwnIHwgc3RyaW5nO1xuXHR3aW5kb3dDbGFzczogc3RyaW5nO1xuXHRtb2RhbERpYWxvZ0NsYXNzOiBzdHJpbmc7XG5cdGJhY2tkcm9wQ2xhc3M6IHN0cmluZztcblx0aGVhZGVyU2VsZWN0b3I6IHN0cmluZztcblx0Zm9vdGVyU2VsZWN0b3I6IHN0cmluZztcblx0ZGlzbWlzc1NlbGVjdG9yOiBzdHJpbmcgPSAnW2RhdGEtZGlzbWlzcz1cIm1vZGFsXCJdJztcblxuXHRnZXQgYW5pbWF0aW9uKCk6IGJvb2xlYW4ge1xuXHRcdHJldHVybiB0aGlzLl9hbmltYXRpb24gPz8gdHJ1ZSAvKiB0aGlzLl9odWJDb25maWcuYW5pbWF0aW9uICovO1xuXHR9XG5cdHNldCBhbmltYXRpb24oYW5pbWF0aW9uOiBib29sZWFuKSB7XG5cdFx0dGhpcy5fYW5pbWF0aW9uID0gYW5pbWF0aW9uO1xuXHR9XG59XG4iXX0=

package/esm2022/lib/modal-dismiss-reasons.mjs

@@ -0,0 +1,6 @@
+export var ModalDismissReasons;
+(function (ModalDismissReasons) {
+    ModalDismissReasons[ModalDismissReasons["BACKDROP_CLICK"] = 0] = "BACKDROP_CLICK";
+    ModalDismissReasons[ModalDismissReasons["ESC"] = 1] = "ESC";
+})(ModalDismissReasons || (ModalDismissReasons = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtZGlzbWlzcy1yZWFzb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbW9kYWwvc3JjL2xpYi9tb2RhbC1kaXNtaXNzLXJlYXNvbnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFOLElBQVksbUJBR1g7QUFIRCxXQUFZLG1CQUFtQjtJQUM5QixpRkFBYyxDQUFBO0lBQ2QsMkRBQUcsQ0FBQTtBQUNKLENBQUMsRUFIVyxtQkFBbUIsS0FBbkIsbUJBQW1CLFFBRzlCIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGVudW0gTW9kYWxEaXNtaXNzUmVhc29ucyB7XG5cdEJBQ0tEUk9QX0NMSUNLLFxuXHRFU0MsXG59XG4iXX0=