@skyux/modals 5.0.1 → 5.0.5

package/fesm2015/skyux-modals.js

@@ -63,7 +63,16 @@ var SkyConfirmType;
  * To update this file, simply rerun the command.
  */
 const RESOURCES = {
-    'EN-US': { "skyux_confirm_dialog_default_ok_text": { "message": "OK" }, "skyux_confirm_dialog_default_yes_text": { "message": "Yes" }, "skyux_confirm_dialog_default_no_text": { "message": "No" }, "skyux_confirm_dialog_default_cancel_text": { "message": "Cancel" }, "skyux_modal_close": { "message": "Close modal" }, "skyux_modal_open_help": { "message": "Open Help" }, "skyux_modal_footer_cancel_button": { "message": "Cancel" }, "skyux_modal_footer_primary_button": { "message": "Save" } },
+    'EN-US': {
+        skyux_confirm_dialog_default_ok_text: { message: 'OK' },
+        skyux_confirm_dialog_default_yes_text: { message: 'Yes' },
+        skyux_confirm_dialog_default_no_text: { message: 'No' },
+        skyux_confirm_dialog_default_cancel_text: { message: 'Cancel' },
+        skyux_modal_close: { message: 'Close modal' },
+        skyux_modal_open_help: { message: 'Open Help' },
+        skyux_modal_footer_cancel_button: { message: 'Cancel' },
+        skyux_modal_footer_primary_button: { message: 'Save' },
+    },
 };
 class SkyModalsResourcesProvider {
     getString(localeInfo, name) {
@@ -75,22 +84,26 @@ class SkyModalsResourcesProvider {
  */
 class SkyModalsResourcesModule {
 }
-SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
-SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalsResourcesModule, providers: [{
+SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
+SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalsResourcesModule, providers: [
+        {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyModalsResourcesProvider,
-            multi: true
-        }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [{
+                    providers: [
+                        {
                             provide: SKY_LIB_RESOURCES_PROVIDERS,
                             useClass: SkyModalsResourcesProvider,
-                            multi: true
-                        }]
+                            multi: true,
+                        },
+                    ],
                 }]
         }] });
 
@@ -99,15 +112,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
  */
 class SkyModalContentComponent {
 }
-SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalContentComponent, decorators: [{
+SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-modal-content',
                     templateUrl: './modal-content.component.html',
                     styleUrls: ['./modal-content.component.scss'],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
         }] });
 
@@ -116,14 +129,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
  */
 class SkyModalFooterComponent {
 }
-SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
+SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-modal-footer',
                     templateUrl: './modal-footer.component.html',
-                    styleUrls: ['./modal-footer.component.scss']
+                    styleUrls: ['./modal-footer.component.scss'],
                 }]
         }] });
 
@@ -132,16 +145,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
  */
 class SkyModalHeaderComponent {
 }
-SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n  class=\"sky-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
+SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n  class=\"sky-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-modal-header',
                     templateUrl: './modal-header.component.html',
-                    styleUrls: [
-                        './modal-header.component.scss'
-                    ]
+                    styleUrls: ['./modal-header.component.scss'],
                 }]
         }] });
 
@@ -182,9 +193,9 @@ class SkyModalAdapterService {
 }
 SkyModalAdapterService.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page';
 SkyModalAdapterService.MODAL_BODY_CLASS = 'sky-modal-body-open';
-SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalAdapterService, decorators: [{
+SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i3.SkyAppWindowRef }]; } });
 
@@ -203,14 +214,15 @@ class SkyModalHostService {
         return SkyModalHostService.modalHosts.length;
     }
     static get fullPageModalCount() {
-        let fullPageModals = SkyModalHostService.modalHosts.filter(modal => modal.fullPage);
+        let fullPageModals = SkyModalHostService.modalHosts.filter((modal) => modal.fullPage);
         return fullPageModals.length;
     }
     static get BASE_Z_INDEX() {
         return 1040;
     }
     static get backdropZIndex() {
-        return SkyModalHostService.BASE_Z_INDEX + SkyModalHostService.modalHosts.length * 10;
+        return (SkyModalHostService.BASE_Z_INDEX +
+            SkyModalHostService.modalHosts.length * 10);
     }
     static get topModal() {
         return SkyModalHostService.modalHosts[SkyModalHostService.modalHosts.length - 1];
@@ -231,12 +243,12 @@ class SkyModalHostService {
     }
 }
 SkyModalHostService.modalHosts = [];
-SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalHostService, decorators: [{
+SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return []; } });
 
