@skyux/modals 5.7.0 → 5.8.0

package/esm2015/lib/modules/modal/modal-before-close-handler.js

@@ -1,3 +1,6 @@
+/**
+ * Closes the modal instance using the `closeModal` method.
+ */
 export class SkyModalBeforeCloseHandler {
     constructor(closeModal, closeArgs) {
         this.closeModal = closeModal;

package/esm2015/lib/modules/modal/modal-before-close-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-before-close-handler.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-before-close-handler.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,0BAA0B;IACrC,YACkB,UAAoB,EACpB,SAA4B;QAD5B,eAAU,GAAV,UAAU,CAAU;QACpB,cAAS,GAAT,SAAS,CAAmB;IAC3C,CAAC;CACL","sourcesContent":["import { SkyModalCloseArgs } from './modal-close-args';\n\nexport class SkyModalBeforeCloseHandler {\n  constructor(\n    public readonly closeModal: Function,\n    public readonly closeArgs: SkyModalCloseArgs\n  ) {}\n}\n"]}
+{"version":3,"file":"modal-before-close-handler.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-before-close-handler.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,0BAA0B;IACrC,YACkB,UAAoB,EACpB,SAA4B;QAD5B,eAAU,GAAV,UAAU,CAAU;QACpB,cAAS,GAAT,SAAS,CAAmB;IAC3C,CAAC;CACL","sourcesContent":["import { SkyModalCloseArgs } from './modal-close-args';\n\n/**\n * Closes the modal instance using the `closeModal` method.\n */\nexport class SkyModalBeforeCloseHandler {\n  constructor(\n    public readonly closeModal: Function,\n    public readonly closeArgs: SkyModalCloseArgs\n  ) {}\n}\n"]}

package/esm2015/lib/modules/modal/modal-close-args.js

@@ -1,3 +1,7 @@
+/**
+ * Contains an object with the data passed from users when
+ * a modal is closed and the reason that the modal was closed.
+ */
 export class SkyModalCloseArgs {
 }
 //# sourceMappingURL=modal-close-args.js.map

package/esm2015/lib/modules/modal/modal-close-args.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-close-args.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-close-args.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,iBAAiB;CAG7B","sourcesContent":["export class SkyModalCloseArgs {\n  public reason: string;\n  public data: any;\n}\n"]}
+{"version":3,"file":"modal-close-args.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-close-args.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,OAAO,iBAAiB;CAU7B","sourcesContent":["/**\n * Contains an object with the data passed from users when\n * a modal is closed and the reason that the modal was closed.\n */\nexport class SkyModalCloseArgs {\n  /**\n   * Indicates the reason the modal was closed.\n   * Options include `\"close\"`, `\"save\"`, and `\"cancel\"`.\n   */\n  public reason: string;\n  /**\n   * The data passed from users when the modal is closed.\n   */\n  public data: any;\n}\n"]}

package/esm2015/lib/modules/modal/modal-instance.js

@@ -27,7 +27,7 @@ export class SkyModalInstance {
      * 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`.
+     * Common examples include `"cancel"`, `"close"`, and `"save"`.
      */
     get closed() {
         return this._closed;
@@ -45,7 +45,7 @@ export class SkyModalInstance {
      * @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 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) {
@@ -55,7 +55,7 @@ export class SkyModalInstance {
         this.closeModal(reason, result, ignoreBeforeClose);
     }
     /**
-     * Closes the modal instance with `reason=cancel`.
+     * 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`.
@@ -64,7 +64,7 @@ export class SkyModalInstance {
         this.closeModal('cancel', result);
     }
     /**
-     * Closes the modal instance with `reason=save`.
+     * 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`.

package/esm2015/lib/modules/modal/modal-instance.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-instance.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAE3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,6EAA6E;AAC7E,0DAA0D;AAE1D;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAA7B;QAqCU,iBAAY,GAAG,IAAI,OAAO,EAA8B,CAAC;QAEzD,YAAO,GAAG,IAAI,OAAO,EAAqB,CAAC;QAE3C,gBAAW,GAAG,IAAI,OAAO,EAAU,CAAC;IAgF9C,CAAC;IAxHC;;;;;OAKG;IACH,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED;;;;;;;OAOG;IACH,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED;;;;OAIG;IACH,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAaD;;;;;;;OAOG;IACI,KAAK,CACV,MAAY,EACZ,MAAe,EACf,iBAA2B;QAE3B,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,MAAM,GAAG,OAAO,CAAC;SAClB;QAED,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACrD,CAAC;IAED;;;;;OAKG;IACI,MAAM,CAAC,MAAY;QACxB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACI,IAAI,CAAC,MAAY;QACtB,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,CAAC;IAED;;;;;;OAMG;IACI,QAAQ,CAAC,OAAgB;QAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAEO,UAAU,CAChB,IAAY,EACZ,MAAY,EACZ,iBAAiB,GAAG,KAAK;QAEzB,MAAM,IAAI,GAAG,IAAI,iBAAiB,EAAE,CAAC;QAErC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QAEnB,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,IAAI,iBAAiB,EAAE;YACjE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CACpB,IAAI,0BAA0B,CAAC,GAAG,EAAE;gBAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC,EAAE,IAAI,CAAC,CACT,CAAC;SACH;IACH,CAAC;IAEO,YAAY,CAAC,IAAuB;QAC1C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;IAC9B,CAAC;CACF","sourcesContent":["import { Observable, Subject } from 'rxjs';\n\nimport { SkyModalBeforeCloseHandler } from './modal-before-close-handler';\nimport { SkyModalCloseArgs } from './modal-close-args';\n\n// TODO: this class won't show in the generated docs until this work is done:\n// https://github.com/blackbaud/skyux-docs-tools/issues/30\n\n/**\n * Allows you to close the modal and return data from the launched modal.\n */\nexport class SkyModalInstance {\n  /**\n   * An event that the modal instance emits when it is about to close.\n   * It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method\n   * that closes the modal. If a subscription exists for this event,\n   * the modal does not close until the subscriber calls the `closeModal` method.\n   */\n  public get beforeClose(): Observable<SkyModalBeforeCloseHandler> {\n    return this._beforeClose;\n  }\n\n  /**\n   * An event that the modal instance emits when it closes.\n   * It emits a `SkyModalCloseArgs` object with a `data` property that includes\n   * data passed from users on close or save and a `reason` property that indicates\n   * whether the modal was saved or closed without saving.\n   * The `reason` property accepts any string value.\n   * Common examples include `cancel`, `close`, and `save`.\n   */\n  public get closed(): Observable<SkyModalCloseArgs> {\n    return this._closed;\n  }\n\n  /**\n   * An event that the modal instance emits when users click\n   * the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button.\n   * If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.\n   */\n  public get helpOpened(): Observable<string> {\n    return this._helpOpened;\n  }\n\n  /**\n   * A direct reference to the provided component's class.\n   */\n  public componentInstance: any;\n\n  private _beforeClose = new Subject<SkyModalBeforeCloseHandler>();\n\n  private _closed = new Subject<SkyModalCloseArgs>();\n\n  private _helpOpened = new Subject<string>();\n\n  /**\n   * Closes the modal instance.\n   * @param result Specifies an object to emit to subscribers of the `closed` event of the\n   * modal instance. The `SkyModalInstance` provider can be injected into a component's constructor\n   * so that this `close` function can be called from a button in the `sky-modal-footer`.\n   * @param reason Specifies the reason for the modal closing, with the default reason of `close`.\n   * @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.\n   */\n  public close(\n    result?: any,\n    reason?: string,\n    ignoreBeforeClose?: boolean\n  ): void {\n    if (reason === undefined) {\n      reason = 'close';\n    }\n\n    this.closeModal(reason, result, ignoreBeforeClose);\n  }\n\n  /**\n   * Closes the modal instance with `reason=cancel`.\n   * @param result Specifies an object to emit to subscribers of the `closed` event of the modal\n   * instance. The `SkyModalInstance` provider can be injected into a component's constructor so\n   * that this cancel function can be called from a button in the `sky-modal-footer`.\n   */\n  public cancel(result?: any): void {\n    this.closeModal('cancel', result);\n  }\n\n  /**\n   * Closes the modal instance with `reason=save`.\n   * @param result Specifies an object to emit to subscribers of the `closed` event of the modal\n   * instance. The `SkyModalInstance` provider can be injected into a component's constructor so\n   * that this `save` function can be called from a button in `the sky-modal-footer`.\n   */\n  public save(result?: any): void {\n    this.closeModal('save', result);\n  }\n\n  /**\n   * Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open\n   * when users click the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button.\n   * @param helpKey Specifies a string to emit to subscribers of\n   * the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider\n   * into a component's constructor to call the `openHelp` function in the modal template.\n   */\n  public openHelp(helpKey?: string): void {\n    this._helpOpened.next(helpKey);\n  }\n\n  private closeModal(\n    type: string,\n    result?: any,\n    ignoreBeforeClose = false\n  ): void {\n    const args = new SkyModalCloseArgs();\n\n    args.reason = type;\n    args.data = result;\n\n    if (this._beforeClose.observers.length === 0 || ignoreBeforeClose) {\n      this.notifyClosed(args);\n    } else {\n      this._beforeClose.next(\n        new SkyModalBeforeCloseHandler(() => {\n          this.notifyClosed(args);\n        }, args)\n      );\n    }\n  }\n\n  private notifyClosed(args: SkyModalCloseArgs): void {\n    this._closed.next(args);\n    this._closed.complete();\n    this._beforeClose.complete();\n    this._helpOpened.complete();\n  }\n}\n"]}
+{"version":3,"file":"modal-instance.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAE3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,6EAA6E;AAC7E,0DAA0D;AAE1D;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAA7B;QAqCU,iBAAY,GAAG,IAAI,OAAO,EAA8B,CAAC;QAEzD,YAAO,GAAG,IAAI,OAAO,EAAqB,CAAC;QAE3C,gBAAW,GAAG,IAAI,OAAO,EAAU,CAAC;IAgF9C,CAAC;IAxHC;;;;;OAKG;IACH,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED;;;;;;;OAOG;IACH,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED;;;;OAIG;IACH,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAaD;;;;;;;OAOG;IACI,KAAK,CACV,MAAY,EACZ,MAAe,EACf,iBAA2B;QAE3B,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,MAAM,GAAG,OAAO,CAAC;SAClB;QAED,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACrD,CAAC;IAED;;;;;OAKG;IACI,MAAM,CAAC,MAAY;QACxB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACI,IAAI,CAAC,MAAY;QACtB,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,CAAC;IAED;;;;;;OAMG;IACI,QAAQ,CAAC,OAAgB;QAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAEO,UAAU,CAChB,IAAY,EACZ,MAAY,EACZ,iBAAiB,GAAG,KAAK;QAEzB,MAAM,IAAI,GAAG,IAAI,iBAAiB,EAAE,CAAC;QAErC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QAEnB,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,IAAI,iBAAiB,EAAE;YACjE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CACpB,IAAI,0BAA0B,CAAC,GAAG,EAAE;gBAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC,EAAE,IAAI,CAAC,CACT,CAAC;SACH;IACH,CAAC;IAEO,YAAY,CAAC,IAAuB;QAC1C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;IAC9B,CAAC;CACF","sourcesContent":["import { Observable, Subject } from 'rxjs';\n\nimport { SkyModalBeforeCloseHandler } from './modal-before-close-handler';\nimport { SkyModalCloseArgs } from './modal-close-args';\n\n// TODO: this class won't show in the generated docs until this work is done:\n// https://github.com/blackbaud/skyux-docs-tools/issues/30\n\n/**\n * Allows you to close the modal and return data from the launched modal.\n */\nexport class SkyModalInstance {\n  /**\n   * An event that the modal instance emits when it is about to close.\n   * It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method\n   * that closes the modal. If a subscription exists for this event,\n   * the modal does not close until the subscriber calls the `closeModal` method.\n   */\n  public get beforeClose(): Observable<SkyModalBeforeCloseHandler> {\n    return this._beforeClose;\n  }\n\n  /**\n   * An event that the modal instance emits when it closes.\n   * It emits a `SkyModalCloseArgs` object with a `data` property that includes\n   * data passed from users on close or save and a `reason` property that indicates\n   * whether the modal was saved or closed without saving.\n   * The `reason` property accepts any string value.\n   * Common examples include `\"cancel\"`, `\"close\"`, and `\"save\"`.\n   */\n  public get closed(): Observable<SkyModalCloseArgs> {\n    return this._closed;\n  }\n\n  /**\n   * An event that the modal instance emits when users click\n   * the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button.\n   * If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.\n   */\n  public get helpOpened(): Observable<string> {\n    return this._helpOpened;\n  }\n\n  /**\n   * A direct reference to the provided component's class.\n   */\n  public componentInstance: any;\n\n  private _beforeClose = new Subject<SkyModalBeforeCloseHandler>();\n\n  private _closed = new Subject<SkyModalCloseArgs>();\n\n  private _helpOpened = new Subject<string>();\n\n  /**\n   * Closes the modal instance.\n   * @param result Specifies an object to emit to subscribers of the `closed` event of the\n   * modal instance. The `SkyModalInstance` provider can be injected into a component's constructor\n   * so that this `close` function can be called from a button in the `sky-modal-footer`.\n   * @param reason Specifies the reason for the modal closing, with the default reason of `\"close\"`.\n   * @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.\n   */\n  public close(\n    result?: any,\n    reason?: string,\n    ignoreBeforeClose?: boolean\n  ): void {\n    if (reason === undefined) {\n      reason = 'close';\n    }\n\n    this.closeModal(reason, result, ignoreBeforeClose);\n  }\n\n  /**\n   * Closes the modal instance with `reason=\"cancel\"`.\n   * @param result Specifies an object to emit to subscribers of the `closed` event of the modal\n   * instance. The `SkyModalInstance` provider can be injected into a component's constructor so\n   * that this cancel function can be called from a button in the `sky-modal-footer`.\n   */\n  public cancel(result?: any): void {\n    this.closeModal('cancel', result);\n  }\n\n  /**\n   * Closes the modal instance with `reason=\"save\"`.\n   * @param result Specifies an object to emit to subscribers of the `closed` event of the modal\n   * instance. The `SkyModalInstance` provider can be injected into a component's constructor so\n   * that this `save` function can be called from a button in `the sky-modal-footer`.\n   */\n  public save(result?: any): void {\n    this.closeModal('save', result);\n  }\n\n  /**\n   * Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open\n   * when users click the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button.\n   * @param helpKey Specifies a string to emit to subscribers of\n   * the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider\n   * into a component's constructor to call the `openHelp` function in the modal template.\n   */\n  public openHelp(helpKey?: string): void {\n    this._helpOpened.next(helpKey);\n  }\n\n  private closeModal(\n    type: string,\n    result?: any,\n    ignoreBeforeClose = false\n  ): void {\n    const args = new SkyModalCloseArgs();\n\n    args.reason = type;\n    args.data = result;\n\n    if (this._beforeClose.observers.length === 0 || ignoreBeforeClose) {\n      this.notifyClosed(args);\n    } else {\n      this._beforeClose.next(\n        new SkyModalBeforeCloseHandler(() => {\n          this.notifyClosed(args);\n        }, args)\n      );\n    }\n  }\n\n  private notifyClosed(args: SkyModalCloseArgs): void {\n    this._closed.next(args);\n    this._closed.complete();\n    this._beforeClose.complete();\n    this._helpOpened.complete();\n  }\n}\n"]}

package/esm2015/lib/modules/modal/modal.component.js

@@ -1,5 +1,5 @@
-import { Component, ElementRef, Host, HostBinding, HostListener, Input, ViewChild, } from '@angular/core';
-import { SkyAppWindowRef, SkyCoreAdapterService, SkyDockLocation, SkyDockService, } from '@skyux/core';
+import { Component, ElementRef, Host, HostBinding, HostListener, Input, Optional, ViewChild, } from '@angular/core';
+import { SkyAppWindowRef, SkyCoreAdapterService, SkyDockLocation, SkyDockService, SkyMediaQueryService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
 import { SkyModalComponentAdapterService } from './modal-component-adapter.service';
 import { SkyModalConfiguration } from './modal-configuration';
 import { SkyModalHostService } from './modal-host.service';
@@ -18,10 +18,10 @@ let skyModalUniqueIdentifier = 0;
  * Provides a common look-and-feel for modal content with options to display
  * a common modal header, specify body content, and display a common modal footer
  * and buttons. For information about how to test modals in SKY UX, see
- * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
+ * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).
  */
 export class SkyModalComponent {
-    constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
+    constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
         this.hostService = hostService;
         this.config = config;
         this.elRef = elRef;
@@ -29,6 +29,7 @@ export class SkyModalComponent {
         this.componentAdapter = componentAdapter;
         this.coreAdapter = coreAdapter;
         this.dockService = dockService;
+        this.mediaQueryService = mediaQueryService;
         this.modalState = 'in';
         this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
         this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
@@ -134,6 +135,12 @@ export class SkyModalComponent {
             referenceEl: this.modalContentWrapperElement.nativeElement,
             zIndex: 5,
         });
+        this.mediaQueryService.observe(this.modalContentWrapperElement);
+    }
+    ngOnDestroy() {
+        if (this.mediaQueryService) {
+            this.mediaQueryService.unobserve();
+        }
     }
     helpButtonClick() {
         this.hostService.onOpenHelp(this.helpKey);
@@ -151,8 +158,15 @@ export class SkyModalComponent {
         return actualSize && actualSize.toLowerCase() === size;
     }
 }
-SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, deps: [{ token: i1.SkyModalHostService }, { token: i2.SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: i4.SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
+SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, deps: [{ token: i1.SkyModalHostService }, { token: i2.SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: i4.SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }, { token: i3.SkyMediaQueryService, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
+        SkyModalComponentAdapterService,
+        SkyDockService,
+        {
+            provide: SkyMediaQueryService,
+            useClass: SkyResizeObserverMediaQueryService,
+        },
+    ], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, decorators: [{
             type: Component,
             args: [{
@@ -160,10 +174,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: './modal.component.html',
                     styleUrls: ['./modal.component.scss'],
                     animations: [skyAnimationModalState],
-                    providers: [SkyModalComponentAdapterService, SkyDockService],
+                    providers: [
+                        SkyModalComponentAdapterService,
+                        SkyDockService,
+                        {
+                            provide: SkyMediaQueryService,
+                            useClass: SkyResizeObserverMediaQueryService,
+                        },
+                    ],
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyModalHostService }, { type: i2.SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: i4.SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
                     type: Host
+                }] }, { type: i3.SkyMediaQueryService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
                 }] }]; }, propDecorators: { wrapperClass: [{
                 type: HostBinding,
                 args: ['class']

package/esm2015/lib/modules/modal/modal.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  Host,\n  HostBinding,\n  HostListener,\n  Input,\n  ViewChild,\n} from '@angular/core';\nimport {\n  SkyAppWindowRef,\n  SkyCoreAdapterService,\n  SkyDockLocation,\n  SkyDockService,\n} from '@skyux/core';\n\nimport { SkyModalComponentAdapterService } from './modal-component-adapter.service';\nimport { SkyModalConfiguration } from './modal-configuration';\nimport { SkyModalHostService } from './modal-host.service';\nimport { SkyModalScrollShadowEventArgs } from './modal-scroll-shadow-event-args';\nimport { skyAnimationModalState } from './modal-state-animation';\n\nlet skyModalUniqueIdentifier = 0;\n\n/**\n * Provides a common look-and-feel for modal content with options to display\n * a common modal header, specify body content, and display a common modal footer\n * and buttons. For information about how to test modals in SKY UX, see\n * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).\n */\n@Component({\n  selector: 'sky-modal',\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss'],\n  animations: [skyAnimationModalState],\n  providers: [SkyModalComponentAdapterService, SkyDockService],\n})\nexport class SkyModalComponent implements AfterViewInit {\n  @HostBinding('class')\n  public get wrapperClass(): string {\n    return this.config.wrapperClass;\n  }\n\n  /**\n   * @internal\n   */\n  @Input()\n  public get ariaRole() {\n    return this.config.ariaRole || 'dialog';\n  }\n  public set ariaRole(value: string) {\n    this.config.ariaRole = value;\n  }\n\n  /**\n   * @internal\n   */\n  @Input()\n  public set tiledBody(value: boolean) {\n    this.config.tiledBody = value;\n  }\n\n  public get modalZIndex() {\n    return this.hostService.getModalZIndex();\n  }\n\n  public get modalFullPage() {\n    return this.config.fullPage;\n  }\n\n  public get isSmallSize() {\n    return !this.modalFullPage && this.isSizeEqual(this.config.size, 'small');\n  }\n\n  public get isMediumSize() {\n    return !this.modalFullPage && !(this.isSmallSize || this.isLargeSize);\n  }\n\n  public get isLargeSize() {\n    return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');\n  }\n\n  public get isTiledBody() {\n    return this.config.tiledBody;\n  }\n\n  public get ariaDescribedBy() {\n    return this.config.ariaDescribedBy || this.modalContentId;\n  }\n\n  public get ariaLabelledBy() {\n    return this.config.ariaLabelledBy || this.modalHeaderId;\n  }\n\n  public get helpKey() {\n    return this.config.helpKey;\n  }\n\n  public modalState = 'in';\n\n  public modalContentId: string =\n    'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();\n\n  public modalHeaderId: string =\n    'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();\n\n  public scrollShadow: SkyModalScrollShadowEventArgs;\n\n  @ViewChild('modalContentWrapper', { read: ElementRef })\n  private modalContentWrapperElement: ElementRef;\n\n  constructor(\n    private hostService: SkyModalHostService,\n    private config: SkyModalConfiguration,\n    private elRef: ElementRef,\n    private windowRef: SkyAppWindowRef,\n    private componentAdapter: SkyModalComponentAdapterService,\n    private coreAdapter: SkyCoreAdapterService,\n    @Host() private dockService: SkyDockService\n  ) {}\n\n  @HostListener('document:keyup', ['$event'])\n  public onDocumentKeyUp(event: KeyboardEvent) {\n    /* istanbul ignore else */\n    /* sanity check */\n    if (SkyModalHostService.openModalCount > 0) {\n      const topModal = SkyModalHostService.topModal;\n      if (topModal && topModal === this.hostService) {\n        if (event.which === 27) {\n          // Escape key up\n          event.preventDefault();\n          this.closeButtonClick();\n        }\n      }\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  public onDocumentKeyDown(event: KeyboardEvent) {\n    /* istanbul ignore else */\n    /* sanity check */\n    if (SkyModalHostService.openModalCount > 0) {\n      const topModal = SkyModalHostService.topModal;\n      if (topModal && topModal === this.hostService) {\n        if (event.which === 9) {\n          // Tab pressed\n          let focusChanged = false;\n\n          const focusElementList = this.coreAdapter.getFocusableChildren(\n            this.elRef.nativeElement\n          );\n\n          if (\n            event.shiftKey &&\n            (this.componentAdapter.isFocusInFirstItem(\n              event,\n              focusElementList\n            ) ||\n              this.componentAdapter.isModalFocused(event, this.elRef))\n          ) {\n            focusChanged =\n              this.componentAdapter.focusLastElement(focusElementList);\n          } else if (\n            !event.shiftKey &&\n            this.componentAdapter.isFocusInLastItem(event, focusElementList)\n          ) {\n            focusChanged =\n              this.componentAdapter.focusFirstElement(focusElementList);\n          }\n\n          if (focusChanged) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      }\n    }\n  }\n\n  public ngAfterViewInit() {\n    skyModalUniqueIdentifier++;\n    this.componentAdapter.handleWindowChange(this.elRef);\n\n    // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.\n    // https://stackoverflow.com/questions/40562845\n    this.windowRef.nativeWindow.setTimeout(() => {\n      this.componentAdapter.modalOpened(this.elRef);\n    });\n\n    this.dockService.setDockOptions({\n      location: SkyDockLocation.ElementBottom,\n      referenceEl: this.modalContentWrapperElement.nativeElement,\n      zIndex: 5,\n    });\n  }\n\n  public helpButtonClick() {\n    this.hostService.onOpenHelp(this.helpKey);\n  }\n\n  public closeButtonClick() {\n    this.hostService.onClose();\n  }\n\n  public windowResize() {\n    this.componentAdapter.handleWindowChange(this.elRef);\n  }\n\n  public scrollShadowChange(args: SkyModalScrollShadowEventArgs): void {\n    this.scrollShadow = args;\n  }\n\n  private isSizeEqual(actualSize: string, size: string) {\n    return actualSize && actualSize.toLowerCase() === size;\n  }\n}\n","<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n"]}
+{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  Host,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  Optional,\n  ViewChild,\n} from '@angular/core';\nimport {\n  SkyAppWindowRef,\n  SkyCoreAdapterService,\n  SkyDockLocation,\n  SkyDockService,\n  SkyMediaQueryService,\n  SkyResizeObserverMediaQueryService,\n} from '@skyux/core';\n\nimport { SkyModalComponentAdapterService } from './modal-component-adapter.service';\nimport { SkyModalConfiguration } from './modal-configuration';\nimport { SkyModalHostService } from './modal-host.service';\nimport { SkyModalScrollShadowEventArgs } from './modal-scroll-shadow-event-args';\nimport { skyAnimationModalState } from './modal-state-animation';\n\nlet skyModalUniqueIdentifier = 0;\n\n/**\n * Provides a common look-and-feel for modal content with options to display\n * a common modal header, specify body content, and display a common modal footer\n * and buttons. For information about how to test modals in SKY UX, see\n * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).\n */\n@Component({\n  selector: 'sky-modal',\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss'],\n  animations: [skyAnimationModalState],\n  providers: [\n    SkyModalComponentAdapterService,\n    SkyDockService,\n    {\n      provide: SkyMediaQueryService,\n      useClass: SkyResizeObserverMediaQueryService,\n    },\n  ],\n})\nexport class SkyModalComponent implements AfterViewInit, OnDestroy {\n  @HostBinding('class')\n  public get wrapperClass(): string {\n    return this.config.wrapperClass;\n  }\n\n  /**\n   * @internal\n   */\n  @Input()\n  public get ariaRole() {\n    return this.config.ariaRole || 'dialog';\n  }\n  public set ariaRole(value: string) {\n    this.config.ariaRole = value;\n  }\n\n  /**\n   * @internal\n   */\n  @Input()\n  public set tiledBody(value: boolean) {\n    this.config.tiledBody = value;\n  }\n\n  public get modalZIndex() {\n    return this.hostService.getModalZIndex();\n  }\n\n  public get modalFullPage() {\n    return this.config.fullPage;\n  }\n\n  public get isSmallSize() {\n    return !this.modalFullPage && this.isSizeEqual(this.config.size, 'small');\n  }\n\n  public get isMediumSize() {\n    return !this.modalFullPage && !(this.isSmallSize || this.isLargeSize);\n  }\n\n  public get isLargeSize() {\n    return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');\n  }\n\n  public get isTiledBody() {\n    return this.config.tiledBody;\n  }\n\n  public get ariaDescribedBy() {\n    return this.config.ariaDescribedBy || this.modalContentId;\n  }\n\n  public get ariaLabelledBy() {\n    return this.config.ariaLabelledBy || this.modalHeaderId;\n  }\n\n  public get helpKey() {\n    return this.config.helpKey;\n  }\n\n  public modalState = 'in';\n\n  public modalContentId: string =\n    'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();\n\n  public modalHeaderId: string =\n    'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();\n\n  public scrollShadow: SkyModalScrollShadowEventArgs;\n\n  @ViewChild('modalContentWrapper', { read: ElementRef })\n  private modalContentWrapperElement: ElementRef;\n\n  constructor(\n    private hostService: SkyModalHostService,\n    private config: SkyModalConfiguration,\n    private elRef: ElementRef,\n    private windowRef: SkyAppWindowRef,\n    private componentAdapter: SkyModalComponentAdapterService,\n    private coreAdapter: SkyCoreAdapterService,\n    @Host() private dockService: SkyDockService,\n    @Optional() @Host() private mediaQueryService?: SkyMediaQueryService\n  ) {}\n\n  @HostListener('document:keyup', ['$event'])\n  public onDocumentKeyUp(event: KeyboardEvent) {\n    /* istanbul ignore else */\n    /* sanity check */\n    if (SkyModalHostService.openModalCount > 0) {\n      const topModal = SkyModalHostService.topModal;\n      if (topModal && topModal === this.hostService) {\n        if (event.which === 27) {\n          // Escape key up\n          event.preventDefault();\n          this.closeButtonClick();\n        }\n      }\n    }\n  }\n\n  @HostListener('document:keydown', ['$event'])\n  public onDocumentKeyDown(event: KeyboardEvent) {\n    /* istanbul ignore else */\n    /* sanity check */\n    if (SkyModalHostService.openModalCount > 0) {\n      const topModal = SkyModalHostService.topModal;\n      if (topModal && topModal === this.hostService) {\n        if (event.which === 9) {\n          // Tab pressed\n          let focusChanged = false;\n\n          const focusElementList = this.coreAdapter.getFocusableChildren(\n            this.elRef.nativeElement\n          );\n\n          if (\n            event.shiftKey &&\n            (this.componentAdapter.isFocusInFirstItem(\n              event,\n              focusElementList\n            ) ||\n              this.componentAdapter.isModalFocused(event, this.elRef))\n          ) {\n            focusChanged =\n              this.componentAdapter.focusLastElement(focusElementList);\n          } else if (\n            !event.shiftKey &&\n            this.componentAdapter.isFocusInLastItem(event, focusElementList)\n          ) {\n            focusChanged =\n              this.componentAdapter.focusFirstElement(focusElementList);\n          }\n\n          if (focusChanged) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      }\n    }\n  }\n\n  public ngAfterViewInit() {\n    skyModalUniqueIdentifier++;\n    this.componentAdapter.handleWindowChange(this.elRef);\n\n    // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.\n    // https://stackoverflow.com/questions/40562845\n    this.windowRef.nativeWindow.setTimeout(() => {\n      this.componentAdapter.modalOpened(this.elRef);\n    });\n\n    this.dockService.setDockOptions({\n      location: SkyDockLocation.ElementBottom,\n      referenceEl: this.modalContentWrapperElement.nativeElement,\n      zIndex: 5,\n    });\n\n    (this.mediaQueryService as SkyResizeObserverMediaQueryService).observe(\n      this.modalContentWrapperElement\n    );\n  }\n\n  public ngOnDestroy(): void {\n    if (this.mediaQueryService) {\n      (\n        this.mediaQueryService as SkyResizeObserverMediaQueryService\n      ).unobserve();\n    }\n  }\n\n  public helpButtonClick() {\n    this.hostService.onOpenHelp(this.helpKey);\n  }\n\n  public closeButtonClick() {\n    this.hostService.onClose();\n  }\n\n  public windowResize() {\n    this.componentAdapter.handleWindowChange(this.elRef);\n  }\n\n  public scrollShadowChange(args: SkyModalScrollShadowEventArgs): void {\n    this.scrollShadow = args;\n  }\n\n  private isSizeEqual(actualSize: string, size: string) {\n    return actualSize && actualSize.toLowerCase() === size;\n  }\n}\n","<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n"]}

package/esm2015/lib/modules/modal/modal.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.interface.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.interface.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,0DAA0D","sourcesContent":["// TODO: defaults won't show in the generated docs until this work is done:\n// https://github.com/blackbaud/skyux-docs-tools/issues/38\n\n/**\n * Specifies configuration options for creating a modal.\n */\nexport interface SkyModalConfigurationInterface {\n  /**\n   * Indicates whether to display the modal full screen.\n   * This property defaults to `false`.\n   */\n  fullPage?: boolean;\n\n  /**\n   * Specifies a size for the modal. The valid options are `small`, `medium`, and `large`.\n   * This property defaults to `medium`.\n   */\n  size?: string;\n\n  /**\n   * An array property of `providers`.\n   * In Angular, a provider is something that can create or deliver a service.\n   * This property can be used to pass context values from the component that launches the modal to the modal component.\n   */\n  providers?: any[];\n\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that describes\n   * the modal. This sets the modal's `aria-describedby` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   * The description typically includes text on the modal but not on items that users interact\n   * with, such as buttons and forms. If you do not specify an ID, the default description is\n   * the content of the `sky-modal-content` component.\n   */\n  ariaDescribedBy?: string;\n\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that labels\n   * the modal. This sets the `aria-labelledby` attribute for the modal\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   * This is typically a header element, and if you do not specify an ID, the default value\n   * is the content of the `sky-modal-header` component.\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Specifies an ARIA role for the modal\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n   * by indicating how the modal functions and what it controls. For information about\n   * how an ARIA role indicates what an item represents on a web page, see the\n   * [WAI-ARIA roles model](http://www.w3.org/WAI/PF/aria/roles). By default, modals set\n   * the ARIA role to `dialog`.\n   * @default \"dialog\"\n   */\n  ariaRole?: string;\n\n  /**\n   * Indicates whether the modal uses tiles. When set to `true`, the modal's background switches\n   * to `$sky-background-color-neutral-light` and tile headings are styled as subsection headings.\n   * This property defaults to `false`.\n   */\n  tiledBody?: boolean;\n\n  /**\n   * Specifies a `helpKey` string. This property dispays\n   * the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button in the modal header.\n   * When users click this button, the `helpOpened` event broadcasts the `helpKey` parameter.\n   * Blackbaud developers can use the Help Widget, which is for internal Blackbaud use only, to\n   * [display help content in a flyout panel](https://docs.blackbaud.com/bb-help-docs/components/modal-header).\n   */\n  helpKey?: string;\n\n  /**\n   * Specifies a CSS class to add to the modal, such as `ag-custom-component-popup` for\n   * using a modal as part of a cell editor in Data Entry Grid.\n   */\n  wrapperClass?: string;\n}\n"]}
+{"version":3,"file":"modal.interface.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.interface.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,0DAA0D","sourcesContent":["// TODO: defaults won't show in the generated docs until this work is done:\n// https://github.com/blackbaud/skyux-docs-tools/issues/38\n\n/**\n * Specifies configuration options for creating a modal.\n */\nexport interface SkyModalConfigurationInterface {\n  /**\n   * Indicates whether to display the modal full screen.\n   * This property defaults to `false`.\n   */\n  fullPage?: boolean;\n\n  /**\n   * Specifies a size for the modal. The valid options are `small`, `medium`, and `large`.\n   * This property defaults to `medium`.\n   */\n  size?: string;\n\n  /**\n   * An array property of `providers`.\n   * In Angular, a provider is something that can create or deliver a service.\n   * This property can be used to pass context values from the component that launches the modal to the modal component.\n   */\n  providers?: any[];\n\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that describes\n   * the modal. This sets the modal's `aria-describedby` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   * The description typically includes text on the modal but not on items that users interact\n   * with, such as buttons and forms. If you do not specify an ID, the default description is\n   * the content of the `sky-modal-content` component.\n   */\n  ariaDescribedBy?: string;\n\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that labels\n   * the modal. This sets the `aria-labelledby` attribute for the modal\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   * This is typically a header element, and if you do not specify an ID, the default value\n   * is the content of the `sky-modal-header` component.\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Specifies an ARIA role for the modal\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n   * by indicating how the modal functions and what it controls. For information about\n   * how an ARIA role indicates what an item represents on a web page, see the\n   * [WAI-ARIA roles model](http://www.w3.org/WAI/PF/aria/roles). By default, modals set\n   * the ARIA role to `dialog`.\n   * @default \"dialog\"\n   */\n  ariaRole?: string;\n\n  /**\n   * Indicates whether the modal uses tiles. When set to `true`, the modal's background switches\n   * to `$sky-background-color-neutral-light` and tile headings are styled as subsection headings.\n   * This property defaults to `false`.\n   */\n  tiledBody?: boolean;\n\n  /**\n   * Specifies a `helpKey` string. This property displays\n   * the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button in the modal header.\n   * When users click this button, the `helpOpened` event broadcasts the `helpKey` parameter.\n   * Blackbaud developers can use the Help Widget, which is for internal Blackbaud use only, to\n   * [display help content in a flyout panel](https://docs.blackbaud.com/bb-help-docs/components/modal-header).\n   */\n  helpKey?: string;\n\n  /**\n   * Specifies a CSS class to add to the modal, such as `ag-custom-component-popup` for\n   * using a modal as part of a cell editor in Data Entry Grid.\n   */\n  wrapperClass?: string;\n}\n"]}

package/esm2015/lib/modules/modal/modal.service.js

@@ -5,8 +5,8 @@ import { SkyModalInstance } from './modal-instance';
 import * as i0 from "@angular/core";
 import * as i1 from "@skyux/core";
 /**
- * A service that lauches modals. For information about how to test modals in SKY UX, see
- * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
+ * A service that launches modals. For information about how to test modals in SKY UX, see
+ * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).
  * @dynamic
  */
 export class SkyModalService {

package/esm2015/lib/modules/modal/modal.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;;;AAGpD;;;;GAIG;AAOH,MAAM,OAAO,eAAe;IAG1B,wFAAwF;IACxF,uCAAuC;IACvC,YAAoB,uBAAoD;QAApD,4BAAuB,GAAvB,uBAAuB,CAA6B;IAAG,CAAC;IAE5E;;;OAGG;IACI,OAAO;QACZ,IAAI,eAAe,CAAC,IAAI,EAAE;YACxB,IAAI,CAAC,uBAAuB,CAAC,eAAe,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACnE,eAAe,CAAC,IAAI,GAAG,SAAS,CAAC;SAClC;IACH,CAAC;IAED;;;;OAIG;IACI,IAAI,CACT,SAAc,EACd,MAA+C;QAE/C,MAAM,aAAa,GAAG,IAAI,gBAAgB,EAAE,CAAC;QAC7C,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QAEnD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,OAAO,EAAE,gBAAgB;YACzB,QAAQ,EAAE,aAAa;SACxB,CAAC,CAAC;QAEH,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QAErE,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,sBAAsB,CAC5B,iBAAsB;QAEtB,MAAM,aAAa,GAAmC;YACpD,SAAS,EAAE,EAAE;YACb,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,KAAK;SACjB,CAAC;QACF,IAAI,MAAM,GAAmC,SAAS,CAAC;QACvD,IAAI,MAAM,GAAQ,SAAS,CAAC;QAE5B,qDAAqD;QACrD,MAAM,GAAG;YACP,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE;gBAC7C,SAAS,EAAE,iBAAiB;aAC7B,CAAC;YACF,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE,iBAAiB,CAAC;SAC5D,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,EAAE;YAC7C,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;SAC/B;aAAM;YACL,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC3B;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACzB,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,eAAe,CACjE,qBAAqB,CACtB,CAAC;SACH;IACH,CAAC;;6GA5EU,eAAe;iHAAf,eAAe,cAFd,KAAK;4FAEN,eAAe;kBAN3B,UAAU;mBAAC;oBACV,gGAAgG;oBAChG,8FAA8F;oBAC9F,2FAA2F;oBAC3F,UAAU,EAAE,KAAK;iBAClB","sourcesContent":["import { ComponentRef, Injectable } from '@angular/core';\nimport { SkyDynamicComponentService } from '@skyux/core';\n\nimport { SkyModalHostComponent } from './modal-host.component';\nimport { SkyModalInstance } from './modal-instance';\nimport { SkyModalConfigurationInterface } from './modal.interface';\n\n/**\n * A service that lauches modals. For information about how to test modals in SKY UX, see\n * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).\n * @dynamic\n */\n@Injectable({\n  // Must be 'any' so that the modal component is created in the context of its module's injector.\n  // If set to 'root', the component's dependency injections would only be derived from the root\n  // injector and may loose context if the modal was opened from within a lazy-loaded module.\n  providedIn: 'any',\n})\nexport class SkyModalService {\n  private static host: ComponentRef<SkyModalHostComponent>;\n\n  // TODO: In future breaking change - remove extra parameters as they are no longer used.\n  /* tslint:disable:no-unused-variable */\n  constructor(private dynamicComponentService?: SkyDynamicComponentService) {}\n\n  /**\n   * @private\n   * Removes the modal host from the DOM.\n   */\n  public dispose(): void {\n    if (SkyModalService.host) {\n      this.dynamicComponentService.removeComponent(SkyModalService.host);\n      SkyModalService.host = undefined;\n    }\n  }\n\n  /**\n   * Opens a modal using the specified component.\n   * @param component Determines the component to render.\n   * @param {SkyModalConfigurationInterface} config Populates the modal based on the `SkyModalConfigurationInterface` object.\n   */\n  public open(\n    component: any,\n    config?: SkyModalConfigurationInterface | any[]\n  ): SkyModalInstance {\n    const modalInstance = new SkyModalInstance();\n    this.createHostComponent();\n    const params = this.getConfigFromParameter(config);\n\n    params.providers.push({\n      provide: SkyModalInstance,\n      useValue: modalInstance,\n    });\n\n    SkyModalService.host.instance.open(modalInstance, component, params);\n\n    return modalInstance;\n  }\n\n  private getConfigFromParameter(\n    providersOrConfig: any\n  ): SkyModalConfigurationInterface {\n    const defaultParams: SkyModalConfigurationInterface = {\n      providers: [],\n      fullPage: false,\n      size: 'medium',\n      tiledBody: false,\n    };\n    let params: SkyModalConfigurationInterface = undefined;\n    let method: any = undefined;\n\n    // Object Literal Lookup for backwards compatability.\n    method = {\n      'providers?': Object.assign({}, defaultParams, {\n        providers: providersOrConfig,\n      }),\n      config: Object.assign({}, defaultParams, providersOrConfig),\n    };\n\n    if (Array.isArray(providersOrConfig) === true) {\n      params = method['providers?'];\n    } else {\n      params = method['config'];\n    }\n\n    return params;\n  }\n\n  private createHostComponent(): void {\n    if (!SkyModalService.host) {\n      SkyModalService.host = this.dynamicComponentService.createComponent(\n        SkyModalHostComponent\n      );\n    }\n  }\n}\n"]}
+{"version":3,"file":"modal.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;;;AAGpD;;;;GAIG;AAOH,MAAM,OAAO,eAAe;IAG1B,wFAAwF;IACxF,uCAAuC;IACvC,YAAoB,uBAAoD;QAApD,4BAAuB,GAAvB,uBAAuB,CAA6B;IAAG,CAAC;IAE5E;;;OAGG;IACI,OAAO;QACZ,IAAI,eAAe,CAAC,IAAI,EAAE;YACxB,IAAI,CAAC,uBAAuB,CAAC,eAAe,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACnE,eAAe,CAAC,IAAI,GAAG,SAAS,CAAC;SAClC;IACH,CAAC;IAED;;;;OAIG;IACI,IAAI,CACT,SAAc,EACd,MAA+C;QAE/C,MAAM,aAAa,GAAG,IAAI,gBAAgB,EAAE,CAAC;QAC7C,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QAEnD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,OAAO,EAAE,gBAAgB;YACzB,QAAQ,EAAE,aAAa;SACxB,CAAC,CAAC;QAEH,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QAErE,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,sBAAsB,CAC5B,iBAAsB;QAEtB,MAAM,aAAa,GAAmC;YACpD,SAAS,EAAE,EAAE;YACb,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,KAAK;SACjB,CAAC;QACF,IAAI,MAAM,GAAmC,SAAS,CAAC;QACvD,IAAI,MAAM,GAAQ,SAAS,CAAC;QAE5B,qDAAqD;QACrD,MAAM,GAAG;YACP,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE;gBAC7C,SAAS,EAAE,iBAAiB;aAC7B,CAAC;YACF,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE,iBAAiB,CAAC;SAC5D,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,EAAE;YAC7C,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;SAC/B;aAAM;YACL,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC3B;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACzB,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,eAAe,CACjE,qBAAqB,CACtB,CAAC;SACH;IACH,CAAC;;6GA5EU,eAAe;iHAAf,eAAe,cAFd,KAAK;4FAEN,eAAe;kBAN3B,UAAU;mBAAC;oBACV,gGAAgG;oBAChG,8FAA8F;oBAC9F,2FAA2F;oBAC3F,UAAU,EAAE,KAAK;iBAClB","sourcesContent":["import { ComponentRef, Injectable } from '@angular/core';\nimport { SkyDynamicComponentService } from '@skyux/core';\n\nimport { SkyModalHostComponent } from './modal-host.component';\nimport { SkyModalInstance } from './modal-instance';\nimport { SkyModalConfigurationInterface } from './modal.interface';\n\n/**\n * A service that launches modals. For information about how to test modals in SKY UX, see\n * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).\n * @dynamic\n */\n@Injectable({\n  // Must be 'any' so that the modal component is created in the context of its module's injector.\n  // If set to 'root', the component's dependency injections would only be derived from the root\n  // injector and may loose context if the modal was opened from within a lazy-loaded module.\n  providedIn: 'any',\n})\nexport class SkyModalService {\n  private static host: ComponentRef<SkyModalHostComponent>;\n\n  // TODO: In future breaking change - remove extra parameters as they are no longer used.\n  /* tslint:disable:no-unused-variable */\n  constructor(private dynamicComponentService?: SkyDynamicComponentService) {}\n\n  /**\n   * @private\n   * Removes the modal host from the DOM.\n   */\n  public dispose(): void {\n    if (SkyModalService.host) {\n      this.dynamicComponentService.removeComponent(SkyModalService.host);\n      SkyModalService.host = undefined;\n    }\n  }\n\n  /**\n   * Opens a modal using the specified component.\n   * @param component Determines the component to render.\n   * @param {SkyModalConfigurationInterface} config Populates the modal based on the `SkyModalConfigurationInterface` object.\n   */\n  public open(\n    component: any,\n    config?: SkyModalConfigurationInterface | any[]\n  ): SkyModalInstance {\n    const modalInstance = new SkyModalInstance();\n    this.createHostComponent();\n    const params = this.getConfigFromParameter(config);\n\n    params.providers.push({\n      provide: SkyModalInstance,\n      useValue: modalInstance,\n    });\n\n    SkyModalService.host.instance.open(modalInstance, component, params);\n\n    return modalInstance;\n  }\n\n  private getConfigFromParameter(\n    providersOrConfig: any\n  ): SkyModalConfigurationInterface {\n    const defaultParams: SkyModalConfigurationInterface = {\n      providers: [],\n      fullPage: false,\n      size: 'medium',\n      tiledBody: false,\n    };\n    let params: SkyModalConfigurationInterface = undefined;\n    let method: any = undefined;\n\n    // Object Literal Lookup for backwards compatability.\n    method = {\n      'providers?': Object.assign({}, defaultParams, {\n        providers: providersOrConfig,\n      }),\n      config: Object.assign({}, defaultParams, providersOrConfig),\n    };\n\n    if (Array.isArray(providersOrConfig) === true) {\n      params = method['providers?'];\n    } else {\n      params = method['config'];\n    }\n\n    return params;\n  }\n\n  private createHostComponent(): void {\n    if (!SkyModalService.host) {\n      SkyModalService.host = this.dynamicComponentService.createComponent(\n        SkyModalHostComponent\n      );\n    }\n  }\n}\n"]}

package/fesm2015/skyux-modals.js

@@ -12,7 +12,7 @@ import * as i3$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import { takeWhile, takeUntil } from 'rxjs/operators';
 import * as i3 from '@skyux/core';
-import { SkyDockLocation, SkyDockService } from '@skyux/core';
+import { SkyDockLocation, SkyDockService, SkyMediaQueryService, SkyResizeObserverMediaQueryService } from '@skyux/core';
 import { Subject, BehaviorSubject, zip } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
@@ -580,10 +580,10 @@ let skyModalUniqueIdentifier = 0;
  * Provides a common look-and-feel for modal content with options to display
  * a common modal header, specify body content, and display a common modal footer
  * and buttons. For information about how to test modals in SKY UX, see
- * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
+ * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).
  */
 class SkyModalComponent {
-    constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
+    constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
         this.hostService = hostService;
         this.config = config;
         this.elRef = elRef;
@@ -591,6 +591,7 @@ class SkyModalComponent {
         this.componentAdapter = componentAdapter;
         this.coreAdapter = coreAdapter;
         this.dockService = dockService;
+        this.mediaQueryService = mediaQueryService;
         this.modalState = 'in';
         this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
         this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
@@ -696,6 +697,12 @@ class SkyModalComponent {
             referenceEl: this.modalContentWrapperElement.nativeElement,
             zIndex: 5,
         });
+        this.mediaQueryService.observe(this.modalContentWrapperElement);
+    }
+    ngOnDestroy() {
+        if (this.mediaQueryService) {
+            this.mediaQueryService.unobserve();
+        }
     }
     helpButtonClick() {
         this.hostService.onOpenHelp(this.helpKey);
@@ -713,8 +720,15 @@ class SkyModalComponent {
         return actualSize && actualSize.toLowerCase() === size;
     }
 }
-SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
+SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.SkyMediaQueryService, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
+        SkyModalComponentAdapterService,
+        SkyDockService,
+        {
+            provide: SkyMediaQueryService,
+            useClass: SkyResizeObserverMediaQueryService,
+        },
+    ], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n  Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n  https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-full-page': modalFullPage,\n      'sky-modal-small': isSmallSize,\n      'sky-modal-medium': isMediumSize,\n      'sky-modal-large': isLargeSize,\n      'sky-modal-tiled': isTiledBody\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        [attr.id]=\"modalHeaderId\"\n        [ngClass]=\"{\n          'sky-section-heading': modalFullPage\n        }\"\n        #headerContent\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"modalHeaderId\"\n      [attr.id]=\"modalContentId\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, decorators: [{
             type: Component,
             args: [{
@@ -722,10 +736,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: './modal.component.html',
                     styleUrls: ['./modal.component.scss'],
                     animations: [skyAnimationModalState],
-                    providers: [SkyModalComponentAdapterService, SkyDockService],
+                    providers: [
+                        SkyModalComponentAdapterService,
+                        SkyDockService,
+                        {
+                            provide: SkyMediaQueryService,
+                            useClass: SkyResizeObserverMediaQueryService,
+                        },
+                    ],
                 }]
         }], 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.SkyMediaQueryService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
                 }] }]; }, propDecorators: { wrapperClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -795,6 +820,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * Closes the modal instance using the `closeModal` method.
+ */
 class SkyModalBeforeCloseHandler {
     constructor(closeModal, closeArgs) {
         this.closeModal = closeModal;
@@ -802,6 +830,10 @@ class SkyModalBeforeCloseHandler {
     }
 }
 
+/**
+ * Contains an object with the data passed from users when
+ * a modal is closed and the reason that the modal was closed.
+ */
 class SkyModalCloseArgs {
 }
 
@@ -831,7 +863,7 @@ class SkyModalInstance {
      * 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`.
+     * Common examples include `"cancel"`, `"close"`, and `"save"`.
      */
     get closed() {
         return this._closed;
@@ -849,7 +881,7 @@ class SkyModalInstance {
      * @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 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) {
@@ -859,7 +891,7 @@ class SkyModalInstance {
         this.closeModal(reason, result, ignoreBeforeClose);
     }
     /**
-     * Closes the modal instance with `reason=cancel`.
+     * 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`.
@@ -868,7 +900,7 @@ class SkyModalInstance {
         this.closeModal('cancel', result);
     }
     /**
-     * Closes the modal instance with `reason=save`.
+     * 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`.
@@ -1049,8 +1081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 /**
- * A service that lauches modals. For information about how to test modals in SKY UX, see
- * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
+ * A service that launches modals. For information about how to test modals in SKY UX, see
+ * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).
  * @dynamic
  */
 class SkyModalService {