@skyux/modals 8.0.0-alpha.2 → 8.0.0-alpha.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/documentation.json +1162 -388
  2. package/esm2020/lib/modules/confirm/confirm.component.mjs +5 -5
  3. package/esm2020/lib/modules/confirm/confirm.module.mjs +4 -4
  4. package/esm2020/lib/modules/confirm/confirm.service.mjs +3 -3
  5. package/esm2020/lib/modules/modal/modal-adapter.service.mjs +3 -3
  6. package/esm2020/lib/modules/modal/modal-before-close-handler.mjs +3 -3
  7. package/esm2020/lib/modules/modal/modal-component-adapter.service.mjs +3 -3
  8. package/esm2020/lib/modules/modal/modal-configuration.mjs +3 -3
  9. package/esm2020/lib/modules/modal/modal-content.component.mjs +3 -3
  10. package/esm2020/lib/modules/modal/modal-footer.component.mjs +6 -6
  11. package/esm2020/lib/modules/modal/modal-header.component.mjs +5 -5
  12. package/esm2020/lib/modules/modal/modal-host-context.mjs +3 -3
  13. package/esm2020/lib/modules/modal/modal-host.component.mjs +10 -10
  14. package/esm2020/lib/modules/modal/modal-host.service.mjs +12 -12
  15. package/esm2020/lib/modules/modal/modal-scroll-shadow.directive.mjs +3 -3
  16. package/esm2020/lib/modules/modal/modal.component.mjs +51 -33
  17. package/esm2020/lib/modules/modal/modal.module.mjs +4 -4
  18. package/esm2020/lib/modules/modal/modal.service.mjs +3 -3
  19. package/esm2020/lib/modules/shared/sky-modals-resources.module.mjs +4 -4
  20. package/esm2020/testing/modal/modal-harness-filters.mjs +2 -0
  21. package/esm2020/testing/modal/modal-harness.mjs +73 -0
  22. package/esm2020/testing/public-api.mjs +3 -1
  23. package/fesm2015/skyux-modals-testing.mjs +84 -1
  24. package/fesm2015/skyux-modals-testing.mjs.map +1 -1
  25. package/fesm2015/skyux-modals.mjs +118 -102
  26. package/fesm2015/skyux-modals.mjs.map +1 -1
  27. package/fesm2020/skyux-modals-testing.mjs +72 -1
  28. package/fesm2020/skyux-modals-testing.mjs.map +1 -1
  29. package/fesm2020/skyux-modals.mjs +118 -102
  30. package/fesm2020/skyux-modals.mjs.map +1 -1
  31. package/lib/modules/confirm/confirm-button-action.d.ts +1 -1
  32. package/lib/modules/confirm/confirm-button-style-type.d.ts +1 -1
  33. package/lib/modules/modal/modal-before-close-handler.d.ts +11 -2
  34. package/lib/modules/modal/modal.component.d.ts +4 -2
  35. package/package.json +10 -10
  36. package/testing/modal/modal-harness-filters.d.ts +6 -0
  37. package/testing/modal/modal-harness.d.ts +42 -0
  38. package/testing/public-api.d.ts +2 -0
@@ -1,9 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, Optional, ViewChild, Directive, Output, HostListener, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
2
+ import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, Optional, ViewChild, Directive, Output, HostListener, inject, ChangeDetectorRef, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
3
3
  import * as i4 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i3 from '@skyux/core';
6
- import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SKY_STACKING_CONTEXT, SkyDockLocation, SkyDockService, SkyIdModule, SkyTrimModule } from '@skyux/core';
6
+ import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SKY_STACKING_CONTEXT, SkyLiveAnnouncerService, SkyDockLocation, SkyDockService, SkyIdModule, SkyTrimModule } from '@skyux/core';
7
7
  import * as i2 from '@skyux/theme';
8
8
  import { SkyTheme, SkyThemeModule } from '@skyux/theme';
9
9
  import * as i3$1 from '@angular/router';
