@skyux/modals 5.9.3 → 5.9.6

package/bundles/skyux-modals.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/theme'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('rxjs/operators'), require('@skyux/core'), require('rxjs'), require('@angular/animations')) :
-    typeof define === 'function' && define.amd ? define('@skyux/modals', ['exports', '@angular/core', '@angular/common', '@skyux/theme', '@angular/router', '@skyux/indicators', '@skyux/i18n', 'rxjs/operators', '@skyux/core', 'rxjs', '@angular/animations'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.modals = {}), global.ng.core, global.ng.common, global.i1, global.ng.router, global.i5, global.i3, global.rxjs.operators, global.i3$1, global.rxjs, global.ng.animations));
-})(this, (function (exports, i0, i6, i1, i2, i5, i3, operators, i3$1, rxjs, animations) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/theme'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('@skyux/core'), require('rxjs/operators'), require('rxjs'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@skyux/modals', ['exports', '@angular/core', '@angular/common', '@skyux/theme', '@angular/router', '@skyux/indicators', '@skyux/i18n', '@skyux/core', 'rxjs/operators', 'rxjs', '@angular/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.modals = {}), global.ng.core, global.ng.common, global.i2, global.ng.router, global.i5, global.i3, global.i3$1, global.rxjs.operators, global.rxjs, global.ng.animations));
+})(this, (function (exports, i0, i6, i2, i2$1, i5, i3, i3$1, operators, rxjs, animations) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,8 +24,8 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
@@ -171,7 +171,7 @@
         return SkyModalHeaderComponent;
     }());
     SkyModalHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyModalHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0__namespace, 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__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+    SkyModalHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0__namespace, 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__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -358,6 +358,10 @@
                 provide: SkyModalConfiguration,
                 useValue: params,
             });
+            params.providers.push({
+                provide: i3$1.SkyMediaQueryService,
+                useExisting: i3$1.SkyResizeObserverMediaQueryService,
+            });
             adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
             adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
             var providers = params.providers || /* istanbul ignore next */ [];
@@ -386,7 +390,7 @@
             });
             this.router.events.pipe(operators.takeWhile(function () { return isOpen; })).subscribe(function (event) {
                 /* istanbul ignore else */
-                if (event instanceof i2.NavigationStart) {
+                if (event instanceof i2$1.NavigationStart) {
                     modalInstance.close();
                 }
             });
@@ -399,7 +403,7 @@
         };
         return SkyModalHostComponent;
     }());
