@skyux/modals 5.9.3 → 5.9.6

package/esm2015/lib/modules/modal/modal-scroll-shadow.directive.js

@@ -4,19 +4,19 @@ import { SkyTheme, SkyThemeService } from '@skyux/theme';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
-import * as i1 from "@skyux/theme";
-import * as i2 from "@skyux/core";
+import * as i1 from "@skyux/core";
+import * as i2 from "@skyux/theme";
 /**
  * Raises an event when the box shadow for the modal header or footer should be adjusted
  * based on the scroll position of the host element.
  * @internal
  */
 export class SkyModalScrollShadowDirective {
-    constructor(elRef, themeSvc, mutationObserverSvc, ngZone) {
+    constructor(elRef, mutationObserverSvc, ngZone, themeSvc) {
         this.elRef = elRef;
-        this.themeSvc = themeSvc;
         this.mutationObserverSvc = mutationObserverSvc;
         this.ngZone = ngZone;
+        this.themeSvc = themeSvc;
         this.skyModalScrollShadow = new EventEmitter();
         this.ngUnsubscribe = new Subject();
     }
@@ -101,16 +101,16 @@ export class SkyModalScrollShadowDirective {
         }
     }
 }
-SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i2.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.MutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyModalScrollShadow]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SkyThemeService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.MutationObserverService }, { type: i0.NgZone }, { type: i2.SkyThemeService, decorators: [{
                     type: Optional
-                }] }, { type: i2.MutationObserverService }, { type: i0.NgZone }]; }, propDecorators: { skyModalScrollShadow: [{
+                }] }]; }, propDecorators: { skyModalScrollShadow: [{
                 type: Output
             }], windowResize: [{
                 type: HostListener,

package/esm2015/lib/modules/modal/modal-scroll-shadow.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-scroll-shadow.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-scroll-shadow.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n} from '@angular/core';\nimport { MutationObserverService } from '@skyux/core';\nimport { SkyTheme, SkyThemeService } from '@skyux/theme';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyModalScrollShadowEventArgs } from './modal-scroll-shadow-event-args';\n\n/**\n * Raises an event when the box shadow for the modal header or footer should be adjusted\n * based on the scroll position of the host element.\n * @internal\n */\n@Directive({\n  selector: '[skyModalScrollShadow]',\n})\nexport class SkyModalScrollShadowDirective implements OnInit, OnDestroy {\n  @Output()\n  public skyModalScrollShadow = new EventEmitter<SkyModalScrollShadowEventArgs>();\n\n  private currentShadow: SkyModalScrollShadowEventArgs;\n\n  private currentTheme: SkyTheme;\n\n  private mutationObserver: MutationObserver;\n\n  private ngUnsubscribe = new Subject<any>();\n\n  constructor(\n    private elRef: ElementRef,\n    @Optional() private themeSvc: SkyThemeService,\n    private mutationObserverSvc: MutationObserverService,\n    private ngZone: NgZone\n  ) {}\n\n  @HostListener('window:resize')\n  public windowResize(): void {\n    this.checkForShadow();\n  }\n\n  @HostListener('scroll')\n  public scroll(): void {\n    this.checkForShadow();\n  }\n\n  public ngOnInit(): void {\n    if (this.themeSvc) {\n      this.themeSvc.settingsChange\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((themeSettings) => {\n          this.currentTheme = themeSettings.currentSettings.theme;\n\n          if (this.currentTheme === SkyTheme.presets.modern) {\n            this.initMutationObserver();\n          } else {\n            this.emitShadow({\n              bottomShadow: 'none',\n              topShadow: 'none',\n            });\n\n            this.destroyMutationObserver();\n          }\n        });\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n\n    this.destroyMutationObserver();\n  }\n\n  private initMutationObserver(): void {\n    if (!this.mutationObserver) {\n      const el = this.elRef.nativeElement;\n\n      // MutationObserver is patched by Zone.js and therefore becomes part of the\n      // Angular change detection cycle, but this can lead to infinite loops in some\n      // secnarios. This will keep MutationObserver from triggering change detection.\n      this.ngZone.runOutsideAngular(() => {\n        this.mutationObserver = this.mutationObserverSvc.create(() => {\n          this.checkForShadow();\n        });\n\n        this.mutationObserver.observe(el, {\n          attributes: true,\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      });\n    }\n  }\n\n  private destroyMutationObserver(): void {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = undefined;\n    }\n  }\n\n  private checkForShadow(): void {\n    if (this.currentTheme === SkyTheme.presets.modern) {\n      const el = this.elRef.nativeElement;\n\n      const topShadow = this.buildShadowStyle(el.scrollTop);\n\n      const bottomShadow = this.buildShadowStyle(\n        el.scrollHeight - el.scrollTop - el.clientHeight\n      );\n\n      this.emitShadow({\n        bottomShadow,\n        topShadow,\n      });\n    }\n  }\n\n  private buildShadowStyle(pixelsFromEnd: number): string {\n    // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom\n    // of the scrollable element, with a max opacity of 0.3.\n    const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;\n\n    return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';\n  }\n\n  private emitShadow(shadow: SkyModalScrollShadowEventArgs): void {\n    if (\n      !this.currentShadow ||\n      this.currentShadow.bottomShadow !== shadow.bottomShadow ||\n      this.currentShadow.topShadow !== shadow.topShadow\n    ) {\n      this.skyModalScrollShadow.emit(shadow);\n      this.currentShadow = shadow;\n    }\n  }\n}\n"]}
+{"version":3,"file":"modal-scroll-shadow.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-scroll-shadow.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n} from '@angular/core';\nimport { MutationObserverService } from '@skyux/core';\nimport { SkyTheme, SkyThemeService } from '@skyux/theme';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyModalScrollShadowEventArgs } from './modal-scroll-shadow-event-args';\n\n/**\n * Raises an event when the box shadow for the modal header or footer should be adjusted\n * based on the scroll position of the host element.\n * @internal\n */\n@Directive({\n  selector: '[skyModalScrollShadow]',\n})\nexport class SkyModalScrollShadowDirective implements OnInit, OnDestroy {\n  @Output()\n  public skyModalScrollShadow = new EventEmitter<SkyModalScrollShadowEventArgs>();\n\n  private currentShadow: SkyModalScrollShadowEventArgs;\n\n  private currentTheme: SkyTheme;\n\n  private mutationObserver: MutationObserver;\n\n  private ngUnsubscribe = new Subject<any>();\n\n  constructor(\n    private elRef: ElementRef,\n    private mutationObserverSvc: MutationObserverService,\n    private ngZone: NgZone,\n    @Optional() private themeSvc?: SkyThemeService\n  ) {}\n\n  @HostListener('window:resize')\n  public windowResize(): void {\n    this.checkForShadow();\n  }\n\n  @HostListener('scroll')\n  public scroll(): void {\n    this.checkForShadow();\n  }\n\n  public ngOnInit(): void {\n    if (this.themeSvc) {\n      this.themeSvc.settingsChange\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((themeSettings) => {\n          this.currentTheme = themeSettings.currentSettings.theme;\n\n          if (this.currentTheme === SkyTheme.presets.modern) {\n            this.initMutationObserver();\n          } else {\n            this.emitShadow({\n              bottomShadow: 'none',\n              topShadow: 'none',\n            });\n\n            this.destroyMutationObserver();\n          }\n        });\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n\n    this.destroyMutationObserver();\n  }\n\n  private initMutationObserver(): void {\n    if (!this.mutationObserver) {\n      const el = this.elRef.nativeElement;\n\n      // MutationObserver is patched by Zone.js and therefore becomes part of the\n      // Angular change detection cycle, but this can lead to infinite loops in some\n      // secnarios. This will keep MutationObserver from triggering change detection.\n      this.ngZone.runOutsideAngular(() => {\n        this.mutationObserver = this.mutationObserverSvc.create(() => {\n          this.checkForShadow();\n        });\n\n        this.mutationObserver.observe(el, {\n          attributes: true,\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      });\n    }\n  }\n\n  private destroyMutationObserver(): void {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = undefined;\n    }\n  }\n\n  private checkForShadow(): void {\n    if (this.currentTheme === SkyTheme.presets.modern) {\n      const el = this.elRef.nativeElement;\n\n      const topShadow = this.buildShadowStyle(el.scrollTop);\n\n      const bottomShadow = this.buildShadowStyle(\n        el.scrollHeight - el.scrollTop - el.clientHeight\n      );\n\n      this.emitShadow({\n        bottomShadow,\n        topShadow,\n      });\n    }\n  }\n\n  private buildShadowStyle(pixelsFromEnd: number): string {\n    // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom\n    // of the scrollable element, with a max opacity of 0.3.\n    const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;\n\n    return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';\n  }\n\n  private emitShadow(shadow: SkyModalScrollShadowEventArgs): void {\n    if (\n      !this.currentShadow ||\n      this.currentShadow.bottomShadow !== shadow.bottomShadow ||\n      this.currentShadow.topShadow !== shadow.topShadow\n    ) {\n      this.skyModalScrollShadow.emit(shadow);\n      this.currentShadow = shadow;\n    }\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef, Host, HostBinding, HostListener, Input, Optional, ViewChild, } from '@angular/core';
-import { SkyAppWindowRef, SkyCoreAdapterService, SkyDockLocation, SkyDockService, SkyMediaQueryService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
+import { SkyAppWindowRef, SkyCoreAdapterService, SkyDockLocation, SkyDockService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
 import { SkyModalComponentAdapterService } from './modal-component-adapter.service';
 import { SkyModalConfiguration } from './modal-configuration';
 import { SkyModalHostService } from './modal-host.service';
@@ -162,15 +162,8 @@ 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 }, { token: i3.SkyResizeObserverMediaQueryService, 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] });
+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.SkyResizeObserverMediaQueryService, 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], 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: [{
@@ -178,21 +171,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: './modal.component.html',
                     styleUrls: ['./modal.component.scss'],
                     animations: [skyAnimationModalState],
-                    providers: [
-                        SkyModalComponentAdapterService,
-                        SkyDockService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useClass: SkyResizeObserverMediaQueryService,
-                        },
-                    ],
+                    providers: [SkyModalComponentAdapterService, SkyDockService],
                 }]
         }], 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.SkyResizeObserverMediaQueryService, 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  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()\n    @Host()\n    private mediaQueryService?: SkyResizeObserverMediaQueryService\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    /* istanbul ignore next */\n    if (this.mediaQueryService) {\n      this.mediaQueryService.observe(this.modalContentWrapperElement);\n    }\n  }\n\n  public ngOnDestroy(): void {\n    /* istanbul ignore next */\n    if (this.mediaQueryService) {\n      this.mediaQueryService.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"]}
+{"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  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: [SkyModalComponentAdapterService, SkyDockService],\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()\n    private mediaQueryService?: SkyResizeObserverMediaQueryService\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    /* istanbul ignore next */\n    if (this.mediaQueryService) {\n      this.mediaQueryService.observe(this.modalContentWrapperElement);\n    }\n  }\n\n  public ngOnDestroy(): void {\n    /* istanbul ignore next */\n    if (this.mediaQueryService) {\n      this.mediaQueryService.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/fesm2015/skyux-modals.js

@@ -2,17 +2,17 @@ import * as i0 from '@angular/core';
 import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Injector, ViewContainerRef, ViewChild, Directive, Optional, Output, HostListener, ElementRef, Host, HostBinding, Input } from '@angular/core';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@skyux/theme';
+import * as i2 from '@skyux/theme';
 import { SkyTheme, SkyThemeModule } from '@skyux/theme';
-import * as i2 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { NavigationStart, RouterModule } from '@angular/router';
 import * as i5 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
 import * as i3$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { takeWhile, takeUntil } from 'rxjs/operators';
 import * as i3 from '@skyux/core';
-import { SkyDockLocation, SkyDockService, SkyMediaQueryService, SkyResizeObserverMediaQueryService } from '@skyux/core';
+import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SkyDockLocation, SkyDockService } from '@skyux/core';
+import { takeWhile, takeUntil } from 'rxjs/operators';
 import { Subject, BehaviorSubject, zip } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
@@ -141,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SkyModalHeaderComponent {
 }
 SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n  class=\"sky-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n  class=\"sky-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -297,6 +297,10 @@ class SkyModalHostComponent {
             provide: SkyModalConfiguration,
             useValue: params,
         });
