@skyux/modals 5.0.1 → 5.0.2
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.
- package/bundles/skyux-modals-testing.umd.js +2 -4
- package/bundles/skyux-modals-testing.umd.js.map +1 -1
- package/bundles/skyux-modals.umd.js +161 -164
- package/bundles/skyux-modals.umd.js.map +1 -1
- package/documentation.json +102 -97
- package/esm2015/modules/confirm/confirm-button.js +1 -1
- package/esm2015/modules/confirm/confirm-config.js +1 -1
- package/esm2015/modules/confirm/confirm-instance.js +1 -1
- package/esm2015/modules/confirm/confirm-modal-context.js +1 -1
- package/esm2015/modules/confirm/confirm-type.js +1 -1
- package/esm2015/modules/confirm/confirm.component.js +20 -18
- package/esm2015/modules/confirm/confirm.module.js +10 -16
- package/esm2015/modules/confirm/confirm.service.js +11 -9
- package/esm2015/modules/modal/modal-adapter.service.js +4 -4
- package/esm2015/modules/modal/modal-before-close-handler.js +1 -1
- package/esm2015/modules/modal/modal-component-adapter.service.js +9 -8
- package/esm2015/modules/modal/modal-configuration.js +5 -5
- package/esm2015/modules/modal/modal-content.component.js +5 -5
- package/esm2015/modules/modal/modal-footer.component.js +5 -5
- package/esm2015/modules/modal/modal-header.component.js +5 -7
- package/esm2015/modules/modal/modal-host.component.js +11 -13
- package/esm2015/modules/modal/modal-host.service.js +8 -7
- package/esm2015/modules/modal/modal-instance.js +1 -1
- package/esm2015/modules/modal/modal-scroll-shadow-event-args.js +1 -1
- package/esm2015/modules/modal/modal-scroll-shadow.directive.js +11 -13
- package/esm2015/modules/modal/modal-state-animation.js +4 -9
- package/esm2015/modules/modal/modal.component.js +19 -24
- package/esm2015/modules/modal/modal.interface.js +1 -1
- package/esm2015/modules/modal/modal.module.js +10 -12
- package/esm2015/modules/modal/modal.service.js +14 -12
- package/esm2015/modules/shared/sky-modals-resources.module.js +25 -12
- package/esm2015/testing/modal-fixture.js +3 -5
- package/fesm2015/skyux-modals-testing.js +2 -4
- package/fesm2015/skyux-modals-testing.js.map +1 -1
- package/fesm2015/skyux-modals.js +153 -156
- package/fesm2015/skyux-modals.js.map +1 -1
- package/package.json +7 -7
package/fesm2015/skyux-modals.js
CHANGED
|
@@ -63,7 +63,16 @@ var SkyConfirmType;
|
|
|
63
63
|
* To update this file, simply rerun the command.
|
|
64
64
|
*/
|
|
65
65
|
const RESOURCES = {
|
|
66
|
-
'EN-US': {
|
|
66
|
+
'EN-US': {
|
|
67
|
+
skyux_confirm_dialog_default_ok_text: { message: 'OK' },
|
|
68
|
+
skyux_confirm_dialog_default_yes_text: { message: 'Yes' },
|
|
69
|
+
skyux_confirm_dialog_default_no_text: { message: 'No' },
|
|
70
|
+
skyux_confirm_dialog_default_cancel_text: { message: 'Cancel' },
|
|
71
|
+
skyux_modal_close: { message: 'Close modal' },
|
|
72
|
+
skyux_modal_open_help: { message: 'Open Help' },
|
|
73
|
+
skyux_modal_footer_cancel_button: { message: 'Cancel' },
|
|
74
|
+
skyux_modal_footer_primary_button: { message: 'Save' },
|
|
75
|
+
},
|
|
67
76
|
};
|
|
68
77
|
class SkyModalsResourcesProvider {
|
|
69
78
|
getString(localeInfo, name) {
|
|
@@ -75,22 +84,26 @@ class SkyModalsResourcesProvider {
|
|
|
75
84
|
*/
|
|
76
85
|
class SkyModalsResourcesModule {
|
|
77
86
|
}
|
|
78
|
-
SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
79
|
-
SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
80
|
-
SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
87
|
+
SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
88
|
+
SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
|
|
89
|
+
SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalsResourcesModule, providers: [
|
|
90
|
+
{
|
|
81
91
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
82
92
|
useClass: SkyModalsResourcesProvider,
|
|
83
|
-
multi: true
|
|
84
|
-
}
|
|
85
|
-
|
|
93
|
+
multi: true,
|
|
94
|
+
},
|
|
95
|
+
], imports: [SkyI18nModule] });
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
|
|
86
97
|
type: NgModule,
|
|
87
98
|
args: [{
|
|
88
99
|
exports: [SkyI18nModule],
|
|
89
|
-
providers: [
|
|
100
|
+
providers: [
|
|
101
|
+
{
|
|
90
102
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
91
103
|
useClass: SkyModalsResourcesProvider,
|
|
92
|
-
multi: true
|
|
93
|
-
}
|
|
104
|
+
multi: true,
|
|
105
|
+
},
|
|
106
|
+
],
|
|
94
107
|
}]
|
|
95
108
|
}] });
|
|
96
109
|
|
|
@@ -99,15 +112,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
99
112
|
*/
|
|
100
113
|
class SkyModalContentComponent {
|
|
101
114
|
}
|
|
102
|
-
SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
103
|
-
SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
115
|
+
SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
116
|
+
SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 });
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalContentComponent, decorators: [{
|
|
105
118
|
type: Component,
|
|
106
119
|
args: [{
|
|
107
120
|
selector: 'sky-modal-content',
|
|
108
121
|
templateUrl: './modal-content.component.html',
|
|
109
122
|
styleUrls: ['./modal-content.component.scss'],
|
|
110
|
-
encapsulation: ViewEncapsulation.None
|
|
123
|
+
encapsulation: ViewEncapsulation.None,
|
|
111
124
|
}]
|
|
112
125
|
}] });
|
|
113
126
|
|
|
@@ -116,14 +129,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
116
129
|
*/
|
|
117
130
|
class SkyModalFooterComponent {
|
|
118
131
|
}
|
|
119
|
-
SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
120
|
-
SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
132
|
+
SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
133
|
+
SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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"] });
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
|
|
122
135
|
type: Component,
|
|
123
136
|
args: [{
|
|
124
137
|
selector: 'sky-modal-footer',
|
|
125
138
|
templateUrl: './modal-footer.component.html',
|
|
126
|
-
styleUrls: ['./modal-footer.component.scss']
|
|
139
|
+
styleUrls: ['./modal-footer.component.scss'],
|
|
127
140
|
}]
|
|
128
141
|
}] });
|
|
129
142
|
|
|
@@ -132,16 +145,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
132
145
|
*/
|
|
133
146
|
class SkyModalHeaderComponent {
|
|
134
147
|
}
|
|
135
|
-
SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
136
|
-
SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
148
|
+
SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
149
|
+
SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
|
|
138
151
|
type: Component,
|
|
139
152
|
args: [{
|
|
140
153
|
selector: 'sky-modal-header',
|
|
141
154
|
templateUrl: './modal-header.component.html',
|
|
142
|
-
styleUrls: [
|
|
143
|
-
'./modal-header.component.scss'
|
|
144
|
-
]
|
|
155
|
+
styleUrls: ['./modal-header.component.scss'],
|
|
145
156
|
}]
|
|
146
157
|
}] });
|
|
147
158
|
|
|
@@ -182,9 +193,9 @@ class SkyModalAdapterService {
|
|
|
182
193
|
}
|
|
183
194
|
SkyModalAdapterService.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page';
|
|
184
195
|
SkyModalAdapterService.MODAL_BODY_CLASS = 'sky-modal-body-open';
|
|
185
|
-
SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
186
|
-
SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
196
|
+
SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
197
|
+
SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalAdapterService });
|
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalAdapterService, decorators: [{
|
|
188
199
|
type: Injectable
|
|
189
200
|
}], ctorParameters: function () { return [{ type: i3.SkyAppWindowRef }]; } });
|
|
190
201
|
|
|
@@ -203,14 +214,15 @@ class SkyModalHostService {
|
|
|
203
214
|
return SkyModalHostService.modalHosts.length;
|
|
204
215
|
}
|
|
205
216
|
static get fullPageModalCount() {
|
|
206
|
-
let fullPageModals = SkyModalHostService.modalHosts.filter(modal => modal.fullPage);
|
|
217
|
+
let fullPageModals = SkyModalHostService.modalHosts.filter((modal) => modal.fullPage);
|
|
207
218
|
return fullPageModals.length;
|
|
208
219
|
}
|
|
209
220
|
static get BASE_Z_INDEX() {
|
|
210
221
|
return 1040;
|
|
211
222
|
}
|
|
212
223
|
static get backdropZIndex() {
|
|
213
|
-
return SkyModalHostService.BASE_Z_INDEX +
|
|
224
|
+
return (SkyModalHostService.BASE_Z_INDEX +
|
|
225
|
+
SkyModalHostService.modalHosts.length * 10);
|
|
214
226
|
}
|
|
215
227
|
static get topModal() {
|
|
216
228
|
return SkyModalHostService.modalHosts[SkyModalHostService.modalHosts.length - 1];
|
|
@@ -231,12 +243,12 @@ class SkyModalHostService {
|
|
|
231
243
|
}
|
|
232
244
|
}
|
|
233
245
|
SkyModalHostService.modalHosts = [];
|
|
234
|
-
SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
235
|
-
SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
246
|
+
SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
247
|
+
SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
|
|
248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalHostService, decorators: [{
|
|
237
249
|
type: Injectable,
|
|
238
250
|
args: [{
|
|
239
|
-
providedIn: 'root'
|
|
251
|
+
providedIn: 'root',
|
|
240
252
|
}]
|
|
241
253
|
}], ctorParameters: function () { return []; } });
|
|
242
254
|
|
|
@@ -249,12 +261,12 @@ class SkyModalConfiguration {
|
|
|
249
261
|
this.size = 'medium';
|
|
250
262
|
}
|
|
251
263
|
}
|
|
252
|
-
SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
253
|
-
SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
264
|
+
SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
265
|
+
SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
|
|
266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalConfiguration, decorators: [{
|
|
255
267
|
type: Injectable,
|
|
256
268
|
args: [{
|
|
257
|
-
providedIn: 'any'
|
|
269
|
+
providedIn: 'any',
|
|
258
270
|
}]
|
|
259
271
|
}], ctorParameters: function () { return []; } });
|
|
260
272
|
|
|
@@ -285,18 +297,18 @@ class SkyModalHostComponent {
|
|
|
285
297
|
let isOpen = true;
|
|
286
298
|
params.providers.push({
|
|
287
299
|
provide: SkyModalHostService,
|
|
288
|
-
useValue: hostService
|
|
300
|
+
useValue: hostService,
|
|
289
301
|
});
|
|
290
302
|
params.providers.push({
|
|
291
303
|
provide: SkyModalConfiguration,
|
|
292
|
-
useValue: params
|
|
304
|
+
useValue: params,
|
|
293
305
|
});
|
|
294
306
|
adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
|
|
295
307
|
adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
|
|
296
308
|
let providers = params.providers || /* istanbul ignore next */ [];
|
|
297
309
|
const injector = Injector.create({
|
|
298
310
|
providers,
|
|
299
|
-
parent: this.injector
|
|
311
|
+
parent: this.injector,
|
|
300
312
|
});
|
|
301
313
|
let modalComponentRef = this.target.createComponent(factory, undefined, injector);
|
|
302
314
|
modalInstance.componentInstance = modalComponentRef.instance;
|
|
@@ -317,9 +329,7 @@ class SkyModalHostComponent {
|
|
|
317
329
|
hostService.close.subscribe(() => {
|
|
318
330
|
modalInstance.close();
|
|
319
331
|
});
|
|
320
|
-
this.router.events
|
|
321
|
-
.pipe(takeWhile(() => isOpen))
|
|
322
|
-
.subscribe((event) => {
|
|
332
|
+
this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
|
|
323
333
|
/* istanbul ignore else */
|
|
324
334
|
if (event instanceof NavigationStart) {
|
|
325
335
|
modalInstance.close();
|
|
@@ -333,21 +343,21 @@ class SkyModalHostComponent {
|
|
|
333
343
|
this.changeDetector.detectChanges();
|
|
334
344
|
}
|
|
335
345
|
}
|
|
336
|
-
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
337
|
-
SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
346
|
+
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
347
|
+
SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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] });
|
|
348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
339
349
|
type: Component,
|
|
340
350
|
args: [{
|
|
341
351
|
selector: 'sky-modal-host',
|
|
342
352
|
templateUrl: './modal-host.component.html',
|
|
343
353
|
styleUrls: ['./modal-host.component.scss'],
|
|
344
|
-
viewProviders: [SkyModalAdapterService]
|
|
354
|
+
viewProviders: [SkyModalAdapterService],
|
|
345
355
|
}]
|
|
346
356
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
|
|
347
357
|
type: ViewChild,
|
|
348
358
|
args: ['target', {
|
|
349
359
|
read: ViewContainerRef,
|
|
350
|
-
static: true
|
|
360
|
+
static: true,
|
|
351
361
|
}]
|
|
352
362
|
}] } });
|
|
353
363
|
|
|
@@ -383,7 +393,7 @@ class SkyModalScrollShadowDirective {
|
|
|
383
393
|
else {
|
|
384
394
|
this.emitShadow({
|
|
385
395
|
bottomShadow: 'none',
|
|
386
|
-
topShadow: 'none'
|
|
396
|
+
topShadow: 'none',
|
|
387
397
|
});
|
|
388
398
|
this.destroyMutationObserver();
|
|
389
399
|
}
|
|
@@ -409,7 +419,7 @@ class SkyModalScrollShadowDirective {
|
|
|
409
419
|
attributes: true,
|
|
410
420
|
characterData: true,
|
|
411
421
|
childList: true,
|
|
412
|
-
subtree: true
|
|
422
|
+
subtree: true,
|
|
413
423
|
});
|
|
414
424
|
});
|
|
415
425
|
}
|
|
@@ -424,10 +434,10 @@ class SkyModalScrollShadowDirective {
|
|
|
424
434
|
if (this.currentTheme === SkyTheme.presets.modern) {
|
|
425
435
|
const el = this.elRef.nativeElement;
|
|
426
436
|
const topShadow = this.buildShadowStyle(el.scrollTop);
|
|
427
|
-
const bottomShadow = this.buildShadowStyle(
|
|
437
|
+
const bottomShadow = this.buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
|
|
428
438
|
this.emitShadow({
|
|
429
439
|
bottomShadow,
|
|
430
|
-
topShadow
|
|
440
|
+
topShadow,
|
|
431
441
|
});
|
|
432
442
|
}
|
|
433
443
|
}
|
|
@@ -435,9 +445,7 @@ class SkyModalScrollShadowDirective {
|
|
|
435
445
|
// Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
|
|
436
446
|
// of the scrollable element, with a max opacity of 0.3.
|
|
437
447
|
const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;
|
|
438
|
-
return opacity > 0 ?
|
|
439
|
-
`0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` :
|
|
440
|
-
'none';
|
|
448
|
+
return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';
|
|
441
449
|
}
|
|
442
450
|
emitShadow(shadow) {
|
|
443
451
|
if (!this.currentShadow ||
|
|
@@ -448,12 +456,12 @@ class SkyModalScrollShadowDirective {
|
|
|
448
456
|
}
|
|
449
457
|
}
|
|
450
458
|
}
|
|
451
|
-
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
452
|
-
SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
|
453
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
459
|
+
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i3.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
460
|
+
SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
|
|
454
462
|
type: Directive,
|
|
455
463
|
args: [{
|
|
456
|
-
selector: '[skyModalScrollShadow]'
|
|
464
|
+
selector: '[skyModalScrollShadow]',
|
|
457
465
|
}]
|
|
458
466
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SkyThemeService, decorators: [{
|
|
459
467
|
type: Optional
|
|
@@ -511,8 +519,8 @@ class SkyModalComponentAdapterService {
|
|
|
511
519
|
/* istanbul ignore next */
|
|
512
520
|
/* sanity check */
|
|
513
521
|
let eventTarget = event.target || event.srcElement;
|
|
514
|
-
return modalEl &&
|
|
515
|
-
eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog');
|
|
522
|
+
return (modalEl &&
|
|
523
|
+
eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog'));
|
|
516
524
|
}
|
|
517
525
|
focusLastElement(list) {
|
|
518
526
|
if (list.length > 0) {
|
|
@@ -531,7 +539,8 @@ class SkyModalComponentAdapterService {
|
|
|
531
539
|
modalOpened(modalEl) {
|
|
532
540
|
/* istanbul ignore else */
|
|
533
541
|
/* handle the case where somehow there is a focused element already in the modal */
|
|
534
|
-
if (!(document.activeElement &&
|
|
542
|
+
if (!(document.activeElement &&
|
|
543
|
+
modalEl.nativeElement.contains(document.activeElement))) {
|
|
535
544
|
let currentScrollX = window.pageXOffset;
|
|
536
545
|
let currentScrollY = window.pageYOffset;
|
|
537
546
|
let inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
|
|
@@ -549,27 +558,22 @@ class SkyModalComponentAdapterService {
|
|
|
549
558
|
const fullPageModalStyle = getComputedStyle(fullPageModalEl);
|
|
550
559
|
const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
|
|
551
560
|
parseInt(fullPageModalStyle.marginBottom, 10);
|
|
552
|
-
const fullPageModalHeight =
|
|
561
|
+
const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
|
|
553
562
|
fullPageModalEl.style.height = fullPageModalHeight;
|
|
554
563
|
fullPageModalEl.style.maxHeight = fullPageModalHeight;
|
|
555
564
|
}
|
|
556
565
|
}
|
|
557
|
-
SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
558
|
-
SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
566
|
+
SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
567
|
+
SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalComponentAdapterService });
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
|
|
560
569
|
type: Injectable
|
|
561
570
|
}], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
|
|
562
571
|
|
|
563
572
|
const skyAnimationModalState = trigger('modalState', [
|
|
564
573
|
state('in', style({ opacity: '1.0' })),
|
|
565
574
|
state('out', style({ opacity: '0.0' })),
|
|
566
|
-
transition('void => *', [
|
|
567
|
-
|
|
568
|
-
animate(150)
|
|
569
|
-
]),
|
|
570
|
-
transition('* => void', [
|
|
571
|
-
animate(150, style({ opacity: '0.0' }))
|
|
572
|
-
])
|
|
575
|
+
transition('void => *', [style({ opacity: '0.0' }), animate(150)]),
|
|
576
|
+
transition('* => void', [animate(150, style({ opacity: '0.0' }))]),
|
|
573
577
|
]);
|
|
574
578
|
|
|
575
579
|
let skyModalUniqueIdentifier = 0;
|
|
@@ -643,7 +647,8 @@ class SkyModalComponent {
|
|
|
643
647
|
if (SkyModalHostService.openModalCount > 0) {
|
|
644
648
|
let topModal = SkyModalHostService.topModal;
|
|
645
649
|
if (topModal && topModal === this.hostService) {
|
|
646
|
-
if (event.which === 27) {
|
|
650
|
+
if (event.which === 27) {
|
|
651
|
+
// Escape key up
|
|
647
652
|
event.preventDefault();
|
|
648
653
|
this.closeButtonClick();
|
|
649
654
|
}
|
|
@@ -656,16 +661,20 @@ class SkyModalComponent {
|
|
|
656
661
|
if (SkyModalHostService.openModalCount > 0) {
|
|
657
662
|
let topModal = SkyModalHostService.topModal;
|
|
658
663
|
if (topModal && topModal === this.hostService) {
|
|
659
|
-
if (event.which === 9) {
|
|
664
|
+
if (event.which === 9) {
|
|
665
|
+
// Tab pressed
|
|
660
666
|
let focusChanged = false;
|
|
661
667
|
let focusElementList = this.coreAdapter.getFocusableChildren(this.elRef.nativeElement);
|
|
662
668
|
if (event.shiftKey &&
|
|
663
669
|
(this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
|
|
664
670
|
this.componentAdapter.isModalFocused(event, this.elRef))) {
|
|
665
|
-
focusChanged =
|
|
671
|
+
focusChanged =
|
|
672
|
+
this.componentAdapter.focusLastElement(focusElementList);
|
|
666
673
|
}
|
|
667
|
-
else if (!event.shiftKey &&
|
|
668
|
-
|
|
674
|
+
else if (!event.shiftKey &&
|
|
675
|
+
this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
|
|
676
|
+
focusChanged =
|
|
677
|
+
this.componentAdapter.focusFirstElement(focusElementList);
|
|
669
678
|
}
|
|
670
679
|
if (focusChanged) {
|
|
671
680
|
event.preventDefault();
|
|
@@ -686,7 +695,7 @@ class SkyModalComponent {
|
|
|
686
695
|
this.dockService.setDockOptions({
|
|
687
696
|
location: SkyDockLocation.ElementBottom,
|
|
688
697
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
689
|
-
zIndex: 5
|
|
698
|
+
zIndex: 5,
|
|
690
699
|
});
|
|
691
700
|
}
|
|
692
701
|
helpButtonClick() {
|
|
@@ -705,26 +714,16 @@ class SkyModalComponent {
|
|
|
705
714
|
return actualSize && actualSize.toLowerCase() === size;
|
|
706
715
|
}
|
|
707
716
|
}
|
|
708
|
-
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
709
|
-
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
710
|
-
|
|
711
|
-
SkyDockService
|
|
712
|
-
], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small' : isSmallSize,\n 'sky-modal-medium' : isMediumSize,\n 'sky-modal-large' : isLargeSize,\n 'sky-modal-tiled' : isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\">\n\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': modalFullPage\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button *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 type=\"button\" class=\"sky-btn sky-modal-btn-close\" [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\" (click)=\"closeButtonClick()\">\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [
|
|
713
|
-
skyAnimationModalState
|
|
714
|
-
] });
|
|
715
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
717
|
+
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
718
|
+
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small': isSmallSize,\n 'sky-modal-medium': isMediumSize,\n 'sky-modal-large': isLargeSize,\n 'sky-modal-tiled': isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': modalFullPage\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
|
|
719
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
716
720
|
type: Component,
|
|
717
721
|
args: [{
|
|
718
722
|
selector: 'sky-modal',
|
|
719
723
|
templateUrl: './modal.component.html',
|
|
720
724
|
styleUrls: ['./modal.component.scss'],
|
|
721
|
-
animations: [
|
|
722
|
-
|
|
723
|
-
],
|
|
724
|
-
providers: [
|
|
725
|
-
SkyModalComponentAdapterService,
|
|
726
|
-
SkyDockService
|
|
727
|
-
]
|
|
725
|
+
animations: [skyAnimationModalState],
|
|
726
|
+
providers: [SkyModalComponentAdapterService, SkyDockService],
|
|
728
727
|
}]
|
|
729
728
|
}], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
730
729
|
type: Host
|
|
@@ -748,8 +747,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
748
747
|
|
|
749
748
|
class SkyModalModule {
|
|
750
749
|
}
|
|
751
|
-
SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
752
|
-
SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
750
|
+
SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
751
|
+
SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
|
|
753
752
|
SkyModalContentComponent,
|
|
754
753
|
SkyModalFooterComponent,
|
|
755
754
|
SkyModalHeaderComponent,
|
|
@@ -762,14 +761,14 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
762
761
|
SkyModalContentComponent,
|
|
763
762
|
SkyModalFooterComponent,
|
|
764
763
|
SkyModalHeaderComponent] });
|
|
765
|
-
SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
764
|
+
SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalModule, imports: [[
|
|
766
765
|
CommonModule,
|
|
767
766
|
RouterModule,
|
|
768
767
|
SkyIconModule,
|
|
769
768
|
SkyModalsResourcesModule,
|
|
770
|
-
SkyThemeModule
|
|
769
|
+
SkyThemeModule,
|
|
771
770
|
]] });
|
|
772
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
773
772
|
type: NgModule,
|
|
774
773
|
args: [{
|
|
775
774
|
declarations: [
|
|
@@ -778,24 +777,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
778
777
|
SkyModalFooterComponent,
|
|
779
778
|
SkyModalHeaderComponent,
|
|
780
779
|
SkyModalHostComponent,
|
|
781
|
-
SkyModalScrollShadowDirective
|
|
780
|
+
SkyModalScrollShadowDirective,
|
|
782
781
|
],
|
|
783
782
|
imports: [
|
|
784
783
|
CommonModule,
|
|
785
784
|
RouterModule,
|
|
786
785
|
SkyIconModule,
|
|
787
786
|
SkyModalsResourcesModule,
|
|
788
|
-
SkyThemeModule
|
|
787
|
+
SkyThemeModule,
|
|
789
788
|
],
|
|
790
789
|
exports: [
|
|
791
790
|
SkyModalComponent,
|
|
792
791
|
SkyModalContentComponent,
|
|
793
792
|
SkyModalFooterComponent,
|
|
794
|
-
SkyModalHeaderComponent
|
|
793
|
+
SkyModalHeaderComponent,
|
|
795
794
|
],
|
|
796
|
-
entryComponents: [
|
|
797
|
-
SkyModalHostComponent
|
|
798
|
-
]
|
|
795
|
+
entryComponents: [SkyModalHostComponent],
|
|
799
796
|
}]
|
|
800
797
|
}] });
|
|
801
798
|
|
|
@@ -920,7 +917,8 @@ class SkyConfirmComponent {
|
|
|
920
917
|
this.preserveWhiteSpace = false;
|
|
921
918
|
}
|
|
922
919
|
ngOnInit() {
|
|
923
|
-
if (this.config.type === SkyConfirmType.Custom &&
|
|
920
|
+
if (this.config.type === SkyConfirmType.Custom &&
|
|
921
|
+
this.config.buttons.length > 0) {
|
|
924
922
|
this.buttons = this.getCustomButtons(this.config.buttons);
|
|
925
923
|
}
|
|
926
924
|
else {
|
|
@@ -934,7 +932,7 @@ class SkyConfirmComponent {
|
|
|
934
932
|
}
|
|
935
933
|
close(button) {
|
|
936
934
|
const result = {
|
|
937
|
-
action: button.action
|
|
935
|
+
action: button.action,
|
|
938
936
|
};
|
|
939
937
|
this.modal.close(result);
|
|
940
938
|
}
|
|
@@ -943,15 +941,16 @@ class SkyConfirmComponent {
|
|
|
943
941
|
switch (this.config.type) {
|
|
944
942
|
default:
|
|
945
943
|
case SkyConfirmType.OK:
|
|
946
|
-
this.resourcesService
|
|
944
|
+
this.resourcesService
|
|
945
|
+
.getString('skyux_confirm_dialog_default_ok_text')
|
|
947
946
|
.subscribe((value) => {
|
|
948
947
|
emitter.next([
|
|
949
948
|
{
|
|
950
949
|
text: value,
|
|
951
950
|
autofocus: true,
|
|
952
951
|
styleType: 'primary',
|
|
953
|
-
action: 'ok'
|
|
954
|
-
}
|
|
952
|
+
action: 'ok',
|
|
953
|
+
},
|
|
955
954
|
]);
|
|
956
955
|
});
|
|
957
956
|
break;
|
|
@@ -962,18 +961,18 @@ class SkyConfirmComponent {
|
|
|
962
961
|
text: values[0],
|
|
963
962
|
autofocus: true,
|
|
964
963
|
styleType: 'primary',
|
|
965
|
-
action: 'yes'
|
|
964
|
+
action: 'yes',
|
|
966
965
|
},
|
|
967
966
|
{
|
|
968
967
|
text: values[1],
|
|
969
968
|
styleType: 'default',
|
|
970
|
-
action: 'no'
|
|
969
|
+
action: 'no',
|
|
971
970
|
},
|
|
972
971
|
{
|
|
973
972
|
text: values[2],
|
|
974
973
|
styleType: 'link',
|
|
975
|
-
action: 'cancel'
|
|
976
|
-
}
|
|
974
|
+
action: 'cancel',
|
|
975
|
+
},
|
|
977
976
|
]);
|
|
978
977
|
});
|
|
979
978
|
break;
|
|
@@ -984,13 +983,13 @@ class SkyConfirmComponent {
|
|
|
984
983
|
text: values[0],
|
|
985
984
|
autofocus: true,
|
|
986
985
|
styleType: 'primary',
|
|
987
|
-
action: 'yes'
|
|
986
|
+
action: 'yes',
|
|
988
987
|
},
|
|
989
988
|
{
|
|
990
989
|
text: values[1],
|
|
991
990
|
styleType: 'link',
|
|
992
|
-
action: 'cancel'
|
|
993
|
-
}
|
|
991
|
+
action: 'cancel',
|
|
992
|
+
},
|
|
994
993
|
]);
|
|
995
994
|
});
|
|
996
995
|
break;
|
|
@@ -1004,20 +1003,20 @@ class SkyConfirmComponent {
|
|
|
1004
1003
|
text: config.text,
|
|
1005
1004
|
action: config.action,
|
|
1006
1005
|
styleType: config.styleType || 'default',
|
|
1007
|
-
autofocus: config.autofocus || false
|
|
1006
|
+
autofocus: config.autofocus || false,
|
|
1008
1007
|
});
|
|
1009
1008
|
});
|
|
1010
1009
|
return buttons;
|
|
1011
1010
|
}
|
|
1012
1011
|
}
|
|
1013
|
-
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1014
|
-
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1012
|
+
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1013
|
+
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"['sky-btn-' + button.styleType]\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
1016
1015
|
type: Component,
|
|
1017
1016
|
args: [{
|
|
1018
1017
|
selector: 'sky-confirm',
|
|
1019
1018
|
templateUrl: './confirm.component.html',
|
|
1020
|
-
styleUrls: ['./confirm.component.scss']
|
|
1019
|
+
styleUrls: ['./confirm.component.scss'],
|
|
1021
1020
|
}]
|
|
1022
1021
|
}], ctorParameters: function () { return [{ type: SkyConfirmModalContext }, { type: SkyModalInstance }, { type: i3$1.SkyLibResourcesService, decorators: [{
|
|
1023
1022
|
type: Optional
|
|
@@ -1025,35 +1024,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImpo
|
|
|
1025
1024
|
|
|
1026
1025
|
class SkyConfirmModule {
|
|
1027
1026
|
}
|
|
1028
|
-
SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1029
|
-
SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1027
|
+
SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1028
|
+
SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
|
|
1030
1029
|
SkyModalModule,
|
|
1031
1030
|
SkyModalsResourcesModule,
|
|
1032
1031
|
SkyThemeModule], exports: [SkyConfirmComponent] });
|
|
1033
|
-
SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1032
|
+
SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmModule, imports: [[
|
|
1034
1033
|
CommonModule,
|
|
1035
1034
|
SkyModalModule,
|
|
1036
1035
|
SkyModalsResourcesModule,
|
|
1037
|
-
SkyThemeModule
|
|
1036
|
+
SkyThemeModule,
|
|
1038
1037
|
]] });
|
|
1039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmModule, decorators: [{
|
|
1040
1039
|
type: NgModule,
|
|
1041
1040
|
args: [{
|
|
1042
|
-
declarations: [
|
|
1043
|
-
SkyConfirmComponent
|
|
1044
|
-
],
|
|
1041
|
+
declarations: [SkyConfirmComponent],
|
|
1045
1042
|
imports: [
|
|
1046
1043
|
CommonModule,
|
|
1047
1044
|
SkyModalModule,
|
|
1048
1045
|
SkyModalsResourcesModule,
|
|
1049
|
-
SkyThemeModule
|
|
1046
|
+
SkyThemeModule,
|
|
1050
1047
|
],
|
|
1051
|
-
exports: [
|
|
1052
|
-
|
|
1053
|
-
],
|
|
1054
|
-
entryComponents: [
|
|
1055
|
-
SkyConfirmComponent
|
|
1056
|
-
]
|
|
1048
|
+
exports: [SkyConfirmComponent],
|
|
1049
|
+
entryComponents: [SkyConfirmComponent],
|
|
1057
1050
|
}]
|
|
1058
1051
|
}] });
|
|
1059
1052
|
|
|
@@ -1093,24 +1086,26 @@ class SkyModalService {
|
|
|
1093
1086
|
let params = this.getConfigFromParameter(config);
|
|
1094
1087
|
params.providers.push({
|
|
1095
1088
|
provide: SkyModalInstance,
|
|
1096
|
-
useValue: modalInstance
|
|
1089
|
+
useValue: modalInstance,
|
|
1097
1090
|
});
|
|
1098
1091
|
SkyModalService.host.instance.open(modalInstance, component, params);
|
|
1099
1092
|
return modalInstance;
|
|
1100
1093
|
}
|
|
1101
1094
|
getConfigFromParameter(providersOrConfig) {
|
|
1102
1095
|
let defaultParams = {
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1096
|
+
providers: [],
|
|
1097
|
+
fullPage: false,
|
|
1098
|
+
size: 'medium',
|
|
1099
|
+
tiledBody: false,
|
|
1107
1100
|
};
|
|
1108
1101
|
let params = undefined;
|
|
1109
1102
|
let method = undefined;
|
|
1110
1103
|
// Object Literal Lookup for backwards compatability.
|
|
1111
1104
|
method = {
|
|
1112
|
-
'providers?': Object.assign({}, defaultParams, {
|
|
1113
|
-
|
|
1105
|
+
'providers?': Object.assign({}, defaultParams, {
|
|
1106
|
+
providers: providersOrConfig,
|
|
1107
|
+
}),
|
|
1108
|
+
config: Object.assign({}, defaultParams, providersOrConfig),
|
|
1114
1109
|
};
|
|
1115
1110
|
if (Array.isArray(providersOrConfig) === true) {
|
|
1116
1111
|
params = method['providers?'];
|
|
@@ -1126,15 +1121,15 @@ class SkyModalService {
|
|
|
1126
1121
|
}
|
|
1127
1122
|
}
|
|
1128
1123
|
}
|
|
1129
|
-
SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1130
|
-
SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1124
|
+
SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1125
|
+
SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalService, providedIn: 'any' });
|
|
1126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyModalService, decorators: [{
|
|
1132
1127
|
type: Injectable,
|
|
1133
1128
|
args: [{
|
|
1134
1129
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
1135
1130
|
// If set to 'root', the component's dependency injections would only be derived from the root
|
|
1136
1131
|
// injector and may loose context if the modal was opened from within a lazy-loaded module.
|
|
1137
|
-
providedIn: 'any'
|
|
1132
|
+
providedIn: 'any',
|
|
1138
1133
|
}]
|
|
1139
1134
|
}], ctorParameters: function () { return [{ type: i3.SkyDynamicComponentService }]; } });
|
|
1140
1135
|
|
|
@@ -1152,10 +1147,12 @@ class SkyConfirmService {
|
|
|
1152
1147
|
*/
|
|
1153
1148
|
open(config) {
|
|
1154
1149
|
const modalInstance = this.modalService.open(SkyConfirmComponent, {
|
|
1155
|
-
providers: [
|
|
1150
|
+
providers: [
|
|
1151
|
+
{
|
|
1156
1152
|
provide: SkyConfirmModalContext,
|
|
1157
|
-
useValue: config
|
|
1158
|
-
}
|
|
1153
|
+
useValue: config,
|
|
1154
|
+
},
|
|
1155
|
+
],
|
|
1159
1156
|
});
|
|
1160
1157
|
const confirmInstance = new SkyConfirmInstance();
|
|
1161
1158
|
modalInstance.closed.subscribe((args) => {
|
|
@@ -1163,7 +1160,7 @@ class SkyConfirmService {
|
|
|
1163
1160
|
// The modal was closed using the ESC key.
|
|
1164
1161
|
if (result === undefined) {
|
|
1165
1162
|
result = {
|
|
1166
|
-
action: 'cancel'
|
|
1163
|
+
action: 'cancel',
|
|
1167
1164
|
};
|
|
1168
1165
|
}
|
|
1169
1166
|
confirmInstance.closed.emit(result);
|
|
@@ -1172,12 +1169,12 @@ class SkyConfirmService {
|
|
|
1172
1169
|
return confirmInstance;
|
|
1173
1170
|
}
|
|
1174
1171
|
}
|
|
1175
|
-
SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1176
|
-
SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1172
|
+
SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1173
|
+
SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmService, providedIn: 'root' });
|
|
1174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyConfirmService, decorators: [{
|
|
1178
1175
|
type: Injectable,
|
|
1179
1176
|
args: [{
|
|
1180
|
-
providedIn: 'root'
|
|
1177
|
+
providedIn: 'root',
|
|
1181
1178
|
}]
|
|
1182
1179
|
}], ctorParameters: function () { return [{ type: SkyModalService }]; } });
|
|
1183
1180
|
|