@skyux/modals 6.0.0-beta.1 → 6.0.0-beta.4
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/documentation.json +374 -631
- package/esm2020/index.mjs +2 -2
- package/esm2020/lib/modules/confirm/confirm-button-action.mjs +1 -1
- package/esm2020/lib/modules/confirm/confirm-button-config.mjs +1 -1
- package/esm2020/lib/modules/confirm/confirm-button.mjs +1 -1
- package/esm2020/lib/modules/confirm/confirm-closed-event-args.mjs +1 -1
- package/esm2020/lib/modules/confirm/confirm-config.mjs +1 -1
- package/esm2020/lib/modules/confirm/confirm-instance.mjs +3 -3
- package/esm2020/lib/modules/confirm/confirm-modal-context.mjs +4 -2
- package/esm2020/lib/modules/confirm/confirm-type.mjs +3 -4
- package/esm2020/lib/modules/confirm/confirm.component.mjs +3 -3
- package/esm2020/lib/modules/confirm/confirm.module.mjs +4 -4
- package/esm2020/lib/modules/confirm/confirm.service.mjs +7 -8
- package/esm2020/lib/modules/modal/modal-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-before-close-handler.mjs +4 -1
- package/esm2020/lib/modules/modal/modal-close-args.mjs +5 -1
- package/esm2020/lib/modules/modal/modal-component-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-configuration.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-content.component.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-footer.component.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-header.component.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-host.component.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-host.service.mjs +3 -3
- package/esm2020/lib/modules/modal/modal-instance.mjs +5 -10
- package/esm2020/lib/modules/modal/modal-scroll-shadow.directive.mjs +3 -3
- package/esm2020/lib/modules/modal/modal.component.mjs +38 -10
- package/esm2020/lib/modules/modal/modal.interface.mjs +1 -1
- package/esm2020/lib/modules/modal/modal.module.mjs +4 -4
- package/esm2020/lib/modules/modal/modal.service.mjs +6 -8
- package/esm2020/lib/modules/shared/sky-modals-resources.module.mjs +4 -4
- package/fesm2015/skyux-modals.mjs +113 -83
- package/fesm2015/skyux-modals.mjs.map +1 -1
- package/fesm2020/skyux-modals.mjs +113 -83
- package/fesm2020/skyux-modals.mjs.map +1 -1
- package/index.d.ts +0 -1
- package/lib/modules/confirm/confirm-button-action.d.ts +3 -0
- package/lib/modules/confirm/confirm-button-config.d.ts +6 -7
- package/lib/modules/confirm/confirm-button.d.ts +4 -0
- package/lib/modules/confirm/confirm-closed-event-args.d.ts +1 -1
- package/lib/modules/confirm/confirm-config.d.ts +3 -5
- package/lib/modules/confirm/confirm-instance.d.ts +2 -2
- package/lib/modules/confirm/confirm-modal-context.d.ts +3 -0
- package/lib/modules/confirm/confirm-type.d.ts +2 -3
- package/lib/modules/confirm/confirm.service.d.ts +3 -4
- package/lib/modules/modal/modal-before-close-handler.d.ts +3 -0
- package/lib/modules/modal/modal-close-args.d.ts +11 -0
- package/lib/modules/modal/modal-instance.d.ts +4 -7
- package/lib/modules/modal/modal.component.d.ts +8 -7
- package/lib/modules/modal/modal.interface.d.ts +1 -1
- package/lib/modules/modal/modal.service.d.ts +2 -3
- package/package.json +24 -21
|
@@ -12,34 +12,29 @@ import * as i3$1 from '@skyux/i18n';
|
|
|
12
12
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
13
13
|
import { takeWhile, takeUntil } from 'rxjs/operators';
|
|
14
14
|
import * as i3 from '@skyux/core';
|
|
15
|
-
import { SkyDockLocation, SkyDockService } from '@skyux/core';
|
|
15
|
+
import { SkyDockLocation, SkyDockService, SkyMediaQueryService, SkyResizeObserverMediaQueryService } from '@skyux/core';
|
|
16
16
|
import { Subject, BehaviorSubject, zip } from 'rxjs';
|
|
17
17
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
18
18
|
|
|
19
19
|
class SkyConfirmInstance {
|
|
20
20
|
constructor() {
|
|
21
21
|
/**
|
|
22
|
-
* Fires when users select an action to close the
|
|
22
|
+
* Fires when users select an action to close the dialog. This event
|
|
23
23
|
* returns a `SkyConfirmCloseEventArgs` object with information about the button that
|
|
24
|
-
* users select.
|
|
24
|
+
* users select. It returns the `'cancel'` action when users press the <kbd>Escape</kbd> key.
|
|
25
25
|
*/
|
|
26
26
|
this.closed = new EventEmitter();
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
/* istanbul ignore next */
|
|
31
|
-
class SkyConfirmModalContext {
|
|
32
|
-
}
|
|
33
|
-
|
|
34
30
|
var SkyConfirmType;
|
|
35
31
|
(function (SkyConfirmType) {
|
|
36
32
|
/**
|
|
37
|
-
* Allows you to define your own
|
|
38
|
-
* specify an array of `SkyConfirmButtonConfig` objects.
|
|
33
|
+
* Allows you to define your own buttons using the `buttons` property of `SkyConfirmConfig`.
|
|
39
34
|
*/
|
|
40
35
|
SkyConfirmType[SkyConfirmType["Custom"] = 0] = "Custom";
|
|
41
36
|
/**
|
|
42
|
-
* Displays one button with an **OK** label.
|
|
37
|
+
* Displays one button with an **OK** label and an `'ok'` action.
|
|
43
38
|
*/
|
|
44
39
|
SkyConfirmType[SkyConfirmType["OK"] = 1] = "OK";
|
|
45
40
|
/**
|
|
@@ -84,16 +79,16 @@ class SkyModalsResourcesProvider {
|
|
|
84
79
|
*/
|
|
85
80
|
class SkyModalsResourcesModule {
|
|
86
81
|
}
|
|
87
|
-
SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
88
|
-
SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
89
|
-
SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
82
|
+
SkyModalsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
83
|
+
SkyModalsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, exports: [SkyI18nModule] });
|
|
84
|
+
SkyModalsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, providers: [
|
|
90
85
|
{
|
|
91
86
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
92
87
|
useClass: SkyModalsResourcesProvider,
|
|
93
88
|
multi: true,
|
|
94
89
|
},
|
|
95
90
|
], imports: [SkyI18nModule] });
|
|
96
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalsResourcesModule, decorators: [{
|
|
97
92
|
type: NgModule,
|
|
98
93
|
args: [{
|
|
99
94
|
exports: [SkyI18nModule],
|
|
@@ -112,9 +107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
112
107
|
*/
|
|
113
108
|
class SkyModalContentComponent {
|
|
114
109
|
}
|
|
115
|
-
SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
116
|
-
SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
110
|
+
SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
+
SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalContentComponent, decorators: [{
|
|
118
113
|
type: Component,
|
|
119
114
|
args: [{ selector: 'sky-modal-content', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"] }]
|
|
120
115
|
}] });
|
|
@@ -124,9 +119,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
124
119
|
*/
|
|
125
120
|
class SkyModalFooterComponent {
|
|
126
121
|
}
|
|
127
|
-
SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
128
|
-
SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
122
|
+
SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
123
|
+
SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] });
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
|
|
130
125
|
type: Component,
|
|
131
126
|
args: [{ selector: 'sky-modal-footer', template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
|
|
132
127
|
}] });
|
|
@@ -136,9 +131,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
136
131
|
*/
|
|
137
132
|
class SkyModalHeaderComponent {
|
|
138
133
|
}
|
|
139
|
-
SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
140
|
-
SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
134
|
+
SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
+
SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
|
|
142
137
|
type: Component,
|
|
143
138
|
args: [{ selector: 'sky-modal-header', template: "<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n", styles: ["h1{margin:0;line-height:1.2}:host-context(.sky-theme-modern.sky-theme-mode-dark) h1{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h1{color:#fbfcfe}\n"] }]
|
|
144
139
|
}] });
|
|
@@ -180,9 +175,9 @@ class SkyModalAdapterService {
|
|
|
180
175
|
}
|
|
181
176
|
SkyModalAdapterService.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page';
|
|
182
177
|
SkyModalAdapterService.MODAL_BODY_CLASS = 'sky-modal-body-open';
|
|
183
|
-
SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
184
|
-
SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
178
|
+
SkyModalAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
179
|
+
SkyModalAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalAdapterService });
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalAdapterService, decorators: [{
|
|
186
181
|
type: Injectable
|
|
187
182
|
}], ctorParameters: function () { return [{ type: i3.SkyAppWindowRef }]; } });
|
|
188
183
|
|
|
@@ -194,9 +189,9 @@ class SkyModalConfiguration {
|
|
|
194
189
|
this.size = 'medium';
|
|
195
190
|
}
|
|
196
191
|
}
|
|
197
|
-
SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
198
|
-
SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
192
|
+
SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
193
|
+
SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
|
|
194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalConfiguration, decorators: [{
|
|
200
195
|
type: Injectable,
|
|
201
196
|
args: [{
|
|
202
197
|
providedIn: 'any',
|
|
@@ -247,9 +242,9 @@ class SkyModalHostService {
|
|
|
247
242
|
}
|
|
248
243
|
}
|
|
249
244
|
SkyModalHostService.modalHosts = [];
|
|
250
|
-
SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
251
|
-
SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
245
|
+
SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
246
|
+
SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
|
|
247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostService, decorators: [{
|
|
253
248
|
type: Injectable,
|
|
254
249
|
args: [{
|
|
255
250
|
providedIn: 'root',
|
|
@@ -329,9 +324,9 @@ class SkyModalHostComponent {
|
|
|
329
324
|
this.changeDetector.detectChanges();
|
|
330
325
|
}
|
|
331
326
|
}
|
|
332
|
-
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
333
|
-
SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
327
|
+
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: SkyModalAdapterService }, { token: i0.Injector }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
328
|
+
SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
|
|
329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
335
330
|
type: Component,
|
|
336
331
|
args: [{ selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], template: "<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}\n"] }]
|
|
337
332
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: SkyModalAdapterService }, { type: i0.Injector }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
|
|
@@ -437,9 +432,9 @@ class SkyModalScrollShadowDirective {
|
|
|
437
432
|
}
|
|
438
433
|
}
|
|
439
434
|
}
|
|
440
|
-
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
441
|
-
SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2
|
|
442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
435
|
+
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i3.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
436
|
+
SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
|
|
443
438
|
type: Directive,
|
|
444
439
|
args: [{
|
|
445
440
|
selector: '[skyModalScrollShadow]',
|
|
@@ -546,9 +541,9 @@ class SkyModalComponentAdapterService {
|
|
|
546
541
|
fullPageModalEl.style.maxHeight = fullPageModalHeight;
|
|
547
542
|
}
|
|
548
543
|
}
|
|
549
|
-
SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
550
|
-
SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
544
|
+
SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
545
|
+
SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService });
|
|
546
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
|
|
552
547
|
type: Injectable
|
|
553
548
|
}], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
|
|
554
549
|
|
|
@@ -563,11 +558,10 @@ let skyModalUniqueIdentifier = 0;
|
|
|
563
558
|
/**
|
|
564
559
|
* Provides a common look-and-feel for modal content with options to display
|
|
565
560
|
* a common modal header, specify body content, and display a common modal footer
|
|
566
|
-
* and buttons.
|
|
567
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
561
|
+
* and buttons.
|
|
568
562
|
*/
|
|
569
563
|
class SkyModalComponent {
|
|
570
|
-
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
|
|
564
|
+
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
|
|
571
565
|
this.hostService = hostService;
|
|
572
566
|
this.config = config;
|
|
573
567
|
this.elRef = elRef;
|
|
@@ -575,6 +569,7 @@ class SkyModalComponent {
|
|
|
575
569
|
this.componentAdapter = componentAdapter;
|
|
576
570
|
this.coreAdapter = coreAdapter;
|
|
577
571
|
this.dockService = dockService;
|
|
572
|
+
this.mediaQueryService = mediaQueryService;
|
|
578
573
|
this.modalState = 'in';
|
|
579
574
|
this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
|
|
580
575
|
this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
|
|
@@ -680,6 +675,16 @@ class SkyModalComponent {
|
|
|
680
675
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
681
676
|
zIndex: 5,
|
|
682
677
|
});
|
|
678
|
+
/* istanbul ignore next */
|
|
679
|
+
if (this.mediaQueryService) {
|
|
680
|
+
this.mediaQueryService.observe(this.modalContentWrapperElement);
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
ngOnDestroy() {
|
|
684
|
+
/* istanbul ignore next */
|
|
685
|
+
if (this.mediaQueryService) {
|
|
686
|
+
this.mediaQueryService.unobserve();
|
|
687
|
+
}
|
|
683
688
|
}
|
|
684
689
|
helpButtonClick() {
|
|
685
690
|
this.hostService.onOpenHelp(this.helpKey);
|
|
@@ -697,14 +702,32 @@ class SkyModalComponent {
|
|
|
697
702
|
return actualSize && actualSize.toLowerCase() === size;
|
|
698
703
|
}
|
|
699
704
|
}
|
|
700
|
-
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
701
|
-
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
702
|
-
|
|
705
|
+
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }, { token: i3.SkyResizeObserverMediaQueryService, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
706
|
+
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
|
|
707
|
+
SkyModalComponentAdapterService,
|
|
708
|
+
SkyDockService,
|
|
709
|
+
{
|
|
710
|
+
provide: SkyMediaQueryService,
|
|
711
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
712
|
+
},
|
|
713
|
+
], 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] });
|
|
714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
703
715
|
type: Component,
|
|
704
|
-
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
716
|
+
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
717
|
+
SkyModalComponentAdapterService,
|
|
718
|
+
SkyDockService,
|
|
719
|
+
{
|
|
720
|
+
provide: SkyMediaQueryService,
|
|
721
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
722
|
+
},
|
|
723
|
+
], 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"] }]
|
|
705
724
|
}], ctorParameters: function () {
|
|
706
725
|
return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
707
726
|
type: Host
|
|
727
|
+
}] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
|
|
728
|
+
type: Optional
|
|
729
|
+
}, {
|
|
730
|
+
type: Host
|
|
708
731
|
}] }];
|
|
709
732
|
}, propDecorators: { wrapperClass: [{
|
|
710
733
|
type: HostBinding,
|
|
@@ -726,8 +749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
726
749
|
|
|
727
750
|
class SkyModalModule {
|
|
728
751
|
}
|
|
729
|
-
SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
730
|
-
SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
752
|
+
SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
753
|
+
SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
|
|
731
754
|
SkyModalContentComponent,
|
|
732
755
|
SkyModalFooterComponent,
|
|
733
756
|
SkyModalHeaderComponent,
|
|
@@ -740,14 +763,14 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
740
763
|
SkyModalContentComponent,
|
|
741
764
|
SkyModalFooterComponent,
|
|
742
765
|
SkyModalHeaderComponent] });
|
|
743
|
-
SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
766
|
+
SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, imports: [[
|
|
744
767
|
CommonModule,
|
|
745
768
|
RouterModule,
|
|
746
769
|
SkyIconModule,
|
|
747
770
|
SkyModalsResourcesModule,
|
|
748
771
|
SkyThemeModule,
|
|
749
772
|
]] });
|
|
750
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
751
774
|
type: NgModule,
|
|
752
775
|
args: [{
|
|
753
776
|
declarations: [
|
|
@@ -774,6 +797,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
774
797
|
}]
|
|
775
798
|
}] });
|
|
776
799
|
|
|
800
|
+
/**
|
|
801
|
+
* @internal
|
|
802
|
+
*/
|
|
803
|
+
class SkyConfirmModalContext {
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
/**
|
|
807
|
+
* Closes the modal instance using the `closeModal` method.
|
|
808
|
+
*/
|
|
777
809
|
class SkyModalBeforeCloseHandler {
|
|
778
810
|
constructor(closeModal, closeArgs) {
|
|
779
811
|
this.closeModal = closeModal;
|
|
@@ -781,14 +813,13 @@ class SkyModalBeforeCloseHandler {
|
|
|
781
813
|
}
|
|
782
814
|
}
|
|
783
815
|
|
|
816
|
+
/**
|
|
817
|
+
* Contains an object with the data passed from users when
|
|
818
|
+
* a modal is closed and the reason that the modal was closed.
|
|
819
|
+
*/
|
|
784
820
|
class SkyModalCloseArgs {
|
|
785
821
|
}
|
|
786
822
|
|
|
787
|
-
// TODO: this class won't show in the generated docs until this work is done:
|
|
788
|
-
// https://github.com/blackbaud/skyux-docs-tools/issues/30
|
|
789
|
-
/**
|
|
790
|
-
* Allows you to close the modal and return data from the launched modal.
|
|
791
|
-
*/
|
|
792
823
|
class SkyModalInstance {
|
|
793
824
|
constructor() {
|
|
794
825
|
this._beforeClose = new Subject();
|
|
@@ -810,7 +841,7 @@ class SkyModalInstance {
|
|
|
810
841
|
* data passed from users on close or save and a `reason` property that indicates
|
|
811
842
|
* whether the modal was saved or closed without saving.
|
|
812
843
|
* The `reason` property accepts any string value.
|
|
813
|
-
* Common examples include `cancel`, `close`, and `save`.
|
|
844
|
+
* Common examples include `"cancel"`, `"close"`, and `"save"`.
|
|
814
845
|
*/
|
|
815
846
|
get closed() {
|
|
816
847
|
return this._closed;
|
|
@@ -828,7 +859,7 @@ class SkyModalInstance {
|
|
|
828
859
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the
|
|
829
860
|
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
|
|
830
861
|
* so that this `close` function can be called from a button in the `sky-modal-footer`.
|
|
831
|
-
* @param reason Specifies the reason for the modal closing, with the default reason of `close`.
|
|
862
|
+
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
|
|
832
863
|
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
|
|
833
864
|
*/
|
|
834
865
|
close(result, reason, ignoreBeforeClose) {
|
|
@@ -838,7 +869,7 @@ class SkyModalInstance {
|
|
|
838
869
|
this.closeModal(reason, result, ignoreBeforeClose);
|
|
839
870
|
}
|
|
840
871
|
/**
|
|
841
|
-
* Closes the modal instance with `reason=cancel`.
|
|
872
|
+
* Closes the modal instance with `reason="cancel"`.
|
|
842
873
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
843
874
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
844
875
|
* that this cancel function can be called from a button in the `sky-modal-footer`.
|
|
@@ -847,7 +878,7 @@ class SkyModalInstance {
|
|
|
847
878
|
this.closeModal('cancel', result);
|
|
848
879
|
}
|
|
849
880
|
/**
|
|
850
|
-
* Closes the modal instance with `reason=save`.
|
|
881
|
+
* Closes the modal instance with `reason="save"`.
|
|
851
882
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
852
883
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
853
884
|
* that this `save` function can be called from a button in `the sky-modal-footer`.
|
|
@@ -986,9 +1017,9 @@ class SkyConfirmComponent {
|
|
|
986
1017
|
return buttons;
|
|
987
1018
|
}
|
|
988
1019
|
}
|
|
989
|
-
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
990
|
-
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
991
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1020
|
+
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SkyConfirmModalContext }, { token: SkyModalInstance }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1021
|
+
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"['sky-btn-' + button.styleType]\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"], components: [{ type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: SkyModalContentComponent, selector: "sky-modal-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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"] }] });
|
|
1022
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
992
1023
|
type: Component,
|
|
993
1024
|
args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\">\n <sky-modal ariaRole=\"alertdialog\">\n <sky-modal-content class=\"sky-confirm-content\">\n <div\n class=\"sky-confirm-message\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n [skyThemeClass]=\"{\n 'sky-emphasized': 'default',\n 'sky-font-heading-1 sky-font-display-3': 'modern'\n }\"\n >\n {{ message }}\n </div>\n\n <div\n *ngIf=\"body\"\n class=\"sky-confirm-body\"\n [ngClass]=\"{\n 'sky-confirm-preserve-white-space': preserveWhiteSpace\n }\"\n >\n {{ body }}\n </div>\n\n <div class=\"sky-confirm-buttons\">\n <button\n *ngFor=\"let button of buttons\"\n type=\"button\"\n class=\"sky-btn\"\n [ngClass]=\"['sky-btn-' + button.styleType]\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern',\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"close(button)\"\n [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n >\n {{ button.text }}\n </button>\n </div>\n </sky-modal-content>\n </sky-modal>\n</div>\n", styles: [".sky-confirm-message{margin-top:5px}.sky-confirm-body{margin-top:10px}.sky-confirm-buttons{margin-top:20px}.sky-confirm-preserve-white-space{white-space:pre-wrap}:host-context(.sky-theme-modern) .sky-confirm-content{padding:20px 30px}:host-context(.sky-theme-modern) .sky-confirm-message{padding-bottom:20px}:host-context(.sky-theme-modern) .sky-confirm-body{margin:0}.sky-theme-modern .sky-confirm-content{padding:20px 30px}.sky-theme-modern .sky-confirm-message{padding-bottom:20px}.sky-theme-modern .sky-confirm-body{margin:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-confirm-message{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-confirm-message{color:#fbfcfe}\n"] }]
|
|
994
1025
|
}], ctorParameters: function () {
|
|
@@ -999,18 +1030,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
999
1030
|
|
|
1000
1031
|
class SkyConfirmModule {
|
|
1001
1032
|
}
|
|
1002
|
-
SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1003
|
-
SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
1033
|
+
SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1034
|
+
SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
|
|
1004
1035
|
SkyModalModule,
|
|
1005
1036
|
SkyModalsResourcesModule,
|
|
1006
1037
|
SkyThemeModule], exports: [SkyConfirmComponent] });
|
|
1007
|
-
SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
1038
|
+
SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, imports: [[
|
|
1008
1039
|
CommonModule,
|
|
1009
1040
|
SkyModalModule,
|
|
1010
1041
|
SkyModalsResourcesModule,
|
|
1011
1042
|
SkyThemeModule,
|
|
1012
1043
|
]] });
|
|
1013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1044
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, decorators: [{
|
|
1014
1045
|
type: NgModule,
|
|
1015
1046
|
args: [{
|
|
1016
1047
|
declarations: [SkyConfirmComponent],
|
|
@@ -1025,13 +1056,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1025
1056
|
}] });
|
|
1026
1057
|
|
|
1027
1058
|
/**
|
|
1028
|
-
* A service that
|
|
1029
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
1059
|
+
* A service that launches modals.
|
|
1030
1060
|
* @dynamic
|
|
1031
1061
|
*/
|
|
1032
1062
|
class SkyModalService {
|
|
1033
1063
|
// TODO: In future breaking change - remove extra parameters as they are no longer used.
|
|
1034
|
-
/* tslint:disable:no-unused-variable */
|
|
1035
1064
|
constructor(dynamicComponentService) {
|
|
1036
1065
|
this.dynamicComponentService = dynamicComponentService;
|
|
1037
1066
|
}
|
|
@@ -1048,7 +1077,7 @@ class SkyModalService {
|
|
|
1048
1077
|
/**
|
|
1049
1078
|
* Opens a modal using the specified component.
|
|
1050
1079
|
* @param component Determines the component to render.
|
|
1051
|
-
* @param {SkyModalConfigurationInterface} config
|
|
1080
|
+
* @param {SkyModalConfigurationInterface} config Specifies configuration options for the modal.
|
|
1052
1081
|
*/
|
|
1053
1082
|
open(component, config) {
|
|
1054
1083
|
const modalInstance = new SkyModalInstance();
|
|
@@ -1091,9 +1120,9 @@ class SkyModalService {
|
|
|
1091
1120
|
}
|
|
1092
1121
|
}
|
|
1093
1122
|
}
|
|
1094
|
-
SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1095
|
-
SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1096
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1123
|
+
SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1124
|
+
SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, providedIn: 'any' });
|
|
1125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, decorators: [{
|
|
1097
1126
|
type: Injectable,
|
|
1098
1127
|
args: [{
|
|
1099
1128
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
@@ -1104,16 +1133,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1104
1133
|
}], ctorParameters: function () { return [{ type: i3.SkyDynamicComponentService }]; } });
|
|
1105
1134
|
|
|
1106
1135
|
/**
|
|
1107
|
-
*
|
|
1108
|
-
* Within the service, you can specify the dialog's message and customize the button text.
|
|
1136
|
+
* Launches a dialog.
|
|
1109
1137
|
*/
|
|
1110
1138
|
class SkyConfirmService {
|
|
1111
1139
|
constructor(modalService) {
|
|
1112
1140
|
this.modalService = modalService;
|
|
1113
1141
|
}
|
|
1114
1142
|
/**
|
|
1115
|
-
* Opens a
|
|
1116
|
-
*
|
|
1143
|
+
* Opens a dialog using the specified options.
|
|
1144
|
+
* @param config Specifies configuration options for the dialog.
|
|
1117
1145
|
*/
|
|
1118
1146
|
open(config) {
|
|
1119
1147
|
const modalInstance = this.modalService.open(SkyConfirmComponent, {
|
|
@@ -1139,9 +1167,9 @@ class SkyConfirmService {
|
|
|
1139
1167
|
return confirmInstance;
|
|
1140
1168
|
}
|
|
1141
1169
|
}
|
|
1142
|
-
SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1143
|
-
SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1170
|
+
SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1171
|
+
SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
|
|
1172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, decorators: [{
|
|
1145
1173
|
type: Injectable,
|
|
1146
1174
|
args: [{
|
|
1147
1175
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
@@ -1151,9 +1179,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1151
1179
|
}]
|
|
1152
1180
|
}], ctorParameters: function () { return [{ type: SkyModalService }]; } });
|
|
1153
1181
|
|
|
1182
|
+
// TODO: confirm-button is internal and should be removed in a future version
|
|
1183
|
+
|
|
1154
1184
|
/**
|
|
1155
1185
|
* Generated bundle index. Do not edit.
|
|
1156
1186
|
*/
|
|
1157
1187
|
|
|
1158
|
-
export { SkyConfirmInstance,
|
|
1188
|
+
export { SkyConfirmInstance, SkyConfirmModule, SkyConfirmService, SkyConfirmType, SkyModalBeforeCloseHandler, SkyModalCloseArgs, SkyModalConfiguration, SkyModalHostService, SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5 };
|
|
1159
1189
|
//# sourceMappingURL=skyux-modals.mjs.map
|