@skyux/modals 6.16.0 → 7.0.0-alpha.0

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 (43) hide show
  1. package/documentation.json +223 -261
  2. package/esm2020/lib/modules/confirm/confirm.component.mjs +7 -7
  3. package/esm2020/lib/modules/confirm/confirm.module.mjs +8 -10
  4. package/esm2020/lib/modules/confirm/confirm.service.mjs +3 -3
  5. package/esm2020/lib/modules/modal/modal-adapter.service.mjs +53 -6
  6. package/esm2020/lib/modules/modal/modal-component-adapter.service.mjs +3 -3
  7. package/esm2020/lib/modules/modal/modal-configuration.mjs +3 -3
  8. package/esm2020/lib/modules/modal/modal-content.component.mjs +3 -3
  9. package/esm2020/lib/modules/modal/modal-footer.component.mjs +3 -3
  10. package/esm2020/lib/modules/modal/modal-header.component.mjs +3 -3
  11. package/esm2020/lib/modules/modal/modal-host-context.mjs +3 -3
  12. package/esm2020/lib/modules/modal/modal-host.component.mjs +30 -11
  13. package/esm2020/lib/modules/modal/modal-host.service.mjs +10 -9
  14. package/esm2020/lib/modules/modal/modal-instance.mjs +1 -1
  15. package/esm2020/lib/modules/modal/modal-scroll-shadow.directive.mjs +3 -3
  16. package/esm2020/lib/modules/modal/modal.component.mjs +10 -8
  17. package/esm2020/lib/modules/modal/modal.module.mjs +9 -11
  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-fixture.mjs +2 -1
  21. package/fesm2015/skyux-modals-testing.mjs +1 -0
  22. package/fesm2015/skyux-modals-testing.mjs.map +1 -1
  23. package/fesm2015/skyux-modals.mjs +146 -82
  24. package/fesm2015/skyux-modals.mjs.map +1 -1
  25. package/fesm2020/skyux-modals-testing.mjs +1 -0
  26. package/fesm2020/skyux-modals-testing.mjs.map +1 -1
  27. package/fesm2020/skyux-modals.mjs +146 -82
  28. package/fesm2020/skyux-modals.mjs.map +1 -1
  29. package/lib/modules/confirm/confirm.component.d.ts +1 -1
  30. package/lib/modules/modal/modal-adapter.service.d.ts +12 -0
  31. package/lib/modules/modal/modal-content.component.d.ts +1 -1
  32. package/lib/modules/modal/modal-footer.component.d.ts +1 -1
  33. package/lib/modules/modal/modal-header.component.d.ts +1 -1
  34. package/lib/modules/modal/modal-host.component.d.ts +3 -3
  35. package/lib/modules/modal/modal-host.service.d.ts +4 -4
  36. package/lib/modules/modal/modal-instance.d.ts +1 -1
  37. package/lib/modules/modal/modal-scroll-shadow.directive.d.ts +1 -1
  38. package/lib/modules/modal/modal.component.d.ts +1 -1
  39. package/package.json +11 -11
  40. package/testing/{skyux-modals-testing.d.ts → index.d.ts} +0 -0
  41. package/testing/modal-fixture.d.ts +1 -0
  42. package/skyux-modals.d.ts +0 -5
  43. package/testing/package.json +0 -10
@@ -1,12 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, ViewChild, Directive, Optional, Output, HostListener, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
3
- import * as i6 from '@angular/common';
3
+ import * as i5 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i2 from '@skyux/theme';
6
6
  import { SkyTheme, SkyThemeModule } from '@skyux/theme';
7
7
  import * as i2$1 from '@angular/router';
8
8
  import { NavigationStart, RouterModule } from '@angular/router';
9
- import * as i5 from '@skyux/indicators';
9
+ import * as i6 from '@skyux/indicators';
10
10
  import { SkyIconModule } from '@skyux/indicators';
11
11
  import * as i2$2 from '@skyux/i18n';
12
12
  import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
@@ -79,16 +79,16 @@ class SkyModalsResourcesProvider {
79
79
  */
80
80
  class SkyModalsResourcesModule {
81
81
  }
82
- SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
83
- SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
84
- SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, providers: [
82
+ SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
83
+ SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
84
+ SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", 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: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
91
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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: "13.3.2", ngImpor
107
107
  */
108
108
  class SkyModalContentComponent {
109
109
  }
110
- SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
- SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: "13.3.2", ngImport: i0, type: SkyModalContentComponent, decorators: [{
110
+ SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
+ SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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,9 +119,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
119
119
  */
120
120
  class SkyModalFooterComponent {
121
121
  }
122
- SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
123
- SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: "13.3.2", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
122
+ SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
123
+ SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
125
125
  type: Component,
126
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"] }]
127
127
  }] });
