@skyux/modals 6.12.0 → 6.15.0

package/fesm2020/skyux-modals.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Injector, ViewContainerRef, ViewChild, Directive, Optional, Output, HostListener, ElementRef, Host, HostBinding, Input } from '@angular/core';
+import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, ViewChild, Directive, Optional, Output, HostListener, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@skyux/theme';
@@ -8,14 +8,13 @@ import * as i2$1 from '@angular/router';
 import { NavigationStart, RouterModule } from '@angular/router';
 import * as i5 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
-import * as i3$1 from '@skyux/i18n';
+import * as i2$2 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i3 from '@skyux/core';
 import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SkyDockLocation, SkyDockService } from '@skyux/core';
 import { takeWhile, takeUntil } from 'rxjs/operators';
 import { Subject, BehaviorSubject, zip } from 'rxjs';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 
 class SkyConfirmInstance {
     constructor() {
@@ -139,41 +138,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{ selector: 'sky-modal-header', 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"] }]
         }] });
 
+var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
 /**
  * @internal
  */
 class SkyModalAdapterService {
     constructor(windowRef) {
-        this.windowRef = windowRef;
-        this.docRef = this.windowRef.nativeWindow.document;
-        this.bodyEl = this.windowRef.nativeWindow.document.body;
+        _SkyModalAdapterService_instances.add(this);
+        _SkyModalAdapterService_docRef.set(this, void 0);
+        _SkyModalAdapterService_bodyEl.set(this, void 0);
+        _SkyModalAdapterService_windowRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyModalAdapterService_windowRef, windowRef, "f");
+        __classPrivateFieldSet(this, _SkyModalAdapterService_docRef, __classPrivateFieldGet(this, _SkyModalAdapterService_windowRef, "f").nativeWindow.document, "f");
+        __classPrivateFieldSet(this, _SkyModalAdapterService_bodyEl, __classPrivateFieldGet(this, _SkyModalAdapterService_windowRef, "f").nativeWindow.document.body, "f");
     }
     toggleFullPageModalClass(isAddFull) {
         if (isAddFull) {
-            this.addClassToBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
+            __classPrivateFieldGet(this, _SkyModalAdapterService_instances, "m", _SkyModalAdapterService_addClassToBody).call(this, SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
         }
         else {
-            this.removeClassFromBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
+            __classPrivateFieldGet(this, _SkyModalAdapterService_instances, "m", _SkyModalAdapterService_removeClassFromBody).call(this, SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
         }
     }
     setPageScroll(isAdd) {
         if (isAdd) {
-            this.addClassToBody(SkyModalAdapterService.MODAL_BODY_CLASS);
+            __classPrivateFieldGet(this, _SkyModalAdapterService_instances, "m", _SkyModalAdapterService_addClassToBody).call(this, SkyModalAdapterService.MODAL_BODY_CLASS);
         }
         else {
-            this.removeClassFromBody(SkyModalAdapterService.MODAL_BODY_CLASS);
+            __classPrivateFieldGet(this, _SkyModalAdapterService_instances, "m", _SkyModalAdapterService_removeClassFromBody).call(this, SkyModalAdapterService.MODAL_BODY_CLASS);
         }
     }
     getModalOpener() {
-        return this.docRef.activeElement;
-    }
-    addClassToBody(className) {
-        this.bodyEl.classList.add(className);
-    }
-    removeClassFromBody(className) {
-        this.bodyEl.classList.remove(className);
+        return __classPrivateFieldGet(this, _SkyModalAdapterService_docRef, "f").activeElement;
     }
 }
+_SkyModalAdapterService_docRef = new WeakMap(), _SkyModalAdapterService_bodyEl = new WeakMap(), _SkyModalAdapterService_windowRef = new WeakMap(), _SkyModalAdapterService_instances = new WeakSet(), _SkyModalAdapterService_addClassToBody = function _SkyModalAdapterService_addClassToBody(className) {
+    __classPrivateFieldGet(this, _SkyModalAdapterService_bodyEl, "f").classList.add(className);
+}, _SkyModalAdapterService_removeClassFromBody = function _SkyModalAdapterService_removeClassFromBody(className) {
+    __classPrivateFieldGet(this, _SkyModalAdapterService_bodyEl, "f").classList.remove(className);
+};
 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: "13.3.2", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -205,16 +208,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * @internal
  */
 class SkyModalHostContext {
-    constructor(teardownCallback) {
-        this.teardownCallback = teardownCallback;
+    constructor(args) {
+        this.args = args;
     }
 }
-SkyModalHostContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostContext, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalHostContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyModalHostContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostContext });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostContext, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined }]; } });
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['SkyModalHostContextArgs']
+                }] }]; } });
 
