@skyux/modals 5.0.0 → 5.0.4

package/bundles/skyux-modals.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/theme'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('rxjs/operators'), require('@skyux/core'), require('rxjs'), require('@angular/animations')) :
     typeof define === 'function' && define.amd ? define('@skyux/modals', ['exports', '@angular/core', '@angular/common', '@skyux/theme', '@angular/router', '@skyux/indicators', '@skyux/i18n', 'rxjs/operators', '@skyux/core', 'rxjs', '@angular/animations'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.modals = {}), global.ng.core, global.ng.common, global.i1, global.ng.router, global.i5, global.i3, global.rxjs.operators, global.i3$1, global.rxjs, global.ng.animations));
-}(this, (function (exports, i0, i6, i1, i2, i5, i3, operators, i3$1, rxjs, animations) { 'use strict';
+})(this, (function (exports, i0, i6, i1, i2, i5, i3, operators, i3$1, rxjs, animations) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -83,7 +81,16 @@
      * To update this file, simply rerun the command.
      */
     var 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' },
+        },
     };
     var SkyModalsResourcesProvider = /** @class */ (function () {
         function SkyModalsResourcesProvider() {
@@ -101,22 +108,26 @@
         }
         return SkyModalsResourcesModule;
     }());
-    SkyModalsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyModalsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalsResourcesModule, exports: [i3.SkyI18nModule] });
-    SkyModalsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalsResourcesModule, providers: [{
+    SkyModalsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyModalsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalsResourcesModule, exports: [i3.SkyI18nModule] });
+    SkyModalsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalsResourcesModule, providers: [
+            {
                 provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyModalsResourcesProvider,
-                multi: true
-            }], imports: [i3.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalsResourcesModule, decorators: [{
+                multi: true,
+            },
+        ], imports: [i3.SkyI18nModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalsResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i3.SkyI18nModule],
-                        providers: [{
+                        providers: [
+                            {
                                 provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
                                 useClass: SkyModalsResourcesProvider,
-                                multi: true
-                            }]
+                                multi: true,
+                            },
+                        ],
                     }]
             }] });
 
@@ -128,15 +139,15 @@
         }
         return SkyModalContentComponent;
     }());
-    SkyModalContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyModalContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0__namespace, 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__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalContentComponent, decorators: [{
+    SkyModalContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyModalContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0__namespace, 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__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalContentComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-modal-content',
-                        templateUrl: './modal-content.component.html',
-                        styleUrls: ['./modal-content.component.scss'],
-                        encapsulation: i0.ViewEncapsulation.None
+                        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,
                     }]
             }] });
 
@@ -148,14 +159,14 @@
         }
         return SkyModalFooterComponent;
     }());
-    SkyModalFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyModalFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalFooterComponent, decorators: [{
+    SkyModalFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyModalFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalFooterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-modal-footer',
-                        templateUrl: './modal-footer.component.html',
-                        styleUrls: ['./modal-footer.component.scss']
+                        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"],
                     }]
             }] });
 
@@ -167,16 +178,14 @@
         }
         return SkyModalHeaderComponent;
     }());
-    SkyModalHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyModalHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0__namespace, 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__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalHeaderComponent, decorators: [{
+    SkyModalHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyModalHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0__namespace, 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__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-modal-header',
-                        templateUrl: './modal-header.component.html',
-                        styleUrls: [
-                            './modal-header.component.scss'
-                        ]
+                        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"],
                     }]
             }] });
 
@@ -218,9 +227,9 @@
     }());
     SkyModalAdapterService.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page';
     SkyModalAdapterService.MODAL_BODY_CLASS = 'sky-modal-body-open';
-    SkyModalAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalAdapterService, deps: [{ token: i3__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyModalAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalAdapterService, decorators: [{
+    SkyModalAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalAdapterService, deps: [{ token: i3__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyModalAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalAdapterService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i3__namespace.SkyAppWindowRef }]; } });
 
@@ -259,7 +268,8 @@
         });
         Object.defineProperty(SkyModalHostService, "backdropZIndex", {
             get: function () {
-                return SkyModalHostService.BASE_Z_INDEX + SkyModalHostService.modalHosts.length * 10;
+                return (SkyModalHostService.BASE_Z_INDEX +
+                    SkyModalHostService.modalHosts.length * 10);
             },
             enumerable: false,
             configurable: true
@@ -288,12 +298,12 @@
         return SkyModalHostService;
     }());
     SkyModalHostService.modalHosts = [];