@@ -131,14 +131,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
131
131
  */
132
132
  class SkyModalHeaderComponent {
133
133
  }
134
- SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
135
- SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
134
+ SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
135
+ SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
137
137
  type: Component,
138
138
  args: [{ selector: 'sky-modal-header', 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"] }]
139
139
  }] });
140
140
 
141
- var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
141
+ var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_hostSiblingAriaHiddenCache, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
142
142
  /**
143
143
  * @internal
144
144
  */
@@ -148,6 +148,7 @@ class SkyModalAdapterService {
148
148
  _SkyModalAdapterService_docRef.set(this, void 0);
149
149
  _SkyModalAdapterService_bodyEl.set(this, void 0);
150
150
  _SkyModalAdapterService_windowRef.set(this, void 0);
151
+ _SkyModalAdapterService_hostSiblingAriaHiddenCache.set(this, new Map());
151
152
  __classPrivateFieldSet(this, _SkyModalAdapterService_windowRef, windowRef, "f");
152
153
  __classPrivateFieldSet(this, _SkyModalAdapterService_docRef, __classPrivateFieldGet(this, _SkyModalAdapterService_windowRef, "f").nativeWindow.document, "f");
153
154
  __classPrivateFieldSet(this, _SkyModalAdapterService_bodyEl, __classPrivateFieldGet(this, _SkyModalAdapterService_windowRef, "f").nativeWindow.document.body, "f");
@@ -171,17 +172,63 @@ class SkyModalAdapterService {
171
172
  getModalOpener() {
172
173
  return __classPrivateFieldGet(this, _SkyModalAdapterService_docRef, "f").activeElement;
173
174
  }
175
+ /**
176
+ * Hides siblings of modal-host from screen readers
177
+ * @param hostElRef reference to modal-host element
178
+ */
179
+ hideHostSiblingsFromScreenReaders(hostElRef) {
180
+ const hostElement = hostElRef.nativeElement;
181
+ const hostSiblings = hostElement.parentElement.children;
182
+ for (let i = 0; i < hostSiblings.length; i++) {
183
+ const element = hostSiblings[i];
184
+ if (element !== hostElement &&
185
+ !element.hasAttribute('aria-live') &&
186
+ element.nodeName.toLowerCase() !== 'script' &&
187
+ element.nodeName.toLowerCase() !== 'style') {
188
+ // preserve previous aria-hidden status of elements outside of modal host
189
+ __classPrivateFieldGet(this, _SkyModalAdapterService_hostSiblingAriaHiddenCache, "f").set(element, element.getAttribute('aria-hidden'));
190
+ element.setAttribute('aria-hidden', 'true');
191
+ }
192
+ }
193
+ }
194
+ /**
195
+ * Restores modal-host siblings to screenreader status prior to modals being opened
196
+ */
197
+ unhideOrRestoreHostSiblingsFromScreenReaders() {
198
+ __classPrivateFieldGet(this, _SkyModalAdapterService_hostSiblingAriaHiddenCache, "f").forEach((previousValue, element) => {
199
+ // if element had aria-hidden status prior, restore status
200
+ if (element.parentElement) {
201
+ if (previousValue) {
202
+ element.setAttribute('aria-hidden', previousValue);
203
+ }
204
+ else {
205
+ element.removeAttribute('aria-hidden');
206
+ }
207
+ }
208
+ });
209
+ __classPrivateFieldGet(this, _SkyModalAdapterService_hostSiblingAriaHiddenCache, "f").clear();
210
+ }
211
+ hidePreviousModalFromScreenReaders(topModal) {
212
+ if (topModal && topModal.nativeElement.previousElementSibling) {
213
+ topModal.nativeElement.previousElementSibling.setAttribute('aria-hidden', 'true');
214
+ }
215
+ }
216
+ unhidePreviousModalFromScreenReaders(topModal) {
217
+ if (topModal && topModal.nativeElement.previousElementSibling) {
218
+ topModal.nativeElement.previousElementSibling.removeAttribute('aria-hidden');
219
+ }
220
+ }
174
221
  }
175
- _SkyModalAdapterService_docRef = new WeakMap(), _SkyModalAdapterService_bodyEl = new WeakMap(), _SkyModalAdapterService_windowRef = new WeakMap(), _SkyModalAdapterService_instances = new WeakSet(), _SkyModalAdapterService_addClassToBody = function _SkyModalAdapterService_addClassToBody(className) {
222
+ _SkyModalAdapterService_docRef = new WeakMap(), _SkyModalAdapterService_bodyEl = new WeakMap(), _SkyModalAdapterService_windowRef = new WeakMap(), _SkyModalAdapterService_hostSiblingAriaHiddenCache = new WeakMap(), _SkyModalAdapterService_instances = new WeakSet(), _SkyModalAdapterService_addClassToBody = function _SkyModalAdapterService_addClassToBody(className) {
176
223
  __classPrivateFieldGet(this, _SkyModalAdapterService_bodyEl, "f").classList.add(className);
177
224
  }, _SkyModalAdapterService_removeClassFromBody = function _SkyModalAdapterService_removeClassFromBody(className) {
178
225
  __classPrivateFieldGet(this, _SkyModalAdapterService_bodyEl, "f").classList.remove(className);
179
226
  };
180
227
  SkyModalAdapterService.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page';
181
228
  SkyModalAdapterService.MODAL_BODY_CLASS = 'sky-modal-body-open';
182
- SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
183
- SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalAdapterService });
184
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalAdapterService, decorators: [{
229
+ SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
230
+ SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalAdapterService });
231
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalAdapterService, decorators: [{
185
232
  type: Injectable
186
233
  }], ctorParameters: function () { return [{ type: i3.SkyAppWindowRef }]; } });
