@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]',
|
|
@@ -544,9 +539,9 @@ class SkyModalComponentAdapterService {
|
|
|
544
539
|
fullPageModalEl.style.maxHeight = fullPageModalHeight;
|
|
545
540
|
}
|
|
546
541
|
}
|
|
547
|
-
SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
548
|
-
SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
549
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
542
|
+
SkyModalComponentAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i3.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
543
|
+
SkyModalComponentAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService });
|
|
544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
|
|
550
545
|
type: Injectable
|
|
551
546
|
}], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
|
|
552
547
|
|
|
@@ -561,11 +556,10 @@ let skyModalUniqueIdentifier = 0;
|
|
|
561
556
|
/**
|
|
562
557
|
* Provides a common look-and-feel for modal content with options to display
|
|
563
558
|
* a common modal header, specify body content, and display a common modal footer
|
|
564
|
-
* and buttons.
|
|
565
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
559
|
+
* and buttons.
|
|
566
560
|
*/
|
|
567
561
|
class SkyModalComponent {
|
|
568
|
-
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
|
|
562
|
+
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
|
|
569
563
|
this.hostService = hostService;
|
|
570
564
|
this.config = config;
|
|
571
565
|
this.elRef = elRef;
|
|
@@ -573,6 +567,7 @@ class SkyModalComponent {
|
|
|
573
567
|
this.componentAdapter = componentAdapter;
|
|
574
568
|
this.coreAdapter = coreAdapter;
|
|
575
569
|
this.dockService = dockService;
|
|
570
|
+
this.mediaQueryService = mediaQueryService;
|
|
576
571
|
this.modalState = 'in';
|
|
577
572
|
this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
|
|
578
573
|
this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
|
|
@@ -678,6 +673,16 @@ class SkyModalComponent {
|
|
|
678
673
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
679
674
|
zIndex: 5,
|
|
680
675
|
});
|
|
676
|
+
/* istanbul ignore next */
|
|
677
|
+
if (this.mediaQueryService) {
|
|
678
|
+
this.mediaQueryService.observe(this.modalContentWrapperElement);
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
ngOnDestroy() {
|
|
682
|
+
/* istanbul ignore next */
|
|
683
|
+
if (this.mediaQueryService) {
|
|
684
|
+
this.mediaQueryService.unobserve();
|
|
685
|
+
}
|
|
681
686
|
}
|
|
682
687
|
helpButtonClick() {
|
|
683
688
|
this.hostService.onOpenHelp(this.helpKey);
|
|
@@ -695,13 +700,31 @@ class SkyModalComponent {
|
|
|
695
700
|
return actualSize && actualSize.toLowerCase() === size;
|
|
696
701
|
}
|
|
697
702
|
}
|
|
698
|
-
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
699
|
-
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
700
|
-
|
|
703
|
+
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 });
|
|
704
|
+
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: [
|
|
705
|
+
SkyModalComponentAdapterService,
|
|
706
|
+
SkyDockService,
|
|
707
|
+
{
|
|
708
|
+
provide: SkyMediaQueryService,
|
|
709
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
710
|
+
},
|
|
711
|
+
], 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] });
|
|
712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
701
713
|
type: Component,
|
|
702
|
-
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
714
|
+
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
715
|
+
SkyModalComponentAdapterService,
|
|
716
|
+
SkyDockService,
|
|
717
|
+
{
|
|
718
|
+
provide: SkyMediaQueryService,
|
|
719
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
720
|
+
},
|
|
721
|
+
], 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"] }]
|
|
703
722
|
}], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
704
723
|
type: Host
|
|
724
|
+
}] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
|
|
725
|
+
type: Optional
|
|
726
|
+
}, {
|
|
727
|
+
type: Host
|
|
705
728
|
}] }]; }, propDecorators: { wrapperClass: [{
|
|
706
729
|
type: HostBinding,
|
|
707
730
|
args: ['class']
|
|
@@ -722,8 +745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
722
745
|
|
|
723
746
|
class SkyModalModule {
|
|
724
747
|
}
|
|
725
|
-
SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
726
|
-
SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
748
|
+
SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
749
|
+
SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
|
|
727
750
|
SkyModalContentComponent,
|
|
728
751
|
SkyModalFooterComponent,
|
|
729
752
|
SkyModalHeaderComponent,
|
|
@@ -736,14 +759,14 @@ SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
736
759
|
SkyModalContentComponent,
|
|
737
760
|
SkyModalFooterComponent,
|
|
738
761
|
SkyModalHeaderComponent] });
|
|
739
|
-
SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
762
|
+
SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, imports: [[
|
|
740
763
|
CommonModule,
|
|
741
764
|
RouterModule,
|
|
742
765
|
SkyIconModule,
|
|
743
766
|
SkyModalsResourcesModule,
|
|
744
767
|
SkyThemeModule,
|
|
745
768
|
]] });
|
|
746
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
769
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
747
770
|
type: NgModule,
|
|
748
771
|
args: [{
|
|
749
772
|
declarations: [
|
|
@@ -770,6 +793,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
770
793
|
}]
|
|
771
794
|
}] });
|
|
772
795
|
|
|
796
|
+
/**
|
|
797
|
+
* Closes the modal instance using the `closeModal` method.
|
|
798
|
+
*/
|
|
773
799
|
class SkyModalBeforeCloseHandler {
|
|
774
800
|
constructor(closeModal, closeArgs) {
|
|
775
801
|
this.closeModal = closeModal;
|
|
@@ -777,14 +803,13 @@ class SkyModalBeforeCloseHandler {
|
|
|
777
803
|
}
|
|
778
804
|
}
|
|
779
805
|
|
|
806
|
+
/**
|
|
807
|
+
* Contains an object with the data passed from users when
|
|
808
|
+
* a modal is closed and the reason that the modal was closed.
|
|
809
|
+
*/
|
|
780
810
|
class SkyModalCloseArgs {
|
|
781
811
|
}
|
|
782
812
|
|
|
783
|
-
// TODO: this class won't show in the generated docs until this work is done:
|
|
784
|
-
// https://github.com/blackbaud/skyux-docs-tools/issues/30
|
|
785
|
-
/**
|
|
786
|
-
* Allows you to close the modal and return data from the launched modal.
|
|
787
|
-
*/
|
|
788
813
|
class SkyModalInstance {
|
|
789
814
|
constructor() {
|
|
790
815
|
this._beforeClose = new Subject();
|
|
@@ -806,7 +831,7 @@ class SkyModalInstance {
|
|
|
806
831
|
* data passed from users on close or save and a `reason` property that indicates
|
|
807
832
|
* whether the modal was saved or closed without saving.
|
|
808
833
|
* The `reason` property accepts any string value.
|
|
809
|
-
* Common examples include `cancel`, `close`, and `save`.
|
|
834
|
+
* Common examples include `"cancel"`, `"close"`, and `"save"`.
|
|
810
835
|
*/
|
|
811
836
|
get closed() {
|
|
812
837
|
return this._closed;
|
|
@@ -824,7 +849,7 @@ class SkyModalInstance {
|
|
|
824
849
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the
|
|
825
850
|
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
|
|
826
851
|
* so that this `close` function can be called from a button in the `sky-modal-footer`.
|
|
827
|
-
* @param reason Specifies the reason for the modal closing, with the default reason of `close`.
|
|
852
|
+
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
|
|
828
853
|
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
|
|
829
854
|
*/
|
|
830
855
|
close(result, reason, ignoreBeforeClose) {
|
|
@@ -834,7 +859,7 @@ class SkyModalInstance {
|
|
|
834
859
|
this.closeModal(reason, result, ignoreBeforeClose);
|
|
835
860
|
}
|
|
836
861
|
/**
|
|
837
|
-
* Closes the modal instance with `reason=cancel`.
|
|
862
|
+
* Closes the modal instance with `reason="cancel"`.
|
|
838
863
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
839
864
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
840
865
|
* that this cancel function can be called from a button in the `sky-modal-footer`.
|
|
@@ -843,7 +868,7 @@ class SkyModalInstance {
|
|
|
843
868
|
this.closeModal('cancel', result);
|
|
844
869
|
}
|
|
845
870
|
/**
|
|
846
|
-
* Closes the modal instance with `reason=save`.
|
|
871
|
+
* Closes the modal instance with `reason="save"`.
|
|
847
872
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
848
873
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
849
874
|
* that this `save` function can be called from a button in `the sky-modal-footer`.
|
|
@@ -882,6 +907,12 @@ class SkyModalInstance {
|
|
|
882
907
|
}
|
|
883
908
|
}
|
|
884
909
|
|
|
910
|
+
/**
|
|
911
|
+
* @internal
|
|
912
|
+
*/
|
|
913
|
+
class SkyConfirmModalContext {
|
|
914
|
+
}
|
|
915
|
+
|
|
885
916
|
class SkyConfirmComponent {
|
|
886
917
|
constructor(config, modal, resourcesService) {
|
|
887
918
|
this.config = config;
|
|
@@ -982,9 +1013,9 @@ class SkyConfirmComponent {
|
|
|
982
1013
|
return buttons;
|
|
983
1014
|
}
|
|
984
1015
|
}
|
|
985
|
-
SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
986
|
-
SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1016
|
+
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 });
|
|
1017
|
+
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"] }] });
|
|
1018
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmComponent, decorators: [{
|
|
988
1019
|
type: Component,
|
|
989
1020
|
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"] }]
|
|
990
1021
|
}], ctorParameters: function () { return [{ type: SkyConfirmModalContext }, { type: SkyModalInstance }, { type: i3$1.SkyLibResourcesService, decorators: [{
|
|
@@ -993,18 +1024,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
993
1024
|
|
|
994
1025
|
class SkyConfirmModule {
|
|
995
1026
|
}
|
|
996
|
-
SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
997
|
-
SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
1027
|
+
SkyConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1028
|
+
SkyConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
|
|
998
1029
|
SkyModalModule,
|
|
999
1030
|
SkyModalsResourcesModule,
|
|
1000
1031
|
SkyThemeModule], exports: [SkyConfirmComponent] });
|
|
1001
|
-
SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
1032
|
+
SkyConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, imports: [[
|
|
1002
1033
|
CommonModule,
|
|
1003
1034
|
SkyModalModule,
|
|
1004
1035
|
SkyModalsResourcesModule,
|
|
1005
1036
|
SkyThemeModule,
|
|
1006
1037
|
]] });
|
|
1007
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmModule, decorators: [{
|
|
1008
1039
|
type: NgModule,
|
|
1009
1040
|
args: [{
|
|
1010
1041
|
declarations: [SkyConfirmComponent],
|
|
@@ -1019,13 +1050,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1019
1050
|
}] });
|
|
1020
1051
|
|
|
1021
1052
|
/**
|
|
1022
|
-
* A service that
|
|
1023
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
1053
|
+
* A service that launches modals.
|
|
1024
1054
|
* @dynamic
|
|
1025
1055
|
*/
|
|
1026
1056
|
class SkyModalService {
|
|
1027
1057
|
// TODO: In future breaking change - remove extra parameters as they are no longer used.
|
|
1028
|
-
/* tslint:disable:no-unused-variable */
|
|
1029
1058
|
constructor(dynamicComponentService) {
|
|
1030
1059
|
this.dynamicComponentService = dynamicComponentService;
|
|
1031
1060
|
}
|
|
@@ -1042,7 +1071,7 @@ class SkyModalService {
|
|
|
1042
1071
|
/**
|
|
1043
1072
|
* Opens a modal using the specified component.
|
|
1044
1073
|
* @param component Determines the component to render.
|
|
1045
|
-
* @param {SkyModalConfigurationInterface} config
|
|
1074
|
+
* @param {SkyModalConfigurationInterface} config Specifies configuration options for the modal.
|
|
1046
1075
|
*/
|
|
1047
1076
|
open(component, config) {
|
|
1048
1077
|
const modalInstance = new SkyModalInstance();
|
|
@@ -1085,9 +1114,9 @@ class SkyModalService {
|
|
|
1085
1114
|
}
|
|
1086
1115
|
}
|
|
1087
1116
|
}
|
|
1088
|
-
SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1089
|
-
SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1090
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1117
|
+
SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, deps: [{ token: i3.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1118
|
+
SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, providedIn: 'any' });
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyModalService, decorators: [{
|
|
1091
1120
|
type: Injectable,
|
|
1092
1121
|
args: [{
|
|
1093
1122
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
@@ -1098,16 +1127,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1098
1127
|
}], ctorParameters: function () { return [{ type: i3.SkyDynamicComponentService }]; } });
|
|
1099
1128
|
|
|
1100
1129
|
/**
|
|
1101
|
-
*
|
|
1102
|
-
* Within the service, you can specify the dialog's message and customize the button text.
|
|
1130
|
+
* Launches a dialog.
|
|
1103
1131
|
*/
|
|
1104
1132
|
class SkyConfirmService {
|
|
1105
1133
|
constructor(modalService) {
|
|
1106
1134
|
this.modalService = modalService;
|
|
1107
1135
|
}
|
|
1108
1136
|
/**
|
|
1109
|
-
* Opens a
|
|
1110
|
-
*
|
|
1137
|
+
* Opens a dialog using the specified options.
|
|
1138
|
+
* @param config Specifies configuration options for the dialog.
|
|
1111
1139
|
*/
|
|
1112
1140
|
open(config) {
|
|
1113
1141
|
const modalInstance = this.modalService.open(SkyConfirmComponent, {
|
|
@@ -1133,9 +1161,9 @@ class SkyConfirmService {
|
|
|
1133
1161
|
return confirmInstance;
|
|
1134
1162
|
}
|
|
1135
1163
|
}
|
|
1136
|
-
SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1137
|
-
SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1164
|
+
SkyConfirmService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1165
|
+
SkyConfirmService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, providedIn: 'any' });
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyConfirmService, decorators: [{
|
|
1139
1167
|
type: Injectable,
|
|
1140
1168
|
args: [{
|
|
1141
1169
|
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
@@ -1147,9 +1175,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1147
1175
|
|
|
1148
1176
|
// TODO: defaults won't show in the generated docs until this work is done:
|
|
1149
1177
|
|
|
1178
|
+
// TODO: confirm-button is internal and should be removed in a future version
|
|
1179
|
+
|
|
1150
1180
|
/**
|
|
1151
1181
|
* Generated bundle index. Do not edit.
|
|
1152
1182
|
*/
|
|
1153
1183
|
|
|
1154
|
-
export { SkyConfirmInstance,
|
|
1184
|
+
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 };
|
|
1155
1185
|
//# sourceMappingURL=skyux-modals.mjs.map
|