-    SkyModalHostService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalHostService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyModalHostService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalHostService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalHostService, decorators: [{
+    SkyModalHostService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyModalHostService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }], ctorParameters: function () { return []; } });
 
@@ -307,12 +317,12 @@
         }
         return SkyModalConfiguration;
     }());
-    SkyModalConfiguration.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalConfiguration, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyModalConfiguration.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalConfiguration, providedIn: 'any' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalConfiguration, decorators: [{
+    SkyModalConfiguration.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalConfiguration, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyModalConfiguration.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalConfiguration, providedIn: 'any' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalConfiguration, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'any'
+                        providedIn: 'any',
                     }]
             }], ctorParameters: function () { return []; } });
 
@@ -351,18 +361,18 @@
             var 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);
             var providers = params.providers || /* istanbul ignore next */ [];
             var injector = i0.Injector.create({
                 providers: providers,
-                parent: this.injector
+                parent: this.injector,
             });
             var modalComponentRef = this.target.createComponent(factory, undefined, injector);
             modalInstance.componentInstance = modalComponentRef.instance;
@@ -383,9 +393,7 @@
             hostService.close.subscribe(function () {
                 modalInstance.close();
             });
-            this.router.events
-                .pipe(operators.takeWhile(function () { return isOpen; }))
-                .subscribe(function (event) {
+            this.router.events.pipe(operators.takeWhile(function () { return isOpen; })).subscribe(function (event) {
                 /* istanbul ignore else */
                 if (event instanceof i2.NavigationStart) {
                     modalInstance.close();
@@ -400,21 +408,21 @@
         };
         return SkyModalHostComponent;
     }());
-    SkyModalHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalHostComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0__namespace.Injector }, { token: i2__namespace.Router }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyModalHostComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, 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__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalHostComponent, decorators: [{
+    SkyModalHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0__namespace.Injector }, { token: i2__namespace.Router }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyModalHostComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, 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__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-modal-host',
-                        templateUrl: './modal-host.component.html',
-                        styleUrls: ['./modal-host.component.scss'],
-                        viewProviders: [SkyModalAdapterService]
+                        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"],
+                        viewProviders: [SkyModalAdapterService],
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0__namespace.Injector }, { type: i2__namespace.Router }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { target: [{
                     type: i0.ViewChild,
                     args: ['target', {
                             read: i0.ViewContainerRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -451,7 +459,7 @@
                     else {
                         _this.emitShadow({
                             bottomShadow: 'none',
-                            topShadow: 'none'
+                            topShadow: 'none',
                         });
                         _this.destroyMutationObserver();
                     }
@@ -478,7 +486,7 @@
                         attributes: true,
                         characterData: true,
                         childList: true,
-                        subtree: true
+                        subtree: true,
                     });
                 });
             }
@@ -493,10 +501,10 @@
             if (this.currentTheme === i1.SkyTheme.presets.modern) {
                 var el = this.elRef.nativeElement;
                 var topShadow = this.buildShadowStyle(el.scrollTop);
-                var bottomShadow = this.buildShadowStyle((el.scrollHeight - el.scrollTop) - el.clientHeight);
+                var bottomShadow = this.buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
                 this.emitShadow({
                     bottomShadow: bottomShadow,
-                    topShadow: topShadow
+                    topShadow: topShadow,
                 });
             }
         };
@@ -504,9 +512,7 @@
             // 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.
             var 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';
         };
         SkyModalScrollShadowDirective.prototype.emitShadow = function (shadow) {
             if (!this.currentShadow ||
@@ -518,12 +524,12 @@
         };
         return SkyModalScrollShadowDirective;
     }());
