@skyux/modals 8.7.2 → 9.0.0-alpha.1

package/fesm2022/skyux-modals.mjs

@@ -0,0 +1,1502 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, inject, Inject, Injector, ViewContainerRef, Optional, ViewChild, InjectionToken, Directive, Output, HostListener, ChangeDetectorRef, ElementRef, Host, HostBinding, Input } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@skyux/core';
+import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SKY_STACKING_CONTEXT, SkyLiveAnnouncerService, SkyDockLocation, SkyDockService, SkyIdModule, SkyTrimModule } from '@skyux/core';
+import * as i2$1 from '@skyux/theme';
+import { SkyTheme, SkyThemeModule } from '@skyux/theme';
+import * as i3$1 from '@angular/router';
+import { NavigationStart, RouterModule } from '@angular/router';
+import * as i2 from '@skyux/indicators';
+import { SkyIconModule, SkyStatusIndicatorModule } from '@skyux/indicators';
+import * as i2$2 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService } from '@skyux/i18n';
+import { BehaviorSubject, Subject, ReplaySubject } from 'rxjs';
+import { takeUntil, takeWhile, take } from 'rxjs/operators';
+
+class SkyConfirmInstance {
+    constructor() {
+        /**
+         * Fires when users select an action to close the dialog. This event
+         * returns a `SkyConfirmCloseEventArgs` object with information about the button that
+         * users select. It returns the `'cancel'` action when users press the <kbd>Escape</kbd> key.
+         */
+        this.closed = new EventEmitter();
+    }
+}
+
+var SkyConfirmType;
+(function (SkyConfirmType) {
+    /**
+     * Allows you to define your own buttons using the `buttons` property of `SkyConfirmConfig`.
+     */
+    SkyConfirmType[SkyConfirmType["Custom"] = 0] = "Custom";
+    /**
+     * Displays one button with an **OK** label and an `'ok'` action.
+     */
+    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' },
+        skyux_modal_dirty_default_message: {
+            message: 'Are you sure you want to discard your changes?',
+        },
+        skyux_modal_dirty_default_discard_changes_text: {
+            message: 'Discard changes',
+        },
+        skyux_modal_dirty_default_keep_working_text: { message: 'Keep working' },
+    },
+};
+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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalsResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyModalsResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyModalErrorsService {
+    #formErrors = new BehaviorSubject(undefined);
+    constructor() {
+        this.formErrors = this.#formErrors.asObservable();
+    }
+    updateErrors(value) {
+        this.#formErrors.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalErrorsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalErrorsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * Specifies content to display in the modal's footer.
+ */
+class SkyModalFooterComponent {
+    constructor() {
+        this.errorsSvc = inject(SkyModalErrorsService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <div aria-live=\"polite\">\n    <div\n      *ngIf=\"errorsSvc.formErrors | async as formErrors\"\n      class=\"sky-modal-footer-errors sky-margin-stacked-lg\"\n    >\n      <sky-status-indicator\n        *ngFor=\"let formError of formErrors\"\n        [ngClass]=\"{\n          'sky-margin-stacked-lg':\n            formErrors.indexOf(formError) < formErrors.length - 1,\n          'footer-error': true\n        }\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      >\n        {{ formError.message }}\n      </sky-status-indicator>\n    </div>\n  </div>\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 .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-modal-footer', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <div aria-live=\"polite\">\n    <div\n      *ngIf=\"errorsSvc.formErrors | async as formErrors\"\n      class=\"sky-modal-footer-errors sky-margin-stacked-lg\"\n    >\n      <sky-status-indicator\n        *ngFor=\"let formError of formErrors\"\n        [ngClass]=\"{\n          'sky-margin-stacked-lg':\n            formErrors.indexOf(formError) < formErrors.length - 1,\n          'footer-error': true\n        }\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      >\n        {{ formError.message }}\n      </sky-status-indicator>\n    </div>\n  </div>\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 .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
+        }] });
+
+/**
+ * Specifies a header for the modal.
+ */
+class SkyModalHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ4, selector: "[skyTrim]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-modal-header', template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyModalAdapterService {
+    static { this.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page'; }
+    static { this.MODAL_BODY_CLASS = 'sky-modal-body-open'; }
+    #docRef;
+    #bodyEl;
+    #windowRef;
+    #hostSiblingAriaHiddenCache = new Map();
+    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);
+    }
+    scrollContentToTop(element) {
+        element.nativeElement.querySelector('.sky-modal-content').scrollTop = 0;
+    }
+    /**
+     * Hides siblings of modal-host from screen readers
+     * @param hostElRef reference to modal-host element
+     */
+    hideHostSiblingsFromScreenReaders(hostElRef) {
+        const hostElement = hostElRef.nativeElement;
+        const hostSiblings = hostElement.parentElement.children;
+        for (let i = 0; i < hostSiblings.length; i++) {
+            const element = hostSiblings[i];
+            if (element !== hostElement &&
+                !element.hasAttribute('aria-live') &&
+                element.nodeName.toLowerCase() !== 'script' &&
+                element.nodeName.toLowerCase() !== 'style') {
+                // preserve previous aria-hidden status of elements outside of modal host
+                this.#hostSiblingAriaHiddenCache.set(element, element.getAttribute('aria-hidden'));
+                element.setAttribute('aria-hidden', 'true');
+            }
+        }
+    }
+    /**
+     * Restores modal-host siblings to screen reader status prior to modals being opened
+     */
+    unhideOrRestoreHostSiblingsFromScreenReaders() {
+        this.#hostSiblingAriaHiddenCache.forEach((previousValue, element) => {
+            // if element had aria-hidden status prior, restore status
+            if (element.parentElement) {
+                if (previousValue) {
+                    element.setAttribute('aria-hidden', previousValue);
+                }
+                else {
+                    element.removeAttribute('aria-hidden');
+                }
+            }
+        });
+        this.#hostSiblingAriaHiddenCache.clear();
+    }
+    hidePreviousModalFromScreenReaders(topModal) {
+        if (topModal && topModal.nativeElement.previousElementSibling) {
+            topModal.nativeElement.previousElementSibling.setAttribute('aria-hidden', 'true');
+        }
+    }
+    unhidePreviousModalFromScreenReaders(topModal) {
+        if (topModal && topModal.nativeElement.previousElementSibling) {
+            topModal.nativeElement.previousElementSibling.removeAttribute('aria-hidden');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i3.SkyAppWindowRef }]; } });
+
+/**
+ * @internal
+ */
+class SkyModalConfiguration {
+    constructor() {
+        this.size = 'medium';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalConfiguration, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+const BASE_Z_INDEX = 1040;
+const modalHosts = [];
+/**
+ * @internal
+ * @dynamic
+ */
+class SkyModalHostService {
+    static get openModalCount() {
+        return modalHosts.length;
+    }
+    static get fullPageModalCount() {
+        const fullPageModals = modalHosts.filter((modal) => modal.fullPage);
+        return fullPageModals.length;
+    }
+    static get backdropZIndex() {
+        return BASE_Z_INDEX + modalHosts.length * 10;
+    }
+    static get topModal() {
+        return modalHosts[modalHosts.length - 1];
+    }
+    constructor() {
+        this.close = new Subject();
+        this.fullPage = false;
+        this.openHelp = new Subject();
+        this.zIndex = this.#calculateZIndex();
+        modalHosts.push(this);
+    }
+    getModalZIndex() {
+        return this.zIndex;
+    }
+    onClose() {
+        this.close.next();
+    }
+    onOpenHelp(helpKey) {
+        this.openHelp.next(helpKey);
+    }
+    destroy() {
+        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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHostService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHostService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * Provided by the modal service to give the modal host
+ * component additional context and features.
+ * @internal
+ */
+class SkyModalHostContext {
+    constructor(args) {
+        this.args = args;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHostContext }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHostContext, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['SkyModalHostContextArgs']
+                }] }]; } });
+
+/**
+ * @internal
+ */
+class SkyModalHostComponent {
+    get modalOpen() {
+        return SkyModalHostService.openModalCount > 0;
+    }
+    get backdropZIndex() {
+        return SkyModalHostService.backdropZIndex;
+    }
+    #resolver;
+    #adapter;
+    #injector;
+    #router;
+    #changeDetector;
+    #modalHostContext;
+    #elRef;
+    #modalInstances = [];
+    constructor(resolver, adapter, injector, changeDetector, modalHostContext, elRef, router) {
+        this.#resolver = resolver;
+        this.#adapter = adapter;
+        this.#injector = injector;
+        this.#router = router;
+        this.#changeDetector = changeDetector;
+        this.#modalHostContext = modalHostContext;
+        this.#elRef = elRef;
+    }
+    ngOnDestroy() {
+        // Close all modal instances before disposing of the host container.
+        this.#closeAllModalInstances();
+        this.#modalHostContext.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 hostService = new SkyModalHostService();
+        hostService.fullPage = !!params.fullPage;
+        const adapter = this.#adapter;
+        const modalOpener = adapter.getModalOpener();
+        let isOpen = true;
+        params.providers ||= [];
+        params.providers.push({
+            provide: SkyModalHostService,
+            useValue: hostService,
+        }, {
+            provide: SkyModalConfiguration,
+            useValue: params,
+        }, {
+            provide: SkyMediaQueryService,
+            useExisting: SkyResizeObserverMediaQueryService,
+        }, {
+            provide: SKY_STACKING_CONTEXT,
+            useValue: {
+                zIndex: new BehaviorSubject(hostService.getModalZIndex())
+                    .asObservable()
+                    .pipe(takeUntil(modalInstance.closed)),
+            },
+        });
+        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);
+        // modal element that was just opened
+        const modalElement = modalComponentRef.location;
+        modalInstance.adapter = this.#adapter;
+        modalInstance.componentRef = modalComponentRef;
+        this.#registerModalInstance(modalInstance);
+        // hiding all elements at the modal-host level from screen readers when the a modal is opened
+        this.#adapter.hideHostSiblingsFromScreenReaders(this.#elRef);
+        if (SkyModalHostService.openModalCount > 1 &&
+            SkyModalHostService.topModal === hostService) {
+            // hiding the lower modals when more than one modal is opened
+            this.#adapter.hidePreviousModalFromScreenReaders(modalElement);
+        }
+        const closeModal = () => {
+            // unhide siblings if last modal is closing
+            if (SkyModalHostService.openModalCount === 1) {
+                this.#adapter.unhideOrRestoreHostSiblingsFromScreenReaders();
+            }
+            else if (SkyModalHostService.topModal === hostService) {
+                // if there are more than 1 modal then unhide the one behind this one before closing it
+                this.#adapter.unhidePreviousModalFromScreenReaders(modalElement);
+            }
+            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;
+            this.#unregisterModalInstance(modalInstance);
+            closeModal();
+        });
+        // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit
+        this.#changeDetector.detectChanges();
+    }
+    #registerModalInstance(instance) {
+        this.#modalInstances.push(instance);
+    }
+    #unregisterModalInstance(instance) {
+        this.#modalInstances.slice(this.#modalInstances.indexOf(instance), 1);
+    }
+    #closeAllModalInstances() {
+        for (const instance of this.#modalInstances) {
+            instance.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }, { token: i3$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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;inset:0}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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;inset:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }, { type: i0.ElementRef }, { type: i3$1.Router, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { target: [{
+                type: ViewChild,
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * @internal
+ */
+const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
+
+/**
+ * Properties about the modal close action and a method to close the modal.
+ */
+class SkyModalBeforeCloseHandler {
+    constructor(closeModal, closeArgs) {
+        this.closeArgs = closeArgs;
+        this.closeModal = closeModal;
+    }
+}
+
+/**
+ * Contains an object with the data passed from users when
+ * a modal is closed and the reason that the modal was closed.
+ */
+class SkyModalCloseArgs {
+}
+
+class SkyModalInstance {
+    /**
+     * 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;
+    }
+    /**
+     * Sets the component adapter for the instance. This is used internally for actions such as scrolling the content.
+     * @internal
+     */
+    set adapter(value) {
+        this.#adapter = value;
+    }
+    /**
+     * Sets the component ref for the instance. This is used to extract the component instance for the public API and the element ref for internal use.
+     * @internal
+     */
+    set componentRef(value) {
+        this.componentInstance = value.instance;
+        this.#elementRef = value.location;
+    }
+    #_beforeClose = new Subject();
+    #_closed = new Subject();
+    #_helpOpened = new Subject();
+    #adapter;
+    #elementRef;
+    /**
+     * 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);
+    }
+    /**
+     * Scrolls the modal content area to the top of its scrollable area.
+     */
+    scrollContentToTop() {
+        if (this.#adapter && this.#elementRef) {
+            this.#adapter.scrollContentToTop(this.#elementRef);
+        }
+    }
+    /**
+     * 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();
+    }
+}
+
+/**
+ * @internal
+ */
+class SkyModalComponentAdapterService {
+    #coreAdapter;
+    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;
+    }
+    modalContentHasDirectChildViewkeeper(modalContentEl) {
+        return !!modalContentEl.nativeElement.querySelector('sky-modal-content > .sky-viewkeeper-fixed');
+    }
+    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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalComponentAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
+
+/**
+ * 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 {
+    #currentShadow;
+    #currentTheme;
+    #mutationObserver;
+    #ngUnsubscribe;
+    #elRef;
+    #mutationObserverSvc;
+    #ngZone;
+    #themeSvc;
+    constructor(elRef, mutationObserverSvc, ngZone, themeSvc) {
+        this.skyModalScrollShadow = new EventEmitter();
+        this.#ngUnsubscribe = new Subject();
+        this.#elRef = elRef;
+        this.#mutationObserverSvc = mutationObserverSvc;
+        this.#ngZone = ngZone;
+        this.#themeSvc = themeSvc;
+    }
+    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
+            // scenarios. 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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.SkyMutationObserverService }, { token: i0.NgZone }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyModalScrollShadow]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.SkyMutationObserverService }, { type: i0.NgZone }, { type: i2$1.SkyThemeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { skyModalScrollShadow: [{
+                type: Output
+            }], windowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], scroll: [{
+                type: HostListener,
+                args: ['scroll']
+            }] } });
+
+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
+ * and buttons.
+ */
+class SkyModalComponent {
+    /**
+     * A list of form-level errors to display to the user.
+     */
+    set formErrors(value) {
+        this.#errorsSvc.updateErrors(value);
+    }
+    /**
+     * @internal
+     */
+    set ariaRole(value) {
+        this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
+    }
+    /**
+     * @internal
+     */
+    set ariaDescribedBy(id) {
+        this.#_ariaDescribedBy = id;
+    }
+    get ariaDescribedBy() {
+        return this.#_ariaDescribedBy;
+    }
+    /**
+     * @internal
+     */
+    set ariaLabelledBy(id) {
+        this.#_ariaLabelledBy = id;
+    }
+    get ariaLabelledBy() {
+        return this.#_ariaLabelledBy;
+    }
+    #hostService;
+    #elRef;
+    #windowRef;
+    #componentAdapter;
+    #coreAdapter;
+    #dockService;
+    #mediaQueryService;
+    #ngUnsubscribe;
+    #_ariaDescribedBy;
+    #_ariaLabelledBy;
+    #changeDetector;
+    #errorsSvc;
+    #liveAnnouncerSvc;
+    constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
+        this.ariaRoleOrDefault = ARIA_ROLE_DEFAULT;
+        this.ariaOwns = null;
+        this.modalState = 'in';
+        this.#ngUnsubscribe = new Subject();
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#errorsSvc = inject(SkyModalErrorsService);
+        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
+        this.#hostService = hostService;
+        this.#elRef = elRef;
+        this.#windowRef = windowRef;
+        this.#componentAdapter = componentAdapter;
+        this.#coreAdapter = coreAdapter;
+        this.#dockService = dockService;
+        this.#mediaQueryService = mediaQueryService;
+        this.ariaDescribedBy = config.ariaDescribedBy;
+        this.ariaLabelledBy = config.ariaLabelledBy;
+        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 = this.#hostService.zIndex;
+    }
+    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();
+                    }
+                }
+            }
+        }
+    }
+    ngOnInit() {
+        this.#liveAnnouncerSvc.announcerElementChanged
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((element) => {
+            if (element?.id) {
+                this.ariaOwns = element.id;
+                this.#changeDetector.markForCheck();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        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,
+        });
+        /* istanbul ignore next */
+        if (this.#mediaQueryService) {
+            this.#mediaQueryService.observe(this.modalContentWrapperElement);
+        }
+    }
+    ngOnDestroy() {
+        /* istanbul ignore next */
+        if (this.#mediaQueryService) {
+            this.#mediaQueryService.unobserve();
+        }
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    helpButtonClick() {
+        if (this.helpKey) {
+            this.#hostService.onOpenHelp(this.helpKey);
+        }
+    }
+    closeButtonClick() {
+        this.#hostService.onClose();
+    }
+    windowResize() {
+        this.#componentAdapter.handleWindowChange(this.#elRef);
+    }
+    scrollShadowChange(args) {
+        this.scrollShadow = args;
+    }
+    viewkeeperEnabled() {
+        return this.#componentAdapter.modalContentHasDirectChildViewkeeper(this.#elRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.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 }, { token: i3.SkyResizeObserverMediaQueryService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyModalComponent, selector: "sky-modal", inputs: { formErrors: "formErrors", ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
+            SkyModalComponentAdapterService,
+            SkyModalErrorsService,
+            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 || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\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        skyId\n        [ngClass]=\"{\n          'sky-font-heading-2': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\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      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\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-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);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-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;--sky-background-color-page-default: #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;--sky-background-color-page-default: #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-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.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;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-modal', providers: [
+                        SkyModalComponentAdapterService,
+                        SkyModalErrorsService,
+                        SkyDockService,
+                    ], template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\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        skyId\n        [ngClass]=\"{\n          'sky-font-heading-2': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\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      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\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-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);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-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;--sky-background-color-page-default: #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;--sky-background-color-page-default: #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-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.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;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\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: [{
+                    type: Optional
+                }] }]; }, propDecorators: { wrapperClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], formErrors: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }], tiledBody: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], modalContentWrapperElement: [{
+                type: ViewChild,
+                args: ['modalContentWrapper', { read: ElementRef }]
+            }], onDocumentKeyUp: [{
+                type: HostListener,
+                args: ['document:keyup', ['$event']]
+            }], onDocumentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class SkyConfirmComponent {
+    #config;
+    #modal;
+    #resourcesService;
+    constructor(config, modal, resourcesService, idService) {
+        this.preserveWhiteSpace = false;
+        this.isOkType = false;
+        this.#config = config;
+        this.#modal = modal;
+        this.#resourcesService = resourcesService;
+        if (config.type === SkyConfirmType.Custom &&
+            config.buttons &&
+            config.buttons.length > 0) {
+            this.buttons = this.#getCustomButtons(config.buttons);
+        }
+        else {
+            this.#getPresetButtons()
+                .pipe(take(1))
+                .subscribe((buttons) => {
+                this.buttons = buttons;
+            });
+        }
+        this.message = config.message;
+        this.body = config.body;
+        // Using the service here instead of the directive due to the confirm component's "body" container being conditional and thus a template variable being unavailable at an outer scope
+        this.bodyId = idService.generateId();
+        this.preserveWhiteSpace = !!config.preserveWhiteSpace;
+        this.isOkType = config.type === SkyConfirmType.OK;
+    }
+    close(button) {
+        const result = {
+            action: button.action,
+        };
+        this.#modal.close(result);
+    }
+    #getPresetButtons() {
+        const emitter = new ReplaySubject(1);
+        this.#resourcesService
+            .getStrings({
+            cancel: 'skyux_confirm_dialog_default_cancel_text',
+            no: 'skyux_confirm_dialog_default_no_text',
+            ok: 'skyux_confirm_dialog_default_ok_text',
+            yes: 'skyux_confirm_dialog_default_yes_text',
+        })
+            .subscribe((values) => {
+            const confirmButtons = [];
+            switch (this.#config.type) {
+                case SkyConfirmType.YesNoCancel:
+                case SkyConfirmType.YesCancel:
+                    confirmButtons.push({
+                        text: values.yes,
+                        autofocus: true,
+                        styleType: 'primary',
+                        action: 'yes',
+                    });
+                    if (this.#config.type === SkyConfirmType.YesNoCancel) {
+                        confirmButtons.push({
+                            text: values.no,
+                            styleType: 'default',
+                            action: 'no',
+                        });
+                    }
+                    confirmButtons.push({
+                        text: values.cancel,
+                        styleType: 'link',
+                        action: 'cancel',
+                    });
+                    break;
+                default:
+                    confirmButtons.push({
+                        text: values.ok,
+                        autofocus: true,
+                        styleType: 'primary',
+                        action: 'ok',
+                    });
+            }
+            emitter.next(confirmButtons);
+        });
+        return emitter.asObservable();
+    }
+    #getCustomButtons(buttonConfig) {
+        return buttonConfig.map((config) => ({
+            text: config.text,
+            action: config.action,
+            styleType: config.styleType || 'default',
+            autofocus: config.autofocus || false,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$2.SkyLibResourcesService }, { token: i3.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\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{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\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{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SKY_CONFIRM_CONFIG]
+                }] }, { type: SkyModalInstance }, { type: i2$2.SkyLibResourcesService }, { type: i3.SkyIdService }]; } });
+
+/**
+ * A service that launches modals.
+ * @dynamic
+ */
+class SkyModalService {
+    #dynamicComponentService;
+    constructor(dynamicComponentService) {
+        this.#dynamicComponentService = dynamicComponentService;
+    }
+    /**
+     * @internal
+     * 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 Specifies configuration options for the modal.
+     */
+    open(component, config) {
+        const modalInstance = new SkyModalInstance();
+        this.#createHostComponent();
+        const params = this.#getConfigFromParameter(config);
+        params.providers ||= [];
+        params.providers.push({
+            provide: SkyModalInstance,
+            useValue: modalInstance,
+        });
+        if (SkyModalService.host) {
+            SkyModalService.host.instance.open(modalInstance, component, params);
+        }
+        return modalInstance;
+    }
+    #getConfigFromParameter(providersOrConfig) {
+        const defaultParams = {
+            providers: [],
+            fullPage: false,
+            size: 'medium',
+            tiledBody: false,
+        };
+        let params = {};
+        let method = undefined;
+        // Object Literal Lookup for backwards compatibility.
+        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({
+                            teardownCallback: () => {
+                                this.dispose();
+                            },
+                        }),
+                    },
+                ],
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 lose context if the modal was opened from within a lazy-loaded module.
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i3.SkyDynamicComponentService }]; } });
+
+/**
+ * Launches a dialog.
+ */
+class SkyConfirmService {
+    #modalService;
+    constructor(modalService) {
+        this.#modalService = modalService;
+    }
+    /**
+     * Opens a dialog using the specified options.
+     * @param config Specifies configuration options for the dialog.
+     */
+    open(config) {
+        const modalInstance = this.#modalService.open(SkyConfirmComponent, {
+            providers: [
+                {
+                    provide: SKY_CONFIRM_CONFIG,
+                    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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 }]; } });
+
+/**
+ * Provides a way to mark a modal as "dirty" and displays a confirmation
+ * message when a user closes the modal without saving.
+ */
+class SkyModalIsDirtyDirective {
+    constructor() {
+        /**
+         * Whether the user edited an input on the modal.
+         * @required
+         */
+        this.isDirty = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#modalInstance = inject(SkyModalInstance);
+        this.#confirmSvc = inject(SkyConfirmService);
+        this.#resourcesSvc = inject(SkyLibResourcesService);
+    }
+    #ngUnsubscribe;
+    #modalInstance;
+    #confirmSvc;
+    #resourcesSvc;
+    ngOnInit() {
+        this.#modalInstance.beforeClose
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((handler) => this.#promptIfDirty(handler));
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    #promptIfDirty(handler) {
+        if (this.isDirty && handler.closeArgs.reason === 'close') {
+            this.#resourcesSvc
+                .getStrings({
+                message: 'skyux_modal_dirty_default_message',
+                discardActionText: 'skyux_modal_dirty_default_discard_changes_text',
+                keepActionText: 'skyux_modal_dirty_default_keep_working_text',
+            })
+                .subscribe((textValues) => {
+                const discardAction = 'discard';
+                const keepAction = 'keep';
+                this.#confirmSvc
+                    .open({
+                    message: textValues.message,
+                    buttons: [
+                        {
+                            action: discardAction,
+                            text: textValues.discardActionText,
+                            styleType: 'primary',
+                        },
+                        {
+                            action: keepAction,
+                            text: textValues.keepActionText,
+                            styleType: 'link',
+                        },
+                    ],
+                    type: SkyConfirmType.Custom,
+                })
+                    .closed.subscribe((args) => {
+                    if (args.action === discardAction) {
+                        handler.closeModal();
+                    }
+                });
+            });
+        }
+        else {
+            handler.closeModal();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalIsDirtyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyModalIsDirtyDirective, selector: "sky-modal[isDirty]", inputs: { isDirty: "isDirty" }, host: { properties: { "attr.data-sky-modal-is-dirty": "this.isDirty" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalIsDirtyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // Since this is limited to sky-modal, it should be safe to
+                    // leave off the sky prefix.
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'sky-modal[isDirty]',
+                }]
+        }], propDecorators: { isDirty: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-sky-modal-is-dirty']
+            }] } });
+
+class SkyModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
+            SkyModalContentComponent,
+            SkyModalFooterComponent,
+            SkyModalHeaderComponent,
+            SkyModalHostComponent,
+            SkyModalIsDirtyDirective,
+            SkyModalScrollShadowDirective], imports: [CommonModule,
+            RouterModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyModalsResourcesModule,
+            SkyStatusIndicatorModule,
+            SkyThemeModule,
+            SkyTrimModule], exports: [SkyModalComponent,
+            SkyModalContentComponent,
+            SkyModalFooterComponent,
+            SkyModalHeaderComponent,
+            SkyModalIsDirtyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalModule, imports: [CommonModule,
+            RouterModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyModalsResourcesModule,
+            SkyStatusIndicatorModule,
+            SkyThemeModule,
+            SkyTrimModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyModalComponent,
+                        SkyModalContentComponent,
+                        SkyModalFooterComponent,
+                        SkyModalHeaderComponent,
+                        SkyModalHostComponent,
+                        SkyModalIsDirtyDirective,
+                        SkyModalScrollShadowDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyIconModule,
+                        SkyIdModule,
+                        SkyModalsResourcesModule,
+                        SkyStatusIndicatorModule,
+                        SkyThemeModule,
+                        SkyTrimModule,
+                    ],
+                    exports: [
+                        SkyModalComponent,
+                        SkyModalContentComponent,
+                        SkyModalFooterComponent,
+                        SkyModalHeaderComponent,
+                        SkyModalIsDirtyDirective,
+                    ],
+                }]
+        }] });
+
+class SkyConfirmModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
+            SkyIdModule,
+            SkyModalModule,
+            SkyModalsResourcesModule,
+            SkyThemeModule], exports: [SkyConfirmComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmModule, imports: [CommonModule,
+            SkyIdModule,
+            SkyModalModule,
+            SkyModalsResourcesModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyConfirmModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyConfirmComponent],
+                    imports: [
+                        CommonModule,
+                        SkyIdModule,
+                        SkyModalModule,
+                        SkyModalsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyConfirmComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyConfirmInstance, SkyConfirmModule, SkyConfirmService, SkyConfirmType, SkyModalBeforeCloseHandler, SkyModalCloseArgs, SkyModalConfiguration, SkyModalErrorsService, SkyModalHostService, SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5, SkyModalIsDirtyDirective as λ6 };
+//# sourceMappingURL=skyux-modals.mjs.map