@@ -79,16 +79,16 @@ class SkyModalsResourcesProvider {
79
79
  */
80
80
  class SkyModalsResourcesModule {
81
81
  }
82
- SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
83
- SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
84
- SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalsResourcesModule, providers: [
82
+ SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
83
+ SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
84
+ SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalsResourcesModule, providers: [
85
85
  {
86
86
  provide: SKY_LIB_RESOURCES_PROVIDERS,
87
87
  useClass: SkyModalsResourcesProvider,
88
88
  multi: true,
89
89
  },
90
90
  ], imports: [SkyI18nModule] });
91
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
91
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
92
92
  type: NgModule,
93
93
  args: [{
94
94
  exports: [SkyI18nModule],
@@ -107,9 +107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
107
107
  */
108
108
  class SkyModalContentComponent {
109
109
  }
110
- SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
- SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None });
112
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalContentComponent, decorators: [{
110
+ SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
+ SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None });
112
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalContentComponent, decorators: [{
113
113
  type: Component,
114
114
  args: [{ selector: 'sky-modal-content', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"] }]
115
115
  }] });
@@ -119,11 +119,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
119
119
  */
120
120
  class SkyModalFooterComponent {
121
121
  }
122
- SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
123
- SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] });
124
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
122
+ SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
123
+ SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"], encapsulation: i0.ViewEncapsulation.None });
124
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
125
125
  type: Component,
126
- args: [{ selector: 'sky-modal-footer', template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
126
+ args: [{ selector: 'sky-modal-footer', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
127
127
  }] });
128
128
 
129
129
  /**
@@ -131,11 +131,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
131
131
  */
132
132
  class SkyModalHeaderComponent {
133
133
  }
134
- SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
135
- SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n skyTrim\n>\n <ng-content></ng-content>\n</h1>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h1{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ4, selector: "[skyTrim]" }] });
136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
134
+ SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
135
+ SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h2\n class=\"sky-font-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-heading-4': 'default',\n 'sky-font-display-3': 'modern'\n }\"\n skyTrim\n>\n <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ4, selector: "[skyTrim]" }] });
136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
137
137
  type: Component,
138
- args: [{ selector: 'sky-modal-header', template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n skyTrim\n>\n <ng-content></ng-content>\n</h1>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h1{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"] }]
138
+ args: [{ selector: 'sky-modal-header', template: "<h2\n class=\"sky-font-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-heading-4': 'default',\n 'sky-font-display-3': 'modern'\n }\"\n skyTrim\n>\n <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"] }]
139
139
  }] });
140
140
 
141
141
  var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_hostSiblingAriaHiddenCache, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
@@ -226,9 +226,9 @@ _SkyModalAdapterService_docRef = new WeakMap(), _SkyModalAdapterService_bodyEl =
226
226
  };
227
227
  SkyModalAdapterService.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page';
228
228
  SkyModalAdapterService.MODAL_BODY_CLASS = 'sky-modal-body-open';
229
- SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
230
- SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalAdapterService });
231
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalAdapterService, decorators: [{
229
+ SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
230
+ SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalAdapterService });
231
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalAdapterService, decorators: [{
232
232
  type: Injectable
233
233
  }], ctorParameters: function () { return [{ type: i3.SkyAppWindowRef }]; } });
234
234
 
@@ -240,9 +240,9 @@ class SkyModalConfiguration {
240
240
  this.size = 'medium';
241
241
  }
242
242
  }
