@skyux/modals 5.7.2 → 6.0.0-beta.2

package/fesm2015/skyux-modals.mjs

@@ -0,0 +1,1159 @@
+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 * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@skyux/theme';
+import { SkyTheme, SkyThemeModule } from '@skyux/theme';
+import * as i2 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 { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { takeWhile, takeUntil } from 'rxjs/operators';
+import * as i3 from '@skyux/core';
+import { SkyDockLocation, SkyDockService } from '@skyux/core';
+import { Subject, BehaviorSubject, zip } from 'rxjs';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+class SkyConfirmInstance {
+    constructor() {
+        /**
+         * Fires when users select an action to close the confirmation dialog. This event
+         * returns a `SkyConfirmCloseEventArgs` object with information about the button that
+         * users select.
+         */
+        this.closed = new EventEmitter();
+    }
+}
+
+/* istanbul ignore next */
+class SkyConfirmModalContext {
+}
+
+var SkyConfirmType;
+(function (SkyConfirmType) {
+    /**
+     * Allows you to define your own `buttons` using the buttons property to
+     * specify an array of `SkyConfirmButtonConfig` objects.
+     */
+    SkyConfirmType[SkyConfirmType["Custom"] = 0] = "Custom";
+    /**
+     * Displays one button with an **OK** label.
+     */
+    SkyConfirmType[SkyConfirmType["OK"] = 1] = "OK";
+    /**
+     * Displays two buttons with **Yes** and **Cancel** labels.
+     * @deprecated Use the `Custom` type to follow the guidance that labels
+     * should clearly indicate the actions that occur when users select buttons.
+     */
+    SkyConfirmType[SkyConfirmType["YesCancel"] = 2] = "YesCancel";
+    /**
+     * Displays three buttons with **Yes**, **No**, and **Cancel** labels.
+     * @deprecated Use the `Custom` type to follow the guidance that labels
+     * should clearly indicate the actions that occur when users select buttons.
+     */
+    SkyConfirmType[SkyConfirmType["YesNoCancel"] = 3] = "YesNoCancel";
+})(SkyConfirmType || (SkyConfirmType = {}));
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-modals' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_confirm_dialog_default_ok_text: { message: 'OK' },
+        skyux_confirm_dialog_default_yes_text: { message: 'Yes' },
+        skyux_confirm_dialog_default_no_text: { message: 'No' },
+        skyux_confirm_dialog_default_cancel_text: { message: 'Cancel' },
+        skyux_modal_close: { message: 'Close modal' },
+        skyux_modal_open_help: { message: 'Open Help' },
+        skyux_modal_footer_cancel_button: { message: 'Cancel' },
+        skyux_modal_footer_primary_button: { message: 'Save' },
+    },
+};
+class SkyModalsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyModalsResourcesModule {
+}
+SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
+SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyModalsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyModalsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Specifies content to display in the modal's body.
+ */
+class SkyModalContentComponent {
+}
+SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-modal-content', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"] }]
+        }] });
+
+/**
+ * Specifies content to display in the modal's footer.
+ */
+class SkyModalFooterComponent {
+}
+SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-modal-footer', template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
+        }] });
+
+/**
+ * Specifies a header for the modal.
+ */
+class SkyModalHeaderComponent {
+}
+SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n  class=\"sky-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyModalAdapterService {
+    constructor(windowRef) {
+        this.windowRef = windowRef;
+        this.docRef = this.windowRef.nativeWindow.document;
+        this.bodyEl = this.windowRef.nativeWindow.document.body;
+    }
+    toggleFullPageModalClass(isAddFull) {
+        if (isAddFull) {
+            this.addClassToBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
+        }
+        else {
+            this.removeClassFromBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
+        }
+    }
+    setPageScroll(isAdd) {
+        if (isAdd) {
+            this.addClassToBody(SkyModalAdapterService.MODAL_BODY_CLASS);
+        }
+        else {
+            this.removeClassFromBody(SkyModalAdapterService.MODAL_BODY_CLASS);
+        }
+    }
+    getModalOpener() {
+        return this.docRef.activeElement;
+    }
+    addClassToBody(className) {
+        this.bodyEl.classList.add(className);
+    }
+    removeClassFromBody(className) {
+        this.bodyEl.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.2.7", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i3.SkyAppWindowRef }]; } });
+
+/**
+ * @internal
+ */
+class SkyModalConfiguration {
+    constructor() {
+        this.size = 'medium';
+    }
+}
+SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalConfiguration, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * @internal
+ * @dynamic
+ */
+class SkyModalHostService {
+    constructor() {
+        this.close = new EventEmitter();
+        this.fullPage = false;
+        this.openHelp = new EventEmitter();
+        SkyModalHostService.modalHosts.push(this);
+    }
+    static get openModalCount() {
+        return SkyModalHostService.modalHosts.length;
+    }
+    static get fullPageModalCount() {
+        const fullPageModals = SkyModalHostService.modalHosts.filter((modal) => modal.fullPage);
+        return fullPageModals.length;
+    }
+    static get BASE_Z_INDEX() {
+        return 1040;
+    }
+    static get backdropZIndex() {
+        return (SkyModalHostService.BASE_Z_INDEX +
+            SkyModalHostService.modalHosts.length * 10);
+    }
+    static get topModal() {
+        return SkyModalHostService.modalHosts[SkyModalHostService.modalHosts.length - 1];
+    }
+    getModalZIndex() {
+        let zIndex = SkyModalHostService.BASE_Z_INDEX + 1;
+        zIndex += (SkyModalHostService.modalHosts.indexOf(this) + 1) * 10;
+        return zIndex;
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onOpenHelp(helpKey) {
+        this.openHelp.emit(helpKey);
+    }
+    destroy() {
+        SkyModalHostService.modalHosts.splice(SkyModalHostService.modalHosts.indexOf(this), 1);
+    }
+}
+SkyModalHostService.modalHosts = [];
+SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalHostService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * @internal
+ */
+class SkyModalHostComponent {
+    constructor(resolver, adapter, injector, router, changeDetector) {
+        this.resolver = resolver;
+        this.adapter = adapter;
+        this.injector = injector;
+        this.router = router;
+        this.changeDetector = changeDetector;
+    }
+    get modalOpen() {
+        return SkyModalHostService.openModalCount > 0;
+    }
+    get backdropZIndex() {
+        return SkyModalHostService.backdropZIndex;
+    }
+    open(modalInstance, component, config) {
+        const params = Object.assign({}, config);
+        const factory = this.resolver.resolveComponentFactory(component);
+        const hostService = new SkyModalHostService();
+        hostService.fullPage = !!params.fullPage;
+        const adapter = this.adapter;
+        const modalOpener = adapter.getModalOpener();
+        let isOpen = true;
+        params.providers.push({
+            provide: SkyModalHostService,
+            useValue: hostService,
+        });
+        params.providers.push({
+            provide: SkyModalConfiguration,
+            useValue: params,
+        });
+        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,
+        });
+        const modalComponentRef = this.target.createComponent(factory, undefined, injector);
+        modalInstance.componentInstance = modalComponentRef.instance;
+        function closeModal() {
+            hostService.destroy();
+            adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
+            adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
+            /* istanbul ignore else */
+            /* sanity check */
+            if (modalOpener && modalOpener.focus) {
+                modalOpener.focus();
+            }
+            modalComponentRef.destroy();
+        }
+        hostService.openHelp.subscribe((helpKey) => {
+            modalInstance.openHelp(helpKey);
+        });
+        hostService.close.subscribe(() => {
+            modalInstance.close();
+        });
+        this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
+            /* istanbul ignore else */
+            if (event instanceof NavigationStart) {
+                modalInstance.close();
+            }
+        });
+        modalInstance.closed.subscribe(() => {
+            isOpen = false;
+            closeModal();
+        });
+        // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit
+        this.changeDetector.detectChanges();
+    }
+}
+SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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.2.7", ngImport: i0, type: SkyModalHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], template: "<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
+                type: ViewChild,
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * 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.
+ * @internal
+ */
+class SkyModalScrollShadowDirective {
+    constructor(elRef, themeSvc, mutationObserverSvc, ngZone) {
+        this.elRef = elRef;
+        this.themeSvc = themeSvc;
+        this.mutationObserverSvc = mutationObserverSvc;
+        this.ngZone = ngZone;
+        this.skyModalScrollShadow = new EventEmitter();
+        this.ngUnsubscribe = new Subject();
+    }
+    windowResize() {
+        this.checkForShadow();
+    }
+    scroll() {
+        this.checkForShadow();
+    }
+    ngOnInit() {
+        if (this.themeSvc) {
+            this.themeSvc.settingsChange
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((themeSettings) => {
+                this.currentTheme = themeSettings.currentSettings.theme;
+                if (this.currentTheme === SkyTheme.presets.modern) {
+                    this.initMutationObserver();
+                }
+                else {
+                    this.emitShadow({
+                        bottomShadow: 'none',
+                        topShadow: 'none',
+                    });
+                    this.destroyMutationObserver();
+                }
+            });
+        }
+    }
+    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;
+        }
+    }
+    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,
+            });
+        }
+    }
+    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i3.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyModalScrollShadow]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1.SkyThemeService, decorators: [{
+                        type: Optional
+                    }] }, { type: i3.MutationObserverService }, { type: i0.NgZone }];
+    }, propDecorators: { skyModalScrollShadow: [{
+                type: Output
+            }], windowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], scroll: [{
+                type: HostListener,
+                args: ['scroll']
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyModalComponentAdapterService {
+    constructor(coreAdapter) {
+        this.coreAdapter = coreAdapter;
+    }
+    handleWindowChange(modalEl) {
+        const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
+        const fullPageModalEl = modalEl.nativeElement.querySelector('.sky-modal-full-page');
+        /*
+          Set modal height equal to max height of window (accounting for padding above and below modal)
+        */
+        const newHeight = window.innerHeight - 40;
+        boundedHeightEl.style.maxHeight = newHeight.toString() + 'px';
+        if (fullPageModalEl) {
+            this.setFullPageHeight(fullPageModalEl);
+        }
+        else {
+            /*
+              IE11 doesn't handle flex and max-height correctly so we have to explicitly add
+              max-height to the content that accounts for standard header and footer height.
+            */
+            const modalContentEl = modalEl.nativeElement.querySelector('.sky-modal-content');
+            const contentHeight = newHeight - 114;
+            modalContentEl.style.maxHeight = contentHeight.toString() + 'px';
+        }
+    }
+    isFocusInFirstItem(event, list) {
+        /* istanbul ignore next */
+        /* sanity check */
+        const eventTarget = event.target || event.srcElement;
+        return list.length > 0 && eventTarget === list[0];
+    }
+    isFocusInLastItem(event, list) {
+        /* istanbul ignore next */
+        /* sanity check */
+        const eventTarget = event.target || event.srcElement;
+        return list.length > 0 && eventTarget === list[list.length - 1];
+    }
+    isModalFocused(event, modalEl) {
+        /* istanbul ignore next */
+        /* sanity check */
+        const eventTarget = event.target || event.srcElement;
+        return (modalEl &&
+            eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog'));
+    }
+    focusLastElement(list) {
+        if (list.length > 0) {
+            list[list.length - 1].focus();
+            return true;
+        }
+        return false;
+    }
+    focusFirstElement(list) {
+        if (list.length > 0) {
+            list[0].focus();
+            return true;
+        }
+        return false;
+    }
+    modalOpened(modalEl) {
+        /* istanbul ignore else */
+        /* handle the case where somehow there is a focused element already in the modal */
+        if (!(document.activeElement &&
+            modalEl.nativeElement.contains(document.activeElement))) {
+            const currentScrollX = window.pageXOffset;
+            const currentScrollY = window.pageYOffset;
+            const inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
+            if (inputWithAutofocus) {
+                inputWithAutofocus.focus();
+            }
+            else {
+                this.coreAdapter.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalComponentAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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' }))]),
+]);
+
+let skyModalUniqueIdentifier = 0;
+/**
+ * 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
+ * and buttons. For information about how to test modals in SKY UX, see
+ * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
+ */
+class SkyModalComponent {
+    constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
+        this.hostService = hostService;
+        this.config = config;
+        this.elRef = elRef;
+        this.windowRef = windowRef;
+        this.componentAdapter = componentAdapter;
+        this.coreAdapter = coreAdapter;
+        this.dockService = dockService;
+        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;
+    }
+    /**
+     * @internal
+     */
+    get ariaRole() {
+        return this.config.ariaRole || 'dialog';
+    }
+    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;
+    }
+    onDocumentKeyUp(event) {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (SkyModalHostService.openModalCount > 0) {
+            const topModal = SkyModalHostService.topModal;
+            if (topModal && topModal === this.hostService) {
+                if (event.which === 27) {
+                    // Escape key up
+                    event.preventDefault();
+                    this.closeButtonClick();
+                }
+            }
+        }
+    }
+    onDocumentKeyDown(event) {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (SkyModalHostService.openModalCount > 0) {
+            const topModal = SkyModalHostService.topModal;
+            if (topModal && topModal === this.hostService) {
+                if (event.which === 9) {
+                    // Tab pressed
+                    let focusChanged = false;
+                    const focusElementList = this.coreAdapter.getFocusableChildren(this.elRef.nativeElement);
+                    if (event.shiftKey &&
+                        (this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
+                            this.componentAdapter.isModalFocused(event, this.elRef))) {
+                        focusChanged =
+                            this.componentAdapter.focusLastElement(focusElementList);
+                    }
+                    else if (!event.shiftKey &&
+                        this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
+                        focusChanged =
+                            this.componentAdapter.focusFirstElement(focusElementList);
+                    }
+                    if (focusChanged) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        skyModalUniqueIdentifier++;
+        this.componentAdapter.handleWindowChange(this.elRef);
+        // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
+        // https://stackoverflow.com/questions/40562845
+        this.windowRef.nativeWindow.setTimeout(() => {
+            this.componentAdapter.modalOpened(this.elRef);
+        });
+        this.dockService.setDockOptions({
+            location: SkyDockLocation.ElementBottom,
+            referenceEl: this.modalContentWrapperElement.nativeElement,
+            zIndex: 5,
+        });
+    }
+    helpButtonClick() {
+        this.hostService.onOpenHelp(this.helpKey);
+    }
+    closeButtonClick() {
+        this.hostService.onClose();
+    }
+    windowResize() {
+        this.componentAdapter.handleWindowChange(this.elRef);
+    }
+    scrollShadowChange(args) {
+        this.scrollShadow = args;
+    }
+    isSizeEqual(actualSize, size) {
+        return actualSize && actualSize.toLowerCase() === size;
+    }
+}
+SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
+                        type: Host
+                    }] }];
+    }, propDecorators: { wrapperClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], ariaRole: [{
+                type: Input
+            }], tiledBody: [{
+                type: Input
+            }], modalContentWrapperElement: [{
+                type: ViewChild,
+                args: ['modalContentWrapper', { read: ElementRef }]
+            }], onDocumentKeyUp: [{
+                type: HostListener,
+                args: ['document:keyup', ['$event']]
+            }], onDocumentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class SkyModalModule {
+}
+SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
+        SkyModalContentComponent,
+        SkyModalFooterComponent,
+        SkyModalHeaderComponent,
+        SkyModalHostComponent,
+        SkyModalScrollShadowDirective], imports: [CommonModule,
+        RouterModule,
+        SkyIconModule,
+        SkyModalsResourcesModule,
+        SkyThemeModule], exports: [SkyModalComponent,
+        SkyModalContentComponent,
+        SkyModalFooterComponent,
+        SkyModalHeaderComponent] });
+SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalModule, imports: [[
+            CommonModule,
+            RouterModule,
+            SkyIconModule,
+            SkyModalsResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyModalComponent,
+                        SkyModalContentComponent,
+                        SkyModalFooterComponent,
+                        SkyModalHeaderComponent,
+                        SkyModalHostComponent,
+                        SkyModalScrollShadowDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyIconModule,
+                        SkyModalsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyModalComponent,
+                        SkyModalContentComponent,
+                        SkyModalFooterComponent,
+                        SkyModalHeaderComponent,
+                    ],
+                }]
+        }] });
+
+class SkyModalBeforeCloseHandler {
+    constructor(closeModal, closeArgs) {
+        this.closeModal = closeModal;
+        this.closeArgs = closeArgs;
+    }
+}
+
+class SkyModalCloseArgs {
+}
+
+// TODO: this class won't show in the generated docs until this work is done:
+// https://github.com/blackbaud/skyux-docs-tools/issues/30
+/**
+ * Allows you to close the modal and return data from the launched modal.
+ */
+class SkyModalInstance {
+    constructor() {
+        this._beforeClose = new Subject();
+        this._closed = new Subject();
+        this._helpOpened = new Subject();
+    }
+    /**
+     * An event that the modal instance emits when it is about to close.
+     * It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method
+     * that closes the modal. If a subscription exists for this event,
+     * the modal does not close until the subscriber calls the `closeModal` method.
+     */
+    get beforeClose() {
+        return this._beforeClose;
+    }
+    /**
+     * An event that the modal instance emits when it closes.
+     * It emits a `SkyModalCloseArgs` object with a `data` property that includes
+     * data passed from users on close or save and a `reason` property that indicates
+     * whether the modal was saved or closed without saving.
+     * The `reason` property accepts any string value.
+     * Common examples include `cancel`, `close`, and `save`.
+     */
+    get closed() {
+        return this._closed;
+    }
+    /**
+     * An event that the modal instance emits when users click
+     * the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
+     * If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.
+     */
+    get helpOpened() {
+        return this._helpOpened;
+    }
+    /**
+     * Closes the modal instance.
+     * @param result Specifies an object to emit to subscribers of the `closed` event of the
+     * modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
+     * so that this `close` function can be called from a button in the `sky-modal-footer`.
+     * @param reason Specifies the reason for the modal closing, with the default reason of `close`.
+     * @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
+     */
+    close(result, reason, ignoreBeforeClose) {
+        if (reason === undefined) {
+            reason = 'close';
+        }
+        this.closeModal(reason, result, ignoreBeforeClose);
+    }
+    /**
+     * Closes the modal instance with `reason=cancel`.
+     * @param result Specifies an object to emit to subscribers of the `closed` event of the modal
+     * instance. The `SkyModalInstance` provider can be injected into a component's constructor so
+     * that this cancel function can be called from a button in the `sky-modal-footer`.
+     */
+    cancel(result) {
+        this.closeModal('cancel', result);
+    }
+    /**
+     * Closes the modal instance with `reason=save`.
+     * @param result Specifies an object to emit to subscribers of the `closed` event of the modal
+     * instance. The `SkyModalInstance` provider can be injected into a component's constructor so
+     * that this `save` function can be called from a button in `the sky-modal-footer`.
+     */
+    save(result) {
+        this.closeModal('save', result);
+    }
+    /**
+     * Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open
+     * when users click the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
+     * @param helpKey Specifies a string to emit to subscribers of
+     * the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider
+     * 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();
+    }
+}
+
+class SkyConfirmComponent {
+    constructor(config, modal, resourcesService) {
+        this.config = config;
+        this.modal = modal;
+        this.resourcesService = resourcesService;
+        this.preserveWhiteSpace = false;
+    }
+    ngOnInit() {
+        if (this.config.type === SkyConfirmType.Custom &&
+            this.config.buttons.length > 0) {
+            this.buttons = this.getCustomButtons(this.config.buttons);
+        }
+        else {
+            this.getPresetButtons().subscribe((buttons) => {
+                this.buttons = buttons;
+            });
+        }
+        this.message = this.config.message;
+        this.body = this.config.body;
+        this.preserveWhiteSpace = this.config.preserveWhiteSpace || false;
+    }
+    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;
+    }
+}
+SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n  <sky-modal ariaRole=\"alertdialog\">\n    <sky-modal-content class=\"sky-confirm-content\">\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n      >\n        {{ message }}\n      </div>\n\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n      >\n        {{ body }}\n      </div>\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"['sky-btn-' + button.styleType]\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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: [{
+                        type: Optional
+                    }] }];
+    } });
+
+class SkyConfirmModule {
+}
+SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
+        SkyModalModule,
+        SkyModalsResourcesModule,
+        SkyThemeModule], exports: [SkyConfirmComponent] });
+SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmModule, imports: [[
+            CommonModule,
+            SkyModalModule,
+            SkyModalsResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyConfirmComponent],
+                    imports: [
+                        CommonModule,
+                        SkyModalModule,
+                        SkyModalsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyConfirmComponent],
+                }]
+        }] });
+
+/**
+ * A service that lauches modals. For information about how to test modals in SKY UX, see
+ * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
+ * @dynamic
+ */
+class SkyModalService {
+    // TODO: In future breaking change - remove extra parameters as they are no longer used.
+    /* tslint:disable:no-unused-variable */
+    constructor(dynamicComponentService) {
+        this.dynamicComponentService = dynamicComponentService;
+    }
+    /**
+     * @private
+     * Removes the modal host from the DOM.
+     */
+    dispose() {
+        if (SkyModalService.host) {
+            this.dynamicComponentService.removeComponent(SkyModalService.host);
+            SkyModalService.host = undefined;
+        }
+    }
+    /**
+     * Opens a modal using the specified component.
+     * @param component Determines the component to render.
+     * @param {SkyModalConfigurationInterface} config Populates the modal based on the `SkyModalConfigurationInterface` object.
+     */
+    open(component, config) {
+        const modalInstance = new SkyModalInstance();
+        this.createHostComponent();
+        const params = this.getConfigFromParameter(config);
+        params.providers.push({
+            provide: SkyModalInstance,
+            useValue: modalInstance,
+        });
+        SkyModalService.host.instance.open(modalInstance, component, params);
+        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);
+        }
+    }
+}
+SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    // Must be 'any' so that the modal component is created in the context of its module's injector.
+                    // If set to 'root', the component's dependency injections would only be derived from the root
+                    // injector and may loose context if the modal was opened from within a lazy-loaded module.
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i3.SkyDynamicComponentService }]; } });
+
+/**
+ *  The `SkyConfirmService` provider launches the confirmation dialog.
+ * Within the service, you can specify the dialog's message and customize the button text.
+ */
+class SkyConfirmService {
+    constructor(modalService) {
+        this.modalService = modalService;
+    }
+    /**
+     * Opens a confirmation dialog and passes the `config` parameter of type `SkyConfirmConfig`
+     * to the component's constructor. This method returns an object of type `SkyConfirmInstance`.
+     */
+    open(config) {
+        const modalInstance = this.modalService.open(SkyConfirmComponent, {
+            providers: [
+                {
+                    provide: SkyConfirmModalContext,
+                    useValue: config,
+                },
+            ],
+        });
+        const confirmInstance = new SkyConfirmInstance();
+        modalInstance.closed.subscribe((args) => {
+            let result = args.data;
+            // The modal was closed using the ESC key.
+            if (result === undefined) {
+                result = {
+                    action: 'cancel',
+                };
+            }
+            confirmInstance.closed.emit(result);
+            confirmInstance.closed.complete();
+        });
+        return confirmInstance;
+    }
+}
+SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyConfirmService, decorators: [{
+            type: Injectable,
+            args: [{
+                    // Must be 'any' so that the modal component is created in the context of its module's injector.
+                    // If set to 'root', the component's dependency injections would only be derived from the root
+                    // injector and may loose context if the modal was opened from within a lazy-loaded module.
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyModalService }]; } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyConfirmInstance, SkyConfirmModalContext, SkyConfirmModule, SkyConfirmService, SkyConfirmType, SkyModalBeforeCloseHandler, SkyModalCloseArgs, SkyModalConfiguration, SkyModalHostService, SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5 };
+//# sourceMappingURL=skyux-modals.mjs.map