+const BASE_Z_INDEX = 1040;
+const modalHosts = [];
 /**
  * @internal
  * @dynamic
@@ -224,29 +232,24 @@ class SkyModalHostService {
         this.close = new EventEmitter();
         this.fullPage = false;
         this.openHelp = new EventEmitter();
-        SkyModalHostService.modalHosts.push(this);
+        this.zIndex = this.calculateZIndex();
+        modalHosts.push(this);
     }
     static get openModalCount() {
-        return SkyModalHostService.modalHosts.length;
+        return modalHosts.length;
     }
     static get fullPageModalCount() {
-        const fullPageModals = SkyModalHostService.modalHosts.filter((modal) => modal.fullPage);
+        const fullPageModals = 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 BASE_Z_INDEX + modalHosts.length * 10;
     }
     static get topModal() {
-        return SkyModalHostService.modalHosts[SkyModalHostService.modalHosts.length - 1];
+        return modalHosts[modalHosts.length - 1];
     }
     getModalZIndex() {
-        let zIndex = SkyModalHostService.BASE_Z_INDEX + 1;
-        zIndex += (SkyModalHostService.modalHosts.indexOf(this) + 1) * 10;
-        return zIndex;
+        return this.zIndex;
     }
     onClose() {
         this.close.emit();
@@ -255,10 +258,19 @@ class SkyModalHostService {
         this.openHelp.emit(helpKey);
     }
     destroy() {
-        SkyModalHostService.modalHosts.splice(SkyModalHostService.modalHosts.indexOf(this), 1);
+        modalHosts.splice(modalHosts.indexOf(this), 1);
+    }
+    calculateZIndex() {
+        const zIndexArray = modalHosts.map((hostService) => hostService.zIndex);
+        if (zIndexArray.length === 0) {
+            return BASE_Z_INDEX + 11;
+        }
+        else {
+            const currentMaxZIndex = Math.max(...zIndexArray);
+            return currentMaxZIndex + 10;
+        }
     }
 }
-SkyModalHostService.modalHosts = [];
 SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, decorators: [{
@@ -268,18 +280,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-var _SkyModalHostComponent_modalHostContext;
+var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModalHostComponent_adapter, _SkyModalHostComponent_injector, _SkyModalHostComponent_router, _SkyModalHostComponent_changeDetector, _SkyModalHostComponent_modalHostContext, _SkyModalHostComponent_modalInstances, _SkyModalHostComponent_registerModalInstance, _SkyModalHostComponent_unregisterModalInstance, _SkyModalHostComponent_closeAllModalInstances;
 /**
  * @internal
  */
 class SkyModalHostComponent {
     constructor(resolver, adapter, injector, router, changeDetector, modalHostContext) {
-        this.resolver = resolver;
-        this.adapter = adapter;
-        this.injector = injector;
-        this.router = router;
-        this.changeDetector = changeDetector;
+        _SkyModalHostComponent_instances.add(this);
+        _SkyModalHostComponent_resolver.set(this, void 0);
+        _SkyModalHostComponent_adapter.set(this, void 0);
+        _SkyModalHostComponent_injector.set(this, void 0);
+        _SkyModalHostComponent_router.set(this, void 0);
+        _SkyModalHostComponent_changeDetector.set(this, void 0);
         _SkyModalHostComponent_modalHostContext.set(this, void 0);
+        _SkyModalHostComponent_modalInstances.set(this, []);
+        __classPrivateFieldSet(this, _SkyModalHostComponent_resolver, resolver, "f");
+        __classPrivateFieldSet(this, _SkyModalHostComponent_adapter, adapter, "f");
+        __classPrivateFieldSet(this, _SkyModalHostComponent_injector, injector, "f");
+        __classPrivateFieldSet(this, _SkyModalHostComponent_router, router, "f");
+        __classPrivateFieldSet(this, _SkyModalHostComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyModalHostComponent_modalHostContext, modalHostContext, "f");
     }
     get modalOpen() {
@@ -289,16 +308,25 @@ class SkyModalHostComponent {
         return SkyModalHostService.backdropZIndex;
     }
     ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyModalHostComponent_modalHostContext, "f").teardownCallback();
+        // Close all modal instances before disposing of the host container.
+        __classPrivateFieldGet(this, _SkyModalHostComponent_instances, "m", _SkyModalHostComponent_closeAllModalInstances).call(this);
+        __classPrivateFieldGet(this, _SkyModalHostComponent_modalHostContext, "f").args.teardownCallback();
     }
     open(modalInstance, component, config) {
+        /* Ignore coverage as we specify the target element and so the view child should never be undefined unless
+         * we were to call the `open` method in an early lifecycle hook. */
+        /* istanbul ignore next */
+        if (!this.target) {
+            return;
+        }
         const params = Object.assign({}, config);
-        const factory = this.resolver.resolveComponentFactory(component);
+        const factory = __classPrivateFieldGet(this, _SkyModalHostComponent_resolver, "f").resolveComponentFactory(component);
         const hostService = new SkyModalHostService();
         hostService.fullPage = !!params.fullPage;
-        const adapter = this.adapter;
+        const adapter = __classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f");
         const modalOpener = adapter.getModalOpener();
         let isOpen = true;
+        /* eslint-disable @typescript-eslint/no-non-null-assertion */
         params.providers.push({
             provide: SkyModalHostService,
             useValue: hostService,
@@ -311,15 +339,17 @@ class SkyModalHostComponent {
             provide: SkyMediaQueryService,
             useExisting: SkyResizeObserverMediaQueryService,
         });
+        /* eslint-enable @typescript-eslint/no-non-null-assertion */
         adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
         adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
         const providers = params.providers || /* istanbul ignore next */ [];
         const injector = Injector.create({
             providers,
-            parent: this.injector,
+            parent: __classPrivateFieldGet(this, _SkyModalHostComponent_injector, "f"),
         });
         const modalComponentRef = this.target.createComponent(factory, undefined, injector);
         modalInstance.componentInstance = modalComponentRef.instance;
+        __classPrivateFieldGet(this, _SkyModalHostComponent_instances, "m", _SkyModalHostComponent_registerModalInstance).call(this, modalInstance);
         function closeModal() {
             hostService.destroy();
             adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
@@ -337,7 +367,7 @@ class SkyModalHostComponent {
         hostService.close.subscribe(() => {
             modalInstance.close();
         });
-        this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
+        __classPrivateFieldGet(this, _SkyModalHostComponent_router, "f").events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
             /* istanbul ignore else */
             if (event instanceof NavigationStart) {
                 modalInstance.close();
@@ -345,13 +375,22 @@ class SkyModalHostComponent {
         });
         modalInstance.closed.subscribe(() => {
             isOpen = false;
+            __classPrivateFieldGet(this, _SkyModalHostComponent_instances, "m", _SkyModalHostComponent_unregisterModalInstance).call(this, modalInstance);
             closeModal();
         });
         // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit
-        this.changeDetector.detectChanges();
+        __classPrivateFieldGet(this, _SkyModalHostComponent_changeDetector, "f").detectChanges();
     }
 }
-_SkyModalHostComponent_modalHostContext = new WeakMap();
+_SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter = new WeakMap(), _SkyModalHostComponent_injector = new WeakMap(), _SkyModalHostComponent_router = new WeakMap(), _SkyModalHostComponent_changeDetector = new WeakMap(), _SkyModalHostComponent_modalHostContext = new WeakMap(), _SkyModalHostComponent_modalInstances = new WeakMap(), _SkyModalHostComponent_instances = new WeakSet(), _SkyModalHostComponent_registerModalInstance = function _SkyModalHostComponent_registerModalInstance(instance) {
+    __classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").push(instance);
+}, _SkyModalHostComponent_unregisterModalInstance = function _SkyModalHostComponent_unregisterModalInstance(instance) {
+    __classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").slice(__classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").indexOf(instance), 1);
+}, _SkyModalHostComponent_closeAllModalInstances = function _SkyModalHostComponent_closeAllModalInstances() {
+    for (const instance of __classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f")) {
+        instance.close();
+    }
+};
 SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }], target: i0.ɵɵFactoryTarget.Component });
 SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: "13.3.2", ngImport: i0, type: SkyModalHostComponent, decorators: [{
@@ -365,6 +404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     }]
             }] } });
 