-    SkyModalHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0__namespace.Injector }, { token: i2__namespace.Router }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyModalHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0__namespace.Injector }, { token: i2__namespace$1.Router }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     SkyModalHostComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, 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__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalHostComponent, decorators: [{
                 type: i0.Component,
@@ -409,7 +413,7 @@
                         styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"],
                         viewProviders: [SkyModalAdapterService],
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0__namespace.Injector }, { type: i2__namespace.Router }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { target: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0__namespace.Injector }, { type: i2__namespace$1.Router }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { target: [{
                     type: i0.ViewChild,
                     args: ['target', {
                             read: i0.ViewContainerRef,
@@ -423,11 +427,11 @@
      * @internal
      */
     var SkyModalScrollShadowDirective = /** @class */ (function () {
-        function SkyModalScrollShadowDirective(elRef, themeSvc, mutationObserverSvc, ngZone) {
+        function SkyModalScrollShadowDirective(elRef, mutationObserverSvc, ngZone, themeSvc) {
             this.elRef = elRef;
-            this.themeSvc = themeSvc;
             this.mutationObserverSvc = mutationObserverSvc;
             this.ngZone = ngZone;
+            this.themeSvc = themeSvc;
             this.skyModalScrollShadow = new i0.EventEmitter();
             this.ngUnsubscribe = new rxjs.Subject();
         }
@@ -444,7 +448,7 @@
                     .pipe(operators.takeUntil(this.ngUnsubscribe))
                     .subscribe(function (themeSettings) {
                     _this.currentTheme = themeSettings.currentSettings.theme;
-                    if (_this.currentTheme === i1.SkyTheme.presets.modern) {
+                    if (_this.currentTheme === i2.SkyTheme.presets.modern) {
                         _this.initMutationObserver();
                     }
                     else {
@@ -489,7 +493,7 @@
             }
         };
         SkyModalScrollShadowDirective.prototype.checkForShadow = function () {
-            if (this.currentTheme === i1.SkyTheme.presets.modern) {
+            if (this.currentTheme === i2.SkyTheme.presets.modern) {
                 var el = this.elRef.nativeElement;
                 var topShadow = this.buildShadowStyle(el.scrollTop);
                 var bottomShadow = this.buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
@@ -515,7 +519,7 @@
         };
         return SkyModalScrollShadowDirective;
     }());
-    SkyModalScrollShadowDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace.SkyThemeService, optional: true }, { token: i3__namespace.MutationObserverService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyModalScrollShadowDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i3__namespace.MutationObserverService }, { token: i0__namespace.NgZone }, { token: i2__namespace.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     SkyModalScrollShadowDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, decorators: [{
                 type: i0.Directive,
@@ -523,9 +527,9 @@
                         selector: '[skyModalScrollShadow]',
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: i1__namespace.SkyThemeService, decorators: [{
+            return [{ type: i0__namespace.ElementRef }, { type: i3__namespace.MutationObserverService }, { type: i0__namespace.NgZone }, { type: i2__namespace.SkyThemeService, decorators: [{
                             type: i0.Optional
-                        }] }, { type: i3__namespace.MutationObserverService }, { type: i0__namespace.NgZone }];
+                        }] }];
         }, propDecorators: { skyModalScrollShadow: [{
                     type: i0.Output
                 }], windowResize: [{
@@ -837,15 +841,8 @@
         };
         return SkyModalComponent;
     }());
-    SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3__namespace.SkyCoreAdapterService }, { token: i3__namespace.SkyDockService, host: true }, { token: i3__namespace.SkyResizeObserverMediaQueryService, host: true, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyModalComponent.ɵcmp = i0__namespace.ɵɵ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,
-            i3$1.SkyDockService,
-            {
-                provide: i3$1.SkyMediaQueryService,
-                useClass: i3$1.SkyResizeObserverMediaQueryService,
-            },
-        ], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
+    SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3__namespace.SkyCoreAdapterService }, { token: i3__namespace.SkyDockService, host: true }, { token: i3__namespace.SkyResizeObserverMediaQueryService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyModalComponent.ɵcmp = i0__namespace.ɵɵ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, i3$1.SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -853,22 +850,13 @@
                         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"],
                         animations: [skyAnimationModalState],
-                        providers: [
-                            SkyModalComponentAdapterService,
-                            i3$1.SkyDockService,
-                            {
-                                provide: i3$1.SkyMediaQueryService,
-                                useClass: i3$1.SkyResizeObserverMediaQueryService,
-                            },
-                        ],
+                        providers: [SkyModalComponentAdapterService, i3$1.SkyDockService],
                     }]
             }], ctorParameters: function () {
             return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0__namespace.ElementRef }, { type: i3__namespace.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3__namespace.SkyCoreAdapterService }, { type: i3__namespace.SkyDockService, decorators: [{
                             type: i0.Host
                         }] }, { type: i3__namespace.SkyResizeObserverMediaQueryService, decorators: [{
                             type: i0.Optional
-                        }, {
-                            type: i0.Host
                         }] }];
         }, propDecorators: { wrapperClass: [{
                     type: i0.HostBinding,
@@ -900,19 +888,19 @@
             SkyModalHeaderComponent,
             SkyModalHostComponent,
             SkyModalScrollShadowDirective], imports: [i6.CommonModule,
-            i2.RouterModule,
+            i2$1.RouterModule,
             i5.SkyIconModule,
             SkyModalsResourcesModule,
-            i1.SkyThemeModule], exports: [SkyModalComponent,
+            i2.SkyThemeModule], exports: [SkyModalComponent,
             SkyModalContentComponent,
             SkyModalFooterComponent,
             SkyModalHeaderComponent] });
     SkyModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalModule, imports: [[
                 i6.CommonModule,
-                i2.RouterModule,
+                i2$1.RouterModule,
                 i5.SkyIconModule,
                 SkyModalsResourcesModule,
-                i1.SkyThemeModule,
+                i2.SkyThemeModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalModule, decorators: [{
                 type: i0.NgModule,
@@ -927,10 +915,10 @@
                         ],
                         imports: [
                             i6.CommonModule,
-                            i2.RouterModule,
+                            i2$1.RouterModule,
                             i5.SkyIconModule,
                             SkyModalsResourcesModule,
-                            i1.SkyThemeModule,
+                            i2.SkyThemeModule,
                         ],
                         exports: [
                             SkyModalComponent,
@@ -1187,7 +1175,7 @@
         return SkyConfirmComponent;
     }());
     SkyConfirmComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3__namespace$1.SkyLibResourcesService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    SkyConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1210,12 +1198,12 @@
     SkyConfirmModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [i6.CommonModule,
             SkyModalModule,
             SkyModalsResourcesModule,
-            i1.SkyThemeModule], exports: [SkyConfirmComponent] });
+            i2.SkyThemeModule], exports: [SkyConfirmComponent] });
     SkyConfirmModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmModule, imports: [[
                 i6.CommonModule,
                 SkyModalModule,
                 SkyModalsResourcesModule,
-                i1.SkyThemeModule,
+                i2.SkyThemeModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyConfirmModule, decorators: [{
                 type: i0.NgModule,
@@ -1225,7 +1213,7 @@
                             i6.CommonModule,
                             SkyModalModule,
                             SkyModalsResourcesModule,
-                            i1.SkyThemeModule,
+                            i2.SkyThemeModule,
                         ],
                         exports: [SkyConfirmComponent],
                         entryComponents: [SkyConfirmComponent],

package/documentation.json

@@ -1644,7 +1644,7 @@
               "name": "Component"
             },
             "arguments": {
-              "obj": "{\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}"
+              "obj": "{\n  selector: 'sky-modal',\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss'],\n  animations: [skyAnimationModalState],\n  providers: [SkyModalComponentAdapterService, SkyDockService],\n}"
             }
           }
         ],