-    SkyModalScrollShadowDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace.SkyThemeService, optional: true }, { token: i3__namespace.MutationObserverService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyModalScrollShadowDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, decorators: [{
+    SkyModalScrollShadowDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace.SkyThemeService, optional: true }, { token: i3__namespace.MutationObserverService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyModalScrollShadowDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        selector: '[skyModalScrollShadow]'
+                        selector: '[skyModalScrollShadow]',
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef }, { type: i1__namespace.SkyThemeService, decorators: [{
@@ -583,8 +589,8 @@
             /* istanbul ignore next */
             /* sanity check */
             var eventTarget = event.target || event.srcElement;
-            return modalEl &&
-                eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog');
+            return (modalEl &&
+                eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog'));
         };
         SkyModalComponentAdapterService.prototype.focusLastElement = function (list) {
             if (list.length > 0) {
@@ -603,7 +609,8 @@
         SkyModalComponentAdapterService.prototype.modalOpened = function (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))) {
                 var currentScrollX = window.pageXOffset;
                 var currentScrollY = window.pageYOffset;
                 var inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
@@ -621,28 +628,23 @@
             var fullPageModalStyle = getComputedStyle(fullPageModalEl);
             var marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
                 parseInt(fullPageModalStyle.marginBottom, 10);
-            var fullPageModalHeight = (windowHeight - marginTopBottom) + 'px';
+            var fullPageModalHeight = windowHeight - marginTopBottom + 'px';
             fullPageModalEl.style.height = fullPageModalHeight;
             fullPageModalEl.style.maxHeight = fullPageModalHeight;
         };
         return SkyModalComponentAdapterService;
     }());
-    SkyModalComponentAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalComponentAdapterService, deps: [{ token: i3__namespace.SkyCoreAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyModalComponentAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalComponentAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalComponentAdapterService, decorators: [{
+    SkyModalComponentAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponentAdapterService, deps: [{ token: i3__namespace.SkyCoreAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyModalComponentAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponentAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponentAdapterService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i3__namespace.SkyCoreAdapterService }]; } });
 
     var skyAnimationModalState = animations.trigger('modalState', [
         animations.state('in', animations.style({ opacity: '1.0' })),
         animations.state('out', animations.style({ opacity: '0.0' })),
-        animations.transition('void => *', [
-            animations.style({ opacity: '0.0' }),
-            animations.animate(150)
-        ]),
-        animations.transition('* => void', [
-            animations.animate(150, animations.style({ opacity: '0.0' }))
-        ])
+        animations.transition('void => *', [animations.style({ opacity: '0.0' }), animations.animate(150)]),
+        animations.transition('* => void', [animations.animate(150, animations.style({ opacity: '0.0' }))]),
     ]);
 
     var skyModalUniqueIdentifier = 0;
@@ -665,6 +667,13 @@
             this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
             this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
         }
+        Object.defineProperty(SkyModalComponent.prototype, "wrapperClass", {
+            get: function () {
+                return this.config.wrapperClass;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SkyModalComponent.prototype, "ariaRole", {
             /**
              * @internal
@@ -757,7 +766,8 @@
             if (SkyModalHostService.openModalCount > 0) {
                 var 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();
                     }
@@ -770,16 +780,20 @@
             if (SkyModalHostService.openModalCount > 0) {
                 var topModal = SkyModalHostService.topModal;
                 if (topModal && topModal === this.hostService) {
-                    if (event.which === 9) { // Tab pressed
+                    if (event.which === 9) {
+                        // Tab pressed
                         var focusChanged = false;
                         var 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();
@@ -801,7 +815,7 @@
             this.dockService.setDockOptions({
                 location: i3$1.SkyDockLocation.ElementBottom,
                 referenceEl: this.modalContentWrapperElement.nativeElement,
-                zIndex: 5
+                zIndex: 5,
             });
         };
         SkyModalComponent.prototype.helpButtonClick = function () {
@@ -821,32 +835,25 @@
         };
         return SkyModalComponent;
     }());
-    SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3__namespace.SkyCoreAdapterService }, { token: i3__namespace.SkyDockService, host: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" } }, providers: [
-            SkyModalComponentAdapterService,
-            i3$1.SkyDockService
-        ], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [
-            skyAnimationModalState
-        ] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalComponent, decorators: [{
+    SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3__namespace.SkyCoreAdapterService }, { token: i3__namespace.SkyDockService, host: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyModalComponent.ɵcmp = i0__namespace.ɵɵ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, i3$1.SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-modal',
-                        templateUrl: './modal.component.html',
-                        styleUrls: ['./modal.component.scss'],
-                        animations: [
-                            skyAnimationModalState
-                        ],
-                        providers: [
-                            SkyModalComponentAdapterService,
-                            i3$1.SkyDockService
-                        ]
+                        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"],
+                        animations: [skyAnimationModalState],
+                        providers: [SkyModalComponentAdapterService, i3$1.SkyDockService],
                     }]
             }], ctorParameters: function () {
             return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0__namespace.ElementRef }, { type: i3__namespace.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3__namespace.SkyCoreAdapterService }, { type: i3__namespace.SkyDockService, decorators: [{
                             type: i0.Host
                         }] }];
-        }, propDecorators: { ariaRole: [{
+        }, propDecorators: { wrapperClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }], ariaRole: [{
                     type: i0.Input
                 }], tiledBody: [{
                     type: i0.Input
@@ -866,8 +873,8 @@
         }
         return SkyModalModule;
     }());
-    SkyModalModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalModule, declarations: [SkyModalComponent,
+    SkyModalModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalModule, declarations: [SkyModalComponent,
             SkyModalContentComponent,
             SkyModalFooterComponent,
             SkyModalHeaderComponent,
@@ -880,14 +887,14 @@
             SkyModalContentComponent,
             SkyModalFooterComponent,
             SkyModalHeaderComponent] });
-    SkyModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalModule, imports: [[
+    SkyModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalModule, imports: [[
                 i6.CommonModule,
                 i2.RouterModule,
                 i5.SkyIconModule,
                 SkyModalsResourcesModule,
-                i1.SkyThemeModule
+                i1.SkyThemeModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -896,24 +903,22 @@
                             SkyModalFooterComponent,
                             SkyModalHeaderComponent,
                             SkyModalHostComponent,
-                            SkyModalScrollShadowDirective
+                            SkyModalScrollShadowDirective,
                         ],
                         imports: [
                             i6.CommonModule,
                             i2.RouterModule,
                             i5.SkyIconModule,
                             SkyModalsResourcesModule,
-                            i1.SkyThemeModule
+                            i1.SkyThemeModule,
                         ],
                         exports: [
                             SkyModalComponent,
                             SkyModalContentComponent,
                             SkyModalFooterComponent,
-                            SkyModalHeaderComponent
+                            SkyModalHeaderComponent,
                         ],
-                        entryComponents: [
-                            SkyModalHostComponent
-                        ]
+                        entryComponents: [SkyModalHostComponent],
                     }]
             }] });
 
@@ -1057,7 +1062,8 @@
         }
         SkyConfirmComponent.prototype.ngOnInit = function () {
             var _this = this;
-            if (this.config.type === exports.SkyConfirmType.Custom && this.config.buttons.length > 0) {
+            if (this.config.type === exports.SkyConfirmType.Custom &&
+                this.config.buttons.length > 0) {
                 this.buttons = this.getCustomButtons(this.config.buttons);
             }
             else {
@@ -1071,7 +1077,7 @@
         };
         SkyConfirmComponent.prototype.close = function (button) {
             var result = {
-                action: button.action
+                action: button.action,
             };
             this.modal.close(result);
         };
@@ -1080,15 +1086,16 @@
             switch (this.config.type) {
                 default:
                 case exports.SkyConfirmType.OK:
-                    this.resourcesService.getString('skyux_confirm_dialog_default_ok_text')
+                    this.resourcesService
+                        .getString('skyux_confirm_dialog_default_ok_text')
                         .subscribe(function (value) {
                         emitter.next([
                             {
                                 text: value,
                                 autofocus: true,
                                 styleType: 'primary',
-                                action: 'ok'
-                            }
+                                action: 'ok',
+                            },
                         ]);
                     });
                     break;
@@ -1099,18 +1106,18 @@
                                 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;
@@ -1121,13 +1128,13 @@
                                 text: values[0],
                                 autofocus: true,
                                 styleType: 'primary',
-                                action: 'yes'
+                                action: 'yes',
                             },
                             {
                                 text: values[1],
                                 styleType: 'link',
-                                action: 'cancel'
-                            }
+                                action: 'cancel',
+                            },
                         ]);
                     });
                     break;
@@ -1141,21 +1148,21 @@
                     text: config.text,
                     action: config.action,
                     styleType: config.styleType || 'default',
-                    autofocus: config.autofocus || false
+                    autofocus: config.autofocus || false,
                 });
             });
             return buttons;
         };
         return SkyConfirmComponent;
     }());
-    SkyConfirmComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3__namespace$1.SkyLibResourcesService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmComponent, decorators: [{
+    SkyConfirmComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3__namespace$1.SkyLibResourcesService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-confirm',
-                        templateUrl: './confirm.component.html',
-                        styleUrls: ['./confirm.component.scss']
+                        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"],
                     }]
             }], ctorParameters: function () {
             return [{ type: SkyConfirmModalContext }, { type: SkyModalInstance }, { type: i3__namespace$1.SkyLibResourcesService, decorators: [{
@@ -1168,35 +1175,29 @@
         }
         return SkyConfirmModule;
     }());
-    SkyConfirmModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyConfirmModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [i6.CommonModule,
+    SkyConfirmModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyConfirmModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [i6.CommonModule,
             SkyModalModule,
             SkyModalsResourcesModule,
             i1.SkyThemeModule], exports: [SkyConfirmComponent] });
-    SkyConfirmModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmModule, imports: [[
+    SkyConfirmModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmModule, imports: [[
                 i6.CommonModule,
                 SkyModalModule,
                 SkyModalsResourcesModule,
-                i1.SkyThemeModule
+                i1.SkyThemeModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyConfirmComponent
-                        ],
+                        declarations: [SkyConfirmComponent],
                         imports: [
                             i6.CommonModule,
                             SkyModalModule,
                             SkyModalsResourcesModule,
-                            i1.SkyThemeModule
+                            i1.SkyThemeModule,
                         ],
-                        exports: [
-                            SkyConfirmComponent
-                        ],
-                        entryComponents: [
-                            SkyConfirmComponent
-                        ]
+                        exports: [SkyConfirmComponent],
+                        entryComponents: [SkyConfirmComponent],
                     }]
             }] });
 
@@ -1224,10 +1225,6 @@
         /**
          * 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.
          */
         SkyModalService.prototype.open = function (component, config) {
@@ -1236,24 +1233,26 @@
             var params = this.getConfigFromParameter(config);
             params.providers.push({
                 provide: SkyModalInstance,
-                useValue: modalInstance
+                useValue: modalInstance,
             });
             SkyModalService.host.instance.open(modalInstance, component, params);
             return modalInstance;
         };
         SkyModalService.prototype.getConfigFromParameter = function (providersOrConfig) {
             var defaultParams = {
-                'providers': [],
-                'fullPage': false,
-                'size': 'medium',
-                'tiledBody': false
+                providers: [],
+                fullPage: false,
+                size: 'medium',
+                tiledBody: false,
             };
             var params = undefined;
             var 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?'];
@@ -1270,15 +1269,15 @@
         };
         return SkyModalService;
     }());
-    SkyModalService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalService, deps: [{ token: i3__namespace.SkyDynamicComponentService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyModalService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalService, providedIn: 'any' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyModalService, decorators: [{
+    SkyModalService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalService, deps: [{ token: i3__namespace.SkyDynamicComponentService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyModalService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalService, providedIn: 'any' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalService, decorators: [{
                 type: i0.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__namespace.SkyDynamicComponentService }]; } });
 
@@ -1296,10 +1295,12 @@
          */
         SkyConfirmService.prototype.open = function (config) {
             var modalInstance = this.modalService.open(SkyConfirmComponent, {
-                providers: [{
+                providers: [
+                    {
                         provide: SkyConfirmModalContext,
-                        useValue: config
-                    }]
+                        useValue: config,
+                    },
+                ],
             });
             var confirmInstance = new SkyConfirmInstance();
             modalInstance.closed.subscribe(function (args) {
@@ -1307,7 +1308,7 @@
                 // The modal was closed using the ESC key.
                 if (result === undefined) {
                     result = {
-                        action: 'cancel'
+                        action: 'cancel',
                     };
                 }
                 confirmInstance.closed.emit(result);
@@ -1317,12 +1318,12 @@
         };
         return SkyConfirmService;
     }());
-    SkyConfirmService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyConfirmService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyConfirmService, decorators: [{
+    SkyConfirmService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyConfirmService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }], ctorParameters: function () { return [{ type: SkyModalService }]; } });
 
@@ -1341,13 +1342,13 @@
     exports.SkyModalInstance = SkyModalInstance;
     exports.SkyModalModule = SkyModalModule;
     exports.SkyModalService = SkyModalService;
-    exports.λ1 = SkyConfirmComponent;
-    exports.λ2 = SkyModalContentComponent;
-    exports.λ3 = SkyModalFooterComponent;
-    exports.λ4 = SkyModalHeaderComponent;
-    exports.λ5 = SkyModalComponent;
+    exports["λ1"] = SkyConfirmComponent;
+    exports["λ2"] = SkyModalContentComponent;
+    exports["λ3"] = SkyModalFooterComponent;
+    exports["λ4"] = SkyModalHeaderComponent;
+    exports["λ5"] = SkyModalComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-modals.umd.js.map