+var _SkyModalScrollShadowDirective_instances, _SkyModalScrollShadowDirective_currentShadow, _SkyModalScrollShadowDirective_currentTheme, _SkyModalScrollShadowDirective_mutationObserver, _SkyModalScrollShadowDirective_ngUnsubscribe, _SkyModalScrollShadowDirective_elRef, _SkyModalScrollShadowDirective_mutationObserverSvc, _SkyModalScrollShadowDirective_ngZone, _SkyModalScrollShadowDirective_themeSvc, _SkyModalScrollShadowDirective_initMutationObserver, _SkyModalScrollShadowDirective_destroyMutationObserver, _SkyModalScrollShadowDirective_checkForShadow, _SkyModalScrollShadowDirective_buildShadowStyle, _SkyModalScrollShadowDirective_emitShadow;
 /**
  * Raises an event when the box shadow for the modal header or footer should be adjusted
  * based on the scroll position of the host element.
@@ -372,94 +412,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  */
 class SkyModalScrollShadowDirective {
     constructor(elRef, mutationObserverSvc, ngZone, themeSvc) {
-        this.elRef = elRef;
-        this.mutationObserverSvc = mutationObserverSvc;
-        this.ngZone = ngZone;
-        this.themeSvc = themeSvc;
+        _SkyModalScrollShadowDirective_instances.add(this);
         this.skyModalScrollShadow = new EventEmitter();
-        this.ngUnsubscribe = new Subject();
+        _SkyModalScrollShadowDirective_currentShadow.set(this, void 0);
+        _SkyModalScrollShadowDirective_currentTheme.set(this, void 0);
+        _SkyModalScrollShadowDirective_mutationObserver.set(this, void 0);
+        _SkyModalScrollShadowDirective_ngUnsubscribe.set(this, new Subject());
+        _SkyModalScrollShadowDirective_elRef.set(this, void 0);
+        _SkyModalScrollShadowDirective_mutationObserverSvc.set(this, void 0);
+        _SkyModalScrollShadowDirective_ngZone.set(this, void 0);
+        _SkyModalScrollShadowDirective_themeSvc.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_elRef, elRef, "f");
+        __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_mutationObserverSvc, mutationObserverSvc, "f");
+        __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_ngZone, ngZone, "f");
+        __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_themeSvc, themeSvc, "f");
     }
     windowResize() {
-        this.checkForShadow();
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_checkForShadow).call(this);
     }
     scroll() {
-        this.checkForShadow();
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_checkForShadow).call(this);
     }
     ngOnInit() {
-        if (this.themeSvc) {
-            this.themeSvc.settingsChange
-                .pipe(takeUntil(this.ngUnsubscribe))
+        if (__classPrivateFieldGet(this, _SkyModalScrollShadowDirective_themeSvc, "f")) {
+            __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_themeSvc, "f").settingsChange
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyModalScrollShadowDirective_ngUnsubscribe, "f")))
                 .subscribe((themeSettings) => {
-                this.currentTheme = themeSettings.currentSettings.theme;
-                if (this.currentTheme === SkyTheme.presets.modern) {
-                    this.initMutationObserver();
+                __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_currentTheme, themeSettings.currentSettings.theme, "f");
+                if (__classPrivateFieldGet(this, _SkyModalScrollShadowDirective_currentTheme, "f") === SkyTheme.presets.modern) {
+                    __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_initMutationObserver).call(this);
                 }
                 else {
-                    this.emitShadow({
+                    __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_emitShadow).call(this, {
                         bottomShadow: 'none',
                         topShadow: 'none',
                     });
-                    this.destroyMutationObserver();
+                    __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_destroyMutationObserver).call(this);
                 }
             });
         }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.destroyMutationObserver();
-    }
-    initMutationObserver() {
-        if (!this.mutationObserver) {
-            const el = this.elRef.nativeElement;
-            // MutationObserver is patched by Zone.js and therefore becomes part of the
-            // Angular change detection cycle, but this can lead to infinite loops in some
-            // secnarios. This will keep MutationObserver from triggering change detection.
-            this.ngZone.runOutsideAngular(() => {
-                this.mutationObserver = this.mutationObserverSvc.create(() => {
-                    this.checkForShadow();
-                });
-                this.mutationObserver.observe(el, {
-                    attributes: true,
-                    characterData: true,
-                    childList: true,
-                    subtree: true,
-                });
-            });
-        }
-    }
-    destroyMutationObserver() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-            this.mutationObserver = undefined;
-        }
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_destroyMutationObserver).call(this);
     }
-    checkForShadow() {
-        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);
-            this.emitShadow({
-                bottomShadow,
-                topShadow,
+}
+_SkyModalScrollShadowDirective_currentShadow = new WeakMap(), _SkyModalScrollShadowDirective_currentTheme = new WeakMap(), _SkyModalScrollShadowDirective_mutationObserver = new WeakMap(), _SkyModalScrollShadowDirective_ngUnsubscribe = new WeakMap(), _SkyModalScrollShadowDirective_elRef = new WeakMap(), _SkyModalScrollShadowDirective_mutationObserverSvc = new WeakMap(), _SkyModalScrollShadowDirective_ngZone = new WeakMap(), _SkyModalScrollShadowDirective_themeSvc = new WeakMap(), _SkyModalScrollShadowDirective_instances = new WeakSet(), _SkyModalScrollShadowDirective_initMutationObserver = function _SkyModalScrollShadowDirective_initMutationObserver() {
+    if (!__classPrivateFieldGet(this, _SkyModalScrollShadowDirective_mutationObserver, "f")) {
+        const el = __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_elRef, "f").nativeElement;
+        // MutationObserver is patched by Zone.js and therefore becomes part of the
+        // Angular change detection cycle, but this can lead to infinite loops in some
+        // secnarios. This will keep MutationObserver from triggering change detection.
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_ngZone, "f").runOutsideAngular(() => {
+            __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_mutationObserver, __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_mutationObserverSvc, "f").create(() => {
+                __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_checkForShadow).call(this);
+            }), "f");
+            __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_mutationObserver, "f").observe(el, {
+                attributes: true,
+                characterData: true,
+                childList: true,
+                subtree: true,
             });