@@ -249,12 +261,12 @@ class SkyModalConfiguration {
         this.size = 'medium';
     }
 }
-SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalConfiguration, decorators: [{
+SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalConfiguration, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'any'
+                    providedIn: 'any',
                 }]
         }], ctorParameters: function () { return []; } });
 
@@ -285,18 +297,18 @@ class SkyModalHostComponent {
         let isOpen = true;
         params.providers.push({
             provide: SkyModalHostService,
-            useValue: hostService
+            useValue: hostService,
         });
         params.providers.push({
             provide: SkyModalConfiguration,
-            useValue: params
+            useValue: params,
         });
         adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
         adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
         let providers = params.providers || /* istanbul ignore next */ [];
         const injector = Injector.create({
             providers,
-            parent: this.injector
+            parent: this.injector,
         });
         let modalComponentRef = this.target.createComponent(factory, undefined, injector);
         modalInstance.componentInstance = modalComponentRef.instance;
@@ -317,9 +329,7 @@ class SkyModalHostComponent {
         hostService.close.subscribe(() => {
             modalInstance.close();
         });
-        this.router.events
-            .pipe(takeWhile(() => isOpen))
-            .subscribe((event) => {
+        this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
             /* istanbul ignore else */
             if (event instanceof NavigationStart) {
                 modalInstance.close();
@@ -333,21 +343,21 @@ class SkyModalHostComponent {
         this.changeDetector.detectChanges();
     }
 }
-SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n    class=\"sky-modal-host-backdrop\"\n    [hidden]=\"!modalOpen\"\n    [ngStyle]=\"{\n      zIndex: backdropZIndex\n    }\"\n>\n</div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalHostComponent, decorators: [{
+SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-modal-host',
                     templateUrl: './modal-host.component.html',
                     styleUrls: ['./modal-host.component.scss'],
-                    viewProviders: [SkyModalAdapterService]
+                    viewProviders: [SkyModalAdapterService],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', {
                         read: ViewContainerRef,
-                        static: true
+                        static: true,
                     }]
             }] } });
 
@@ -383,7 +393,7 @@ class SkyModalScrollShadowDirective {
                 else {
                     this.emitShadow({
                         bottomShadow: 'none',
-                        topShadow: 'none'
+                        topShadow: 'none',
                     });
                     this.destroyMutationObserver();
                 }
@@ -409,7 +419,7 @@ class SkyModalScrollShadowDirective {
                     attributes: true,
                     characterData: true,
                     childList: true,
-                    subtree: true
+                    subtree: true,
                 });
             });
         }
@@ -424,10 +434,10 @@ class SkyModalScrollShadowDirective {
         if (this.currentTheme === SkyTheme.presets.modern) {
             const el = this.elRef.nativeElement;
             const topShadow = this.buildShadowStyle(el.scrollTop);
-            const bottomShadow = this.buildShadowStyle((el.scrollHeight - el.scrollTop) - el.clientHeight);
+            const bottomShadow = this.buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
             this.emitShadow({
                 bottomShadow,
-                topShadow
+                topShadow,
             });
         }
     }
@@ -435,9 +445,7 @@ class SkyModalScrollShadowDirective {
         // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
         // of the scrollable element, with a max opacity of 0.3.
         const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;
-        return opacity > 0 ?
-            `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` :
-            'none';
+        return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';
     }
     emitShadow(shadow) {
         if (!this.currentShadow ||
@@ -448,12 +456,12 @@ class SkyModalScrollShadowDirective {
         }
     }
 }
-SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i3.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.10", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
+SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i3.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[skyModalScrollShadow]'
+                    selector: '[skyModalScrollShadow]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SkyThemeService, decorators: [{
                     type: Optional