@@ -1658,7 +1658,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 124,
+                "line": 116,
                 "character": 2
               }
             ],
@@ -1785,16 +1785,6 @@
                           "name": "Optional"
                         },
                         "arguments": {}
-                      },
-                      {
-                        "name": "Host",
-                        "type": {
-                          "type": "reference",
-                          "qualifiedName": "HostDecorator",
-                          "package": "@angular/core",
-                          "name": "Host"
-                        },
-                        "arguments": {}
                       }
                     ],
                     "type": {
@@ -1822,7 +1812,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 113,
+                "line": 105,
                 "character": 9
               }
             ],
@@ -1843,7 +1833,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 116,
+                "line": 108,
                 "character": 9
               }
             ],
@@ -1864,7 +1854,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 111,
+                "line": 103,
                 "character": 9
               }
             ],
@@ -1885,7 +1875,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 119,
+                "line": 111,
                 "character": 9
               }
             ],
@@ -1905,7 +1895,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 99,
+                "line": 91,
                 "character": 13
               }
             ],
@@ -1934,7 +1924,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 103,
+                "line": 95,
                 "character": 13
               }
             ],
@@ -1963,7 +1953,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 107,
+                "line": 99,
                 "character": 13
               }
             ],
@@ -1992,7 +1982,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 91,
+                "line": 83,
                 "character": 13
               }
             ],
@@ -2021,7 +2011,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 87,
+                "line": 79,
                 "character": 13
               }
             ],
@@ -2050,7 +2040,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 83,
+                "line": 75,
                 "character": 13
               }
             ],
@@ -2079,7 +2069,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 95,
+                "line": 87,
                 "character": 13
               }
             ],