-        }
+        });
     }
-    buildShadowStyle(pixelsFromEnd) {
-        // 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';
-    }
-    emitShadow(shadow) {
-        if (!this.currentShadow ||
-            this.currentShadow.bottomShadow !== shadow.bottomShadow ||
-            this.currentShadow.topShadow !== shadow.topShadow) {
-            this.skyModalScrollShadow.emit(shadow);
-            this.currentShadow = shadow;
-        }
+}, _SkyModalScrollShadowDirective_destroyMutationObserver = function _SkyModalScrollShadowDirective_destroyMutationObserver() {
+    if (__classPrivateFieldGet(this, _SkyModalScrollShadowDirective_mutationObserver, "f")) {
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_mutationObserver, "f").disconnect();
+        __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_mutationObserver, undefined, "f");
+    }
+}, _SkyModalScrollShadowDirective_checkForShadow = function _SkyModalScrollShadowDirective_checkForShadow() {
+    if (__classPrivateFieldGet(this, _SkyModalScrollShadowDirective_currentTheme, "f") === SkyTheme.presets.modern) {
+        const el = __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_elRef, "f").nativeElement;
+        const topShadow = __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_buildShadowStyle).call(this, el.scrollTop);
+        const bottomShadow = __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_buildShadowStyle).call(this, el.scrollHeight - el.scrollTop - el.clientHeight);
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_instances, "m", _SkyModalScrollShadowDirective_emitShadow).call(this, {
+            bottomShadow,
+            topShadow,
+        });
     }
-}
+}, _SkyModalScrollShadowDirective_buildShadowStyle = function _SkyModalScrollShadowDirective_buildShadowStyle(pixelsFromEnd) {
+    // 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';
+}, _SkyModalScrollShadowDirective_emitShadow = function _SkyModalScrollShadowDirective_emitShadow(shadow) {
+    if (!__classPrivateFieldGet(this, _SkyModalScrollShadowDirective_currentShadow, "f") ||
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_currentShadow, "f").bottomShadow !== shadow.bottomShadow ||
+        __classPrivateFieldGet(this, _SkyModalScrollShadowDirective_currentShadow, "f").topShadow !== shadow.topShadow) {
+        this.skyModalScrollShadow.emit(shadow);
+        __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_currentShadow, shadow, "f");
+    }
+};
 SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.MutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
@@ -479,12 +523,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['scroll']
             }] } });
 