+        params.providers.push({
+            provide: SkyMediaQueryService,
+            useExisting: SkyResizeObserverMediaQueryService,
+        });
         adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
         adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
         const providers = params.providers || /* istanbul ignore next */ [];
@@ -337,7 +341,7 @@ class SkyModalHostComponent {
         this.changeDetector.detectChanges();
     }
 }
-SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostComponent, decorators: [{
             type: Component,
@@ -347,7 +351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     styleUrls: ['./modal-host.component.scss'],
                     viewProviders: [SkyModalAdapterService],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2$1.Router }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', {
                         read: ViewContainerRef,
@@ -361,11 +365,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @internal
  */
 class SkyModalScrollShadowDirective {
-    constructor(elRef, themeSvc, mutationObserverSvc, ngZone) {
+    constructor(elRef, mutationObserverSvc, ngZone, themeSvc) {
         this.elRef = elRef;
-        this.themeSvc = themeSvc;
         this.mutationObserverSvc = mutationObserverSvc;
         this.ngZone = ngZone;
+        this.themeSvc = themeSvc;
         this.skyModalScrollShadow = new EventEmitter();
         this.ngUnsubscribe = new Subject();
     }
@@ -450,16 +454,16 @@ class SkyModalScrollShadowDirective {
         }
     }
 }
-SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i3.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.MutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyModalScrollShadow]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SkyThemeService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.MutationObserverService }, { type: i0.NgZone }, { type: i2.SkyThemeService, decorators: [{
                     type: Optional
-                }] }, { type: i3.MutationObserverService }, { type: i0.NgZone }]; }, propDecorators: { skyModalScrollShadow: [{
+                }] }]; }, propDecorators: { skyModalScrollShadow: [{
                 type: Output
             }], windowResize: [{
                 type: HostListener,
@@ -719,15 +723,8 @@ 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 }, { token: i3.SkyResizeObserverMediaQueryService, 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] });
+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.SkyResizeObserverMediaQueryService, 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], 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: [{
@@ -735,21 +732,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: './modal.component.html',
                     styleUrls: ['./modal.component.scss'],
                     animations: [skyAnimationModalState],
-                    providers: [
-                        SkyModalComponentAdapterService,
-                        SkyDockService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useClass: SkyResizeObserverMediaQueryService,
-                        },
-                    ],
+                    providers: [SkyModalComponentAdapterService, SkyDockService],
                 }]
         }], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
                     type: Host
                 }] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
                     type: Optional
-                }, {
-                    type: Host
                 }] }]; }, propDecorators: { wrapperClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -1040,7 +1028,7 @@ class SkyConfirmComponent {
     }
 }
 SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n  <sky-modal ariaRole=\"alertdialog\">\n    <sky-modal-content class=\"sky-confirm-content\">\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n      >\n        {{ message }}\n      </div>\n\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n      >\n        {{ body }}\n      </div>\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"['sky-btn-' + button.styleType]\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n  <sky-modal ariaRole=\"alertdialog\">\n    <sky-modal-content class=\"sky-confirm-content\">\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n      >\n        {{ message }}\n      </div>\n\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n      >\n        {{ body }}\n      </div>\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"['sky-btn-' + button.styleType]\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyConfirmComponent, decorators: [{
             type: Component,
             args: [{