@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
|
@@ -81,7 +81,16 @@
|
|
|
81
81
|
* To update this file, simply rerun the command.
|
|
82
82
|
*/
|
|
83
83
|
var RESOURCES = {
|
|
84
|
-
'EN-US': {
|
|
84
|
+
'EN-US': {
|
|
85
|
+
skyux_confirm_dialog_default_ok_text: { message: 'OK' },
|
|
86
|
+
skyux_confirm_dialog_default_yes_text: { message: 'Yes' },
|
|
87
|
+
skyux_confirm_dialog_default_no_text: { message: 'No' },
|
|
88
|
+
skyux_confirm_dialog_default_cancel_text: { message: 'Cancel' },
|
|
89
|
+
skyux_modal_close: { message: 'Close modal' },
|
|
90
|
+
skyux_modal_open_help: { message: 'Open Help' },
|
|
91
|
+
skyux_modal_footer_cancel_button: { message: 'Cancel' },
|
|
92
|
+
skyux_modal_footer_primary_button: { message: 'Save' },
|
|
93
|
+
},
|
|
85
94
|
};
|
|
86
95
|
var SkyModalsResourcesProvider = /** @class */ (function () {
|
|
87
96
|
function SkyModalsResourcesProvider() {
|
|
@@ -99,22 +108,26 @@
|
|
|
99
108
|
}
|
|
100
109
|
return SkyModalsResourcesModule;
|
|
101
110
|
}());
|
|
102
|
-
SkyModalsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
103
|
-
SkyModalsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
104
|
-
SkyModalsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
111
|
+
SkyModalsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
112
|
+
SkyModalsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalsResourcesModule, exports: [i3.SkyI18nModule] });
|
|
113
|
+
SkyModalsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalsResourcesModule, providers: [
|
|
114
|
+
{
|
|
105
115
|
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
106
116
|
useClass: SkyModalsResourcesProvider,
|
|
107
|
-
multi: true
|
|
108
|
-
}
|
|
109
|
-
|
|
117
|
+
multi: true,
|
|
118
|
+
},
|
|
119
|
+
], imports: [i3.SkyI18nModule] });
|
|
120
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalsResourcesModule, decorators: [{
|
|
110
121
|
type: i0.NgModule,
|
|
111
122
|
args: [{
|
|
112
123
|
exports: [i3.SkyI18nModule],
|
|
113
|
-
providers: [
|
|
124
|
+
providers: [
|
|
125
|
+
{
|
|
114
126
|
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
115
127
|
useClass: SkyModalsResourcesProvider,
|
|
116
|
-
multi: true
|
|
117
|
-
}
|
|
128
|
+
multi: true,
|
|
129
|
+
},
|
|
130
|
+
],
|
|
118
131
|
}]
|
|
119
132
|
}] });
|
|
120
133
|
|
|
@@ -126,15 +139,15 @@
|
|
|
126
139
|
}
|
|
127
140
|
return SkyModalContentComponent;
|
|
128
141
|
}());
|
|
129
|
-
SkyModalContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
130
|
-
SkyModalContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
131
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
142
|
+
SkyModalContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
143
|
+
SkyModalContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0__namespace, 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__namespace.ViewEncapsulation.None });
|
|
144
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalContentComponent, decorators: [{
|
|
132
145
|
type: i0.Component,
|
|
133
146
|
args: [{
|
|
134
147
|
selector: 'sky-modal-content',
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
encapsulation: i0.ViewEncapsulation.None
|
|
148
|
+
template: "<ng-content></ng-content>\n",
|
|
149
|
+
styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"],
|
|
150
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
138
151
|
}]
|
|
139
152
|
}] });
|
|
140
153
|
|
|
@@ -146,14 +159,14 @@
|
|
|
146
159
|
}
|
|
147
160
|
return SkyModalFooterComponent;
|
|
148
161
|
}());
|
|
149
|
-
SkyModalFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
150
|
-
SkyModalFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
151
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
162
|
+
SkyModalFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
163
|
+
SkyModalFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0__namespace, 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"] });
|
|
164
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalFooterComponent, decorators: [{
|
|
152
165
|
type: i0.Component,
|
|
153
166
|
args: [{
|
|
154
167
|
selector: 'sky-modal-footer',
|
|
155
|
-
|
|
156
|
-
|
|
168
|
+
template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n",
|
|
169
|
+
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"],
|
|
157
170
|
}]
|
|
158
171
|
}] });
|
|
159
172
|
|
|
@@ -165,16 +178,14 @@
|
|
|
165
178
|
}
|
|
166
179
|
return SkyModalHeaderComponent;
|
|
167
180
|
}());
|
|
168
|
-
SkyModalHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
169
|
-
SkyModalHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
170
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
181
|
+
SkyModalHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
182
|
+
SkyModalHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0__namespace, template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i1__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
|
|
183
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalHeaderComponent, decorators: [{
|
|
171
184
|
type: i0.Component,
|
|
172
185
|
args: [{
|
|
173
186
|
selector: 'sky-modal-header',
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
'./modal-header.component.scss'
|
|
177
|
-
]
|
|
187
|
+
template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n",
|
|
188
|
+
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"],
|
|
178
189
|
}]
|
|
179
190
|
}] });
|
|
180
191
|
|
|
@@ -216,9 +227,9 @@
|
|
|
216
227
|
}());
|
|
217
228
|
SkyModalAdapterService.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page';
|
|
218
229
|
SkyModalAdapterService.MODAL_BODY_CLASS = 'sky-modal-body-open';
|
|
219
|
-
SkyModalAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
220
|
-
SkyModalAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
221
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
230
|
+
SkyModalAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalAdapterService, deps: [{ token: i3__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
231
|
+
SkyModalAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalAdapterService });
|
|
232
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalAdapterService, decorators: [{
|
|
222
233
|
type: i0.Injectable
|
|
223
234
|
}], ctorParameters: function () { return [{ type: i3__namespace.SkyAppWindowRef }]; } });
|
|
224
235
|
|
|
@@ -257,7 +268,8 @@
|
|
|
257
268
|
});
|
|
258
269
|
Object.defineProperty(SkyModalHostService, "backdropZIndex", {
|
|
259
270
|
get: function () {
|
|
260
|
-
return SkyModalHostService.BASE_Z_INDEX +
|
|
271
|
+
return (SkyModalHostService.BASE_Z_INDEX +
|
|
272
|
+
SkyModalHostService.modalHosts.length * 10);
|
|
261
273
|
},
|
|
262
274
|
enumerable: false,
|
|
263
275
|
configurable: true
|
|
@@ -286,12 +298,12 @@
|
|
|
286
298
|
return SkyModalHostService;
|
|
287
299
|
}());
|
|
288
300
|
SkyModalHostService.modalHosts = [];
|
|
289
|
-
SkyModalHostService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
290
|
-
SkyModalHostService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
291
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
301
|
+
SkyModalHostService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalHostService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
302
|
+
SkyModalHostService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalHostService, providedIn: 'root' });
|
|
303
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalHostService, decorators: [{
|
|
292
304
|
type: i0.Injectable,
|
|
293
305
|
args: [{
|
|
294
|
-
providedIn: 'root'
|
|
306
|
+
providedIn: 'root',
|
|
295
307
|
}]
|
|
296
308
|
}], ctorParameters: function () { return []; } });
|
|
297
309
|
|
|
@@ -305,12 +317,12 @@
|
|
|
305
317
|
}
|
|
306
318
|
return SkyModalConfiguration;
|
|
307
319
|
}());
|
|
308
|
-
SkyModalConfiguration.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
309
|
-
SkyModalConfiguration.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
310
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
320
|
+
SkyModalConfiguration.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalConfiguration, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
321
|
+
SkyModalConfiguration.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalConfiguration, providedIn: 'any' });
|
|
322
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalConfiguration, decorators: [{
|
|
311
323
|
type: i0.Injectable,
|
|
312
324
|
args: [{
|
|
313
|
-
providedIn: 'any'
|
|
325
|
+
providedIn: 'any',
|
|
314
326
|
}]
|
|
315
327
|
}], ctorParameters: function () { return []; } });
|
|
316
328
|
|
|
@@ -349,18 +361,18 @@
|
|
|
349
361
|
var isOpen = true;
|
|
350
362
|
params.providers.push({
|
|
351
363
|
provide: SkyModalHostService,
|
|
352
|
-
useValue: hostService
|
|
364
|
+
useValue: hostService,
|
|
353
365
|
});
|
|
354
366
|
params.providers.push({
|
|
355
367
|
provide: SkyModalConfiguration,
|
|
356
|
-
useValue: params
|
|
368
|
+
useValue: params,
|
|
357
369
|
});
|
|
358
370
|
adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
|
|
359
371
|
adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
|
|
360
372
|
var providers = params.providers || /* istanbul ignore next */ [];
|
|
361
373
|
var injector = i0.Injector.create({
|
|
362
374
|
providers: providers,
|
|
363
|
-
parent: this.injector
|
|
375
|
+
parent: this.injector,
|
|
364
376
|
});
|
|
365
377
|
var modalComponentRef = this.target.createComponent(factory, undefined, injector);
|
|
366
378
|
modalInstance.componentInstance = modalComponentRef.instance;
|
|
@@ -381,9 +393,7 @@
|
|
|
381
393
|
hostService.close.subscribe(function () {
|
|
382
394
|
modalInstance.close();
|
|
383
395
|
});
|
|
384
|
-
this.router.events
|
|
385
|
-
.pipe(operators.takeWhile(function () { return isOpen; }))
|
|
386
|
-
.subscribe(function (event) {
|
|
396
|
+
this.router.events.pipe(operators.takeWhile(function () { return isOpen; })).subscribe(function (event) {
|
|
387
397
|
/* istanbul ignore else */
|
|
388
398
|
if (event instanceof i2.NavigationStart) {
|
|
389
399
|
modalInstance.close();
|
|
@@ -398,21 +408,21 @@
|
|
|
398
408
|
};
|
|
399
409
|
return SkyModalHostComponent;
|
|
400
410
|
}());
|
|
401
|
-
SkyModalHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
402
|
-
SkyModalHostComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
403
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
411
|
+
SkyModalHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalHostComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0__namespace.Injector }, { token: i2__namespace.Router }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
412
|
+
SkyModalHostComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
|
|
413
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalHostComponent, decorators: [{
|
|
404
414
|
type: i0.Component,
|
|
405
415
|
args: [{
|
|
406
416
|
selector: 'sky-modal-host',
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
viewProviders: [SkyModalAdapterService]
|
|
417
|
+
template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n",
|
|
418
|
+
styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"],
|
|
419
|
+
viewProviders: [SkyModalAdapterService],
|
|
410
420
|
}]
|
|
411
421
|
}], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0__namespace.Injector }, { type: i2__namespace.Router }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { target: [{
|
|
412
422
|
type: i0.ViewChild,
|
|
413
423
|
args: ['target', {
|
|
414
424
|
read: i0.ViewContainerRef,
|
|
415
|
-
static: true
|
|
425
|
+
static: true,
|
|
416
426
|
}]
|
|
417
427
|
}] } });
|
|
418
428
|
|
|
@@ -449,7 +459,7 @@
|
|
|
449
459
|
else {
|
|
450
460
|
_this.emitShadow({
|
|
451
461
|
bottomShadow: 'none',
|
|
452
|
-
topShadow: 'none'
|
|
462
|
+
topShadow: 'none',
|
|
453
463
|
});
|
|
454
464
|
_this.destroyMutationObserver();
|
|
455
465
|
}
|
|
@@ -476,7 +486,7 @@
|
|
|
476
486
|
attributes: true,
|
|
477
487
|
characterData: true,
|
|
478
488
|
childList: true,
|
|
479
|
-
subtree: true
|
|
489
|
+
subtree: true,
|
|
480
490
|
});
|
|
481
491
|
});
|
|
482
492
|
}
|
|
@@ -491,10 +501,10 @@
|
|
|
491
501
|
if (this.currentTheme === i1.SkyTheme.presets.modern) {
|
|
492
502
|
var el = this.elRef.nativeElement;
|
|
493
503
|
var topShadow = this.buildShadowStyle(el.scrollTop);
|
|
494
|
-
var bottomShadow = this.buildShadowStyle(
|
|
504
|
+
var bottomShadow = this.buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
|
|
495
505
|
this.emitShadow({
|
|
496
506
|
bottomShadow: bottomShadow,
|
|
497
|
-
topShadow: topShadow
|
|
507
|
+
topShadow: topShadow,
|
|
498
508
|
});
|
|
499
509
|
}
|
|
500
510
|
};
|
|
@@ -502,9 +512,7 @@
|
|
|
502
512
|
// Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
|
|
503
513
|
// of the scrollable element, with a max opacity of 0.3.
|
|
504
514
|
var opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;
|
|
505
|
-
return opacity > 0 ?
|
|
506
|
-
"0px 1px 8px 0px rgba(0, 0, 0, " + opacity + ")" :
|
|
507
|
-
'none';
|
|
515
|
+
return opacity > 0 ? "0px 1px 8px 0px rgba(0, 0, 0, " + opacity + ")" : 'none';
|
|
508
516
|
};
|
|
509
517
|
SkyModalScrollShadowDirective.prototype.emitShadow = function (shadow) {
|
|
510
518
|
if (!this.currentShadow ||
|
|
@@ -516,12 +524,12 @@
|
|
|
516
524
|
};
|
|
517
525
|
return SkyModalScrollShadowDirective;
|
|
518
526
|
}());
|
|
519
|
-
SkyModalScrollShadowDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
520
|
-
SkyModalScrollShadowDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
|
521
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
527
|
+
SkyModalScrollShadowDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace.SkyThemeService, optional: true }, { token: i3__namespace.MutationObserverService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
|
528
|
+
SkyModalScrollShadowDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
|
|
529
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalScrollShadowDirective, decorators: [{
|
|
522
530
|
type: i0.Directive,
|
|
523
531
|
args: [{
|
|
524
|
-
selector: '[skyModalScrollShadow]'
|
|
532
|
+
selector: '[skyModalScrollShadow]',
|
|
525
533
|
}]
|
|
526
534
|
}], ctorParameters: function () {
|
|
527
535
|
return [{ type: i0__namespace.ElementRef }, { type: i1__namespace.SkyThemeService, decorators: [{
|
|
@@ -581,8 +589,8 @@
|
|
|
581
589
|
/* istanbul ignore next */
|
|
582
590
|
/* sanity check */
|
|
583
591
|
var eventTarget = event.target || event.srcElement;
|
|
584
|
-
return modalEl &&
|
|
585
|
-
eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog');
|
|
592
|
+
return (modalEl &&
|
|
593
|
+
eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog'));
|
|
586
594
|
};
|
|
587
595
|
SkyModalComponentAdapterService.prototype.focusLastElement = function (list) {
|
|
588
596
|
if (list.length > 0) {
|
|
@@ -601,7 +609,8 @@
|
|
|
601
609
|
SkyModalComponentAdapterService.prototype.modalOpened = function (modalEl) {
|
|
602
610
|
/* istanbul ignore else */
|
|
603
611
|
/* handle the case where somehow there is a focused element already in the modal */
|
|
604
|
-
if (!(document.activeElement &&
|
|
612
|
+
if (!(document.activeElement &&
|
|
613
|
+
modalEl.nativeElement.contains(document.activeElement))) {
|
|
605
614
|
var currentScrollX = window.pageXOffset;
|
|
606
615
|
var currentScrollY = window.pageYOffset;
|
|
607
616
|
var inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
|
|
@@ -619,28 +628,23 @@
|
|
|
619
628
|
var fullPageModalStyle = getComputedStyle(fullPageModalEl);
|
|
620
629
|
var marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
|
|
621
630
|
parseInt(fullPageModalStyle.marginBottom, 10);
|
|
622
|
-
var fullPageModalHeight =
|
|
631
|
+
var fullPageModalHeight = windowHeight - marginTopBottom + 'px';
|
|
623
632
|
fullPageModalEl.style.height = fullPageModalHeight;
|
|
624
633
|
fullPageModalEl.style.maxHeight = fullPageModalHeight;
|
|
625
634
|
};
|
|
626
635
|
return SkyModalComponentAdapterService;
|
|
627
636
|
}());
|
|
628
|
-
SkyModalComponentAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
629
|
-
SkyModalComponentAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
630
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
637
|
+
SkyModalComponentAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalComponentAdapterService, deps: [{ token: i3__namespace.SkyCoreAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
638
|
+
SkyModalComponentAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalComponentAdapterService });
|
|
639
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalComponentAdapterService, decorators: [{
|
|
631
640
|
type: i0.Injectable
|
|
632
641
|
}], ctorParameters: function () { return [{ type: i3__namespace.SkyCoreAdapterService }]; } });
|
|
633
642
|
|
|
634
643
|
var skyAnimationModalState = animations.trigger('modalState', [
|
|
635
644
|
animations.state('in', animations.style({ opacity: '1.0' })),
|
|
636
645
|
animations.state('out', animations.style({ opacity: '0.0' })),
|
|
637
|
-
animations.transition('void => *', [
|
|
638
|
-
|
|
639
|
-
animations.animate(150)
|
|
640
|
-
]),
|
|
641
|
-
animations.transition('* => void', [
|
|
642
|
-
animations.animate(150, animations.style({ opacity: '0.0' }))
|
|
643
|
-
])
|
|
646
|
+
animations.transition('void => *', [animations.style({ opacity: '0.0' }), animations.animate(150)]),
|
|
647
|
+
animations.transition('* => void', [animations.animate(150, animations.style({ opacity: '0.0' }))]),
|
|
644
648
|
]);
|
|
645
649
|
|
|
646
650
|
var skyModalUniqueIdentifier = 0;
|
|
@@ -762,7 +766,8 @@
|
|
|
762
766
|
if (SkyModalHostService.openModalCount > 0) {
|
|
763
767
|
var topModal = SkyModalHostService.topModal;
|
|
764
768
|
if (topModal && topModal === this.hostService) {
|
|
765
|
-
if (event.which === 27) {
|
|
769
|
+
if (event.which === 27) {
|
|
770
|
+
// Escape key up
|
|
766
771
|
event.preventDefault();
|
|
767
772
|
this.closeButtonClick();
|
|
768
773
|
}
|
|
@@ -775,16 +780,20 @@
|
|
|
775
780
|
if (SkyModalHostService.openModalCount > 0) {
|
|
776
781
|
var topModal = SkyModalHostService.topModal;
|
|
777
782
|
if (topModal && topModal === this.hostService) {
|
|
778
|
-
if (event.which === 9) {
|
|
783
|
+
if (event.which === 9) {
|
|
784
|
+
// Tab pressed
|
|
779
785
|
var focusChanged = false;
|
|
780
786
|
var focusElementList = this.coreAdapter.getFocusableChildren(this.elRef.nativeElement);
|
|
781
787
|
if (event.shiftKey &&
|
|
782
788
|
(this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
|
|
783
789
|
this.componentAdapter.isModalFocused(event, this.elRef))) {
|
|
784
|
-
focusChanged =
|
|
790
|
+
focusChanged =
|
|
791
|
+
this.componentAdapter.focusLastElement(focusElementList);
|
|
785
792
|
}
|
|
786
|
-
else if (!event.shiftKey &&
|
|
787
|
-
|
|
793
|
+
else if (!event.shiftKey &&
|
|
794
|
+
this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
|
|
795
|
+
focusChanged =
|
|
796
|
+
this.componentAdapter.focusFirstElement(focusElementList);
|
|
788
797
|
}
|
|
789
798
|
if (focusChanged) {
|
|
790
799
|
event.preventDefault();
|
|
@@ -806,7 +815,7 @@
|
|
|
806
815
|
this.dockService.setDockOptions({
|
|
807
816
|
location: i3$1.SkyDockLocation.ElementBottom,
|
|
808
817
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
809
|
-
zIndex: 5
|
|
818
|
+
zIndex: 5,
|
|
810
819
|
});
|
|
811
820
|
};
|
|
812
821
|
SkyModalComponent.prototype.helpButtonClick = function () {
|
|
@@ -826,26 +835,16 @@
|
|
|
826
835
|
};
|
|
827
836
|
return SkyModalComponent;
|
|
828
837
|
}());
|
|
829
|
-
SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
830
|
-
SkyModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
831
|
-
|
|
832
|
-
i3$1.SkyDockService
|
|
833
|
-
], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small' : isSmallSize,\n 'sky-modal-medium' : isMediumSize,\n 'sky-modal-large' : isLargeSize,\n 'sky-modal-tiled' : isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\">\n\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [
|
|
834
|
-
skyAnimationModalState
|
|
835
|
-
] });
|
|
836
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SkyModalComponent, decorators: [{
|
|
838
|
+
SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3__namespace.SkyCoreAdapterService }, { token: i3__namespace.SkyDockService, host: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
839
|
+
SkyModalComponent.ɵcmp = i0__namespace.ɵɵ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, i3$1.SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small': isSmallSize,\n 'sky-modal-medium': isMediumSize,\n 'sky-modal-large': isLargeSize,\n 'sky-modal-tiled': isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': modalFullPage\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
|
|
840
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalComponent, decorators: [{
|
|
837
841
|
type: i0.Component,
|
|
838
842
|
args: [{
|
|
839
843
|
selector: 'sky-modal',
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
animations: [
|
|
843
|
-
|
|
844
|
-
],
|
|
845
|
-
providers: [
|
|
846
|
-
SkyModalComponentAdapterService,
|
|
847
|
-
i3$1.SkyDockService
|
|
848
|
-
]
|
|
844
|
+
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",
|
|
845
|
+
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],
|
|
846
|
+
animations: [skyAnimationModalState],
|
|
847
|
+
providers: [SkyModalComponentAdapterService, i3$1.SkyDockService],
|
|
849
848
|
}]
|
|
850
849
|
}], ctorParameters: function () {
|
|
851
850
|
return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0__namespace.ElementRef }, { type: i3__namespace.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3__namespace.SkyCoreAdapterService }, { type: i3__namespace.SkyDockService, decorators: [{
|
|
@@ -874,8 +873,8 @@
|
|
|
874
873
|
}
|
|
875
874
|
return SkyModalModule;
|
|
876
875
|
}());
|
|
877
|
-
SkyModalModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
878
|
-
SkyModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
876
|
+
SkyModalModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
877
|
+
SkyModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalModule, declarations: [SkyModalComponent,
|
|
879
878
|
SkyModalContentComponent,
|
|
880
879
|
SkyModalFooterComponent,
|
|
881
880
|
SkyModalHeaderComponent,
|
|
@@ -888,14 +887,14 @@
|
|
|
888
887
|
SkyModalContentComponent,
|
|
889
888
|
SkyModalFooterComponent,
|
|
890
889
|
SkyModalHeaderComponent] });
|
|
891
|
-
SkyModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
890
|
+
SkyModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalModule, imports: [[
|
|
892
891
|
i6.CommonModule,
|
|
893
892
|
i2.RouterModule,
|
|
894
893
|
i5.SkyIconModule,
|
|
895
894
|
SkyModalsResourcesModule,
|
|
896
|
-
i1.SkyThemeModule
|
|
895
|
+
i1.SkyThemeModule,
|
|
897
896
|
]] });
|
|
898
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
897
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalModule, decorators: [{
|
|
899
898
|
type: i0.NgModule,
|
|
900
899
|
args: [{
|
|
901
900
|
declarations: [
|
|
@@ -904,24 +903,22 @@
|
|
|
904
903
|
SkyModalFooterComponent,
|
|
905
904
|
SkyModalHeaderComponent,
|
|
906
905
|
SkyModalHostComponent,
|
|
907
|
-
SkyModalScrollShadowDirective
|
|
906
|
+
SkyModalScrollShadowDirective,
|
|
908
907
|
],
|
|
909
908
|
imports: [
|
|
910
909
|
i6.CommonModule,
|
|
911
910
|
i2.RouterModule,
|
|
912
911
|
i5.SkyIconModule,
|
|
913
912
|
SkyModalsResourcesModule,
|
|
914
|
-
i1.SkyThemeModule
|
|
913
|
+
i1.SkyThemeModule,
|
|
915
914
|
],
|
|
916
915
|
exports: [
|
|
917
916
|
SkyModalComponent,
|
|
918
917
|
SkyModalContentComponent,
|
|
919
918
|
SkyModalFooterComponent,
|
|
920
|
-
SkyModalHeaderComponent
|
|
919
|
+
SkyModalHeaderComponent,
|
|
921
920
|
],
|
|
922
|
-
entryComponents: [
|
|
923
|
-
SkyModalHostComponent
|
|
924
|
-
]
|
|
921
|
+
entryComponents: [SkyModalHostComponent],
|
|
925
922
|
}]
|
|
926
923
|
}] });
|
|
927
924
|
|
|
@@ -1065,7 +1062,8 @@
|
|
|
1065
1062
|
}
|
|
1066
1063
|
SkyConfirmComponent.prototype.ngOnInit = function () {
|
|
1067
1064
|
var _this = this;
|
|
1068
|
-
if (this.config.type === exports.SkyConfirmType.Custom &&
|
|
1065
|
+
if (this.config.type === exports.SkyConfirmType.Custom &&
|
|
1066
|
+
this.config.buttons.length > 0) {
|
|
1069
1067
|
this.buttons = this.getCustomButtons(this.config.buttons);
|
|
1070
1068
|
}
|
|
1071
1069
|
else {
|
|
@@ -1079,7 +1077,7 @@
|
|
|
1079
1077
|
};
|
|
1080
1078
|
SkyConfirmComponent.prototype.close = function (button) {
|
|
1081
1079
|
var result = {
|
|
1082
|
-
action: button.action
|
|
1080
|
+
action: button.action,
|
|
1083
1081
|
};
|
|
1084
1082
|
this.modal.close(result);
|
|
1085
1083
|
};
|
|
@@ -1088,15 +1086,16 @@
|
|
|
1088
1086
|
switch (this.config.type) {
|
|
1089
1087
|
default:
|
|
1090
1088
|
case exports.SkyConfirmType.OK:
|
|
1091
|
-
this.resourcesService
|
|
1089
|
+
this.resourcesService
|
|
1090
|
+
.getString('skyux_confirm_dialog_default_ok_text')
|
|
1092
1091
|
.subscribe(function (value) {
|
|
1093
1092
|
emitter.next([
|
|
1094
1093
|
{
|
|
1095
1094
|
text: value,
|
|
1096
1095
|
autofocus: true,
|
|
1097
1096
|
styleType: 'primary',
|
|
1098
|
-
action: 'ok'
|
|
1099
|
-
}
|
|
1097
|
+
action: 'ok',
|
|
1098
|
+
},
|
|
1100
1099
|
]);
|
|
1101
1100
|
});
|
|
1102
1101
|
break;
|
|
@@ -1107,18 +1106,18 @@
|
|
|
1107
1106
|
text: values[0],
|
|
1108
1107
|
autofocus: true,
|
|
1109
1108
|
styleType: 'primary',
|
|
1110
|
-
action: 'yes'
|
|
1109
|
+
action: 'yes',
|
|
1111
1110
|
},
|
|
1112
1111
|
{
|
|
1113
1112
|
text: values[1],
|
|
1114
1113
|
styleType: 'default',
|
|
1115
|
-
action: 'no'
|
|
1114
|
+
action: 'no',
|
|
1116
1115
|
},
|
|
1117
1116
|
{
|
|
1118
1117
|
text: values[2],
|
|
1119
1118
|
styleType: 'link',
|
|
1120
|
-
action: 'cancel'
|
|
1121
|
-
}
|
|
1119
|
+
action: 'cancel',
|
|
1120
|
+
},
|
|
1122
1121
|
]);
|
|
1123
1122
|
});
|
|
1124
1123
|
break;
|
|
@@ -1129,13 +1128,13 @@
|
|
|
1129
1128
|
text: values[0],
|
|
1130
1129
|
autofocus: true,
|
|
1131
1130
|
styleType: 'primary',
|
|
1132
|
-
action: 'yes'
|
|
1131
|
+
action: 'yes',
|
|
1133
1132
|
},
|
|
1134
1133
|
{
|
|
1135
1134
|
text: values[1],
|
|
1136
1135
|
styleType: 'link',
|
|
1137
|
-
action: 'cancel'
|
|
1138
|
-
}
|
|
1136
|
+
action: 'cancel',
|
|
1137
|
+
},
|
|
1139
1138
|
]);
|
|
1140
1139
|
});
|
|
1141
1140
|
break;
|
|
@@ -1149,21 +1148,21 @@
|
|
|
1149
1148
|
text: config.text,
|
|
1150
1149
|
action: config.action,
|
|
1151
1150
|
styleType: config.styleType || 'default',
|
|
1152
|
-
autofocus: config.autofocus || false
|
|
1151
|
+
autofocus: config.autofocus || false,
|
|
1153
1152
|
});
|
|
1154
1153
|
});
|
|
1155
1154
|
return buttons;
|
|
1156
1155
|
};
|
|
1157
1156
|
return SkyConfirmComponent;
|
|
1158
1157
|
}());
|
|
1159
|
-
SkyConfirmComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1160
|
-
SkyConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1161
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1158
|
+
SkyConfirmComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3__namespace$1.SkyLibResourcesService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1159
|
+
SkyConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0__namespace, template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"['sky-btn-' + button.styleType]\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1160
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmComponent, decorators: [{
|
|
1162
1161
|
type: i0.Component,
|
|
1163
1162
|
args: [{
|
|
1164
1163
|
selector: 'sky-confirm',
|
|
1165
|
-
|
|
1166
|
-
|
|
1164
|
+
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",
|
|
1165
|
+
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"],
|
|
1167
1166
|
}]
|
|
1168
1167
|
}], ctorParameters: function () {
|
|
1169
1168
|
return [{ type: SkyConfirmModalContext }, { type: SkyModalInstance }, { type: i3__namespace$1.SkyLibResourcesService, decorators: [{
|
|
@@ -1176,35 +1175,29 @@
|
|
|
1176
1175
|
}
|
|
1177
1176
|
return SkyConfirmModule;
|
|
1178
1177
|
}());
|
|
1179
|
-
SkyConfirmModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1180
|
-
SkyConfirmModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1178
|
+
SkyConfirmModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1179
|
+
SkyConfirmModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [i6.CommonModule,
|
|
1181
1180
|
SkyModalModule,
|
|
1182
1181
|
SkyModalsResourcesModule,
|
|
1183
1182
|
i1.SkyThemeModule], exports: [SkyConfirmComponent] });
|
|
1184
|
-
SkyConfirmModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1183
|
+
SkyConfirmModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmModule, imports: [[
|
|
1185
1184
|
i6.CommonModule,
|
|
1186
1185
|
SkyModalModule,
|
|
1187
1186
|
SkyModalsResourcesModule,
|
|
1188
|
-
i1.SkyThemeModule
|
|
1187
|
+
i1.SkyThemeModule,
|
|
1189
1188
|
]] });
|
|
1190
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1189
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmModule, decorators: [{
|
|
1191
1190
|
type: i0.NgModule,
|
|
1192
1191
|
args: [{
|
|
1193
|
-
declarations: [
|
|
1194
|
-
SkyConfirmComponent
|
|
1195
|
-
],
|
|
1192
|
+
declarations: [SkyConfirmComponent],
|
|
1196
1193
|
imports: [
|
|
1197
1194
|
i6.CommonModule,
|
|
1198
1195
|
SkyModalModule,
|
|
1199
1196
|
SkyModalsResourcesModule,
|
|
1200
|
-
i1.SkyThemeModule
|
|
1201
|
-
],
|
|
1202
|
-
exports: [
|
|
1203
|
-
SkyConfirmComponent
|
|
1197
|
+
i1.SkyThemeModule,
|
|
1204
1198
|
],
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
]
|
|
1199
|
+
exports: [SkyConfirmComponent],
|
|
1200
|
+
entryComponents: [SkyConfirmComponent],
|
|
1208
1201
|
}]
|
|
1209
1202
|
}] });
|
|
1210
1203
|
|
|
@@ -1244,24 +1237,26 @@
|
|
|
1244
1237
|
var params = this.getConfigFromParameter(config);
|
|
1245
1238
|
params.providers.push({
|
|
1246
1239
|
provide: SkyModalInstance,
|
|
1247
|
-
useValue: modalInstance
|
|
1240
|
+
useValue: modalInstance,
|
|
1248
1241
|
});
|
|
1249
1242
|
SkyModalService.host.instance.open(modalInstance, component, params);
|
|
1250
1243
|
return modalInstance;
|
|
1251
1244
|
};
|
|
1252
1245
|
SkyModalService.prototype.getConfigFromParameter = function (providersOrConfig) {
|
|
1253
1246
|
var defaultParams = {
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1247
|
+
providers: [],
|
|
1248
|
+
fullPage: false,
|
|
1249
|
+
size: 'medium',
|
|
1250
|
+
tiledBody: false,
|
|
1258
1251
|
};
|
|
1259
1252
|
var params = undefined;
|
|
1260
1253
|
var method = undefined;
|
|
1261
1254
|
// Object Literal Lookup for backwards compatability.
|
|
1262
1255
|
method = {
|
|
1263
|
-
'providers?': Object.assign({}, defaultParams, {
|
|
1264
|
-
|
|
1256
|
+
'providers?': Object.assign({}, defaultParams, {
|
|
1257
|
+
providers: providersOrConfig,
|
|
1258
|
+
}),
|
|
1259
|
+
config: Object.assign({}, defaultParams, providersOrConfig),
|
|
1265
1260
|
};
|
|
1266
1261
|
if (Array.isArray(providersOrConfig) === true) {
|
|
1267
1262
|
params = method['providers?'];
|
|
@@ -1278,15 +1273,15 @@
|
|
|
1278
1273
|
};
|
|
1279
1274
|
return SkyModalService;
|
|
1280
1275
|
}());
|
|
1281
|
-
SkyModalService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1282
|
-
SkyModalService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1283
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1276
|
+
SkyModalService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalService, deps: [{ token: i3__namespace.SkyDynamicComponentService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1277
|
+
SkyModalService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalService, providedIn: 'any' });
|
|
1278
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyModalService, decorators: [{
|
|
1284
1279
|
type: i0.Injectable,
|
|
1285
1280
|
args: [{
|
|
1286
1281
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
1287
1282
|
// If set to 'root', the component's dependency injections would only be derived from the root
|
|
1288
1283
|
// injector and may loose context if the modal was opened from within a lazy-loaded module.
|
|
1289
|
-
providedIn: 'any'
|
|
1284
|
+
providedIn: 'any',
|
|
1290
1285
|
}]
|
|
1291
1286
|
}], ctorParameters: function () { return [{ type: i3__namespace.SkyDynamicComponentService }]; } });
|
|
1292
1287
|
|
|
@@ -1304,10 +1299,12 @@
|
|
|
1304
1299
|
*/
|
|
1305
1300
|
SkyConfirmService.prototype.open = function (config) {
|
|
1306
1301
|
var modalInstance = this.modalService.open(SkyConfirmComponent, {
|
|
1307
|
-
providers: [
|
|
1302
|
+
providers: [
|
|
1303
|
+
{
|
|
1308
1304
|
provide: SkyConfirmModalContext,
|
|
1309
|
-
useValue: config
|
|
1310
|
-
}
|
|
1305
|
+
useValue: config,
|
|
1306
|
+
},
|
|
1307
|
+
],
|
|
1311
1308
|
});
|
|
1312
1309
|
var confirmInstance = new SkyConfirmInstance();
|
|
1313
1310
|
modalInstance.closed.subscribe(function (args) {
|
|
@@ -1315,7 +1312,7 @@
|
|
|
1315
1312
|
// The modal was closed using the ESC key.
|
|
1316
1313
|
if (result === undefined) {
|
|
1317
1314
|
result = {
|
|
1318
|
-
action: 'cancel'
|
|
1315
|
+
action: 'cancel',
|
|
1319
1316
|
};
|
|
1320
1317
|
}
|
|
1321
1318
|
confirmInstance.closed.emit(result);
|
|
@@ -1325,12 +1322,12 @@
|
|
|
1325
1322
|
};
|
|
1326
1323
|
return SkyConfirmService;
|
|
1327
1324
|
}());
|
|
1328
|
-
SkyConfirmService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1329
|
-
SkyConfirmService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1330
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1325
|
+
SkyConfirmService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1326
|
+
SkyConfirmService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmService, providedIn: 'root' });
|
|
1327
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyConfirmService, decorators: [{
|
|
1331
1328
|
type: i0.Injectable,
|
|
1332
1329
|
args: [{
|
|
1333
|
-
providedIn: 'root'
|
|
1330
|
+
providedIn: 'root',
|
|
1334
1331
|
}]
|
|
1335
1332
|
}], ctorParameters: function () { return [{ type: SkyModalService }]; } });
|
|
1336
1333
|
|