+var _SkyModalComponentAdapterService_instances, _SkyModalComponentAdapterService_coreAdapter, _SkyModalComponentAdapterService_setFullPageHeight;
 /**
  * @internal
  */
 class SkyModalComponentAdapterService {
     constructor(coreAdapter) {
-        this.coreAdapter = coreAdapter;
+        _SkyModalComponentAdapterService_instances.add(this);
+        _SkyModalComponentAdapterService_coreAdapter.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyModalComponentAdapterService_coreAdapter, coreAdapter, "f");
     }
     handleWindowChange(modalEl) {
         const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
@@ -495,7 +542,7 @@ class SkyModalComponentAdapterService {
         const newHeight = window.innerHeight - 40;
         boundedHeightEl.style.maxHeight = newHeight.toString() + 'px';
         if (fullPageModalEl) {
-            this.setFullPageHeight(fullPageModalEl);
+            __classPrivateFieldGet(this, _SkyModalComponentAdapterService_instances, "m", _SkyModalComponentAdapterService_setFullPageHeight).call(this, fullPageModalEl);
         }
         else {
             /*
@@ -555,35 +602,30 @@ class SkyModalComponentAdapterService {
                 inputWithAutofocus.focus();
             }
             else {
-                this.coreAdapter.getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
+                __classPrivateFieldGet(this, _SkyModalComponentAdapterService_coreAdapter, "f").getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
             }
             window.scrollTo(currentScrollX, currentScrollY);
         }
     }
-    setFullPageHeight(fullPageModalEl) {
-        const windowHeight = window.innerHeight;
-        const fullPageModalStyle = getComputedStyle(fullPageModalEl);
-        const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
-            parseInt(fullPageModalStyle.marginBottom, 10);
-        const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
-        fullPageModalEl.style.height = fullPageModalHeight;
-        fullPageModalEl.style.maxHeight = fullPageModalHeight;
-    }
 }
+_SkyModalComponentAdapterService_coreAdapter = new WeakMap(), _SkyModalComponentAdapterService_instances = new WeakSet(), _SkyModalComponentAdapterService_setFullPageHeight = function _SkyModalComponentAdapterService_setFullPageHeight(fullPageModalEl) {
+    const windowHeight = window.innerHeight;
+    const fullPageModalStyle = getComputedStyle(fullPageModalEl);
+    const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
+        parseInt(fullPageModalStyle.marginBottom, 10);
+    const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
+    fullPageModalEl.style.height = fullPageModalHeight;
+    fullPageModalEl.style.maxHeight = fullPageModalHeight;
+};
 SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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' }))]),
-]);
-
+var _SkyModalComponent_hostService, _SkyModalComponent_elRef, _SkyModalComponent_windowRef, _SkyModalComponent_componentAdapter, _SkyModalComponent_coreAdapter, _SkyModalComponent_dockService, _SkyModalComponent_mediaQueryService, _SkyModalComponent__ariaRole;
 let skyModalUniqueIdentifier = 0;
+const ARIA_ROLE_DEFAULT = 'dialog';
 /**
  * Provides a common look-and-feel for modal content with options to display
  * a common modal header, specify body content, and display a common modal footer
@@ -591,69 +633,54 @@ let skyModalUniqueIdentifier = 0;
  */
 class SkyModalComponent {
     constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
-        this.hostService = hostService;
-        this.config = config;
-        this.elRef = elRef;
-        this.windowRef = windowRef;
-        this.componentAdapter = componentAdapter;
-        this.coreAdapter = coreAdapter;
-        this.dockService = dockService;
-        this.mediaQueryService = mediaQueryService;
+        this.ariaRoleOrDefault = ARIA_ROLE_DEFAULT;
         this.modalState = 'in';
         this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
         this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
-    }
-    get wrapperClass() {
-        return this.config.wrapperClass;
-    }
+        _SkyModalComponent_hostService.set(this, void 0);
+        _SkyModalComponent_elRef.set(this, void 0);
+        _SkyModalComponent_windowRef.set(this, void 0);
+        _SkyModalComponent_componentAdapter.set(this, void 0);
+        _SkyModalComponent_coreAdapter.set(this, void 0);
+        _SkyModalComponent_dockService.set(this, void 0);
+        _SkyModalComponent_mediaQueryService.set(this, void 0);
+        _SkyModalComponent__ariaRole.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyModalComponent_hostService, hostService, "f");
+        __classPrivateFieldSet(this, _SkyModalComponent_elRef, elRef, "f");
+        __classPrivateFieldSet(this, _SkyModalComponent_windowRef, windowRef, "f");
+        __classPrivateFieldSet(this, _SkyModalComponent_componentAdapter, componentAdapter, "f");
+        __classPrivateFieldSet(this, _SkyModalComponent_coreAdapter, coreAdapter, "f");
+        __classPrivateFieldSet(this, _SkyModalComponent_dockService, dockService, "f");
+        __classPrivateFieldSet(this, _SkyModalComponent_mediaQueryService, mediaQueryService, "f");
+        this.ariaDescribedBy = config.ariaDescribedBy || this.modalContentId;
+        this.ariaLabelledBy = config.ariaLabelledBy || this.modalHeaderId;
+        this.ariaRole = config.ariaRole;
+        this.helpKey = config.helpKey;
+        this.tiledBody = config.tiledBody;
+        this.wrapperClass = config.wrapperClass;
+        this.size = config.fullPage
+            ? 'full-page'
+            : config.size?.toLowerCase() || 'medium';
+        this.modalZIndex = __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").zIndex;
+    }
+    // Ignoring coverage as we only use the setter internally and do not export the class externally for users to be able to use the getter.
+    // istanbul ignore next
     /**
      * @internal
      */
     get ariaRole() {
-        return this.config.ariaRole || 'dialog';
+        return __classPrivateFieldGet(this, _SkyModalComponent__ariaRole, "f");
     }
     set ariaRole(value) {
-        this.config.ariaRole = value;
-    }
-    /**
-     * @internal
-     */
-    set tiledBody(value) {
-        this.config.tiledBody = value;
-    }
-    get modalZIndex() {
-        return this.hostService.getModalZIndex();
-    }
-    get modalFullPage() {
-        return this.config.fullPage;
-    }
-    get isSmallSize() {
-        return !this.modalFullPage && this.isSizeEqual(this.config.size, 'small');
-    }
-    get isMediumSize() {
-        return !this.modalFullPage && !(this.isSmallSize || this.isLargeSize);
-    }
-    get isLargeSize() {
-        return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');
-    }
-    get isTiledBody() {
-        return this.config.tiledBody;
-    }
-    get ariaDescribedBy() {
-        return this.config.ariaDescribedBy || this.modalContentId;
-    }
-    get ariaLabelledBy() {
-        return this.config.ariaLabelledBy || this.modalHeaderId;
-    }
-    get helpKey() {
-        return this.config.helpKey;
+        __classPrivateFieldSet(this, _SkyModalComponent__ariaRole, value, "f");
+        this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
     }
     onDocumentKeyUp(event) {
         /* istanbul ignore else */
         /* sanity check */
         if (SkyModalHostService.openModalCount > 0) {
             const topModal = SkyModalHostService.topModal;
-            if (topModal && topModal === this.hostService) {
+            if (topModal && topModal === __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f")) {
                 if (event.which === 27) {
                     // Escape key up
                     event.preventDefault();
@@ -667,21 +694,21 @@ class SkyModalComponent {
         /* sanity check */
         if (SkyModalHostService.openModalCount > 0) {
             const topModal = SkyModalHostService.topModal;
-            if (topModal && topModal === this.hostService) {
+            if (topModal && topModal === __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f")) {
                 if (event.which === 9) {
                     // Tab pressed
                     let focusChanged = false;
-                    const focusElementList = this.coreAdapter.getFocusableChildren(this.elRef.nativeElement);
+                    const focusElementList = __classPrivateFieldGet(this, _SkyModalComponent_coreAdapter, "f").getFocusableChildren(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f").nativeElement);
                     if (event.shiftKey &&
-                        (this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
-                            this.componentAdapter.isModalFocused(event, this.elRef))) {
+                        (__classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").isFocusInFirstItem(event, focusElementList) ||
+                            __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").isModalFocused(event, __classPrivateFieldGet(this, _SkyModalComponent_elRef, "f")))) {
                         focusChanged =
-                            this.componentAdapter.focusLastElement(focusElementList);
+                            __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").focusLastElement(focusElementList);
                     }
                     else if (!event.shiftKey &&
-                        this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
+                        __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").isFocusInLastItem(event, focusElementList)) {
                         focusChanged =
-                            this.componentAdapter.focusFirstElement(focusElementList);
+                            __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").focusFirstElement(focusElementList);
                     }
                     if (focusChanged) {
                         event.preventDefault();
@@ -693,52 +720,50 @@ class SkyModalComponent {
     }
     ngAfterViewInit() {
         skyModalUniqueIdentifier++;
-        this.componentAdapter.handleWindowChange(this.elRef);
+        __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").handleWindowChange(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
         // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
         // https://stackoverflow.com/questions/40562845
-        this.windowRef.nativeWindow.setTimeout(() => {
-            this.componentAdapter.modalOpened(this.elRef);
+        __classPrivateFieldGet(this, _SkyModalComponent_windowRef, "f").nativeWindow.setTimeout(() => {
+            __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").modalOpened(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
         });
-        this.dockService.setDockOptions({
+        __classPrivateFieldGet(this, _SkyModalComponent_dockService, "f").setDockOptions({
             location: SkyDockLocation.ElementBottom,
             referenceEl: this.modalContentWrapperElement.nativeElement,
             zIndex: 5,
         });
         /* istanbul ignore next */
-        if (this.mediaQueryService) {
-            this.mediaQueryService.observe(this.modalContentWrapperElement);
+        if (__classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f")) {
+            __classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f").observe(this.modalContentWrapperElement);
         }
     }
     ngOnDestroy() {
         /* istanbul ignore next */
-        if (this.mediaQueryService) {
-            this.mediaQueryService.unobserve();
+        if (__classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f")) {
+            __classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f").unobserve();
         }
     }
     helpButtonClick() {
-        this.hostService.onOpenHelp(this.helpKey);
+        __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").onOpenHelp(this.helpKey);
     }
     closeButtonClick() {
-        this.hostService.onClose();
+        __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").onClose();
     }
     windowResize() {
-        this.componentAdapter.handleWindowChange(this.elRef);
+        __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").handleWindowChange(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
     }
     scrollShadowChange(args) {
         this.scrollShadow = args;
     }
     viewkeeperEnabled() {
-        return this.componentAdapter.modalContentHasDirectChildViewkeeper(this.elRef);
-    }
-    isSizeEqual(actualSize, size) {
-        return actualSize && actualSize.toLowerCase() === size;
+        return __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").modalContentHasDirectChildViewkeeper(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
     }
 }
+_SkyModalComponent_hostService = new WeakMap(), _SkyModalComponent_elRef = new WeakMap(), _SkyModalComponent_windowRef = new WeakMap(), _SkyModalComponent_componentAdapter = new WeakMap(), _SkyModalComponent_coreAdapter = new WeakMap(), _SkyModalComponent_dockService = new WeakMap(), _SkyModalComponent_mediaQueryService = new WeakMap(), _SkyModalComponent__ariaRole = new WeakMap();
 SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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 }, { token: i3.SkyResizeObserverMediaQueryService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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      'sky-modal-viewkeeper': viewkeeperEnabled()\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%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.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%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}: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] });
+SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\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': size === 'full-page'\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%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.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%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}: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": i2$2.SkyLibResourcesPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [SkyModalComponentAdapterService, 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      'sky-modal-viewkeeper': viewkeeperEnabled()\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%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.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%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}: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"] }]
+            args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\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': size === 'full-page'\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%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.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%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}: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"] }]
         }], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
                     type: Host
                 }] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
@@ -828,11 +853,13 @@ class SkyModalBeforeCloseHandler {
 class SkyModalCloseArgs {
 }
 
+var _SkyModalInstance_instances, _SkyModalInstance__beforeClose, _SkyModalInstance__closed, _SkyModalInstance__helpOpened, _SkyModalInstance_closeModal, _SkyModalInstance_notifyClosed;
 class SkyModalInstance {
     constructor() {
-        this._beforeClose = new Subject();
-        this._closed = new Subject();
-        this._helpOpened = new Subject();
+        _SkyModalInstance_instances.add(this);
+        _SkyModalInstance__beforeClose.set(this, new Subject());
+        _SkyModalInstance__closed.set(this, new Subject());
+        _SkyModalInstance__helpOpened.set(this, new Subject());
     }
     /**
      * An event that the modal instance emits when it is about to close.
@@ -841,7 +868,7 @@ class SkyModalInstance {
      * the modal does not close until the subscriber calls the `closeModal` method.
      */
     get beforeClose() {
-        return this._beforeClose;
+        return __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f");
     }
     /**
      * An event that the modal instance emits when it closes.
@@ -852,7 +879,7 @@ class SkyModalInstance {
      * Common examples include `"cancel"`, `"close"`, and `"save"`.
      */
     get closed() {
-        return this._closed;
+        return __classPrivateFieldGet(this, _SkyModalInstance__closed, "f");
     }
     /**
      * An event that the modal instance emits when users click
@@ -860,7 +887,7 @@ class SkyModalInstance {
      * If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.
      */
     get helpOpened() {
-        return this._helpOpened;
+        return __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f");
     }
     /**
      * Closes the modal instance.
@@ -874,7 +901,7 @@ class SkyModalInstance {
         if (reason === undefined) {
             reason = 'close';
         }
-        this.closeModal(reason, result, ignoreBeforeClose);
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, reason, result, ignoreBeforeClose);
     }
     /**
      * Closes the modal instance with `reason="cancel"`.
@@ -883,7 +910,7 @@ class SkyModalInstance {
      * that this cancel function can be called from a button in the `sky-modal-footer`.
      */
     cancel(result) {
-        this.closeModal('cancel', result);
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, 'cancel', result);
     }
     /**
      * Closes the modal instance with `reason="save"`.
@@ -892,7 +919,7 @@ class SkyModalInstance {
      * that this `save` function can be called from a button in `the sky-modal-footer`.
      */
     save(result) {
-        this.closeModal('save', result);
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, 'save', result);
     }
     /**
      * Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open
@@ -902,141 +929,145 @@ class SkyModalInstance {
      * into a component's constructor to call the `openHelp` function in the modal template.
      */
     openHelp(helpKey) {
-        this._helpOpened.next(helpKey);
-    }
-    closeModal(type, result, ignoreBeforeClose = false) {
-        const args = new SkyModalCloseArgs();
-        args.reason = type;
-        args.data = result;
-        if (this._beforeClose.observers.length === 0 || ignoreBeforeClose) {
-            this.notifyClosed(args);
-        }
-        else {
-            this._beforeClose.next(new SkyModalBeforeCloseHandler(() => {
-                this.notifyClosed(args);
-            }, args));
-        }
-    }
-    notifyClosed(args) {
-        this._closed.next(args);
-        this._closed.complete();
-        this._beforeClose.complete();
-        this._helpOpened.complete();
+        __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f").next(helpKey);
     }
 }
+_SkyModalInstance__beforeClose = new WeakMap(), _SkyModalInstance__closed = new WeakMap(), _SkyModalInstance__helpOpened = new WeakMap(), _SkyModalInstance_instances = new WeakSet(), _SkyModalInstance_closeModal = function _SkyModalInstance_closeModal(type, result, ignoreBeforeClose = false) {
+    const args = new SkyModalCloseArgs();
+    args.reason = type;
+    args.data = result;
+    if (__classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").observers.length === 0 || ignoreBeforeClose) {
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_notifyClosed).call(this, args);
+    }
+    else {
+        __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").next(new SkyModalBeforeCloseHandler(() => {
+            __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_notifyClosed).call(this, args);
+        }, args));
+    }
+}, _SkyModalInstance_notifyClosed = function _SkyModalInstance_notifyClosed(args) {
+    __classPrivateFieldGet(this, _SkyModalInstance__closed, "f").next(args);
+    __classPrivateFieldGet(this, _SkyModalInstance__closed, "f").complete();
+    __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").complete();
+    __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f").complete();
+};
 
 /**
  * @internal
  */
-class SkyConfirmModalContext {
-}
+const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
 
+var _SkyConfirmComponent_instances, _SkyConfirmComponent_config, _SkyConfirmComponent_modal, _SkyConfirmComponent_resourcesService, _SkyConfirmComponent_getPresetButtons, _SkyConfirmComponent_getCustomButtons;
 class SkyConfirmComponent {
     constructor(config, modal, resourcesService) {
-        this.config = config;
-        this.modal = modal;
-        this.resourcesService = resourcesService;
+        _SkyConfirmComponent_instances.add(this);
         this.preserveWhiteSpace = false;
-    }
-    ngOnInit() {
-        if (this.config.type === SkyConfirmType.Custom &&
-            this.config.buttons.length > 0) {
-            this.buttons = this.getCustomButtons(this.config.buttons);
+        _SkyConfirmComponent_config.set(this, void 0);
+        _SkyConfirmComponent_modal.set(this, void 0);
+        _SkyConfirmComponent_resourcesService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyConfirmComponent_config, config, "f");
+        __classPrivateFieldSet(this, _SkyConfirmComponent_modal, modal, "f");
+        __classPrivateFieldSet(this, _SkyConfirmComponent_resourcesService, resourcesService, "f");
+        if (config.type === SkyConfirmType.Custom &&
+            config.buttons &&
+            config.buttons.length > 0) {
+            this.buttons = __classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getCustomButtons).call(this, config.buttons);
         }
         else {
-            this.getPresetButtons().subscribe((buttons) => {
+            __classPrivateFieldGet(this, _SkyConfirmComponent_instances, "m", _SkyConfirmComponent_getPresetButtons).call(this).subscribe((buttons) => {
                 this.buttons = buttons;
             });
         }
-        this.message = this.config.message;
-        this.body = this.config.body;
-        this.preserveWhiteSpace = this.config.preserveWhiteSpace || false;
+        this.message = config.message;
+        this.body = config.body;
+        this.preserveWhiteSpace = !!config.preserveWhiteSpace;
     }
     close(button) {
         const result = {
             action: button.action,
         };
-        this.modal.close(result);
-    }
-    getPresetButtons() {
-        const emitter = new BehaviorSubject([]);
-        switch (this.config.type) {
-            default:
-            case SkyConfirmType.OK:
-                this.resourcesService
-                    .getString('skyux_confirm_dialog_default_ok_text')
-                    .subscribe((value) => {
-                    emitter.next([
-                        {
-                            text: value,
-                            autofocus: true,
-                            styleType: 'primary',
-                            action: 'ok',
-                        },
-                    ]);
-                });
-                break;
-            case SkyConfirmType.YesNoCancel:
-                zip(this.resourcesService.getString('skyux_confirm_dialog_default_yes_text'), this.resourcesService.getString('skyux_confirm_dialog_default_no_text'), this.resourcesService.getString('skyux_confirm_dialog_default_cancel_text')).subscribe((values) => {
-                    emitter.next([
-                        {
-                            text: values[0],
-                            autofocus: true,
-                            styleType: 'primary',
-                            action: 'yes',
-                        },
-                        {
-                            text: values[1],
-                            styleType: 'default',
-                            action: 'no',
-                        },
-                        {
-                            text: values[2],
-                            styleType: 'link',
-                            action: 'cancel',
-                        },
-                    ]);
-                });
-                break;
-            case SkyConfirmType.YesCancel:
-                zip(this.resourcesService.getString('skyux_confirm_dialog_default_yes_text'), this.resourcesService.getString('skyux_confirm_dialog_default_cancel_text')).subscribe((values) => {
-                    emitter.next([
-                        {
-                            text: values[0],
-                            autofocus: true,
-                            styleType: 'primary',
-                            action: 'yes',
-                        },
-                        {
-                            text: values[1],
-                            styleType: 'link',
-                            action: 'cancel',
-                        },
-                    ]);
-                });
-                break;
-        }
-        return emitter;
-    }
-    getCustomButtons(buttonConfig) {
-        const buttons = [];
-        buttonConfig.forEach((config) => {
-            buttons.push({
-                text: config.text,
-                action: config.action,
-                styleType: config.styleType || 'default',
-                autofocus: config.autofocus || false,
-            });
-        });
-        return buttons;
+        __classPrivateFieldGet(this, _SkyConfirmComponent_modal, "f").close(result);
     }
 }
-SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+_SkyConfirmComponent_config = new WeakMap(), _SkyConfirmComponent_modal = new WeakMap(), _SkyConfirmComponent_resourcesService = new WeakMap(), _SkyConfirmComponent_instances = new WeakSet(), _SkyConfirmComponent_getPresetButtons = function _SkyConfirmComponent_getPresetButtons() {
+    const emitter = new BehaviorSubject([]);
+    switch (__classPrivateFieldGet(this, _SkyConfirmComponent_config, "f").type) {
+        default:
+        case SkyConfirmType.OK:
+            __classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f")
+                .getString('skyux_confirm_dialog_default_ok_text')
+                .subscribe((value) => {
+                emitter.next([
+                    {
+                        text: value,
+                        autofocus: true,
+                        styleType: 'primary',
+                        action: 'ok',
+                    },
+                ]);
+            });
+            break;
+        case SkyConfirmType.YesNoCancel:
+            zip(__classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f").getString('skyux_confirm_dialog_default_yes_text'), __classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f").getString('skyux_confirm_dialog_default_no_text'), __classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f").getString('skyux_confirm_dialog_default_cancel_text')).subscribe((values) => {
+                emitter.next([
+                    {
+                        text: values[0],
+                        autofocus: true,
+                        styleType: 'primary',
+                        action: 'yes',
+                    },
+                    {
+                        text: values[1],
+                        styleType: 'default',
+                        action: 'no',
+                    },
+                    {
+                        text: values[2],
+                        styleType: 'link',
+                        action: 'cancel',
+                    },
+                ]);
+            });
+            break;
+        case SkyConfirmType.YesCancel:
+            zip(__classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f").getString('skyux_confirm_dialog_default_yes_text'), __classPrivateFieldGet(this, _SkyConfirmComponent_resourcesService, "f").getString('skyux_confirm_dialog_default_cancel_text')).subscribe((values) => {
+                emitter.next([
+                    {
+                        text: values[0],
+                        autofocus: true,
+                        styleType: 'primary',
+                        action: 'yes',
+                    },
+                    {
+                        text: values[1],
+                        styleType: 'link',
+                        action: 'cancel',
+                    },
+                ]);
+            });
+            break;
+    }
+    return emitter;
+}, _SkyConfirmComponent_getCustomButtons = function _SkyConfirmComponent_getCustomButtons(buttonConfig) {
+    const buttons = [];
+    buttonConfig.forEach((config) => {
+        buttons.push({
+            text: config.text,
+            action: config.action,
+            styleType: config.styleType || 'default',
+            autofocus: config.autofocus || false,
+        });
+    });
+    return buttons;
+};
+SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: i2.λ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: "13.3.2", ngImport: i0, type: SkyConfirmComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-confirm', 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$1.SkyLibResourcesService, decorators: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SKY_CONFIRM_CONFIG]
+                }] }, { type: SkyModalInstance }, { type: i2$2.SkyLibResourcesService, decorators: [{
                     type: Optional
                 }] }]; } });
 