187
234
 
@@ -193,9 +240,9 @@ class SkyModalConfiguration {
193
240
  this.size = 'medium';
194
241
  }
195
242
  }
196
- SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
197
- SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
198
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalConfiguration, decorators: [{
243
+ SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
244
+ SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
245
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalConfiguration, decorators: [{
199
246
  type: Injectable,
200
247
  args: [{
201
248
  providedIn: 'any',
@@ -210,9 +257,9 @@ const modalHosts = [];
210
257
  */
211
258
  class SkyModalHostService {
212
259
  constructor() {
213
- this.close = new EventEmitter();
260
+ this.close = new Subject();
214
261
  this.fullPage = false;
215
- this.openHelp = new EventEmitter();
262
+ this.openHelp = new Subject();
216
263
  this.zIndex = this.calculateZIndex();
217
264
  modalHosts.push(this);
218
265
  }
@@ -233,10 +280,10 @@ class SkyModalHostService {
233
280
  return this.zIndex;
234
281
  }
235
282
  onClose() {
236
- this.close.emit();
283
+ this.close.next();
237
284
  }
238
285
  onOpenHelp(helpKey) {
239
- this.openHelp.emit(helpKey);
286
+ this.openHelp.next(helpKey);
240
287
  }
241
288
  destroy() {
242
289
  modalHosts.splice(modalHosts.indexOf(this), 1);
@@ -252,9 +299,9 @@ class SkyModalHostService {
252
299
  }
253
300
  }
254
301
  }
255
- SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
256
- SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
257
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, decorators: [{
302
+ SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
303
+ SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
304
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostService, decorators: [{
258
305
  type: Injectable,
259
306
  args: [{
260
307
  providedIn: 'root',
@@ -271,9 +318,9 @@ class SkyModalHostContext {
271
318
  this.args = args;
272
319
  }
273
320
  }
274
- SkyModalHostContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable });
275
- SkyModalHostContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostContext });
276
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostContext, decorators: [{
321
+ SkyModalHostContext.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable });
322
+ SkyModalHostContext.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostContext });
323
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostContext, decorators: [{
277
324
  type: Injectable
278
325
  }], ctorParameters: function () {
279
326
  return [{ type: undefined, decorators: [{
@@ -282,12 +329,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
282
329
  }] }];
283
330
  } });
284
331
 
285
- var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModalHostComponent_adapter, _SkyModalHostComponent_injector, _SkyModalHostComponent_router, _SkyModalHostComponent_changeDetector, _SkyModalHostComponent_modalHostContext, _SkyModalHostComponent_modalInstances, _SkyModalHostComponent_registerModalInstance, _SkyModalHostComponent_unregisterModalInstance, _SkyModalHostComponent_closeAllModalInstances;
332
+ var _SkyModalHostComponent_instances, _SkyModalHostComponent_resolver, _SkyModalHostComponent_adapter, _SkyModalHostComponent_injector, _SkyModalHostComponent_router, _SkyModalHostComponent_changeDetector, _SkyModalHostComponent_modalHostContext, _SkyModalHostComponent_elRef, _SkyModalHostComponent_modalInstances, _SkyModalHostComponent_registerModalInstance, _SkyModalHostComponent_unregisterModalInstance, _SkyModalHostComponent_closeAllModalInstances;
286
333
  /**
287
334
  * @internal
288
335
  */
289
336
  class SkyModalHostComponent {
290
- constructor(resolver, adapter, injector, router, changeDetector, modalHostContext) {
337
+ constructor(resolver, adapter, injector, router, changeDetector, modalHostContext, elRef) {
291
338
  _SkyModalHostComponent_instances.add(this);
292
339
  _SkyModalHostComponent_resolver.set(this, void 0);
293
340
  _SkyModalHostComponent_adapter.set(this, void 0);
@@ -295,6 +342,7 @@ class SkyModalHostComponent {
295
342
  _SkyModalHostComponent_router.set(this, void 0);
296
343
  _SkyModalHostComponent_changeDetector.set(this, void 0);
297
344
  _SkyModalHostComponent_modalHostContext.set(this, void 0);
345
+ _SkyModalHostComponent_elRef.set(this, void 0);
298
346
  _SkyModalHostComponent_modalInstances.set(this, []);
299
347
  __classPrivateFieldSet(this, _SkyModalHostComponent_resolver, resolver, "f");
300
348
  __classPrivateFieldSet(this, _SkyModalHostComponent_adapter, adapter, "f");
@@ -302,6 +350,7 @@ class SkyModalHostComponent {
302
350
  __classPrivateFieldSet(this, _SkyModalHostComponent_router, router, "f");
303
351
  __classPrivateFieldSet(this, _SkyModalHostComponent_changeDetector, changeDetector, "f");
304
352
  __classPrivateFieldSet(this, _SkyModalHostComponent_modalHostContext, modalHostContext, "f");
353
+ __classPrivateFieldSet(this, _SkyModalHostComponent_elRef, elRef, "f");
305
354
  }
306
355
  get modalOpen() {
307
356
  return SkyModalHostService.openModalCount > 0;
@@ -350,9 +399,26 @@ class SkyModalHostComponent {
350
399
  parent: __classPrivateFieldGet(this, _SkyModalHostComponent_injector, "f"),
351
400
  });
352
401
  const modalComponentRef = this.target.createComponent(factory, undefined, injector);
402
+ // modal element that was just opened
403
+ const modalElement = modalComponentRef.location;
353
404
  modalInstance.componentInstance = modalComponentRef.instance;
354
405
  __classPrivateFieldGet(this, _SkyModalHostComponent_instances, "m", _SkyModalHostComponent_registerModalInstance).call(this, modalInstance);
355
- function closeModal() {
406
+ // hidding all elements at the modal-host level from screenreaders when the a modal is opened
407
+ __classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").hideHostSiblingsFromScreenReaders(__classPrivateFieldGet(this, _SkyModalHostComponent_elRef, "f"));
408
+ if (SkyModalHostService.openModalCount > 1 &&
409
+ SkyModalHostService.topModal === hostService) {
410
+ // hiding the lower modals when more than one modal is opened
411
+ __classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").hidePreviousModalFromScreenReaders(modalElement);
412
+ }
413
+ const closeModal = () => {
414
+ // unhide siblings if last modal is closing
415
+ if (SkyModalHostService.openModalCount === 1) {
416
+ __classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").unhideOrRestoreHostSiblingsFromScreenReaders();
417
+ }
418
+ else if (SkyModalHostService.topModal === hostService) {
419
+ // if there are more than 1 modal then unhide the one behind this one before closing it
420
+ __classPrivateFieldGet(this, _SkyModalHostComponent_adapter, "f").unhidePreviousModalFromScreenReaders(modalElement);
421
+ }
356
422
  hostService.destroy();
357
423
  adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
358
424
  adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
@@ -362,7 +428,7 @@ class SkyModalHostComponent {
362
428
  modalOpener.focus();
363
429
  }
364
430
  modalComponentRef.destroy();
365
- }
431
+ };
366
432
  hostService.openHelp.subscribe((helpKey) => {
367
433
  modalInstance.openHelp(helpKey);
368
434
  });
@@ -384,7 +450,7 @@ class SkyModalHostComponent {
384
450
  __classPrivateFieldGet(this, _SkyModalHostComponent_changeDetector, "f").detectChanges();
385
451
  }
386
452
  }
387
- _SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter = new WeakMap(), _SkyModalHostComponent_injector = new WeakMap(), _SkyModalHostComponent_router = new WeakMap(), _SkyModalHostComponent_changeDetector = new WeakMap(), _SkyModalHostComponent_modalHostContext = new WeakMap(), _SkyModalHostComponent_modalInstances = new WeakMap(), _SkyModalHostComponent_instances = new WeakSet(), _SkyModalHostComponent_registerModalInstance = function _SkyModalHostComponent_registerModalInstance(instance) {
453
+ _SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter = new WeakMap(), _SkyModalHostComponent_injector = new WeakMap(), _SkyModalHostComponent_router = new WeakMap(), _SkyModalHostComponent_changeDetector = new WeakMap(), _SkyModalHostComponent_modalHostContext = new WeakMap(), _SkyModalHostComponent_elRef = new WeakMap(), _SkyModalHostComponent_modalInstances = new WeakMap(), _SkyModalHostComponent_instances = new WeakSet(), _SkyModalHostComponent_registerModalInstance = function _SkyModalHostComponent_registerModalInstance(instance) {
388
454
  __classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").push(instance);
389
455
  }, _SkyModalHostComponent_unregisterModalInstance = function _SkyModalHostComponent_unregisterModalInstance(instance) {
390
456
  __classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").slice(__classPrivateFieldGet(this, _SkyModalHostComponent_modalInstances, "f").indexOf(instance), 1);
@@ -393,12 +459,12 @@ _SkyModalHostComponent_resolver = new WeakMap(), _SkyModalHostComponent_adapter
393
459
  instance.close();
394
460
  }
395
461
  };
396
- SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }], target: i0.ɵɵFactoryTarget.Component });
397
- SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
398
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, decorators: [{
462
+ SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
463
+ SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
464
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalHostComponent, decorators: [{
399
465
  type: Component,
400
466
  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;top:0;left:0;bottom:0;right:0}\n"] }]
401
- }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2$1.Router }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }]; }, propDecorators: { target: [{
467
+ }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2$1.Router }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }, { type: i0.ElementRef }]; }, propDecorators: { target: [{
402
468
  type: ViewChild,
403
469
  args: ['target', {
404
470
  read: ViewContainerRef,
@@ -506,9 +572,9 @@ _SkyModalScrollShadowDirective_currentShadow = new WeakMap(), _SkyModalScrollSha
506
572
  __classPrivateFieldSet(this, _SkyModalScrollShadowDirective_currentShadow, shadow, "f");
507
573
  }
508
574
  };
509
- SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.MutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
510
- SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
511
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
575
+ SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i3.MutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
576
+ SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
577
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
512
578
  type: Directive,
513
579
  args: [{
514
580
  selector: '[skyModalScrollShadow]',
@@ -621,9 +687,9 @@ _SkyModalComponentAdapterService_coreAdapter = new WeakMap(), _SkyModalComponent
621
687
  fullPageModalEl.style.height = fullPageModalHeight;
622
688
  fullPageModalEl.style.maxHeight = fullPageModalHeight;
623
689
  };
624
- SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
625
- SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService });
626
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
690
+ SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
691
+ SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalComponentAdapterService });
692
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
627
693
  type: Injectable