243
- SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
244
- SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
245
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalConfiguration, decorators: [{
243
+ SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
244
+ SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
245
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalConfiguration, decorators: [{
246
246
  type: Injectable,
247
247
  args: [{
248
248
  providedIn: 'any',
@@ -257,14 +257,6 @@ const modalHosts = [];
257
257
  * @dynamic
258
258
  */
259
259
  class SkyModalHostService {
260
- constructor() {
261
- _SkyModalHostService_instances.add(this);
262
- this.close = new Subject();
263
- this.fullPage = false;
264
- this.openHelp = new Subject();
265
- this.zIndex = __classPrivateFieldGet(this, _SkyModalHostService_instances, "m", _SkyModalHostService_calculateZIndex).call(this);
266
- modalHosts.push(this);
267
- }
268
260
  static get openModalCount() {
269
261
  return modalHosts.length;
270
262
  }
@@ -278,6 +270,14 @@ class SkyModalHostService {
278
270
  static get topModal() {
279
271
  return modalHosts[modalHosts.length - 1];
280
272
  }
273
+ constructor() {
274
+ _SkyModalHostService_instances.add(this);
275
+ this.close = new Subject();
276
+ this.fullPage = false;
277
+ this.openHelp = new Subject();
278
+ this.zIndex = __classPrivateFieldGet(this, _SkyModalHostService_instances, "m", _SkyModalHostService_calculateZIndex).call(this);
279
+ modalHosts.push(this);
280
+ }
281
281
  getModalZIndex() {
282
282
  return this.zIndex;
283
283
  }
@@ -301,9 +301,9 @@ _SkyModalHostService_instances = new WeakSet(), _SkyModalHostService_calculateZI
301
301
  return currentMaxZIndex + 10;
302
302
  }
303
303
  };
304
- SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
305
- SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
306
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostService, decorators: [{
304
+ SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
305
+ SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
306
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostService, decorators: [{
307
307
  type: Injectable,
308
308
  args: [{
309
309
  providedIn: 'root',
@@ -320,9 +320,9 @@ class SkyModalHostContext {
320
320
  this.args = args;
321
321
  }
322
322
  }
323
- SkyModalHostContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable });
324
- SkyModalHostContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostContext });
325
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostContext, decorators: [{
323
+ SkyModalHostContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable });
324
+ SkyModalHostContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostContext });
325
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostContext, decorators: [{
326
326
  type: Injectable
327
327
  }], ctorParameters: function () {
328
328
  return [{ type: undefined, decorators: [{
@@ -336,6 +336,12 @@ var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModal
336
336
  * @internal
337
337
  */
338
338
  class SkyModalHostComponent {
339
+ get modalOpen() {
340
+ return SkyModalHostService.openModalCount > 0;
341
+ }
342
+ get backdropZIndex() {
343
+ return SkyModalHostService.backdropZIndex;
344
+ }
339
345
  constructor(resolver, adapter, injector, changeDetector, modalHostContext, elRef, router) {
340
346
  _SkyModalHostComponent_instances.add(this);
341
347
  _SkyModalHostComponent_resolver.set(this, void 0);
@@ -354,12 +360,6 @@ class SkyModalHostComponent {
354
360
  __classPrivateFieldSet(this, _SkyModalHostComponent_modalHostContext, modalHostContext, "f");
355
361
  __classPrivateFieldSet(this, _SkyModalHostComponent_elRef, elRef, "f");
356
362
  }
357
- get modalOpen() {
358
- return SkyModalHostService.openModalCount > 0;
359
- }
360
- get backdropZIndex() {
361
- return SkyModalHostService.backdropZIndex;
362
- }
363
363
  ngOnDestroy() {
364
364
  // Close all modal instances before disposing of the host container.
365
365
  __classPrivateFieldGet(this, _SkyModalHostComponent_instances, "m", _SkyModalHostComponent_closeAllModalInstances).call(this);
@@ -466,9 +466,9 @@ _SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter
466
466
  instance.close();
467
467
  }
468
468
  };
469
- SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }, { token: i3$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
470
- SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
471
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalHostComponent, decorators: [{
469
+ SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }, { token: i3$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
470
+ SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
471
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHostComponent, decorators: [{
472
472
  type: Component,
473
473
  args: [{ selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"] }]
474
474
  }], ctorParameters: function () {
@@ -583,9 +583,9 @@ _SkyModalScrollShadowDirective_currentShadow = new WeakMap(), _SkyModalScrollSha
583
583
  __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_currentShadow, shadow, "f");
584
584
  }
585
585
  };
586
- SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.SkyMutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
587
- SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
588
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
586
+ SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.SkyMutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
587
+ SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
588
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
589
589
  type: Directive,
590
590
  args: [{
591
591
  selector: '[skyModalScrollShadow]',
@@ -698,13 +698,13 @@ _SkyModalComponentAdapterService_coreAdapter = new WeakMap(), _SkyModalComponent
698
698
  fullPageModalEl.style.height = fullPageModalHeight;
699
699
  fullPageModalEl.style.maxHeight = fullPageModalHeight;
700
700
  };
701
- SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
702
- SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalComponentAdapterService });
703
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
701
+ SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
702
+ SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalComponentAdapterService });
703
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
704
704
  type: Injectable
705
705
  }], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
706
706
 
707
- var _SkyModalComponent_hostService, _SkyModalComponent_elRef, _SkyModalComponent_windowRef, _SkyModalComponent_componentAdapter, _SkyModalComponent_coreAdapter, _SkyModalComponent_dockService, _SkyModalComponent_mediaQueryService, _SkyModalComponent__ariaDescribedBy, _SkyModalComponent__ariaLabelledBy;
707
+ var _SkyModalComponent_hostService, _SkyModalComponent_elRef, _SkyModalComponent_windowRef, _SkyModalComponent_componentAdapter, _SkyModalComponent_coreAdapter, _SkyModalComponent_dockService, _SkyModalComponent_mediaQueryService, _SkyModalComponent_ngUnsubscribe, _SkyModalComponent__ariaDescribedBy, _SkyModalComponent__ariaLabelledBy, _SkyModalComponent_changeDetector, _SkyModalComponent_liveAnnouncerSvc;
708
708
  const ARIA_ROLE_DEFAULT = 'dialog';
709
709
  /**
710
710
  * Provides a common look-and-feel for modal content with options to display
@@ -712,9 +712,34 @@ const ARIA_ROLE_DEFAULT = 'dialog';
712
712
  * and buttons.
713
713
  */
714
714
  class SkyModalComponent {
715
+ /**
716
+ * @internal
717
+ */
718
+ set ariaRole(value) {
719
+ this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
720
+ }
721
+ /**
722
+ * @internal
723
+ */
724
+ set ariaDescribedBy(id) {
725
+ __classPrivateFieldSet(this, _SkyModalComponent__ariaDescribedBy, id, "f");
726
+ }
727
+ get ariaDescribedBy() {
728
+ return __classPrivateFieldGet(this, _SkyModalComponent__ariaDescribedBy, "f");
729
+ }
730
+ /**
731
+ * @internal
732
+ */
733
+ set ariaLabelledBy(id) {
734
+ __classPrivateFieldSet(this, _SkyModalComponent__ariaLabelledBy, id, "f");
735
+ }
736
+ get ariaLabelledBy() {
737
+ return __classPrivateFieldGet(this, _SkyModalComponent__ariaLabelledBy, "f");
738
+ }
715
739
  constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
716
740
  var _a;
717
741
  this.ariaRoleOrDefault = ARIA_ROLE_DEFAULT;
742
+ this.ariaOwns = null;
718
743
  this.modalState = 'in';
719
744
  _SkyModalComponent_hostService.set(this, void 0);
720
745
  _SkyModalComponent_elRef.set(this, void 0);
@@ -723,8 +748,11 @@ class SkyModalComponent {
723
748
  _SkyModalComponent_coreAdapter.set(this, void 0);
724
749
  _SkyModalComponent_dockService.set(this, void 0);
725
750
  _SkyModalComponent_mediaQueryService.set(this, void 0);
751
+ _SkyModalComponent_ngUnsubscribe.set(this, new Subject());
726
752
  _SkyModalComponent__ariaDescribedBy.set(this, void 0);
727
753
  _SkyModalComponent__ariaLabelledBy.set(this, void 0);
754
+ _SkyModalComponent_changeDetector.set(this, inject(ChangeDetectorRef));
755
+ _SkyModalComponent_liveAnnouncerSvc.set(this, inject(SkyLiveAnnouncerService));
728
756
  __classPrivateFieldSet(this, _SkyModalComponent_hostService, hostService, "f");
729
757
  __classPrivateFieldSet(this, _SkyModalComponent_elRef, elRef, "f");
730
758
  __classPrivateFieldSet(this, _SkyModalComponent_windowRef, windowRef, "f");
@@ -743,30 +771,6 @@ class SkyModalComponent {
743
771
  : ((_a = config.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || 'medium';
744
772
  this.modalZIndex = __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").zIndex;
745
773
  }
746
- /**
747
- * @internal
748
- */
749
- set ariaRole(value) {
750
- this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
751
- }
752
- /**
753
- * @internal
754
- */
755
- set ariaDescribedBy(id) {
756
- __classPrivateFieldSet(this, _SkyModalComponent__ariaDescribedBy, id, "f");
757
- }
758
- get ariaDescribedBy() {
759
- return __classPrivateFieldGet(this, _SkyModalComponent__ariaDescribedBy, "f");
760
- }
761
- /**
762
- * @internal
763
- */
764
- set ariaLabelledBy(id) {
765
- __classPrivateFieldSet(this, _SkyModalComponent__ariaLabelledBy, id, "f");
766
- }
767
- get ariaLabelledBy() {
768
- return __classPrivateFieldGet(this, _SkyModalComponent__ariaLabelledBy, "f");
769
- }
770
774
  onDocumentKeyUp(event) {
771
775
  /* istanbul ignore else */
772
776
  /* sanity check */
@@ -810,6 +814,16 @@ class SkyModalComponent {
810
814
  }
811
815
  }
812
816
  }
817
+ ngOnInit() {
818
+ __classPrivateFieldGet(this, _SkyModalComponent_liveAnnouncerSvc, "f").announcerElementChanged
819
+ .pipe(takeUntil(__classPrivateFieldGet(this, _SkyModalComponent_ngUnsubscribe, "f")))
820
+ .subscribe((element) => {
821
+ if (element === null || element === void 0 ? void 0 : element.id) {
822
+ this.ariaOwns = element.id;
823
+ __classPrivateFieldGet(this, _SkyModalComponent_changeDetector, "f").markForCheck();
824
+ }
825
+ });
826
+ }
813
827
  ngAfterViewInit() {
814
828
  __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").handleWindowChange(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
815
829
  // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
@@ -832,6 +846,8 @@ class SkyModalComponent {
832
846
  if (__classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f")) {
833
847
  __classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f").unobserve();
834
848
  }
849
+ __classPrivateFieldGet(this, _SkyModalComponent_ngUnsubscribe, "f").next();
850
+ __classPrivateFieldGet(this, _SkyModalComponent_ngUnsubscribe, "f").complete();
835
851
  }
836
852
  helpButtonClick() {
837
853
  if (this.helpKey) {
@@ -851,12 +867,12 @@ class SkyModalComponent {
851
867
  return __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").modalContentHasDirectChildViewkeeper(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
852
868
  }
853
869
  }
854
- _SkyModalComponent_hostService = new WeakMap(), _SkyModalComponent_elRef = new WeakMap(), _SkyModalComponent_windowRef = new WeakMap(), _SkyModalComponent_componentAdapter = new WeakMap(), _SkyModalComponent_coreAdapter = new WeakMap(), _SkyModalComponent_dockService = new WeakMap(), _SkyModalComponent_mediaQueryService = new WeakMap(), _SkyModalComponent__ariaDescribedBy = new WeakMap(), _SkyModalComponent__ariaLabelledBy = new WeakMap();
855
- SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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 });
856
- SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, 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: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-tiled': tiledBody,\n 'sky-modal-viewkeeper': viewkeeperEnabled()\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n skyId\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n #headerId=\"skyId\"\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"headerId.id\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentId=\"skyId\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-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:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;position:relative;z-index:2}.sky-modal-content{overflow-y:auto;position:relative;z-index:1}.sky-modal-footer{flex-shrink:0;position:relative;z-index:2}.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%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
857
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalComponent, decorators: [{
870
+ _SkyModalComponent_hostService = new WeakMap(), _SkyModalComponent_elRef = new WeakMap(), _SkyModalComponent_windowRef = new WeakMap(), _SkyModalComponent_componentAdapter = new WeakMap(), _SkyModalComponent_coreAdapter = new WeakMap(), _SkyModalComponent_dockService = new WeakMap(), _SkyModalComponent_mediaQueryService = new WeakMap(), _SkyModalComponent_ngUnsubscribe = new WeakMap(), _SkyModalComponent__ariaDescribedBy = new WeakMap(), _SkyModalComponent__ariaLabelledBy = new WeakMap(), _SkyModalComponent_changeDetector = new WeakMap(), _SkyModalComponent_liveAnnouncerSvc = new WeakMap();
871
+ SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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 });
872
+ SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, 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: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-tiled': tiledBody,\n 'sky-modal-viewkeeper': viewkeeperEnabled()\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n skyId\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n #headerId=\"skyId\"\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"headerId.id\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentId=\"skyId\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
873
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalComponent, decorators: [{
858
874
  type: Component,
859
- args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-tiled': tiledBody,\n 'sky-modal-viewkeeper': viewkeeperEnabled()\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n skyId\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n #headerId=\"skyId\"\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"headerId.id\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentId=\"skyId\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-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:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;position:relative;z-index:2}.sky-modal-content{overflow-y:auto;position:relative;z-index:1}.sky-modal-footer{flex-shrink:0;position:relative;z-index:2}.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%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-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"] }]
875
+ args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRoleOrDefault\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-tiled': tiledBody,\n 'sky-modal-viewkeeper': viewkeeperEnabled()\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n skyId\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\n }\"\n #headerContent\n #headerId=\"skyId\"\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"headerId.id\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentId=\"skyId\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"] }]
860
876
  }], ctorParameters: function () {
861
877
  return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
862
878
  type: Host
@@ -887,8 +903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
887
903
 
888
904
  class SkyModalModule {
889
905
  }
890
- SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
891
- SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
906
+ SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
907
+ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
892
908
  SkyModalContentComponent,
893
909
  SkyModalFooterComponent,
894
910
  SkyModalHeaderComponent,
@@ -903,14 +919,14 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
903
919
  SkyModalContentComponent,
904
920
  SkyModalFooterComponent,
905
921
  SkyModalHeaderComponent] });
906
- SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalModule, imports: [CommonModule,
922
+ SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalModule, imports: [CommonModule,
907
923
  RouterModule,
908
924
  SkyIconModule,
909
925
  SkyIdModule,
910
926
  SkyModalsResourcesModule,
911
927
  SkyThemeModule,
912
928
  SkyTrimModule] });
913
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalModule, decorators: [{
929
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalModule, decorators: [{
914
930
  type: NgModule,
915
931
  args: [{
916
932
  declarations: [
@@ -945,12 +961,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
945
961
  const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
946
962
 
947
963
  /**
948
- * Closes the modal instance using the `closeModal` method.
964
+ * Properties about the modal close action and a method to close the modal.
949
965
  */
950
966
  class SkyModalBeforeCloseHandler {
951
967
  constructor(closeModal, closeArgs) {
952
- this.closeModal = closeModal;
953
968
  this.closeArgs = closeArgs;
969
+ this.closeModal = closeModal;
954
970
  }
955
971
  }
956
972
 
@@ -1149,11 +1165,11 @@ _SkyConfirmComponent_config = new WeakMap(), _SkyConfirmComponent_modal = new We
1149
1165
  autofocus: config.autofocus || false,
1150
1166
  }));
1151
1167
  };
1152
- SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$1.SkyLibResourcesService }, { token: i3.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
1153
- SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n <sky-modal\n ariaRole=\"alertdialog\"\n [ariaLabelledBy]=\"confirmMessage.id\"\n [ariaDescribedBy]=\"body ? bodyId : undefined\"\n >\n <sky-modal-content class=\"sky-confirm-content\">\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n skyId\n #confirmMessage=\"skyId\"\n >{{ message }}</div\n >\n\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [id]=\"bodyId\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >{{ body }}</div\n >\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"'sky-btn-' + button.styleType\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
1154
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmComponent, decorators: [{
1168
+ SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$1.SkyLibResourcesService }, { token: i3.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
1169
+ SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n <sky-modal\n ariaRole=\"alertdialog\"\n [ariaLabelledBy]=\"confirmMessage.id\"\n [ariaDescribedBy]=\"body ? bodyId : undefined\"\n >\n <sky-modal-content class=\"sky-confirm-content\">\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-font-display-4': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n skyId\n #confirmMessage=\"skyId\"\n >{{ message }}</div\n >\n\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [id]=\"bodyId\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >{{ body }}</div\n >\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"'sky-btn-' + button.styleType\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
1170
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmComponent, decorators: [{
1155
1171
  type: Component,
1156
- args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n <sky-modal\n ariaRole=\"alertdialog\"\n [ariaLabelledBy]=\"confirmMessage.id\"\n [ariaDescribedBy]=\"body ? bodyId : undefined\"\n >\n <sky-modal-content class=\"sky-confirm-content\">\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n skyId\n #confirmMessage=\"skyId\"\n >{{ message }}</div\n >\n\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [id]=\"bodyId\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >{{ body }}</div\n >\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"'sky-btn-' + button.styleType\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"] }]
1172
+ args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n <sky-modal\n ariaRole=\"alertdialog\"\n [ariaLabelledBy]=\"confirmMessage.id\"\n [ariaDescribedBy]=\"body ? bodyId : undefined\"\n >\n <sky-modal-content class=\"sky-confirm-content\">\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-font-display-4': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n skyId\n #confirmMessage=\"skyId\"\n >{{ message }}</div\n >\n\n <!--\n The following \"magic comment\" keeps Prettier from adding line breaks\n inside the div and causing leading and trailing whitespace when\n `preserveWhiteSpace` is `true`.\n https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n -->\n <!-- display: inline -->\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [id]=\"bodyId\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >{{ body }}</div\n >\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"'sky-btn-' + button.styleType\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"] }]
1157
1173
  }], ctorParameters: function () {
1158
1174
  return [{ type: undefined, decorators: [{
1159
1175
  type: Inject,
@@ -1163,18 +1179,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
1163
1179
 
1164
1180
  class SkyConfirmModule {
1165
1181
  }
1166
- SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1167
- SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
1182
+ SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1183
+ SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
1168
1184
  SkyIdModule,
1169
1185
  SkyModalModule,
1170
1186
  SkyModalsResourcesModule,
1171
1187
  SkyThemeModule], exports: [SkyConfirmComponent] });
1172
- SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmModule, imports: [CommonModule,
1188
+ SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmModule, imports: [CommonModule,
1173
1189
  SkyIdModule,
1174
1190
  SkyModalModule,
1175
1191
  SkyModalsResourcesModule,
1176
1192
  SkyThemeModule] });
1177
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmModule, decorators: [{
1193
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmModule, decorators: [{
1178
1194
  type: NgModule,
1179
1195
  args: [{
1180
1196
  declarations: [SkyConfirmComponent],
@@ -1269,9 +1285,9 @@ _SkyModalService_dynamicComponentService = new WeakMap(), _SkyModalService_insta
1269
1285
  });
1270
1286
  }
1271
1287
  };
1272
- SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
1273
- SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalService, providedIn: 'any' });
1274
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyModalService, decorators: [{
1288
+ SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
1289
+ SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalService, providedIn: 'any' });
1290
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalService, decorators: [{
1275
1291
  type: Injectable,
1276
1292
  args: [{
1277
1293
  // Must be 'any' so that the modal component is created in the context of its module's injector.
@@ -1319,9 +1335,9 @@ class SkyConfirmService {
1319
1335
  }
1320
1336
  }
1321
1337
  _SkyConfirmService_modalService = new WeakMap();
1322
- SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
1323
- SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
1324
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyConfirmService, decorators: [{
1338
+ SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
1339
+ SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
1340
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmService, decorators: [{
1325
1341
  type: Injectable,
1326
1342
  args: [{
1327
1343
  // Must be 'any' so that the modal component is created in the context of its module's injector.