@skyux/modals 8.2.6 → 8.3.0

package/fesm2020/skyux-modals.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, Optional, ViewChild, Directive, Output, HostListener, inject, ChangeDetectorRef, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
+import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, Optional, ViewChild, InjectionToken, Directive, Output, HostListener, inject, ChangeDetectorRef, ElementRef, Host, HostBinding, Input } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@skyux/core';
@@ -11,7 +11,7 @@ import { NavigationStart, RouterModule } from '@angular/router';
 import * as i6 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
 import * as i2$1 from '@skyux/i18n';
-import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService } from '@skyux/i18n';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import { Subject, BehaviorSubject, ReplaySubject } from 'rxjs';
 import { takeUntil, takeWhile, take } from 'rxjs/operators';
@@ -67,6 +67,13 @@ const RESOURCES = {
         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 {
@@ -478,6 +485,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     }]
             }] } });
 
+/**
+ * @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 {
+}
+
+var _SkyModalInstance_instances, _SkyModalInstance__beforeClose, _SkyModalInstance__closed, _SkyModalInstance__helpOpened, _SkyModalInstance_closeModal, _SkyModalInstance_notifyClosed;
+class SkyModalInstance {
+    constructor() {
+        _SkyModalInstance_instances.add(this);
+        _SkyModalInstance__beforeClose.set(this, new Subject());
+        _SkyModalInstance__closed.set(this, new Subject());
+        _SkyModalInstance__helpOpened.set(this, new Subject());
+    }
+    /**
+     * An event that the modal instance emits when it is about to close.
+     * 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 __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f");
+    }
+    /**
+     * 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 __classPrivateFieldGet(this, _SkyModalInstance__closed, "f");
+    }
+    /**
+     * 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 __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f");
+    }
+    /**
+     * 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';
+        }
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, 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) {
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, '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) {
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, 'save', result);
+    }
+    /**
+     * Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open
+     * when users click the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
+     * @param helpKey Specifies a string to emit to subscribers of
+     * the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider
+     * into a component's constructor to call the `openHelp` function in the modal template.
+     */
+    openHelp(helpKey) {
+        __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f").next(helpKey);
+    }
+}
+_SkyModalInstance__beforeClose = new WeakMap(), _SkyModalInstance__closed = new WeakMap(), _SkyModalInstance__helpOpened = new WeakMap(), _SkyModalInstance_instances = new WeakSet(), _SkyModalInstance_closeModal = function _SkyModalInstance_closeModal(type, result, ignoreBeforeClose = false) {
+    const args = new SkyModalCloseArgs();
+    args.reason = type;
+    args.data = result;
+    if (__classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").observers.length === 0 || ignoreBeforeClose) {
+        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_notifyClosed).call(this, args);
+    }
+    else {
+        __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").next(new SkyModalBeforeCloseHandler(() => {
+            __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_notifyClosed).call(this, args);
+        }, args));
+    }
+}, _SkyModalInstance_notifyClosed = function _SkyModalInstance_notifyClosed(args) {
+    __classPrivateFieldGet(this, _SkyModalInstance__closed, "f").next(args);
+    __classPrivateFieldGet(this, _SkyModalInstance__closed, "f").complete();
+    __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").complete();
+    __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f").complete();
+};
+
+var _SkyModalComponentAdapterService_instances, _SkyModalComponentAdapterService_coreAdapter, _SkyModalComponentAdapterService_setFullPageHeight;
+/**
+ * @internal
+ */
+class SkyModalComponentAdapterService {
+    constructor(coreAdapter) {
+        _SkyModalComponentAdapterService_instances.add(this);
+        _SkyModalComponentAdapterService_coreAdapter.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyModalComponentAdapterService_coreAdapter, coreAdapter, "f");
+    }
+    handleWindowChange(modalEl) {
+        const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
+        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) {
+            __classPrivateFieldGet(this, _SkyModalComponentAdapterService_instances, "m", _SkyModalComponentAdapterService_setFullPageHeight).call(this, 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 {
+                __classPrivateFieldGet(this, _SkyModalComponentAdapterService_coreAdapter, "f").getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
+            }
+            window.scrollTo(currentScrollX, currentScrollY);
+        }
+    }
+}
+_SkyModalComponentAdapterService_coreAdapter = new WeakMap(), _SkyModalComponentAdapterService_instances = new WeakSet(), _SkyModalComponentAdapterService_setFullPageHeight = function _SkyModalComponentAdapterService_setFullPageHeight(fullPageModalEl) {
+    const windowHeight = window.innerHeight;
+    const fullPageModalStyle = getComputedStyle(fullPageModalEl);
+    const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
+        parseInt(fullPageModalStyle.marginBottom, 10);
+    const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
+    fullPageModalEl.style.height = fullPageModalHeight;
+    fullPageModalEl.style.maxHeight = fullPageModalHeight;
+};
+SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalComponentAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
+
 var _SkyModalScrollShadowDirective_instances, _SkyModalScrollShadowDirective_currentShadow, _SkyModalScrollShadowDirective_currentTheme, _SkyModalScrollShadowDirective_mutationObserver, _SkyModalScrollShadowDirective_ngUnsubscribe, _SkyModalScrollShadowDirective_elRef, _SkyModalScrollShadowDirective_mutationObserverSvc, _SkyModalScrollShadowDirective_ngZone, _SkyModalScrollShadowDirective_themeSvc, _SkyModalScrollShadowDirective_initMutationObserver, _SkyModalScrollShadowDirective_destroyMutationObserver, _SkyModalScrollShadowDirective_checkForShadow, _SkyModalScrollShadowDirective_buildShadowStyle, _SkyModalScrollShadowDirective_emitShadow;
 /**
  * Raises an event when the box shadow for the modal header or footer should be adjusted
@@ -597,119 +824,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['scroll']
             }] } });
 
-var _SkyModalComponentAdapterService_instances, _SkyModalComponentAdapterService_coreAdapter, _SkyModalComponentAdapterService_setFullPageHeight;
+var _SkyModalComponent_hostService, _SkyModalComponent_elRef, _SkyModalComponent_windowRef, _SkyModalComponent_componentAdapter, _SkyModalComponent_coreAdapter, _SkyModalComponent_dockService, _SkyModalComponent_mediaQueryService, _SkyModalComponent_ngUnsubscribe, _SkyModalComponent__ariaDescribedBy, _SkyModalComponent__ariaLabelledBy, _SkyModalComponent_changeDetector, _SkyModalComponent_liveAnnouncerSvc;
+const ARIA_ROLE_DEFAULT = 'dialog';
 /**
- * @internal
+ * 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 SkyModalComponentAdapterService {
-    constructor(coreAdapter) {
-        _SkyModalComponentAdapterService_instances.add(this);
-        _SkyModalComponentAdapterService_coreAdapter.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyModalComponentAdapterService_coreAdapter, coreAdapter, "f");
-    }
-    handleWindowChange(modalEl) {
-        const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
-        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) {
-            __classPrivateFieldGet(this, _SkyModalComponentAdapterService_instances, "m", _SkyModalComponentAdapterService_setFullPageHeight).call(this, 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 {
-                __classPrivateFieldGet(this, _SkyModalComponentAdapterService_coreAdapter, "f").getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
-            }
-            window.scrollTo(currentScrollX, currentScrollY);
-        }
-    }
-}
-_SkyModalComponentAdapterService_coreAdapter = new WeakMap(), _SkyModalComponentAdapterService_instances = new WeakSet(), _SkyModalComponentAdapterService_setFullPageHeight = function _SkyModalComponentAdapterService_setFullPageHeight(fullPageModalEl) {
-    const windowHeight = window.innerHeight;
-    const fullPageModalStyle = getComputedStyle(fullPageModalEl);
-    const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
-        parseInt(fullPageModalStyle.marginBottom, 10);
-    const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
-    fullPageModalEl.style.height = fullPageModalHeight;
-    fullPageModalEl.style.maxHeight = fullPageModalHeight;
-};
-SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalComponentAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
-
-var _SkyModalComponent_hostService, _SkyModalComponent_elRef, _SkyModalComponent_windowRef, _SkyModalComponent_componentAdapter, _SkyModalComponent_coreAdapter, _SkyModalComponent_dockService, _SkyModalComponent_mediaQueryService, _SkyModalComponent_ngUnsubscribe, _SkyModalComponent__ariaDescribedBy, _SkyModalComponent__ariaLabelledBy, _SkyModalComponent_changeDetector, _SkyModalComponent_liveAnnouncerSvc;
-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 {
-    /**
-     * @internal
-     */
-    set ariaRole(value) {
-        this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
+class SkyModalComponent {
+    /**
+     * @internal
+     */
+    set ariaRole(value) {
+        this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
     }
     /**
      * @internal
@@ -891,180 +1018,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
-class SkyModalModule {
-}
-SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
-        SkyModalContentComponent,
-        SkyModalFooterComponent,
-        SkyModalHeaderComponent,
-        SkyModalHostComponent,
-        SkyModalScrollShadowDirective], imports: [CommonModule,
-        RouterModule,
-        SkyIconModule,
-        SkyIdModule,
-        SkyModalsResourcesModule,
-        SkyThemeModule,
-        SkyTrimModule], exports: [SkyModalComponent,
-        SkyModalContentComponent,
-        SkyModalFooterComponent,
-        SkyModalHeaderComponent] });
-SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, imports: [CommonModule,
-        RouterModule,
-        SkyIconModule,
-        SkyIdModule,
-        SkyModalsResourcesModule,
-        SkyThemeModule,
-        SkyTrimModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SkyModalComponent,
-                        SkyModalContentComponent,
-                        SkyModalFooterComponent,
-                        SkyModalHeaderComponent,
-                        SkyModalHostComponent,
-                        SkyModalScrollShadowDirective,
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        SkyIconModule,
-                        SkyIdModule,
-                        SkyModalsResourcesModule,
-                        SkyThemeModule,
-                        SkyTrimModule,
-                    ],
-                    exports: [
-                        SkyModalComponent,
-                        SkyModalContentComponent,
-                        SkyModalFooterComponent,
-                        SkyModalHeaderComponent,
-                    ],
-                }]
-        }] });
-
-/**
- * @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 {
-}
-
-var _SkyModalInstance_instances, _SkyModalInstance__beforeClose, _SkyModalInstance__closed, _SkyModalInstance__helpOpened, _SkyModalInstance_closeModal, _SkyModalInstance_notifyClosed;
-class SkyModalInstance {
-    constructor() {
-        _SkyModalInstance_instances.add(this);
-        _SkyModalInstance__beforeClose.set(this, new Subject());
-        _SkyModalInstance__closed.set(this, new Subject());
-        _SkyModalInstance__helpOpened.set(this, new Subject());
-    }
-    /**
-     * An event that the modal instance emits when it is about to close.
-     * 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 __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f");
-    }
-    /**
-     * 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 __classPrivateFieldGet(this, _SkyModalInstance__closed, "f");
-    }
-    /**
-     * 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 __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f");
-    }
-    /**
-     * 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';
-        }
-        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, 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) {
-        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, '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) {
-        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_closeModal).call(this, 'save', result);
-    }
-    /**
-     * Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open
-     * when users click the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
-     * @param helpKey Specifies a string to emit to subscribers of
-     * the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider
-     * into a component's constructor to call the `openHelp` function in the modal template.
-     */
-    openHelp(helpKey) {
-        __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f").next(helpKey);
-    }
-}
-_SkyModalInstance__beforeClose = new WeakMap(), _SkyModalInstance__closed = new WeakMap(), _SkyModalInstance__helpOpened = new WeakMap(), _SkyModalInstance_instances = new WeakSet(), _SkyModalInstance_closeModal = function _SkyModalInstance_closeModal(type, result, ignoreBeforeClose = false) {
-    const args = new SkyModalCloseArgs();
-    args.reason = type;
-    args.data = result;
-    if (__classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").observers.length === 0 || ignoreBeforeClose) {
-        __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_notifyClosed).call(this, args);
-    }
-    else {
-        __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").next(new SkyModalBeforeCloseHandler(() => {
-            __classPrivateFieldGet(this, _SkyModalInstance_instances, "m", _SkyModalInstance_notifyClosed).call(this, args);
-        }, args));
-    }
-}, _SkyModalInstance_notifyClosed = function _SkyModalInstance_notifyClosed(args) {
-    __classPrivateFieldGet(this, _SkyModalInstance__closed, "f").next(args);
-    __classPrivateFieldGet(this, _SkyModalInstance__closed, "f").complete();
-    __classPrivateFieldGet(this, _SkyModalInstance__beforeClose, "f").complete();
-    __classPrivateFieldGet(this, _SkyModalInstance__helpOpened, "f").complete();
-};
-
 var _SkyConfirmComponent_instances, _SkyConfirmComponent_config, _SkyConfirmComponent_modal, _SkyConfirmComponent_resourcesService, _SkyConfirmComponent_getPresetButtons, _SkyConfirmComponent_getCustomButtons;
 class SkyConfirmComponent {
     constructor(config, modal, resourcesService, idService) {
@@ -1165,34 +1118,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     args: [SKY_CONFIRM_CONFIG]
                 }] }, { type: SkyModalInstance }, { type: i2$1.SkyLibResourcesService }, { type: i3.SkyIdService }]; } });
 