628
694
  }], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
629
695
 
@@ -748,7 +814,9 @@ class SkyModalComponent {
748
814
  }
749
815
  }
750
816
  helpButtonClick() {
751
- __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").onOpenHelp(this.helpKey);
817
+ if (this.helpKey) {
818
+ __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").onOpenHelp(this.helpKey);
819
+ }
752
820
  }
753
821
  closeButtonClick() {
754
822
  __classPrivateFieldGet(this, _SkyModalComponent_hostService, "f").onClose();
@@ -764,11 +832,11 @@ class SkyModalComponent {
764
832
  }
765
833
  }
766
834
  _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__ariaRole = new WeakMap();
767
- SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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 });
768
- SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\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 [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\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%}: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"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i2$2.SkyLibResourcesPipe } });
769
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponent, decorators: [{
835
+ SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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 });
836
+ SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\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 [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\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-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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$2.SkyLibResourcesPipe, name: "skyLibResources" }] });
837
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalComponent, decorators: [{
770
838
  type: Component,
771
- args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\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 [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\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%}: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"] }]
839
+ args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\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 [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': size === 'full-page'\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-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"] }]
772
840
  }], ctorParameters: function () {
773
841
  return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
774
842
  type: Host
@@ -795,8 +863,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
795
863
 
796
864
  class SkyModalModule {
797
865
  }
798
- SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
799
- SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
866
+ SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
867
+ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
800
868
  SkyModalContentComponent,
801
869
  SkyModalFooterComponent,
802
870
  SkyModalHeaderComponent,
@@ -809,14 +877,12 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
809
877
  SkyModalContentComponent,
810
878
  SkyModalFooterComponent,
811
879
  SkyModalHeaderComponent] });