@@ -511,8 +519,8 @@ class SkyModalComponentAdapterService {
         /* istanbul ignore next */
         /* sanity check */
         let eventTarget = event.target || event.srcElement;
-        return modalEl &&
-            eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog');
+        return (modalEl &&
+            eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog'));
     }
     focusLastElement(list) {
         if (list.length > 0) {
@@ -531,7 +539,8 @@ class SkyModalComponentAdapterService {
     modalOpened(modalEl) {
         /* istanbul ignore else */
         /* handle the case where somehow there is a focused element already in the modal */
-        if (!(document.activeElement && modalEl.nativeElement.contains(document.activeElement))) {
+        if (!(document.activeElement &&
+            modalEl.nativeElement.contains(document.activeElement))) {
             let currentScrollX = window.pageXOffset;
             let currentScrollY = window.pageYOffset;
             let inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
@@ -549,27 +558,22 @@ class SkyModalComponentAdapterService {
         const fullPageModalStyle = getComputedStyle(fullPageModalEl);
         const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
             parseInt(fullPageModalStyle.marginBottom, 10);
-        const fullPageModalHeight = (windowHeight - marginTopBottom) + 'px';
+        const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
         fullPageModalEl.style.height = fullPageModalHeight;
         fullPageModalEl.style.maxHeight = fullPageModalHeight;
     }
 }
-SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalComponentAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
+SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponentAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
 
 const skyAnimationModalState = trigger('modalState', [
     state('in', style({ opacity: '1.0' })),
     state('out', style({ opacity: '0.0' })),
-    transition('void => *', [
-        style({ opacity: '0.0' }),
-        animate(150)
-    ]),
-    transition('* => void', [
-        animate(150, style({ opacity: '0.0' }))
-    ])
+    transition('void => *', [style({ opacity: '0.0' }), animate(150)]),
+    transition('* => void', [animate(150, style({ opacity: '0.0' }))]),
 ]);
 
 let skyModalUniqueIdentifier = 0;
@@ -643,7 +647,8 @@ class SkyModalComponent {
         if (SkyModalHostService.openModalCount > 0) {
             let topModal = SkyModalHostService.topModal;
             if (topModal && topModal === this.hostService) {
-                if (event.which === 27) { // Escape key up
+                if (event.which === 27) {
+                    // Escape key up
                     event.preventDefault();
                     this.closeButtonClick();
                 }
@@ -656,16 +661,20 @@ class SkyModalComponent {
         if (SkyModalHostService.openModalCount > 0) {
             let topModal = SkyModalHostService.topModal;
             if (topModal && topModal === this.hostService) {
-                if (event.which === 9) { // Tab pressed
+                if (event.which === 9) {
+                    // Tab pressed
                     let focusChanged = false;
                     let focusElementList = this.coreAdapter.getFocusableChildren(this.elRef.nativeElement);
                     if (event.shiftKey &&
                         (this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
                             this.componentAdapter.isModalFocused(event, this.elRef))) {
-                        focusChanged = this.componentAdapter.focusLastElement(focusElementList);
+                        focusChanged =
+                            this.componentAdapter.focusLastElement(focusElementList);
                     }
-                    else if (!event.shiftKey && this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
-                        focusChanged = this.componentAdapter.focusFirstElement(focusElementList);
+                    else if (!event.shiftKey &&
+                        this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
+                        focusChanged =
+                            this.componentAdapter.focusFirstElement(focusElementList);
                     }
                     if (focusChanged) {
                         event.preventDefault();
@@ -686,7 +695,7 @@ class SkyModalComponent {
         this.dockService.setDockOptions({
             location: SkyDockLocation.ElementBottom,
             referenceEl: this.modalContentWrapperElement.nativeElement,
-            zIndex: 5
+            zIndex: 5,
         });
     }
     helpButtonClick() {
@@ -705,26 +714,16 @@ class SkyModalComponent {
         return actualSize && actualSize.toLowerCase() === size;
     }
 }
-SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
-        SkyModalComponentAdapterService,
-        SkyDockService
-    ], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small' : isSmallSize,\n      'sky-modal-medium' : isMediumSize,\n      'sky-modal-large' : isLargeSize,\n      'sky-modal-tiled' : isTiledBody\n      }\"\n    [ngStyle]=\"{\n        zIndex: modalZIndex\n      }\">\n\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button type=\"button\" class=\"sky-btn sky-modal-btn-close\" [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\" (click)=\"closeButtonClick()\">\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [
-        skyAnimationModalState
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalComponent, decorators: [{
+SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-modal',
                     templateUrl: './modal.component.html',
                     styleUrls: ['./modal.component.scss'],
-                    animations: [
-                        skyAnimationModalState
-                    ],
-                    providers: [
-                        SkyModalComponentAdapterService,
-                        SkyDockService
-                    ]
+                    animations: [skyAnimationModalState],
+                    providers: [SkyModalComponentAdapterService, SkyDockService],
                 }]
         }], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
                     type: Host
@@ -748,8 +747,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
 
 class SkyModalModule {
 }
-SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
+SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
         SkyModalContentComponent,
         SkyModalFooterComponent,
         SkyModalHeaderComponent,
@@ -762,14 +761,14 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         SkyModalContentComponent,
         SkyModalFooterComponent,
         SkyModalHeaderComponent] });
-SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalModule, imports: [[
+SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, imports: [[
             CommonModule,
             RouterModule,
             SkyIconModule,
             SkyModalsResourcesModule,
-            SkyThemeModule
+            SkyThemeModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -778,24 +777,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
                         SkyModalFooterComponent,
                         SkyModalHeaderComponent,
                         SkyModalHostComponent,
-                        SkyModalScrollShadowDirective
+                        SkyModalScrollShadowDirective,
                     ],
                     imports: [
                         CommonModule,
                         RouterModule,
                         SkyIconModule,
                         SkyModalsResourcesModule,
-                        SkyThemeModule
+                        SkyThemeModule,
                     ],
                     exports: [
                         SkyModalComponent,
                         SkyModalContentComponent,
                         SkyModalFooterComponent,
-                        SkyModalHeaderComponent
+                        SkyModalHeaderComponent,
                     ],
-                    entryComponents: [
-                        SkyModalHostComponent
-                    ]
+                    entryComponents: [SkyModalHostComponent],
                 }]
         }] });
 
@@ -920,7 +917,8 @@ class SkyConfirmComponent {
         this.preserveWhiteSpace = false;
     }
     ngOnInit() {
-        if (this.config.type === SkyConfirmType.Custom && this.config.buttons.length > 0) {
+        if (this.config.type === SkyConfirmType.Custom &&
+            this.config.buttons.length > 0) {
             this.buttons = this.getCustomButtons(this.config.buttons);
         }
         else {
@@ -934,7 +932,7 @@ class SkyConfirmComponent {
     }
     close(button) {
         const result = {
-            action: button.action
+            action: button.action,
         };
         this.modal.close(result);
     }
@@ -943,15 +941,16 @@ class SkyConfirmComponent {
         switch (this.config.type) {
             default:
             case SkyConfirmType.OK:
-                this.resourcesService.getString('skyux_confirm_dialog_default_ok_text')
+                this.resourcesService
+                    .getString('skyux_confirm_dialog_default_ok_text')
                     .subscribe((value) => {
                     emitter.next([
                         {
                             text: value,
                             autofocus: true,
                             styleType: 'primary',
-                            action: 'ok'
-                        }
+                            action: 'ok',
+                        },
                     ]);
                 });
                 break;
@@ -962,18 +961,18 @@ class SkyConfirmComponent {
                             text: values[0],
                             autofocus: true,
                             styleType: 'primary',
-                            action: 'yes'
+                            action: 'yes',
                         },
                         {
                             text: values[1],
                             styleType: 'default',
-                            action: 'no'
+                            action: 'no',
                         },
                         {
                             text: values[2],
                             styleType: 'link',
-                            action: 'cancel'
-                        }
+                            action: 'cancel',
+                        },
                     ]);
                 });
                 break;
@@ -984,13 +983,13 @@ class SkyConfirmComponent {
                             text: values[0],
                             autofocus: true,
                             styleType: 'primary',
-                            action: 'yes'
+                            action: 'yes',
                         },
                         {
                             text: values[1],
                             styleType: 'link',
-                            action: 'cancel'
-                        }
+                            action: 'cancel',
+                        },
                     ]);
                 });
                 break;
@@ -1004,20 +1003,20 @@ class SkyConfirmComponent {
                 text: config.text,
                 action: config.action,
                 styleType: config.styleType || 'default',
-                autofocus: config.autofocus || false
+                autofocus: config.autofocus || false,
             });
         });
         return buttons;
     }
 }
-SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n  <sky-modal\n    ariaRole=\"alertdialog\">\n    <sky-modal-content class=\"sky-confirm-content\">\n\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n      >{{ message }}</div>\n\n      <div *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n      >{{ body }}</div>\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"[\n            'sky-btn-' + button.styleType\n          ]\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus': null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmComponent, decorators: [{
+SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n  <sky-modal ariaRole=\"alertdialog\">\n    <sky-modal-content class=\"sky-confirm-content\">\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n      >\n        {{ message }}\n      </div>\n\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n      >\n        {{ body }}\n      </div>\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"['sky-btn-' + button.styleType]\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-confirm',
                     templateUrl: './confirm.component.html',
-                    styleUrls: ['./confirm.component.scss']
+                    styleUrls: ['./confirm.component.scss'],
                 }]
         }], ctorParameters: function () { return [{ type: SkyConfirmModalContext }, { type: SkyModalInstance }, { type: i3$1.SkyLibResourcesService, decorators: [{
                     type: Optional
@@ -1025,35 +1024,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
 
 class SkyConfirmModule {
 }
-SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
+SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
         SkyModalModule,
         SkyModalsResourcesModule,
         SkyThemeModule], exports: [SkyConfirmComponent] });
-SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmModule, imports: [[
+SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmModule, imports: [[
             CommonModule,
             SkyModalModule,
             SkyModalsResourcesModule,
-            SkyThemeModule
+            SkyThemeModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyConfirmComponent
-                    ],
+                    declarations: [SkyConfirmComponent],
                     imports: [
                         CommonModule,
                         SkyModalModule,
                         SkyModalsResourcesModule,
-                        SkyThemeModule
-                    ],
-                    exports: [
-                        SkyConfirmComponent
+                        SkyThemeModule,
                     ],
-                    entryComponents: [
-                        SkyConfirmComponent
-                    ]
+                    exports: [SkyConfirmComponent],
+                    entryComponents: [SkyConfirmComponent],
                 }]
         }] });
 