@@ -2108,7 +2098,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 79,
+                "line": 71,
                 "character": 13
               }
             ],
@@ -2137,7 +2127,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 75,
+                "line": 67,
                 "character": 13
               }
             ],
@@ -2180,7 +2170,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 52,
+                "line": 44,
                 "character": 13
               }
             ],
@@ -2209,7 +2199,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 228,
+                "line": 219,
                 "character": 9
               }
             ],
@@ -2238,7 +2228,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 224,
+                "line": 215,
                 "character": 9
               }
             ],
@@ -2267,7 +2257,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 195,
+                "line": 186,
                 "character": 9
               }
             ],
@@ -2304,7 +2294,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 217,
+                "line": 208,
                 "character": 9
               }
             ],
@@ -2356,7 +2346,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 154,
+                "line": 145,
                 "character": 9
               }
             ],
@@ -2415,7 +2405,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 138,
+                "line": 129,
                 "character": 9
               }
             ],
@@ -2459,7 +2449,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 236,
+                "line": 227,
                 "character": 9
               }
             ],
@@ -2501,7 +2491,7 @@
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-                "line": 232,
+                "line": 223,
                 "character": 9
               }
             ],
@@ -2572,7 +2562,7 @@
         "sources": [
           {
             "fileName": "projects/modals/src/modules/modal/modal.component.ts",
-            "line": 50,
+            "line": 42,
             "character": 13
           }
         ],