@@ -1067,14 +1098,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+var _SkyModalService_instances, _SkyModalService_dynamicComponentService, _SkyModalService_getConfigFromParameter, _SkyModalService_createHostComponent;
 /**
  * A service that launches modals.
  * @dynamic
  */
 class SkyModalService {
-    // TODO: In future breaking change - remove extra parameters as they are no longer used.
+    // TODO: Make `dynamicComponentService` required. It is optional today to maintain binary compatibility for consumers when they construct
+    // the service for unit testing.
     constructor(dynamicComponentService) {
-        this.dynamicComponentService = dynamicComponentService;
+        _SkyModalService_instances.add(this);
+        _SkyModalService_dynamicComponentService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyModalService_dynamicComponentService, dynamicComponentService, "f");
     }
     /**
      * @internal
@@ -1082,7 +1117,7 @@ class SkyModalService {
      */
     dispose() {
         if (SkyModalService.host) {
-            this.dynamicComponentService.removeComponent(SkyModalService.host);
+            __classPrivateFieldGet(this, _SkyModalService_dynamicComponentService, "f").removeComponent(SkyModalService.host);
             SkyModalService.host = undefined;
         }
     }
@@ -1093,54 +1128,57 @@ class SkyModalService {
      */
     open(component, config) {
         const modalInstance = new SkyModalInstance();
-        this.createHostComponent();
-        const params = this.getConfigFromParameter(config);
+        __classPrivateFieldGet(this, _SkyModalService_instances, "m", _SkyModalService_createHostComponent).call(this);
+        const params = __classPrivateFieldGet(this, _SkyModalService_instances, "m", _SkyModalService_getConfigFromParameter).call(this, config);
+        /* eslint-disable @typescript-eslint/no-non-null-assertion */
         params.providers.push({
             provide: SkyModalInstance,
             useValue: modalInstance,
         });
         SkyModalService.host.instance.open(modalInstance, component, params);
+        /* eslint-enable @typescript-eslint/no-non-null-assertion */
         return modalInstance;
     }
-    getConfigFromParameter(providersOrConfig) {
-        const defaultParams = {
-            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),
-        };
-        if (Array.isArray(providersOrConfig) === true) {
-            params = method['providers?'];
-        }
-        else {
-            params = method['config'];
-        }
-        return params;
-    }
-    createHostComponent() {
-        if (!SkyModalService.host) {
-            SkyModalService.host = this.dynamicComponentService.createComponent(SkyModalHostComponent, {
-                providers: [
-                    {
-                        provide: SkyModalHostContext,
-                        useValue: new SkyModalHostContext(() => {
+}
+_SkyModalService_dynamicComponentService = new WeakMap(), _SkyModalService_instances = new WeakSet(), _SkyModalService_getConfigFromParameter = function _SkyModalService_getConfigFromParameter(providersOrConfig) {
+    const defaultParams = {
+        providers: [],
+        fullPage: false,
+        size: 'medium',
+        tiledBody: false,
+    };
+    let params = {};
+    let method = undefined;
+    // Object Literal Lookup for backwards compatability.
+    method = {
+        'providers?': Object.assign({}, defaultParams, {
+            providers: providersOrConfig,
+        }),
+        config: Object.assign({}, defaultParams, providersOrConfig),
+    };
+    if (Array.isArray(providersOrConfig) === true) {
+        params = method['providers?'];
+    }
+    else {
+        params = method['config'];
+    }
+    return params;
+}, _SkyModalService_createHostComponent = function _SkyModalService_createHostComponent() {
+    if (!SkyModalService.host) {
+        SkyModalService.host = __classPrivateFieldGet(this, _SkyModalService_dynamicComponentService, "f").createComponent(SkyModalHostComponent, {
+            providers: [
+                {
+                    provide: SkyModalHostContext,
+                    useValue: new SkyModalHostContext({
+                        teardownCallback: () => {
                             this.dispose();
-                        }),
-                    },
-                ],
-            });
-        }
+                        },
+                    }),
+                },
+            ],
+        });
     }
-}
+};
 SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, decorators: [{
@@ -1153,22 +1191,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i3.SkyDynamicComponentService }]; } });
 
+var _SkyConfirmService_modalService;
 /**
  * Launches a dialog.
  */
 class SkyConfirmService {
     constructor(modalService) {
-        this.modalService = modalService;
+        _SkyConfirmService_modalService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyConfirmService_modalService, modalService, "f");
     }
     /**
      * Opens a dialog using the specified options.
      * @param config Specifies configuration options for the dialog.
      */
     open(config) {
-        const modalInstance = this.modalService.open(SkyConfirmComponent, {
+        const modalInstance = __classPrivateFieldGet(this, _SkyConfirmService_modalService, "f").open(SkyConfirmComponent, {
             providers: [
                 {
-                    provide: SkyConfirmModalContext,
+                    provide: SKY_CONFIRM_CONFIG,
                     useValue: config,
                 },
             ],
@@ -1188,6 +1228,7 @@ class SkyConfirmService {
         return confirmInstance;
     }
 }
+_SkyConfirmService_modalService = new WeakMap();
 SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, decorators: [{