@@ -1081,10 +1074,6 @@ class SkyModalService {
     /**
      * Opens a modal using the specified component.
      * @param component Determines the component to render.
-     * Since the component generates dynamically instead of with HTML selectors, consumers must
-     * register it with the `entryComponents` property in the `app-extras.module.ts` file.
-     * For more information, see the
-     * [entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components).
      * @param {SkyModalConfigurationInterface} config Populates the modal based on the `SkyModalConfigurationInterface` object.
      */
     open(component, config) {
@@ -1093,24 +1082,26 @@ class SkyModalService {
         let params = this.getConfigFromParameter(config);
         params.providers.push({
             provide: SkyModalInstance,
-            useValue: modalInstance
+            useValue: modalInstance,
         });
         SkyModalService.host.instance.open(modalInstance, component, params);
         return modalInstance;
     }
     getConfigFromParameter(providersOrConfig) {
         let defaultParams = {
-            'providers': [],
-            'fullPage': false,
-            'size': 'medium',
-            'tiledBody': false
+            providers: [],
+            fullPage: false,
+            size: 'medium',
+            tiledBody: false,
         };
         let params = undefined;
         let method = undefined;
         // Object Literal Lookup for backwards compatability.
         method = {
-            'providers?': Object.assign({}, defaultParams, { 'providers': providersOrConfig }),
-            'config': Object.assign({}, defaultParams, providersOrConfig)
+            'providers?': Object.assign({}, defaultParams, {
+                providers: providersOrConfig,
+            }),
+            config: Object.assign({}, defaultParams, providersOrConfig),
         };
         if (Array.isArray(providersOrConfig) === true) {
             params = method['providers?'];
@@ -1126,15 +1117,15 @@ class SkyModalService {
         }
     }
 }
-SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalService, decorators: [{
+SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalService, decorators: [{
             type: Injectable,
             args: [{
                     // Must be 'any' so that the modal component is created in the context of its module's injector.
                     // If set to 'root', the component's dependency injections would only be derived from the root
                     // injector and may loose context if the modal was opened from within a lazy-loaded module.
-                    providedIn: 'any'
+                    providedIn: 'any',
                 }]
         }], ctorParameters: function () { return [{ type: i3.SkyDynamicComponentService }]; } });
 
@@ -1152,10 +1143,12 @@ class SkyConfirmService {
      */
     open(config) {
         const modalInstance = this.modalService.open(SkyConfirmComponent, {
-            providers: [{
+            providers: [
+                {
                     provide: SkyConfirmModalContext,
-                    useValue: config
-                }]
+                    useValue: config,
+                },
+            ],
         });
         const confirmInstance = new SkyConfirmInstance();
         modalInstance.closed.subscribe((args) => {
@@ -1163,7 +1156,7 @@ class SkyConfirmService {
             // The modal was closed using the ESC key.
             if (result === undefined) {
                 result = {
-                    action: 'cancel'
+                    action: 'cancel',
                 };
             }
             confirmInstance.closed.emit(result);
@@ -1172,12 +1165,15 @@ class SkyConfirmService {
         return confirmInstance;
     }
 }
-SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyConfirmService, decorators: [{
+SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    // Must be 'any' so that the modal component is created in the context of its module's injector.
+                    // If set to 'root', the component's dependency injections would only be derived from the root
+                    // injector and may loose context if the modal was opened from within a lazy-loaded module.
+                    providedIn: 'any',
                 }]
         }], ctorParameters: function () { return [{ type: SkyModalService }]; } });