@@ -3215,7 +3205,7 @@
     {
       "fileName": "confirm-demo.component.html",
       "filePath": "/projects/modals/documentation/code-examples/confirm/confirm-demo.component.html",
-      "rawContents": "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"openCustomConfirm()\"\n>\n  Custom confirm\n</button>\n\n<p *ngIf=\"selectedAction && selectedText\">\n  You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n    selectedAction\n  }}.\"\n</p>\n<p *ngIf=\"selectedAction && !selectedText\">\n  You selected the \"{{ selectedAction }}\" action.\n</p>\n"
+      "rawContents": "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openCustomConfirm()\"\n>\n  Custom confirm\n</button>\n\n<p *ngIf=\"selectedAction && selectedText\">\n  You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n    selectedAction\n  }}.\"\n</p>\n<p *ngIf=\"selectedAction && !selectedText\">\n  You selected the \"{{ selectedAction }}\" action.\n</p>\n"
     },
     {
       "fileName": "confirm-demo.component.ts",
@@ -3230,7 +3220,7 @@
     {
       "fileName": "modal-demo-modal.component.html",
       "filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-modal.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header> Modal title </sky-modal-header>\n  <sky-modal-content>\n    <sky-input-box>\n      <label class=\"sky-control-label\" [for]=\"myInput.id\">\n        An input inside a modal\n      </label>\n      <input class=\"sky-form-control\" type=\"text\" skyId #myInput=\"skyId\" />\n    </sky-input-box>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-compact\"\n      type=\"button\"\n      (click)=\"instance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.close()\"\n    >\n      Close\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Modal title </sky-modal-header>\n  <sky-modal-content>\n    <sky-input-box>\n      <label class=\"sky-control-label\" [for]=\"myInput.id\">\n        An input inside a modal\n      </label>\n      <input class=\"sky-form-control\" type=\"text\" skyId #myInput=\"skyId\" />\n    </sky-input-box>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n      type=\"button\"\n      (click)=\"instance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.close()\"\n    >\n      Close\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
       "fileName": "modal-demo-modal.component.ts",

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

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, ComponentFactoryResolver, Injector, ViewChild, ViewContainerRef, } from '@angular/core';
 import { NavigationStart, Router } from '@angular/router';
+import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
 import { takeWhile } from 'rxjs/operators';
 import { SkyModalAdapterService } from './modal-adapter.service';
 import { SkyModalConfiguration } from './modal-configuration';
@@ -41,6 +42,10 @@ export 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 */ [];

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

@@ -1 +1 @@
-{"version":3,"file":"modal-host.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-host.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-host.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  ComponentFactoryResolver,\n  Injector,\n  ViewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { NavigationStart, Router } from '@angular/router';\n\nimport { takeWhile } from 'rxjs/operators';\n\nimport { SkyModalAdapterService } from './modal-adapter.service';\nimport { SkyModalConfiguration } from './modal-configuration';\nimport { SkyModalHostService } from './modal-host.service';\nimport { SkyModalInstance } from './modal-instance';\nimport { SkyModalConfigurationInterface } from './modal.interface';\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-modal-host',\n  templateUrl: './modal-host.component.html',\n  styleUrls: ['./modal-host.component.scss'],\n  viewProviders: [SkyModalAdapterService],\n})\nexport class SkyModalHostComponent {\n  public get modalOpen() {\n    return SkyModalHostService.openModalCount > 0;\n  }\n\n  public get backdropZIndex() {\n    return SkyModalHostService.backdropZIndex;\n  }\n\n  /**\n   * Use `any` for backwards-compatibility with Angular 4-7.\n   * See: https://github.com/angular/angular/issues/30654\n   * TODO: Remove the `any` in a breaking change.\n   * @internal\n   */\n  @ViewChild('target', {\n    read: ViewContainerRef,\n    static: true,\n  } as any)\n  public target: ViewContainerRef;\n\n  constructor(\n    private resolver: ComponentFactoryResolver,\n    private adapter: SkyModalAdapterService,\n    private injector: Injector,\n    private router: Router,\n    private changeDetector: ChangeDetectorRef\n  ) {}\n\n  public open(\n    modalInstance: SkyModalInstance,\n    component: any,\n    config?: SkyModalConfigurationInterface\n  ) {\n    const params: SkyModalConfigurationInterface = Object.assign({}, config);\n    const factory = this.resolver.resolveComponentFactory(component);\n\n    const hostService = new SkyModalHostService();\n    hostService.fullPage = !!params.fullPage;\n\n    const adapter = this.adapter;\n    const modalOpener: HTMLElement = adapter.getModalOpener();\n\n    let isOpen = true;\n\n    params.providers.push({\n      provide: SkyModalHostService,\n      useValue: hostService,\n    });\n    params.providers.push({\n      provide: SkyModalConfiguration,\n      useValue: params,\n    });\n\n    adapter.setPageScroll(SkyModalHostService.openModalCount > 0);\n    adapter.toggleFullPageModalClass(\n      SkyModalHostService.fullPageModalCount > 0\n    );\n\n    const providers = params.providers || /* istanbul ignore next */ [];\n    const injector = Injector.create({\n      providers,\n      parent: this.injector,\n    });\n\n    const modalComponentRef = this.target.createComponent(\n      factory,\n      undefined,\n      injector\n    );\n\n    modalInstance.componentInstance = modalComponentRef.instance;\n\n    function closeModal() {\n      hostService.destroy();\n      adapter.setPageScroll(SkyModalHostService.openModalCount > 0);\n      adapter.toggleFullPageModalClass(\n        SkyModalHostService.fullPageModalCount > 0\n      );\n      /* istanbul ignore else */\n      /* sanity check */\n      if (modalOpener && modalOpener.focus) {\n        modalOpener.focus();\n      }\n      modalComponentRef.destroy();\n    }\n\n    hostService.openHelp.subscribe((helpKey?: string) => {\n      modalInstance.openHelp(helpKey);\n    });\n\n    hostService.close.subscribe(() => {\n      modalInstance.close();\n    });\n\n    this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {\n      /* istanbul ignore else */\n      if (event instanceof NavigationStart) {\n        modalInstance.close();\n      }\n    });\n\n    modalInstance.closed.subscribe(() => {\n      isOpen = false;\n      closeModal();\n    });\n\n    // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit\n    this.changeDetector.detectChanges();\n  }\n}\n","<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n"]}
+{"version":3,"file":"modal-host.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-host.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-host.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ApplicationRef,\n  ChangeDetectorRef,\n  Component,\n  ComponentFactoryResolver,\n  Injector,\n  Provider,\n  ViewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { NavigationStart, Router } from '@angular/router';\nimport {\n  SkyMediaQueryService,\n  SkyResizeObserverMediaQueryService,\n  SkyResizeObserverService,\n} from '@skyux/core';\n\nimport { takeWhile } from 'rxjs/operators';\n\nimport { SkyModalAdapterService } from './modal-adapter.service';\nimport { SkyModalConfiguration } from './modal-configuration';\nimport { SkyModalHostService } from './modal-host.service';\nimport { SkyModalInstance } from './modal-instance';\nimport { SkyModalConfigurationInterface } from './modal.interface';\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-modal-host',\n  templateUrl: './modal-host.component.html',\n  styleUrls: ['./modal-host.component.scss'],\n  viewProviders: [SkyModalAdapterService],\n})\nexport class SkyModalHostComponent {\n  public get modalOpen() {\n    return SkyModalHostService.openModalCount > 0;\n  }\n\n  public get backdropZIndex() {\n    return SkyModalHostService.backdropZIndex;\n  }\n\n  /**\n   * Use `any` for backwards-compatibility with Angular 4-7.\n   * See: https://github.com/angular/angular/issues/30654\n   * TODO: Remove the `any` in a breaking change.\n   * @internal\n   */\n  @ViewChild('target', {\n    read: ViewContainerRef,\n    static: true,\n  } as any)\n  public target: ViewContainerRef;\n\n  constructor(\n    private resolver: ComponentFactoryResolver,\n    private adapter: SkyModalAdapterService,\n    private injector: Injector,\n    private router: Router,\n    private changeDetector: ChangeDetectorRef\n  ) {}\n\n  public open(\n    modalInstance: SkyModalInstance,\n    component: any,\n    config?: SkyModalConfigurationInterface\n  ) {\n    const params: SkyModalConfigurationInterface = Object.assign({}, config);\n    const factory = this.resolver.resolveComponentFactory(component);\n\n    const hostService = new SkyModalHostService();\n    hostService.fullPage = !!params.fullPage;\n\n    const adapter = this.adapter;\n    const modalOpener: HTMLElement = adapter.getModalOpener();\n\n    let isOpen = true;\n\n    params.providers.push({\n      provide: SkyModalHostService,\n      useValue: hostService,\n    });\n    params.providers.push({\n      provide: SkyModalConfiguration,\n      useValue: params,\n    });\n    params.providers.push({\n      provide: SkyMediaQueryService,\n      useExisting: SkyResizeObserverMediaQueryService,\n    });\n\n    adapter.setPageScroll(SkyModalHostService.openModalCount > 0);\n    adapter.toggleFullPageModalClass(\n      SkyModalHostService.fullPageModalCount > 0\n    );\n\n    const providers = params.providers || /* istanbul ignore next */ [];\n    const injector = Injector.create({\n      providers,\n      parent: this.injector,\n    });\n\n    const modalComponentRef = this.target.createComponent(\n      factory,\n      undefined,\n      injector\n    );\n\n    modalInstance.componentInstance = modalComponentRef.instance;\n\n    function closeModal() {\n      hostService.destroy();\n      adapter.setPageScroll(SkyModalHostService.openModalCount > 0);\n      adapter.toggleFullPageModalClass(\n        SkyModalHostService.fullPageModalCount > 0\n      );\n      /* istanbul ignore else */\n      /* sanity check */\n      if (modalOpener && modalOpener.focus) {\n        modalOpener.focus();\n      }\n      modalComponentRef.destroy();\n    }\n\n    hostService.openHelp.subscribe((helpKey?: string) => {\n      modalInstance.openHelp(helpKey);\n    });\n\n    hostService.close.subscribe(() => {\n      modalInstance.close();\n    });\n\n    this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {\n      /* istanbul ignore else */\n      if (event instanceof NavigationStart) {\n        modalInstance.close();\n      }\n    });\n\n    modalInstance.closed.subscribe(() => {\n      isOpen = false;\n      closeModal();\n    });\n\n    // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit\n    this.changeDetector.detectChanges();\n  }\n}\n","<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n"]}