812
- SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, imports: [[
813
- CommonModule,
814
- RouterModule,
815
- SkyIconModule,
816
- SkyModalsResourcesModule,
817
- SkyThemeModule,
818
- ]] });
819
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, decorators: [{
880
+ SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalModule, imports: [CommonModule,
881
+ RouterModule,
882
+ SkyIconModule,
883
+ SkyModalsResourcesModule,
884
+ SkyThemeModule] });
885
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalModule, decorators: [{
820
886
  type: NgModule,
821
887
  args: [{
822
888
  declarations: [
@@ -1066,11 +1132,11 @@ _SkyConfirmComponent_config = new WeakMap(), _SkyConfirmComponent_modal = new We
1066
1132
  });
1067
1133
  return buttons;
1068
1134
  };
1069
- SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1070
- SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"['sky-btn-' + button.styleType]\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1071
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, decorators: [{
1135
+ SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1136
+ SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"['sky-btn-' + button.styleType]\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm{--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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
1137
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmComponent, decorators: [{
1072
1138
  type: Component,
1073
- args: [{ selector: 'sky-confirm', 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"] }]
1139
+ args: [{ selector: 'sky-confirm', 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{--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"] }]
1074
1140
  }], ctorParameters: function () {
1075
1141
  return [{ type: undefined, decorators: [{
1076
1142
  type: Inject,
@@ -1082,18 +1148,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
1082
1148
 
1083
1149
  class SkyConfirmModule {
1084
1150
  }
1085
- SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1086
- SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
1151
+ SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1152
+ SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
1087
1153
  SkyModalModule,
1088
1154
  SkyModalsResourcesModule,
1089
1155
  SkyThemeModule], exports: [SkyConfirmComponent] });
1090
- SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, imports: [[
1091
- CommonModule,
1092
- SkyModalModule,
1093
- SkyModalsResourcesModule,
1094
- SkyThemeModule,
1095
- ]] });
1096
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, decorators: [{
1156
+ SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmModule, imports: [CommonModule,
1157
+ SkyModalModule,
1158
+ SkyModalsResourcesModule,
1159
+ SkyThemeModule] });
1160
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmModule, decorators: [{
1097
1161
  type: NgModule,
1098
1162
  args: [{
1099
1163
  declarations: [SkyConfirmComponent],
@@ -1188,9 +1252,9 @@ _SkyModalService_dynamicComponentService = new WeakMap(), _SkyModalService_insta
1188
1252
  });
1189
1253
  }
1190
1254
  };
1191
- SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
1192
- SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, providedIn: 'any' });
1193
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, decorators: [{
1255
+ SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
1256
+ SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalService, providedIn: 'any' });
1257
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyModalService, decorators: [{
1194
1258
  type: Injectable,
1195
1259
  args: [{
1196
1260
  // Must be 'any' so that the modal component is created in the context of its module's injector.
@@ -1238,9 +1302,9 @@ class SkyConfirmService {
1238
1302
  }
1239
1303
  }
1240
1304
  _SkyConfirmService_modalService = new WeakMap();
1241
- SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
1242
- SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
1243
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, decorators: [{
1305
+ SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
1306
+ SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
1307
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyConfirmService, decorators: [{
1244
1308
  type: Injectable,
1245
1309
  args: [{
1246
1310
  // Must be 'any' so that the modal component is created in the context of its module's injector.