@theseam/ui-common 1.0.0-beta.6 → 1.0.0-beta.7

package/fesm2022/theseam-ui-common-modal.mjs

@@ -35,10 +35,9 @@ function getClosestModal(element, openDialogs) {
         parent = parent.parentElement;
     }
     const parentId = parent ? parent.id : null;
-    return parentId ? openDialogs.find(dialog => dialog.id === parentId) : null;
+    return parentId ? openDialogs.find((dialog) => dialog.id === parentId) : null;
 }
 
-// tslint:disable:no-inferrable-types
 class ModalConfig {
     /** Component to use as the container for the dialog. */
     containerComponent;
@@ -92,7 +91,6 @@ class ModalConfig {
     /** Bootstrap modal sizes */
     modalSize;
 }
-// tslint:enable:no-inferrable-types
 function mergeModalConfigs(a, b) {
     return { ...a, ...b };
 }
@@ -112,14 +110,21 @@ class ModalContainerComponent extends BasePortalOutlet {
     _changeDetectorRef;
     _document;
     _config;
-    get _idAttr() { return this._id; }
+    get _idAttr() {
+        return this._id;
+    }
     // @HostBinding is used in the class as it is expected to be extended.  Since @Component decorator
     // metadata is not inherited by child classes, instead the host binding data is defined in a way
     // that can be inherited.
-    // tslint:disable:no-host-decorator-in-concrete
-    get _ariaLabel() { return this._config.ariaLabel || null; }
-    get _ariaDescribedBy() { return this._config.ariaDescribedBy; }
-    get _role() { return this._config.role; }
+    get _ariaLabel() {
+        return this._config.ariaLabel || null;
+    }
+    get _ariaDescribedBy() {
+        return this._config.ariaDescribedBy;
+    }
+    get _role() {
+        return this._config.role;
+    }
     // @HostBinding('attr.tabindex') get _tabindex() { return -1 }
     _seamModalContainer = true;
     _id;
@@ -138,16 +143,19 @@ class ModalContainerComponent extends BasePortalOutlet {
         // We use a Subject with a distinctUntilChanged, rather than a callback attached to .done,
         // because some browsers fire the done event twice and we don't want to emit duplicate events.
         // See: https://github.com/angular/angular/issues/24084
-        this._animationDone.pipe(distinctUntilChanged((x, y) => {
+        this._animationDone
+            .pipe(distinctUntilChanged((x, y) => {
             return x.fromState === y.fromState && x.toState === y.toState;
-        })).subscribe(event => {
+        }))
+            .subscribe((event) => {
             // Emit lifecycle events based on animation `done` callback.
             if (event.toState === 'enter') {
                 this._autoFocusFirstTabbableElement();
                 this._afterEnter.next();
                 this._afterEnter.complete();
             }
-            if (event.fromState === 'enter' && (event.toState === 'void' || event.toState === 'exit')) {
+            if (event.fromState === 'enter' &&
+                (event.toState === 'void' || event.toState === 'exit')) {
                 this._returnFocusAfterDialog();
                 this._afterExit.next();
                 this._afterExit.complete();
@@ -162,9 +170,15 @@ class ModalContainerComponent extends BasePortalOutlet {
     _focusTrap;
     _modalDialog = true;
     _modalDialogCentered = true;
-    get _modalDialogSm() { return this._config.modalSize === 'sm'; }
-    get _modalDialogLg() { return this._config.modalSize === 'lg'; }
-    get _modalDialogXl() { return this._config.modalSize === 'xl'; }
+    get _modalDialogSm() {
+        return this._config.modalSize === 'sm';
+    }
+    get _modalDialogLg() {
+        return this._config.modalSize === 'lg';
+    }
+    get _modalDialogXl() {
+        return this._config.modalSize === 'xl';
+    }
     /** The portal host inside of this container into which the dialog content will be loaded. */
     _portalHost;
     /** A subject emitting before the dialog enters the view. */
@@ -220,7 +234,8 @@ class ModalContainerComponent extends BasePortalOutlet {
             this._beforeEnter.next();
             this._beforeEnter.complete();
         }
-        if (event.fromState === 'enter' && (event.toState === 'void' || event.toState === 'exit')) {
+        if (event.fromState === 'enter' &&
+            (event.toState === 'void' || event.toState === 'exit')) {
             this._beforeExit.next();
             this._beforeExit.complete();
         }
@@ -235,7 +250,8 @@ class ModalContainerComponent extends BasePortalOutlet {
     /** Saves a reference to the element that was focused before the dialog was opened. */
     _savePreviouslyFocusedElement() {
         if (this._document) {
-            this._elementFocusedBeforeDialogWasOpened = this._document.activeElement;
+            this._elementFocusedBeforeDialogWasOpened = this._document
+                .activeElement;
             // Move focus onto the dialog immediately in order to prevent the user from accidentally
             // opening multiple dialogs at the same time. Needs to be async, because the element
             // may not be focusable immediately.
@@ -251,7 +267,7 @@ class ModalContainerComponent extends BasePortalOutlet {
         // ready in instances where change detection has to run first. To deal with this, we simply
         // wait for the microtask queue to be empty.
         if (this._config.autoFocus) {
-            this._focusTrap.focusInitialElementWhenReady().then(hasMovedFocus => {
+            this._focusTrap.focusInitialElementWhenReady().then((hasMovedFocus) => {
                 // If we didn't find any focusable elements inside the dialog, focus the
                 // container so the user can't tab into other elements behind it.
                 if (!hasMovedFocus) {
@@ -271,17 +287,17 @@ class ModalContainerComponent extends BasePortalOutlet {
     getNativeElement() {
         return this._elementRef.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurableFocusTrapFactory }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: ModalConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalContainerComponent, isStandalone: false, selector: "seam-modal-container", host: { listeners: { "@dialog.start": "_onAnimationStart($event)", "@dialog.done": "_animationDone.next($event)", "click": "_onClick($event)" }, properties: { "@dialog": "{\n      value: _state,\n      params: {\n        enterAnimationDuration: _config.enterAnimationDuration,\n        exitAnimationDuration: _config.exitAnimationDuration\n      }\n    }", "attr.id": "this._idAttr", "attr.aria-label": "this._ariaLabel", "attr.aria-describedby": "this._ariaDescribedBy", "attr.role": "this._role", "class.seam-modal-container": "this._seamModalContainer", "class.modal-dialog": "this._modalDialog", "class.modal-dialog-centered": "this._modalDialogCentered", "class.modal-sm": "this._modalDialogSm", "class.modal-lg": "this._modalDialogLg", "class.modal-xl": "this._modalDialogXl" } }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: CdkPortalOutlet /*, { static: true }*/, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"modal-content\" [tabindex]=\"-1\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host[tabindex=\"-1\"]:focus:not(:focus-visible){outline:0!important}\n"], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurableFocusTrapFactory }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: ModalConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalContainerComponent, isStandalone: false, selector: "seam-modal-container", host: { listeners: { "@dialog.start": "_onAnimationStart($event)", "@dialog.done": "_animationDone.next($event)", "click": "_onClick($event)" }, properties: { "@dialog": "{\n      value: _state,\n      params: {\n        enterAnimationDuration: _config.enterAnimationDuration,\n        exitAnimationDuration: _config.exitAnimationDuration\n      }\n    }", "attr.id": "this._idAttr", "attr.aria-label": "this._ariaLabel", "attr.aria-describedby": "this._ariaDescribedBy", "attr.role": "this._role", "class.seam-modal-container": "this._seamModalContainer", "class.modal-dialog": "this._modalDialog", "class.modal-dialog-centered": "this._modalDialogCentered", "class.modal-sm": "this._modalDialogSm", "class.modal-lg": "this._modalDialogLg", "class.modal-xl": "this._modalDialogXl" } }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: CdkPortalOutlet /*, { static: true }*/, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"modal-content\" [tabindex]=\"-1\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host[tabindex=\"-1\"]:focus:not(:focus-visible){outline:0!important}\n"], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
             trigger('dialog', [
                 state('enter', style({ opacity: 1 })),
                 state('exit, void', style({ opacity: 0 })),
                 transition('* => enter', animate('{{enterAnimationDuration}}')),
                 transition('* => exit, * => void', animate('{{exitAnimationDuration}}')),
-            ])
+            ]),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-container', animations: [
                         trigger('dialog', [
@@ -289,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                             state('exit, void', style({ opacity: 0 })),
                             transition('* => enter', animate('{{enterAnimationDuration}}')),
                             transition('* => exit, * => void', animate('{{exitAnimationDuration}}')),
-                        ])
+                        ]),
                     ], host: {
                         '[@dialog]': `{
       value: _state,
@@ -410,9 +426,9 @@ class ModalRef {
             this.componentInstance = null;
         });
         // Close when escape keydown event occurs
-        _overlayRef.keydownEvents()
-            // tslint:disable-next-line:deprecation
-            .pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose))
+        _overlayRef
+            .keydownEvents()
+            .pipe(filter((event) => event.keyCode === ESCAPE && !this.disableClose))
             .subscribe(() => this.close());
     }
     _initCloseOnClickOutside() {
@@ -428,7 +444,7 @@ class ModalRef {
             return { x: event.clientX, y: event.clientY };
         };
         const dist = (x1, y1, x2, y2) => {
-            return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+            return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
         };
         let pressed = false;
         let pressedPosition = null;
@@ -486,13 +502,23 @@ class ModalRef {
     updatePosition(position) {
         const strategy = this._getPositionStrategy();
         if (position && (position.left || position.right)) {
-            position.left ? strategy.left(position.left) : strategy.right(position.right);
+            if (position.left) {
+                strategy.left(position.left);
+            }
+            else {
+                strategy.right(position.right);
+            }
         }
         else {
             strategy.centerHorizontally();
         }
         if (position && (position.top || position.bottom)) {
-            position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
+            if (position.top) {
+                strategy.top(position.top);
+            }
+            else {
+                strategy.bottom(position.bottom);
+            }
         }
         else {
             strategy.centerVertically();
@@ -512,11 +538,9 @@ class ModalRef {
      */
     updateSize(size) {
         if (size.width) {
-            // tslint:disable-next-line:deprecation
             this._getPositionStrategy().width(size.width.toString());
         }
         if (size.height) {
-            // tslint:disable-next-line:deprecation
             this._getPositionStrategy().height(size.height.toString());
         }
         this._overlayRef.updateSize(size);
@@ -525,7 +549,8 @@ class ModalRef {
     }
     /** Fetches the position strategy object from the overlay ref. */
     _getPositionStrategy() {
-        return this._overlayRef.getConfig().positionStrategy;
+        return this._overlayRef.getConfig()
+            .positionStrategy;
     }
     /** Gets an observable that emits when dialog begins opening. */
     beforeOpened() {
@@ -558,19 +583,26 @@ class Modal {
     _dialogRefConstructor = ModalRef;
     /** Stream that emits when all dialogs are closed. */
     get _afterAllClosed() {
-        return this._parentDialog ? this._parentDialog.afterAllClosed : this._afterAllClosedBase;
+        return this._parentDialog
+            ? this._parentDialog.afterAllClosed
+            : this._afterAllClosedBase;
     }
     _afterAllClosedBase = new Subject();
     afterAllClosed = defer(() => this.openDialogs.length
-        ? this._afterAllClosed : this._afterAllClosed.pipe(startWith(undefined)));
+        ? this._afterAllClosed
+        : this._afterAllClosed.pipe(startWith(undefined)));
     /** Stream that emits when a dialog is opened. */
     get afterOpened() {
-        return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpened;
+        return this._parentDialog
+            ? this._parentDialog.afterOpened
+            : this._afterOpened;
     }
     _afterOpened = new Subject();
     /** Stream that emits when a dialog is opened. */
     get openDialogs() {
-        return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogs;
+        return this._parentDialog
+            ? this._parentDialog.openDialogs
+            : this._openDialogs;
     }
     _openDialogs = [];
     constructor(overlay, injector, scrollStrategy, _parentDialog, location, _scrollbars, _dynamicComponentLoaderModule) {
@@ -589,11 +621,11 @@ class Modal {
     }
     /** Gets an open dialog by id. */
     getById(id) {
-        return this._openDialogs.find(ref => ref.id === id);
+        return this._openDialogs.find((ref) => ref.id === id);
     }
     /** Closes all open dialogs. */
     closeAll() {
-        this.openDialogs.forEach(ref => ref.close());
+        this.openDialogs.forEach((ref) => ref.close());
     }
     /** Opens a dialog from a component. */
     openFromComponent(component, config) {
@@ -627,14 +659,14 @@ class Modal {
         }
         return this._dynamicComponentLoaderModule
             .getComponentFactory(componentId)
-            .pipe(switchMap(componentFactory => {
+            .pipe(switchMap((componentFactory) => {
             const modalRef = this.openFromComponent(componentFactory.componentType, _config);
             return of(modalRef);
         }));
     }
     ngOnDestroy() {
         // Only close all the dialogs at this level.
-        this._openDialogs.forEach(ref => ref.close());
+        this._openDialogs.forEach((ref) => ref.close());
     }
     /**
      * Forwards emitting events for when dialogs are opened and all dialogs are closed.
@@ -680,9 +712,11 @@ class Modal {
             }
         };
         const _scrollbarMouseUpListener = () => {
-            setTimeout(() => { if (dialogRef) {
-                dialogRef.disableClose = false;
-            } });
+            setTimeout(() => {
+                if (dialogRef) {
+                    dialogRef.disableClose = false;
+                }
+            });
         };
         let verticalHandleElement;
         let horizontalHandleElement;
@@ -693,12 +727,14 @@ class Modal {
                     setTimeout(() => {
                         const instance = this._scrollbars.getInstance(dialogRef._overlayRef.overlayElement);
                         if (instance) {
-                            verticalHandleElement = instance.getElements().scrollbarVertical.handle;
+                            verticalHandleElement =
+                                instance.getElements().scrollbarVertical.handle;
                             if (verticalHandleElement) {
                                 verticalHandleElement.addEventListener('mousedown', _scrollbarMouseDownListener);
                                 verticalHandleElement.addEventListener('touchstart', _scrollbarMouseDownListener);
                             }
-                            horizontalHandleElement = instance.getElements().scrollbarHorizontal.handle;
+                            horizontalHandleElement =
+                                instance.getElements().scrollbarHorizontal.handle;
                             if (horizontalHandleElement) {
                                 horizontalHandleElement.addEventListener('mousedown', _scrollbarMouseDownListener);
                                 horizontalHandleElement.addEventListener('touchstart', _scrollbarMouseDownListener);
@@ -728,8 +764,8 @@ class Modal {
                     //   document.removeEventListener('touchend', _scrollbarMouseUpListener)
                     //   document.removeEventListener('touchcancel', _scrollbarMouseUpListener)
                     // }
-                }
-            }
+                },
+            },
         });
         // Cleans up the registered events.
         return () => {
@@ -757,7 +793,7 @@ class Modal {
      * @returns The overlay configuration.
      */
     _createOverlay(config) {
-        let panelClass = (config.panelClass || []);
+        let panelClass = config.panelClass || [];
         if (typeof panelClass === 'string') {
             panelClass = [panelClass];
         }
@@ -771,7 +807,7 @@ class Modal {
             minWidth: config.minWidth,
             minHeight: config.minHeight,
             maxWidth: config.maxWidth,
-            maxHeight: config.maxHeight
+            maxHeight: config.maxHeight,
         });
         if (config.backdropClass) {
             overlayConfig.backdropClass = config.backdropClass;
@@ -785,13 +821,12 @@ class Modal {
      * @returns A promise resolving to a ComponentRef for the attached container.
      */
     _attachDialogContainer(overlay, config) {
-        const container = config.containerComponent || this.injector.get(MODAL_CONTAINER, ModalContainerComponent);
+        const container = config.containerComponent ||
+            this.injector.get(MODAL_CONTAINER, ModalContainerComponent);
         const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
         const injector = Injector.create({
             parent: userInjector || this.injector,
-            providers: [
-                { provide: ModalConfig, useValue: config },
-            ],
+            providers: [{ provide: ModalConfig, useValue: config }],
         });
         const containerPortal = new ComponentPortal(container, config.viewContainerRef, injector);
         const containerRef = overlay.attach(containerPortal);
@@ -810,13 +845,13 @@ class Modal {
     _attachDialogContentForComponent(componentOrTemplateRef, dialogContainer, overlayRef, config) {
         // Create a reference to the dialog we're creating in order to give the user a handle
         // to modify and close it.
-        // eslint-disable-next-line new-cap
         const dialogRef = new this._dialogRefConstructor(overlayRef, dialogContainer, config.id);
         const injector = this._createInjector(config, dialogRef, dialogContainer);
         const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, undefined, injector));
         dialogRef.componentInstance = contentRef.instance;
         dialogRef.disableClose = config.disableClose;
-        dialogRef.updateSize({ width: config.width, height: config.height })
+        dialogRef
+            .updateSize({ width: config.width, height: config.height })
             .updatePosition(config.position);
         return dialogRef;
     }
@@ -832,10 +867,10 @@ class Modal {
     _attachDialogContentForTemplate(componentOrTemplateRef, dialogContainer, overlayRef, config) {
         // Create a reference to the dialog we're creating in order to give the user a handle
         // to modify and close it.
-        // eslint-disable-next-line new-cap
         const dialogRef = new this._dialogRefConstructor(overlayRef, dialogContainer, config.id);
         dialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, { $implicit: config.data, dialogRef }));
-        dialogRef.updateSize({ width: config.width, height: config.height })
+        dialogRef
+            .updateSize({ width: config.width, height: config.height })
             .updatePosition(config.position);
         return dialogRef;
     }
@@ -855,7 +890,8 @@ class Modal {
             { provide: MODAL_DATA, useValue: config.data },
         ];
         if (config.direction &&
-            (!userInjector || !userInjector.get(Directionality, null))) {
+            (!userInjector ||
+                !userInjector.get(Directionality, null))) {
             providers.push({
                 provide: Directionality,
                 useValue: {
@@ -875,10 +911,10 @@ class Modal {
         // eslint-disable-next-line new-cap
         return { ...new dialogConfig(), ...config };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: Modal, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: MODAL_SCROLL_STRATEGY }, { token: Modal, optional: true, skipSelf: true }, { token: i3$1.Location, optional: true }, { token: i3$2.TheSeamOverlayScrollbarsService }, { token: i4.TheSeamDynamicComponentLoader }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: Modal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Modal, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: MODAL_SCROLL_STRATEGY }, { token: Modal, optional: true, skipSelf: true }, { token: i3$1.Location, optional: true }, { token: i3$2.TheSeamOverlayScrollbarsService }, { token: i4.TheSeamDynamicComponentLoader }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Modal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: Modal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Modal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
@@ -898,9 +934,13 @@ class ModalCloseDirective {
     _modalRef;
     modalRef;
     // @HostBinding('class.close') _closeCss = true
-    get _attrType() { return this.type; }
+    get _attrType() {
+        return this.type;
+    }
     type = 'button';
-    get _attrAriaLabel() { return this.ariaLabel || null; }
+    get _attrAriaLabel() {
+        return this.ariaLabel || null;
+    }
     /** Screenreader label for the button. */
     ariaLabel;
     seamModalClose;
@@ -912,7 +952,9 @@ class ModalCloseDirective {
             if (this.seamModalNext) {
                 this.modalRef.afterClosed().subscribe(() => {
                     if (typeof this.seamModalNext === 'string') {
-                        this._modal.openFromLazyComponent(this.seamModalNext, this.seamModalNextConfig).subscribe();
+                        this._modal
+                            .openFromLazyComponent(this.seamModalNext, this.seamModalNextConfig)
+                            .subscribe();
                     }
                     else {
                         this._modal.openFromComponent(this.seamModalNext, this.seamModalNextConfig);
@@ -938,15 +980,15 @@ class ModalCloseDirective {
             this.modalRef = getClosestModal(this._elementRef, this._modal.openDialogs);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalCloseDirective, deps: [{ token: i0.ElementRef }, { token: Modal }, { token: ModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ModalCloseDirective, isStandalone: false, selector: "button[seamModalClose]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"], seamModalClose: "seamModalClose", seamModalNext: "seamModalNext", seamModalNextConfig: "seamModalNextConfig" }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel" } }, exportAs: ["seamModalClose"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalCloseDirective, deps: [{ token: i0.ElementRef }, { token: Modal }, { token: ModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalCloseDirective, isStandalone: false, selector: "button[seamModalClose]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"], seamModalClose: "seamModalClose", seamModalNext: "seamModalNext", seamModalNextConfig: "seamModalNextConfig" }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel" } }, exportAs: ["seamModalClose"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[seamModalClose]',
                     exportAs: 'seamModalClose',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Modal }, { type: ModalRef, decorators: [{
                     type: Optional
@@ -977,14 +1019,14 @@ class ModalFooterTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalFooterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ModalFooterTplDirective, isStandalone: false, selector: "[seamModalFooterTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalFooterTplDirective, isStandalone: false, selector: "[seamModalFooterTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalFooterTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalFooterTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -993,14 +1035,14 @@ class ModalHeaderIconTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalHeaderIconTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ModalHeaderIconTplDirective, isStandalone: false, selector: "[seamModalHeaderIconTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderIconTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalHeaderIconTplDirective, isStandalone: false, selector: "[seamModalHeaderIconTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalHeaderIconTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderIconTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalHeaderIconTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -1009,14 +1051,14 @@ class ModalHeaderTitleTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalHeaderTitleTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ModalHeaderTitleTplDirective, isStandalone: false, selector: "[seamModalHeaderTitleTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderTitleTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalHeaderTitleTplDirective, isStandalone: false, selector: "[seamModalHeaderTitleTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalHeaderTitleTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderTitleTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalHeaderTitleTpl]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
@@ -1026,14 +1068,14 @@ class ModalTitleDirective {
     constructor(_elementRef) {
         this._elementRef = _elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalTitleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ModalTitleDirective, isStandalone: false, selector: "[seamModalTitle]", host: { properties: { "class.modal-title": "this._modalTitleCss" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalTitleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalTitleDirective, isStandalone: false, selector: "[seamModalTitle]", host: { properties: { "class.modal-title": "this._modalTitleCss" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalTitle]',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { _modalTitleCss: [{
                 type: HostBinding,
@@ -1053,25 +1095,25 @@ class ModalDirective {
         const ref = this.modal.openFromTemplate(this.template);
         // ref.backdropClick().subscribe(e => console.log('backdropClick', e))
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalDirective, deps: [{ token: i0.TemplateRef }, { token: Modal }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ModalDirective, isStandalone: false, selector: "[seamModal]", exportAs: ["seamModal"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalDirective, deps: [{ token: i0.TemplateRef }, { token: Modal }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalDirective, isStandalone: false, selector: "[seamModal]", exportAs: ["seamModal"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModal]',
                     exportAs: 'seamModal',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: Modal }] });
 
 class ModalBodyComponent {
     _modalBodyCss = true;
     _paddingCss = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalBodyComponent, isStandalone: false, selector: "seam-modal-body", host: { properties: { "class.modal-body": "this._modalBodyCss", "class.p-3": "this._paddingCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalBodyComponent, isStandalone: false, selector: "seam-modal-body", host: { properties: { "class.modal-body": "this._modalBodyCss", "class.p-3": "this._paddingCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-body', standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { _modalBodyCss: [{
@@ -1084,10 +1126,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class ModalFooterComponent {
     _modalFooterCss = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalFooterComponent, isStandalone: false, selector: "seam-modal-footer", host: { properties: { "class.modal-footer": "this._modalFooterCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalFooterComponent, isStandalone: false, selector: "seam-modal-footer", host: { properties: { "class.modal-footer": "this._modalFooterCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-footer', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { _modalFooterCss: [{
@@ -1100,10 +1142,10 @@ class ModalHeaderComponent {
     hasCloseBtn = true;
     _titleDirective;
     _closeDirective;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalHeaderComponent, isStandalone: false, selector: "seam-modal-header", inputs: { hasCloseBtn: "hasCloseBtn" }, host: { properties: { "class.modal-header": "this._modalHeaderCss" } }, queries: [{ propertyName: "_titleDirective", first: true, predicate: ModalTitleDirective, descendants: true, static: true }, { propertyName: "_closeDirective", first: true, predicate: ModalCloseDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <button seamModalClose>\n  <span aria-hidden=\"true\">&times;</span>\n</button> -->\n\n<!-- seam-modal-header-close -->\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalHeaderComponent, isStandalone: false, selector: "seam-modal-header", inputs: { hasCloseBtn: "hasCloseBtn" }, host: { properties: { "class.modal-header": "this._modalHeaderCss" } }, queries: [{ propertyName: "_titleDirective", first: true, predicate: ModalTitleDirective, descendants: true, static: true }, { propertyName: "_closeDirective", first: true, predicate: ModalCloseDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <button seamModalClose>\n  <span aria-hidden=\"true\">&times;</span>\n</button> -->\n\n<!-- seam-modal-header-close -->\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-header', standalone: false, template: "<ng-content></ng-content>\n\n<!-- <button seamModalClose>\n  <span aria-hidden=\"true\">&times;</span>\n</button> -->\n\n<!-- seam-modal-header-close -->\n" }]
         }], propDecorators: { _modalHeaderCss: [{
@@ -1123,7 +1165,6 @@ const THESEAM_MODAL_CONTAINER = new InjectionToken('seamModalContainer');
 
 const LIB_MODAL = {
     provide: THESEAM_MODAL_CONTAINER,
-    // tslint:disable-next-line:no-use-before-declare
     useExisting: forwardRef(() => ModalComponent),
     multi: true,
 };
@@ -1132,12 +1173,18 @@ class ModalComponent {
     _overlay;
     _route;
     static ngAcceptInputType_showCloseBtn;
-    set closeOnKeyPressed(value) { this._closeOnKeyPressed = Array.isArray(value) ? value : []; }
-    get closeOnKeyPressed() { return this._closeOnKeyPressed; }
+    set closeOnKeyPressed(value) {
+        this._closeOnKeyPressed = Array.isArray(value) ? value : [];
+    }
+    get closeOnKeyPressed() {
+        return this._closeOnKeyPressed;
+    }
     _closeOnKeyPressed = [ESCAPE];
     showCloseBtn = true;
     titleText;
-    get icon() { return this._iconUrl || this._iconObj; }
+    get icon() {
+        return this._iconUrl || this._iconObj;
+    }
     set icon(value) {
         if (typeof value === 'string') {
             this._iconUrl = value;
@@ -1158,14 +1205,14 @@ class ModalComponent {
     }
     _iconTpl;
     get titleTpl() {
-        return this._titleTpl || (this._queryTitleTpl && this._queryTitleTpl.template);
+        return (this._titleTpl || (this._queryTitleTpl && this._queryTitleTpl.template));
     }
     set titleTpl(value) {
         this._titleTpl = value;
     }
     _titleTpl;
     get footerTpl() {
-        return this._footerTpl || (this._queryFooterTpl && this._queryFooterTpl.template);
+        return (this._footerTpl || (this._queryFooterTpl && this._queryFooterTpl.template));
     }
     set footerTpl(value) {
         this._footerTpl = value;
@@ -1203,20 +1250,21 @@ class ModalComponent {
         if (this._overlayRef && this._overlayRef.hasAttached()) {
             return;
         }
-        const positionStrategy = this._overlay.position()
+        const positionStrategy = this._overlay
+            .position()
             .global()
             .centerHorizontally()
             .centerVertically();
         this._overlayRef = this._overlay.create({
             hasBackdrop: true,
-            positionStrategy
+            positionStrategy,
         });
-        this._overlayRef.detachments().subscribe(_ => this.overlayDetached.emit());
-        this._overlayRef.backdropClick().subscribe(_ => this.close());
-        this._overlayRef.keydownEvents()
-            // tslint:disable-next-line:deprecation
-            .pipe(filter(e => e.keyCode === ESCAPE))
-            .subscribe(_ => this.close());
+        this._overlayRef.detachments().subscribe((_) => this.overlayDetached.emit());
+        this._overlayRef.backdropClick().subscribe((_) => this.close());
+        this._overlayRef
+            .keydownEvents()
+            .pipe(filter((e) => e.keyCode === ESCAPE))
+            .subscribe((_) => this.close());
         let portalToAttach = portal;
         if (!portalToAttach) {
             if (!this._modalTpl) {
@@ -1239,15 +1287,15 @@ class ModalComponent {
     isRouteModal() {
         return this._route.outlet === 'modal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalComponent, isStandalone: false, selector: "seam-modal", inputs: { closeOnKeyPressed: "closeOnKeyPressed", showCloseBtn: "showCloseBtn", titleText: "titleText", icon: "icon", iconTpl: "iconTpl", titleTpl: "titleTpl", footerTpl: "footerTpl", form: "form" }, outputs: { modalClosed: "modalClosed", overlayDetached: "overlayDetached", formSubmit: "formSubmit" }, providers: [LIB_MODAL], queries: [{ propertyName: "_queryIconTpl", first: true, predicate: ModalHeaderIconTplDirective, descendants: true, static: true }, { propertyName: "_queryTitleTpl", first: true, predicate: ModalHeaderTitleTplDirective, descendants: true, static: true }, { propertyName: "_queryFooterTpl", first: true, predicate: ModalFooterTplDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "_modalTpl", first: true, predicate: ["modalTpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #modalTpl>\n  <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"_onSubmit()\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </form>\n\n  <div *ngIf=\"!form\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </div>\n\n  <ng-template #modalContent>\n    <div class=\"modal-content\">\n      <div class=\"modal-header py-2\">\n        <h4 class=\"modal-title\">\n          <span class=\"pr-2 modal-header-icon\">\n            <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"iconTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #noIconTpl>\n              <fa-icon *ngIf=\"_iconObj\"\n                class=\"modal-header-icon--fa\"\n                [icon]=\"_iconObj\"\n                size=\"sm\"></fa-icon>\n              <img *ngIf=\"_iconUrl\"\n                class=\"modal-header-icon--img\"\n                [src]=\"_iconUrl\" [alt]=\"titleText\">\n            </ng-template>\n          </span>\n\n          <span class=\"modal-header-title\">\n            <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"titleTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: titleText, title: titleText }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n          </span>\n        </h4>\n        <button *ngIf=\"showCloseBtn\"\n          type=\"button\"\n          class=\"close\"\n          (click)=\"close()\"\n          aria-label=\"Close\">\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"_queryFooterTpl\" class=\"modal-footer p-2\">\n        <ng-container *ngComponentOutlet=\"$any(_queryFooterTpl.template)\"></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalComponent, isStandalone: false, selector: "seam-modal", inputs: { closeOnKeyPressed: "closeOnKeyPressed", showCloseBtn: "showCloseBtn", titleText: "titleText", icon: "icon", iconTpl: "iconTpl", titleTpl: "titleTpl", footerTpl: "footerTpl", form: "form" }, outputs: { modalClosed: "modalClosed", overlayDetached: "overlayDetached", formSubmit: "formSubmit" }, providers: [LIB_MODAL], queries: [{ propertyName: "_queryIconTpl", first: true, predicate: ModalHeaderIconTplDirective, descendants: true, static: true }, { propertyName: "_queryTitleTpl", first: true, predicate: ModalHeaderTitleTplDirective, descendants: true, static: true }, { propertyName: "_queryFooterTpl", first: true, predicate: ModalFooterTplDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "_modalTpl", first: true, predicate: ["modalTpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #modalTpl>\n  <form\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"_onSubmit()\"\n    class=\"p-4\"\n    style=\"max-width: 800px\"\n  >\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </form>\n\n  <div *ngIf=\"!form\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </div>\n\n  <ng-template #modalContent>\n    <div class=\"modal-content\">\n      <div class=\"modal-header py-2\">\n        <h4 class=\"modal-title\">\n          <span class=\"pr-2 modal-header-icon\">\n            <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"iconTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noIconTpl>\n              <fa-icon\n                *ngIf=\"_iconObj\"\n                class=\"modal-header-icon--fa\"\n                [icon]=\"_iconObj\"\n                size=\"sm\"\n              ></fa-icon>\n              <img\n                *ngIf=\"_iconUrl\"\n                class=\"modal-header-icon--img\"\n                [src]=\"_iconUrl\"\n                [alt]=\"titleText\"\n              />\n            </ng-template>\n          </span>\n\n          <span class=\"modal-header-title\">\n            <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"titleTpl\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: titleText,\n                  title: titleText,\n                }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n          </span>\n        </h4>\n        <button\n          *ngIf=\"showCloseBtn\"\n          type=\"button\"\n          class=\"close\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"_queryFooterTpl\" class=\"modal-footer p-2\">\n        <ng-container\n          *ngComponentOutlet=\"$any(_queryFooterTpl.template)\"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 __decorate([
     InputBoolean()
 ], ModalComponent.prototype, "showCloseBtn", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-modal', providers: [LIB_MODAL], standalone: false, template: "<ng-template #modalTpl>\n  <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"_onSubmit()\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </form>\n\n  <div *ngIf=\"!form\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </div>\n\n  <ng-template #modalContent>\n    <div class=\"modal-content\">\n      <div class=\"modal-header py-2\">\n        <h4 class=\"modal-title\">\n          <span class=\"pr-2 modal-header-icon\">\n            <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"iconTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #noIconTpl>\n              <fa-icon *ngIf=\"_iconObj\"\n                class=\"modal-header-icon--fa\"\n                [icon]=\"_iconObj\"\n                size=\"sm\"></fa-icon>\n              <img *ngIf=\"_iconUrl\"\n                class=\"modal-header-icon--img\"\n                [src]=\"_iconUrl\" [alt]=\"titleText\">\n            </ng-template>\n          </span>\n\n          <span class=\"modal-header-title\">\n            <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"titleTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: titleText, title: titleText }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n          </span>\n        </h4>\n        <button *ngIf=\"showCloseBtn\"\n          type=\"button\"\n          class=\"close\"\n          (click)=\"close()\"\n          aria-label=\"Close\">\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"_queryFooterTpl\" class=\"modal-footer p-2\">\n        <ng-container *ngComponentOutlet=\"$any(_queryFooterTpl.template)\"></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n" }]
+            args: [{ selector: 'seam-modal', providers: [LIB_MODAL], standalone: false, template: "<ng-template #modalTpl>\n  <form\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"_onSubmit()\"\n    class=\"p-4\"\n    style=\"max-width: 800px\"\n  >\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </form>\n\n  <div *ngIf=\"!form\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </div>\n\n  <ng-template #modalContent>\n    <div class=\"modal-content\">\n      <div class=\"modal-header py-2\">\n        <h4 class=\"modal-title\">\n          <span class=\"pr-2 modal-header-icon\">\n            <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"iconTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noIconTpl>\n              <fa-icon\n                *ngIf=\"_iconObj\"\n                class=\"modal-header-icon--fa\"\n                [icon]=\"_iconObj\"\n                size=\"sm\"\n              ></fa-icon>\n              <img\n                *ngIf=\"_iconUrl\"\n                class=\"modal-header-icon--img\"\n                [src]=\"_iconUrl\"\n                [alt]=\"titleText\"\n              />\n            </ng-template>\n          </span>\n\n          <span class=\"modal-header-title\">\n            <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"titleTpl\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: titleText,\n                  title: titleText,\n                }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n          </span>\n        </h4>\n        <button\n          *ngIf=\"showCloseBtn\"\n          type=\"button\"\n          class=\"close\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"_queryFooterTpl\" class=\"modal-footer p-2\">\n        <ng-container\n          *ngComponentOutlet=\"$any(_queryFooterTpl.template)\"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i1$2.ActivatedRoute }], propDecorators: { closeOnKeyPressed: [{
                 type: Input
             }], showCloseBtn: [{
@@ -1296,15 +1344,13 @@ class RouteModalComponent {
         this._modal = _modal;
     }
     ngOnInit() {
-        this._route.data
-            .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(data => {
+        this._route.data.pipe(takeUntil(this._ngUnsubscribe)).subscribe((data) => {
             // console.log('data', data)
             if (data.routeComponent) {
                 // console.log(this._route.snapshot)
                 const modalRef = this._modal.openFromComponent(data.routeComponent, {
                     modalSize: 'lg',
-                    data
+                    data,
                 });
                 modalRef.afterClosed().subscribe(() => {
                     const parent = this.getOutletParent();
@@ -1328,23 +1374,25 @@ class RouteModalComponent {
     }
     _onDetached() {
         if (this.isRouteModal()) {
-            this._router.navigate([{ outlets: { modal: null, primary: ['.'] } }], { relativeTo: this._route.parent });
+            this._router.navigate([{ outlets: { modal: null, primary: ['.'] } }], {
+                relativeTo: this._route.parent,
+            });
         }
     }
     isRouteModal() {
         return this._route.outlet === 'modal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RouteModalComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: Modal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: RouteModalComponent, isStandalone: false, selector: "seam-route-modal", ngImport: i0, template: "<!-- <seam-modal (overlayDetached)=\"_onDetached()\">\n  <router-outlet></router-outlet>\n</seam-modal> -->\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: RouteModalComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: Modal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: RouteModalComponent, isStandalone: false, selector: "seam-route-modal", ngImport: i0, template: "<!-- <seam-modal (overlayDetached)=\"_onDetached()\">\n  <router-outlet></router-outlet>\n</seam-modal> -->\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RouteModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: RouteModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-route-modal', standalone: false, template: "<!-- <seam-modal (overlayDetached)=\"_onDetached()\">\n  <router-outlet></router-outlet>\n</seam-modal> -->\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: Modal }] });
 
 class TheSeamModalModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TheSeamModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: TheSeamModalModule, declarations: [ModalComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, declarations: [ModalComponent,
             ModalFooterTplDirective,
             ModalHeaderIconTplDirective,
             ModalHeaderTitleTplDirective,
@@ -1375,7 +1423,7 @@ class TheSeamModalModule {
             ModalBodyComponent,
             ModalFooterComponent,
             ModalCloseDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TheSeamModalModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, providers: [
             THESEAM_MODAL_SCROLL_STRATEGY_PROVIDER,
             { provide: MODAL_CONTAINER, useValue: ModalContainerComponent },
             { provide: MODAL_CONFIG, useValue: ModalConfig },
@@ -1390,7 +1438,7 @@ class TheSeamModalModule {
             // don't have to remember to import it or be faced with an unhelpful error.
             PortalModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TheSeamModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1405,7 +1453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                         ModalTitleDirective,
                         ModalBodyComponent,
                         ModalFooterComponent,
-                        ModalCloseDirective
+                        ModalCloseDirective,
                     ],
                     imports: [
                         CommonModule,
@@ -1430,13 +1478,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                         ModalTitleDirective,
                         ModalBodyComponent,
                         ModalFooterComponent,
-                        ModalCloseDirective
+                        ModalCloseDirective,
                     ],
                     providers: [
                         THESEAM_MODAL_SCROLL_STRATEGY_PROVIDER,
                         { provide: MODAL_CONTAINER, useValue: ModalContainerComponent },
                         { provide: MODAL_CONFIG, useValue: ModalConfig },
-                    ]
+                    ],
                 }]
         }] });