-class SkyConfirmModule {
-}
-SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
-        SkyIdModule,
-        SkyModalModule,
-        SkyModalsResourcesModule,
-        SkyThemeModule], exports: [SkyConfirmComponent] });
-SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyConfirmModule, imports: [CommonModule,
-        SkyIdModule,
-        SkyModalModule,
-        SkyModalsResourcesModule,
-        SkyThemeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyConfirmModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyConfirmComponent],
-                    imports: [
-                        CommonModule,
-                        SkyIdModule,
-                        SkyModalModule,
-                        SkyModalsResourcesModule,
-                        SkyThemeModule,
-                    ],
-                    exports: [SkyConfirmComponent],
-                }]
-        }] });
-
 var _SkyModalService_instances, _SkyModalService_dynamicComponentService, _SkyModalService_getConfigFromParameter, _SkyModalService_createHostComponent;
 /**
  * A service that launches modals.
@@ -1335,9 +1260,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: SkyModalService }]; } });
 
+var _SkyModalIsDirtyDirective_instances, _SkyModalIsDirtyDirective_ngUnsubscribe, _SkyModalIsDirtyDirective_modalInstance, _SkyModalIsDirtyDirective_confirmSvc, _SkyModalIsDirtyDirective_resourcesSvc, _SkyModalIsDirtyDirective_promptIfDirty;
+/**
+ * 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() {
+        _SkyModalIsDirtyDirective_instances.add(this);
+        /**
+         * Whether the user edited an input on the modal.
+         * @required
+         */
+        this.isDirty = false;
+        _SkyModalIsDirtyDirective_ngUnsubscribe.set(this, new Subject());
+        _SkyModalIsDirtyDirective_modalInstance.set(this, inject(SkyModalInstance));
+        _SkyModalIsDirtyDirective_confirmSvc.set(this, inject(SkyConfirmService));
+        _SkyModalIsDirtyDirective_resourcesSvc.set(this, inject(SkyLibResourcesService));
+    }
+    ngOnInit() {
+        __classPrivateFieldGet(this, _SkyModalIsDirtyDirective_modalInstance, "f").beforeClose
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyModalIsDirtyDirective_ngUnsubscribe, "f")))
+            .subscribe((handler) => __classPrivateFieldGet(this, _SkyModalIsDirtyDirective_instances, "m", _SkyModalIsDirtyDirective_promptIfDirty).call(this, handler));
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyModalIsDirtyDirective_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyModalIsDirtyDirective_ngUnsubscribe, "f").complete();
+    }
+}
+_SkyModalIsDirtyDirective_ngUnsubscribe = new WeakMap(), _SkyModalIsDirtyDirective_modalInstance = new WeakMap(), _SkyModalIsDirtyDirective_confirmSvc = new WeakMap(), _SkyModalIsDirtyDirective_resourcesSvc = new WeakMap(), _SkyModalIsDirtyDirective_instances = new WeakSet(), _SkyModalIsDirtyDirective_promptIfDirty = function _SkyModalIsDirtyDirective_promptIfDirty(handler) {
+    if (this.isDirty && handler.closeArgs.reason === 'close') {
+        __classPrivateFieldGet(this, _SkyModalIsDirtyDirective_resourcesSvc, "f")
+            .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';
+            __classPrivateFieldGet(this, _SkyModalIsDirtyDirective_confirmSvc, "f")
+                .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();
+    }
+};
+SkyModalIsDirtyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalIsDirtyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SkyModalIsDirtyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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 {
+}
+SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
+        SkyModalContentComponent,
+        SkyModalFooterComponent,
+        SkyModalHeaderComponent,
+        SkyModalHostComponent,
+        SkyModalIsDirtyDirective,
+        SkyModalScrollShadowDirective], imports: [CommonModule,
+        RouterModule,
+        SkyIconModule,
+        SkyIdModule,
+        SkyModalsResourcesModule,
+        SkyThemeModule,
+        SkyTrimModule], exports: [SkyModalComponent,
+        SkyModalContentComponent,
+        SkyModalFooterComponent,
+        SkyModalHeaderComponent,
+        SkyModalIsDirtyDirective] });
+SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, imports: [CommonModule,
+        RouterModule,
+        SkyIconModule,
+        SkyIdModule,
+        SkyModalsResourcesModule,
+        SkyThemeModule,
+        SkyTrimModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyModalComponent,
+                        SkyModalContentComponent,
+                        SkyModalFooterComponent,
+                        SkyModalHeaderComponent,
+                        SkyModalHostComponent,
+                        SkyModalIsDirtyDirective,
+                        SkyModalScrollShadowDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyIconModule,
+                        SkyIdModule,
+                        SkyModalsResourcesModule,
+                        SkyThemeModule,
+                        SkyTrimModule,
+                    ],
+                    exports: [
+                        SkyModalComponent,
+                        SkyModalContentComponent,
+                        SkyModalFooterComponent,
+                        SkyModalHeaderComponent,
+                        SkyModalIsDirtyDirective,
+                    ],
+                }]
+        }] });
+
+class SkyConfirmModule {
+}
+SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
+        SkyIdModule,
+        SkyModalModule,
+        SkyModalsResourcesModule,
+        SkyThemeModule], exports: [SkyConfirmComponent] });
+SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyConfirmModule, imports: [CommonModule,
+        SkyIdModule,
+        SkyModalModule,
+        SkyModalsResourcesModule,
+        SkyThemeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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, SkyModalHostService, SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5 };
+export { SkyConfirmInstance, SkyConfirmModule, SkyConfirmService, SkyConfirmType, SkyModalBeforeCloseHandler, SkyModalCloseArgs, SkyModalConfiguration, SkyModalHostService, SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5, SkyModalIsDirtyDirective as λ6 };
 //# sourceMappingURL=skyux-modals.mjs.map