@skyux/modals 5.0.5 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -4
- package/documentation.json +53 -8
- package/esm2015/index.js +26 -0
- package/esm2015/index.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-button-action.js +2 -0
- package/esm2015/lib/modules/confirm/confirm-button-action.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-button-config.js +2 -0
- package/esm2015/lib/modules/confirm/confirm-button-config.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-button.js +2 -0
- package/esm2015/lib/modules/confirm/confirm-button.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-closed-event-args.js +2 -0
- package/esm2015/lib/modules/confirm/confirm-closed-event-args.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-config.js +2 -0
- package/esm2015/lib/modules/confirm/confirm-config.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-instance.js +12 -0
- package/esm2015/lib/modules/confirm/confirm-instance.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-modal-context.js +4 -0
- package/esm2015/lib/modules/confirm/confirm-modal-context.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm-type.js +25 -0
- package/esm2015/lib/modules/confirm/confirm-type.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm.component.js +127 -0
- package/esm2015/lib/modules/confirm/confirm.component.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm.module.js +35 -0
- package/esm2015/lib/modules/confirm/confirm.module.js.map +1 -0
- package/esm2015/lib/modules/confirm/confirm.service.js +55 -0
- package/esm2015/lib/modules/confirm/confirm.service.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-adapter.service.js +47 -0
- package/esm2015/lib/modules/modal/modal-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-before-close-handler.js +7 -0
- package/esm2015/lib/modules/modal/modal-before-close-handler.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-close-args.js +4 -0
- package/esm2015/lib/modules/modal/modal-close-args.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-component-adapter.service.js +98 -0
- package/esm2015/lib/modules/modal/modal-component-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-configuration.js +20 -0
- package/esm2015/lib/modules/modal/modal-configuration.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-content.component.js +19 -0
- package/esm2015/lib/modules/modal/modal-content.component.js.map +1 -0
- package/esm2015/{modules → lib/modules}/modal/modal-footer.component.js +1 -1
- package/esm2015/lib/modules/modal/modal-footer.component.js.map +1 -0
- package/esm2015/{modules → lib/modules}/modal/modal-header.component.js +1 -1
- package/esm2015/lib/modules/modal/modal-header.component.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-host.component.js +101 -0
- package/esm2015/lib/modules/modal/modal-host.component.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-host.service.js +55 -0
- package/esm2015/lib/modules/modal/modal-host.service.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-instance.js +105 -0
- package/esm2015/lib/modules/modal/modal-instance.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-scroll-shadow-event-args.js +2 -0
- package/esm2015/lib/modules/modal/modal-scroll-shadow-event-args.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-scroll-shadow.directive.js +122 -0
- package/esm2015/lib/modules/modal/modal-scroll-shadow.directive.js.map +1 -0
- package/esm2015/lib/modules/modal/modal-state-animation.js +8 -0
- package/esm2015/lib/modules/modal/modal-state-animation.js.map +1 -0
- package/esm2015/lib/modules/modal/modal.component.js +184 -0
- package/esm2015/lib/modules/modal/modal.component.js.map +1 -0
- package/esm2015/lib/modules/modal/modal.interface.js +4 -0
- package/esm2015/lib/modules/modal/modal.interface.js.map +1 -0
- package/esm2015/lib/modules/modal/modal.module.js +64 -0
- package/esm2015/lib/modules/modal/modal.module.js.map +1 -0
- package/esm2015/lib/modules/modal/modal.service.js +85 -0
- package/esm2015/lib/modules/modal/modal.service.js.map +1 -0
- package/esm2015/lib/modules/shared/sky-modals-resources.module.js +54 -0
- package/esm2015/lib/modules/shared/sky-modals-resources.module.js.map +1 -0
- package/esm2015/skyux-modals.js +2 -2
- package/esm2015/skyux-modals.js.map +1 -0
- package/esm2015/testing/modal-fixture.js +1 -1
- package/esm2015/testing/modal-fixture.js.map +1 -0
- package/esm2015/testing/public-api.js +1 -1
- package/esm2015/testing/public-api.js.map +1 -0
- package/esm2015/testing/skyux-modals-testing.js +1 -1
- package/esm2015/testing/skyux-modals-testing.js.map +1 -0
- package/fesm2015/skyux-modals-testing.js.map +1 -1
- package/fesm2015/skyux-modals.js.map +1 -1
- package/index.d.ts +23 -0
- package/{modules → lib/modules}/confirm/confirm-button-action.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm-button-config.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm-button.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm-closed-event-args.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm-config.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm-instance.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm-modal-context.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm-type.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm.component.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm.module.d.ts +0 -0
- package/{modules → lib/modules}/confirm/confirm.service.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-before-close-handler.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-close-args.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-component-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-configuration.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-content.component.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-footer.component.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-header.component.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-host.component.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-host.service.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-instance.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-scroll-shadow-event-args.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-scroll-shadow.directive.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal-state-animation.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal.component.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal.interface.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal.module.d.ts +0 -0
- package/{modules → lib/modules}/modal/modal.service.d.ts +0 -0
- package/{modules → lib/modules}/shared/sky-modals-resources.module.d.ts +0 -0
- package/package.json +18 -4
- package/skyux-modals.d.ts +1 -1
- package/LICENSE +0 -21
- package/esm2015/modules/confirm/confirm-button-action.js +0 -2
- package/esm2015/modules/confirm/confirm-button-config.js +0 -2
- package/esm2015/modules/confirm/confirm-button.js +0 -2
- package/esm2015/modules/confirm/confirm-closed-event-args.js +0 -2
- package/esm2015/modules/confirm/confirm-config.js +0 -2
- package/esm2015/modules/confirm/confirm-instance.js +0 -12
- package/esm2015/modules/confirm/confirm-modal-context.js +0 -4
- package/esm2015/modules/confirm/confirm-type.js +0 -25
- package/esm2015/modules/confirm/confirm.component.js +0 -124
- package/esm2015/modules/confirm/confirm.module.js +0 -35
- package/esm2015/modules/confirm/confirm.service.js +0 -54
- package/esm2015/modules/modal/modal-adapter.service.js +0 -46
- package/esm2015/modules/modal/modal-before-close-handler.js +0 -7
- package/esm2015/modules/modal/modal-close-args.js +0 -4
- package/esm2015/modules/modal/modal-component-adapter.service.js +0 -97
- package/esm2015/modules/modal/modal-configuration.js +0 -20
- package/esm2015/modules/modal/modal-content.component.js +0 -19
- package/esm2015/modules/modal/modal-host.component.js +0 -101
- package/esm2015/modules/modal/modal-host.service.js +0 -55
- package/esm2015/modules/modal/modal-instance.js +0 -105
- package/esm2015/modules/modal/modal-scroll-shadow-event-args.js +0 -2
- package/esm2015/modules/modal/modal-scroll-shadow.directive.js +0 -121
- package/esm2015/modules/modal/modal-state-animation.js +0 -8
- package/esm2015/modules/modal/modal.component.js +0 -183
- package/esm2015/modules/modal/modal.interface.js +0 -4
- package/esm2015/modules/modal/modal.module.js +0 -64
- package/esm2015/modules/modal/modal.service.js +0 -84
- package/esm2015/modules/shared/sky-modals-resources.module.js +0 -54
- package/esm2015/public-api.js +0 -26
- package/public-api.d.ts +0 -23
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-instance.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE1E,6EAA6E;AAC7E,0DAA0D;AAE1D;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAA7B;QAqCU,iBAAY,GAAG,IAAI,OAAO,EAA8B,CAAC;QAEzD,YAAO,GAAG,IAAI,OAAO,EAAqB,CAAC;QAE3C,gBAAW,GAAG,IAAI,OAAO,EAAU,CAAC;IAgF9C,CAAC;IAxHC;;;;;OAKG;IACH,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED;;;;;;;OAOG;IACH,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED;;;;OAIG;IACH,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAaD;;;;;;;OAOG;IACI,KAAK,CACV,MAAY,EACZ,MAAe,EACf,iBAA2B;QAE3B,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,MAAM,GAAG,OAAO,CAAC;SAClB;QAED,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACrD,CAAC;IAED;;;;;OAKG;IACI,MAAM,CAAC,MAAY;QACxB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACI,IAAI,CAAC,MAAY;QACtB,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,CAAC;IAED;;;;;;OAMG;IACI,QAAQ,CAAC,OAAgB;QAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAEO,UAAU,CAChB,IAAY,EACZ,MAAY,EACZ,iBAAiB,GAAG,KAAK;QAEzB,MAAM,IAAI,GAAG,IAAI,iBAAiB,EAAE,CAAC;QAErC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QAEnB,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,IAAI,iBAAiB,EAAE;YACjE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CACpB,IAAI,0BAA0B,CAAC,GAAG,EAAE;gBAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC,EAAE,IAAI,CAAC,CACT,CAAC;SACH;IACH,CAAC;IAEO,YAAY,CAAC,IAAuB;QAC1C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;IAC9B,CAAC;CACF","sourcesContent":["import { Observable, Subject } from 'rxjs';\n\nimport { SkyModalCloseArgs } from './modal-close-args';\n\nimport { SkyModalBeforeCloseHandler } from './modal-before-close-handler';\n\n// TODO: this class won't show in the generated docs until this work is done:\n// https://github.com/blackbaud/skyux-docs-tools/issues/30\n\n/**\n * Allows you to close the modal and return data from the launched modal.\n */\nexport class SkyModalInstance {\n /**\n * An event that the modal instance emits when it is about to close.\n * It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method\n * that closes the modal. If a subscription exists for this event,\n * the modal does not close until the subscriber calls the `closeModal` method.\n */\n public get beforeClose(): Observable<SkyModalBeforeCloseHandler> {\n return this._beforeClose;\n }\n\n /**\n * An event that the modal instance emits when it closes.\n * It emits a `SkyCloseModalArgs` object with a `data` property that includes\n * data passed from users on close or save and a `reason` property that indicates\n * whether the modal was saved or closed without saving.\n * The `reason` property accepts any string value.\n * Common examples include `cancel`, `close`, and `save`.\n */\n public get closed(): Observable<SkyModalCloseArgs> {\n return this._closed;\n }\n\n /**\n * An event that the modal instance emits when users click\n * the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button.\n * If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.\n */\n public get helpOpened(): Observable<string> {\n return this._helpOpened;\n }\n\n /**\n * A direct reference to the provided component's class.\n */\n public componentInstance: any;\n\n private _beforeClose = new Subject<SkyModalBeforeCloseHandler>();\n\n private _closed = new Subject<SkyModalCloseArgs>();\n\n private _helpOpened = new Subject<string>();\n\n /**\n * Closes the modal instance.\n * @param result Specifies an object to emit to subscribers of the `closed` event of the\n * modal instance. The `SkyModalInstance` provider can be injected into a component's constructor\n * so that this `close` function can be called from a button in the `sky-modal-footer`.\n * @param reason Specifies the reason for the modal closing, with the default reason of `close`.\n * @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.\n */\n public close(\n result?: any,\n reason?: string,\n ignoreBeforeClose?: boolean\n ): void {\n if (reason === undefined) {\n reason = 'close';\n }\n\n this.closeModal(reason, result, ignoreBeforeClose);\n }\n\n /**\n * Closes the modal instance with `reason=cancel`.\n * @param result Specifies an object to emit to subscribers of the `closed` event of the modal\n * instance. The `SkyModalInstance` provider can be injected into a component's constructor so\n * that this cancel function can be called from a button in the `sky-modal-footer`.\n */\n public cancel(result?: any): void {\n this.closeModal('cancel', result);\n }\n\n /**\n * Closes the modal instance with `reason=save`.\n * @param result Specifies an object to emit to subscribers of the `closed` event of the modal\n * instance. The `SkyModalInstance` provider can be injected into a component's constructor so\n * that this `save` function can be called from a button in `the sky-modal-footer`.\n */\n public save(result?: any): void {\n this.closeModal('save', result);\n }\n\n /**\n * Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open\n * when users click the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button.\n * @param helpKey Specifies a string to emit to subscribers of\n * the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider\n * into a component's constructor to call the `openHelp` function in the modal template.\n */\n public openHelp(helpKey?: string): void {\n this._helpOpened.next(helpKey);\n }\n\n private closeModal(\n type: string,\n result?: any,\n ignoreBeforeClose = false\n ): void {\n const args = new SkyModalCloseArgs();\n\n args.reason = type;\n args.data = result;\n\n if (this._beforeClose.observers.length === 0 || ignoreBeforeClose) {\n this.notifyClosed(args);\n } else {\n this._beforeClose.next(\n new SkyModalBeforeCloseHandler(() => {\n this.notifyClosed(args);\n }, args)\n );\n }\n }\n\n private notifyClosed(args: SkyModalCloseArgs): void {\n this._closed.next(args);\n this._closed.complete();\n this._beforeClose.complete();\n this._helpOpened.complete();\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-scroll-shadow-event-args.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-scroll-shadow-event-args.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * @internal\n */\nexport interface SkyModalScrollShadowEventArgs {\n bottomShadow: string;\n\n topShadow: string;\n}\n"]}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Directive, ElementRef, EventEmitter, HostListener, Optional, Output, NgZone, } from '@angular/core';
|
|
2
|
+
import { Subject } from 'rxjs';
|
|
3
|
+
import { takeUntil } from 'rxjs/operators';
|
|
4
|
+
import { MutationObserverService } from '@skyux/core';
|
|
5
|
+
import { SkyTheme, SkyThemeService } from '@skyux/theme';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@skyux/theme";
|
|
8
|
+
import * as i2 from "@skyux/core";
|
|
9
|
+
/**
|
|
10
|
+
* Raises an event when the box shadow for the modal header or footer should be adjusted
|
|
11
|
+
* based on the scroll position of the host element.
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
export class SkyModalScrollShadowDirective {
|
|
15
|
+
constructor(elRef, themeSvc, mutationObserverSvc, ngZone) {
|
|
16
|
+
this.elRef = elRef;
|
|
17
|
+
this.themeSvc = themeSvc;
|
|
18
|
+
this.mutationObserverSvc = mutationObserverSvc;
|
|
19
|
+
this.ngZone = ngZone;
|
|
20
|
+
this.skyModalScrollShadow = new EventEmitter();
|
|
21
|
+
this.ngUnsubscribe = new Subject();
|
|
22
|
+
}
|
|
23
|
+
windowResize() {
|
|
24
|
+
this.checkForShadow();
|
|
25
|
+
}
|
|
26
|
+
scroll() {
|
|
27
|
+
this.checkForShadow();
|
|
28
|
+
}
|
|
29
|
+
ngOnInit() {
|
|
30
|
+
if (this.themeSvc) {
|
|
31
|
+
this.themeSvc.settingsChange
|
|
32
|
+
.pipe(takeUntil(this.ngUnsubscribe))
|
|
33
|
+
.subscribe((themeSettings) => {
|
|
34
|
+
this.currentTheme = themeSettings.currentSettings.theme;
|
|
35
|
+
if (this.currentTheme === SkyTheme.presets.modern) {
|
|
36
|
+
this.initMutationObserver();
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this.emitShadow({
|
|
40
|
+
bottomShadow: 'none',
|
|
41
|
+
topShadow: 'none',
|
|
42
|
+
});
|
|
43
|
+
this.destroyMutationObserver();
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
ngOnDestroy() {
|
|
49
|
+
this.ngUnsubscribe.next();
|
|
50
|
+
this.ngUnsubscribe.complete();
|
|
51
|
+
this.destroyMutationObserver();
|
|
52
|
+
}
|
|
53
|
+
initMutationObserver() {
|
|
54
|
+
if (!this.mutationObserver) {
|
|
55
|
+
const el = this.elRef.nativeElement;
|
|
56
|
+
// MutationObserver is patched by Zone.js and therefore becomes part of the
|
|
57
|
+
// Angular change detection cycle, but this can lead to infinite loops in some
|
|
58
|
+
// secnarios. This will keep MutationObserver from triggering change detection.
|
|
59
|
+
this.ngZone.runOutsideAngular(() => {
|
|
60
|
+
this.mutationObserver = this.mutationObserverSvc.create(() => {
|
|
61
|
+
this.checkForShadow();
|
|
62
|
+
});
|
|
63
|
+
this.mutationObserver.observe(el, {
|
|
64
|
+
attributes: true,
|
|
65
|
+
characterData: true,
|
|
66
|
+
childList: true,
|
|
67
|
+
subtree: true,
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
destroyMutationObserver() {
|
|
73
|
+
if (this.mutationObserver) {
|
|
74
|
+
this.mutationObserver.disconnect();
|
|
75
|
+
this.mutationObserver = undefined;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
checkForShadow() {
|
|
79
|
+
if (this.currentTheme === SkyTheme.presets.modern) {
|
|
80
|
+
const el = this.elRef.nativeElement;
|
|
81
|
+
const topShadow = this.buildShadowStyle(el.scrollTop);
|
|
82
|
+
const bottomShadow = this.buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
|
|
83
|
+
this.emitShadow({
|
|
84
|
+
bottomShadow,
|
|
85
|
+
topShadow,
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
buildShadowStyle(pixelsFromEnd) {
|
|
90
|
+
// Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
|
|
91
|
+
// of the scrollable element, with a max opacity of 0.3.
|
|
92
|
+
const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;
|
|
93
|
+
return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';
|
|
94
|
+
}
|
|
95
|
+
emitShadow(shadow) {
|
|
96
|
+
if (!this.currentShadow ||
|
|
97
|
+
this.currentShadow.bottomShadow !== shadow.bottomShadow ||
|
|
98
|
+
this.currentShadow.topShadow !== shadow.topShadow) {
|
|
99
|
+
this.skyModalScrollShadow.emit(shadow);
|
|
100
|
+
this.currentShadow = shadow;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
SkyModalScrollShadowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i1.SkyThemeService, optional: true }, { token: i2.MutationObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
105
|
+
SkyModalScrollShadowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 });
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
|
|
107
|
+
type: Directive,
|
|
108
|
+
args: [{
|
|
109
|
+
selector: '[skyModalScrollShadow]',
|
|
110
|
+
}]
|
|
111
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SkyThemeService, decorators: [{
|
|
112
|
+
type: Optional
|
|
113
|
+
}] }, { type: i2.MutationObserverService }, { type: i0.NgZone }]; }, propDecorators: { skyModalScrollShadow: [{
|
|
114
|
+
type: Output
|
|
115
|
+
}], windowResize: [{
|
|
116
|
+
type: HostListener,
|
|
117
|
+
args: ['window:resize']
|
|
118
|
+
}], scroll: [{
|
|
119
|
+
type: HostListener,
|
|
120
|
+
args: ['scroll']
|
|
121
|
+
}] } });
|
|
122
|
+
//# sourceMappingURL=modal-scroll-shadow.directive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-scroll-shadow.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-scroll-shadow.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n NgZone,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { MutationObserverService } from '@skyux/core';\n\nimport { SkyTheme, SkyThemeService } from '@skyux/theme';\n\nimport { SkyModalScrollShadowEventArgs } from './modal-scroll-shadow-event-args';\n\n/**\n * Raises an event when the box shadow for the modal header or footer should be adjusted\n * based on the scroll position of the host element.\n * @internal\n */\n@Directive({\n selector: '[skyModalScrollShadow]',\n})\nexport class SkyModalScrollShadowDirective implements OnInit, OnDestroy {\n @Output()\n public skyModalScrollShadow = new EventEmitter<SkyModalScrollShadowEventArgs>();\n\n private currentShadow: SkyModalScrollShadowEventArgs;\n\n private currentTheme: SkyTheme;\n\n private mutationObserver: MutationObserver;\n\n private ngUnsubscribe = new Subject<any>();\n\n constructor(\n private elRef: ElementRef,\n @Optional() private themeSvc: SkyThemeService,\n private mutationObserverSvc: MutationObserverService,\n private ngZone: NgZone\n ) {}\n\n @HostListener('window:resize')\n public windowResize(): void {\n this.checkForShadow();\n }\n\n @HostListener('scroll')\n public scroll(): void {\n this.checkForShadow();\n }\n\n public ngOnInit(): void {\n if (this.themeSvc) {\n this.themeSvc.settingsChange\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((themeSettings) => {\n this.currentTheme = themeSettings.currentSettings.theme;\n\n if (this.currentTheme === SkyTheme.presets.modern) {\n this.initMutationObserver();\n } else {\n this.emitShadow({\n bottomShadow: 'none',\n topShadow: 'none',\n });\n\n this.destroyMutationObserver();\n }\n });\n }\n }\n\n public ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n\n this.destroyMutationObserver();\n }\n\n private initMutationObserver(): void {\n if (!this.mutationObserver) {\n const el = this.elRef.nativeElement;\n\n // MutationObserver is patched by Zone.js and therefore becomes part of the\n // Angular change detection cycle, but this can lead to infinite loops in some\n // secnarios. This will keep MutationObserver from triggering change detection.\n this.ngZone.runOutsideAngular(() => {\n this.mutationObserver = this.mutationObserverSvc.create(() => {\n this.checkForShadow();\n });\n\n this.mutationObserver.observe(el, {\n attributes: true,\n characterData: true,\n childList: true,\n subtree: true,\n });\n });\n }\n }\n\n private destroyMutationObserver(): void {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n }\n\n private checkForShadow(): void {\n if (this.currentTheme === SkyTheme.presets.modern) {\n const el = this.elRef.nativeElement;\n\n const topShadow = this.buildShadowStyle(el.scrollTop);\n\n const bottomShadow = this.buildShadowStyle(\n el.scrollHeight - el.scrollTop - el.clientHeight\n );\n\n this.emitShadow({\n bottomShadow,\n topShadow,\n });\n }\n }\n\n private buildShadowStyle(pixelsFromEnd: number): string {\n // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom\n // of the scrollable element, with a max opacity of 0.3.\n const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;\n\n return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';\n }\n\n private emitShadow(shadow: SkyModalScrollShadowEventArgs): void {\n if (\n !this.currentShadow ||\n this.currentShadow.bottomShadow !== shadow.bottomShadow ||\n this.currentShadow.topShadow !== shadow.topShadow\n ) {\n this.skyModalScrollShadow.emit(shadow);\n this.currentShadow = shadow;\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { animate, state, style, transition, trigger, } from '@angular/animations';
|
|
2
|
+
export const skyAnimationModalState = trigger('modalState', [
|
|
3
|
+
state('in', style({ opacity: '1.0' })),
|
|
4
|
+
state('out', style({ opacity: '0.0' })),
|
|
5
|
+
transition('void => *', [style({ opacity: '0.0' }), animate(150)]),
|
|
6
|
+
transition('* => void', [animate(150, style({ opacity: '0.0' }))]),
|
|
7
|
+
]);
|
|
8
|
+
//# sourceMappingURL=modal-state-animation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-state-animation.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-state-animation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,UAAU,EACV,OAAO,GACR,MAAM,qBAAqB,CAAC;AAE7B,MAAM,CAAC,MAAM,sBAAsB,GAAG,OAAO,CAAC,YAAY,EAAE;IAC1D,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IACtC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IACvC,UAAU,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAClE,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;CACnE,CAAQ,CAAC","sourcesContent":["import {\n animate,\n state,\n style,\n transition,\n trigger,\n} from '@angular/animations';\n\nexport const skyAnimationModalState = trigger('modalState', [\n state('in', style({ opacity: '1.0' })),\n state('out', style({ opacity: '0.0' })),\n transition('void => *', [style({ opacity: '0.0' }), animate(150)]),\n transition('* => void', [animate(150, style({ opacity: '0.0' }))]),\n]) as any;\n"]}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
import { Component, Input, ElementRef, Host, HostBinding, HostListener, ViewChild, } from '@angular/core';
|
|
2
|
+
import { SkyAppWindowRef, SkyCoreAdapterService, SkyDockLocation, SkyDockService, } from '@skyux/core';
|
|
3
|
+
import { SkyModalHostService } from './modal-host.service';
|
|
4
|
+
import { SkyModalConfiguration } from './modal-configuration';
|
|
5
|
+
import { SkyModalComponentAdapterService } from './modal-component-adapter.service';
|
|
6
|
+
import { skyAnimationModalState } from './modal-state-animation';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "./modal-host.service";
|
|
9
|
+
import * as i2 from "./modal-configuration";
|
|
10
|
+
import * as i3 from "@skyux/core";
|
|
11
|
+
import * as i4 from "./modal-component-adapter.service";
|
|
12
|
+
import * as i5 from "@skyux/indicators";
|
|
13
|
+
import * as i6 from "@angular/common";
|
|
14
|
+
import * as i7 from "./modal-scroll-shadow.directive";
|
|
15
|
+
import * as i8 from "@skyux/i18n";
|
|
16
|
+
let skyModalUniqueIdentifier = 0;
|
|
17
|
+
/**
|
|
18
|
+
* Provides a common look-and-feel for modal content with options to display
|
|
19
|
+
* a common modal header, specify body content, and display a common modal footer
|
|
20
|
+
* and buttons. For information about how to test modals in SKY UX, see
|
|
21
|
+
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
22
|
+
*/
|
|
23
|
+
export class SkyModalComponent {
|
|
24
|
+
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
|
|
25
|
+
this.hostService = hostService;
|
|
26
|
+
this.config = config;
|
|
27
|
+
this.elRef = elRef;
|
|
28
|
+
this.windowRef = windowRef;
|
|
29
|
+
this.componentAdapter = componentAdapter;
|
|
30
|
+
this.coreAdapter = coreAdapter;
|
|
31
|
+
this.dockService = dockService;
|
|
32
|
+
this.modalState = 'in';
|
|
33
|
+
this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
|
|
34
|
+
this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
|
|
35
|
+
}
|
|
36
|
+
get wrapperClass() {
|
|
37
|
+
return this.config.wrapperClass;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* @internal
|
|
41
|
+
*/
|
|
42
|
+
get ariaRole() {
|
|
43
|
+
return this.config.ariaRole || 'dialog';
|
|
44
|
+
}
|
|
45
|
+
set ariaRole(value) {
|
|
46
|
+
this.config.ariaRole = value;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
set tiledBody(value) {
|
|
52
|
+
this.config.tiledBody = value;
|
|
53
|
+
}
|
|
54
|
+
get modalZIndex() {
|
|
55
|
+
return this.hostService.getModalZIndex();
|
|
56
|
+
}
|
|
57
|
+
get modalFullPage() {
|
|
58
|
+
return this.config.fullPage;
|
|
59
|
+
}
|
|
60
|
+
get isSmallSize() {
|
|
61
|
+
return !this.modalFullPage && this.isSizeEqual(this.config.size, 'small');
|
|
62
|
+
}
|
|
63
|
+
get isMediumSize() {
|
|
64
|
+
return !this.modalFullPage && !(this.isSmallSize || this.isLargeSize);
|
|
65
|
+
}
|
|
66
|
+
get isLargeSize() {
|
|
67
|
+
return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');
|
|
68
|
+
}
|
|
69
|
+
get isTiledBody() {
|
|
70
|
+
return this.config.tiledBody;
|
|
71
|
+
}
|
|
72
|
+
get ariaDescribedBy() {
|
|
73
|
+
return this.config.ariaDescribedBy || this.modalContentId;
|
|
74
|
+
}
|
|
75
|
+
get ariaLabelledBy() {
|
|
76
|
+
return this.config.ariaLabelledBy || this.modalHeaderId;
|
|
77
|
+
}
|
|
78
|
+
get helpKey() {
|
|
79
|
+
return this.config.helpKey;
|
|
80
|
+
}
|
|
81
|
+
onDocumentKeyUp(event) {
|
|
82
|
+
/* istanbul ignore else */
|
|
83
|
+
/* sanity check */
|
|
84
|
+
if (SkyModalHostService.openModalCount > 0) {
|
|
85
|
+
let topModal = SkyModalHostService.topModal;
|
|
86
|
+
if (topModal && topModal === this.hostService) {
|
|
87
|
+
if (event.which === 27) {
|
|
88
|
+
// Escape key up
|
|
89
|
+
event.preventDefault();
|
|
90
|
+
this.closeButtonClick();
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
onDocumentKeyDown(event) {
|
|
96
|
+
/* istanbul ignore else */
|
|
97
|
+
/* sanity check */
|
|
98
|
+
if (SkyModalHostService.openModalCount > 0) {
|
|
99
|
+
let topModal = SkyModalHostService.topModal;
|
|
100
|
+
if (topModal && topModal === this.hostService) {
|
|
101
|
+
if (event.which === 9) {
|
|
102
|
+
// Tab pressed
|
|
103
|
+
let focusChanged = false;
|
|
104
|
+
let focusElementList = this.coreAdapter.getFocusableChildren(this.elRef.nativeElement);
|
|
105
|
+
if (event.shiftKey &&
|
|
106
|
+
(this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
|
|
107
|
+
this.componentAdapter.isModalFocused(event, this.elRef))) {
|
|
108
|
+
focusChanged =
|
|
109
|
+
this.componentAdapter.focusLastElement(focusElementList);
|
|
110
|
+
}
|
|
111
|
+
else if (!event.shiftKey &&
|
|
112
|
+
this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
|
|
113
|
+
focusChanged =
|
|
114
|
+
this.componentAdapter.focusFirstElement(focusElementList);
|
|
115
|
+
}
|
|
116
|
+
if (focusChanged) {
|
|
117
|
+
event.preventDefault();
|
|
118
|
+
event.stopPropagation();
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
ngAfterViewInit() {
|
|
125
|
+
skyModalUniqueIdentifier++;
|
|
126
|
+
this.componentAdapter.handleWindowChange(this.elRef);
|
|
127
|
+
// Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
|
|
128
|
+
// https://stackoverflow.com/questions/40562845
|
|
129
|
+
this.windowRef.nativeWindow.setTimeout(() => {
|
|
130
|
+
this.componentAdapter.modalOpened(this.elRef);
|
|
131
|
+
});
|
|
132
|
+
this.dockService.setDockOptions({
|
|
133
|
+
location: SkyDockLocation.ElementBottom,
|
|
134
|
+
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
135
|
+
zIndex: 5,
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
helpButtonClick() {
|
|
139
|
+
this.hostService.onOpenHelp(this.helpKey);
|
|
140
|
+
}
|
|
141
|
+
closeButtonClick() {
|
|
142
|
+
this.hostService.onClose();
|
|
143
|
+
}
|
|
144
|
+
windowResize() {
|
|
145
|
+
this.componentAdapter.handleWindowChange(this.elRef);
|
|
146
|
+
}
|
|
147
|
+
scrollShadowChange(args) {
|
|
148
|
+
this.scrollShadow = args;
|
|
149
|
+
}
|
|
150
|
+
isSizeEqual(actualSize, size) {
|
|
151
|
+
return actualSize && actualSize.toLowerCase() === size;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, deps: [{ token: i1.SkyModalHostService }, { token: i2.SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: i4.SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
155
|
+
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small': isSmallSize,\n 'sky-modal-medium': isMediumSize,\n 'sky-modal-large': isLargeSize,\n 'sky-modal-tiled': isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': modalFullPage\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:\"BLKB Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - (60px));margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - (60px));margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
|
|
156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
157
|
+
type: Component,
|
|
158
|
+
args: [{
|
|
159
|
+
selector: 'sky-modal',
|
|
160
|
+
templateUrl: './modal.component.html',
|
|
161
|
+
styleUrls: ['./modal.component.scss'],
|
|
162
|
+
animations: [skyAnimationModalState],
|
|
163
|
+
providers: [SkyModalComponentAdapterService, SkyDockService],
|
|
164
|
+
}]
|
|
165
|
+
}], ctorParameters: function () { return [{ type: i1.SkyModalHostService }, { type: i2.SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: i4.SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
166
|
+
type: Host
|
|
167
|
+
}] }]; }, propDecorators: { wrapperClass: [{
|
|
168
|
+
type: HostBinding,
|
|
169
|
+
args: ['class']
|
|
170
|
+
}], ariaRole: [{
|
|
171
|
+
type: Input
|
|
172
|
+
}], tiledBody: [{
|
|
173
|
+
type: Input
|
|
174
|
+
}], modalContentWrapperElement: [{
|
|
175
|
+
type: ViewChild,
|
|
176
|
+
args: ['modalContentWrapper', { read: ElementRef }]
|
|
177
|
+
}], onDocumentKeyUp: [{
|
|
178
|
+
type: HostListener,
|
|
179
|
+
args: ['document:keyup', ['$event']]
|
|
180
|
+
}], onDocumentKeyDown: [{
|
|
181
|
+
type: HostListener,
|
|
182
|
+
args: ['document:keydown', ['$event']]
|
|
183
|
+
}] } });
|
|
184
|
+
//# sourceMappingURL=modal.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterViewInit,\n Component,\n Input,\n ElementRef,\n Host,\n HostBinding,\n HostListener,\n ViewChild,\n} from '@angular/core';\n\nimport {\n SkyAppWindowRef,\n SkyCoreAdapterService,\n SkyDockLocation,\n SkyDockService,\n} from '@skyux/core';\n\nimport { SkyModalHostService } from './modal-host.service';\n\nimport { SkyModalConfiguration } from './modal-configuration';\n\nimport { SkyModalComponentAdapterService } from './modal-component-adapter.service';\n\nimport { SkyModalScrollShadowEventArgs } from './modal-scroll-shadow-event-args';\n\nimport { skyAnimationModalState } from './modal-state-animation';\n\nlet skyModalUniqueIdentifier: number = 0;\n\n/**\n * Provides a common look-and-feel for modal content with options to display\n * a common modal header, specify body content, and display a common modal footer\n * and buttons. For information about how to test modals in SKY UX, see\n * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).\n */\n@Component({\n selector: 'sky-modal',\n templateUrl: './modal.component.html',\n styleUrls: ['./modal.component.scss'],\n animations: [skyAnimationModalState],\n providers: [SkyModalComponentAdapterService, SkyDockService],\n})\nexport class SkyModalComponent implements AfterViewInit {\n @HostBinding('class')\n public get wrapperClass(): string {\n return this.config.wrapperClass;\n }\n\n /**\n * @internal\n */\n @Input()\n public get ariaRole() {\n return this.config.ariaRole || 'dialog';\n }\n public set ariaRole(value: string) {\n this.config.ariaRole = value;\n }\n\n /**\n * @internal\n */\n @Input()\n public set tiledBody(value: boolean) {\n this.config.tiledBody = value;\n }\n\n public get modalZIndex() {\n return this.hostService.getModalZIndex();\n }\n\n public get modalFullPage() {\n return this.config.fullPage;\n }\n\n public get isSmallSize() {\n return !this.modalFullPage && this.isSizeEqual(this.config.size, 'small');\n }\n\n public get isMediumSize() {\n return !this.modalFullPage && !(this.isSmallSize || this.isLargeSize);\n }\n\n public get isLargeSize() {\n return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');\n }\n\n public get isTiledBody() {\n return this.config.tiledBody;\n }\n\n public get ariaDescribedBy() {\n return this.config.ariaDescribedBy || this.modalContentId;\n }\n\n public get ariaLabelledBy() {\n return this.config.ariaLabelledBy || this.modalHeaderId;\n }\n\n public get helpKey() {\n return this.config.helpKey;\n }\n\n public modalState = 'in';\n\n public modalContentId: string =\n 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();\n\n public modalHeaderId: string =\n 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();\n\n public scrollShadow: SkyModalScrollShadowEventArgs;\n\n @ViewChild('modalContentWrapper', { read: ElementRef })\n private modalContentWrapperElement: ElementRef;\n\n constructor(\n private hostService: SkyModalHostService,\n private config: SkyModalConfiguration,\n private elRef: ElementRef,\n private windowRef: SkyAppWindowRef,\n private componentAdapter: SkyModalComponentAdapterService,\n private coreAdapter: SkyCoreAdapterService,\n @Host() private dockService: SkyDockService\n ) {}\n\n @HostListener('document:keyup', ['$event'])\n public onDocumentKeyUp(event: KeyboardEvent) {\n /* istanbul ignore else */\n /* sanity check */\n if (SkyModalHostService.openModalCount > 0) {\n let topModal = SkyModalHostService.topModal;\n if (topModal && topModal === this.hostService) {\n if (event.which === 27) {\n // Escape key up\n event.preventDefault();\n this.closeButtonClick();\n }\n }\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n public onDocumentKeyDown(event: KeyboardEvent) {\n /* istanbul ignore else */\n /* sanity check */\n if (SkyModalHostService.openModalCount > 0) {\n let topModal = SkyModalHostService.topModal;\n if (topModal && topModal === this.hostService) {\n if (event.which === 9) {\n // Tab pressed\n let focusChanged = false;\n\n let focusElementList = this.coreAdapter.getFocusableChildren(\n this.elRef.nativeElement\n );\n\n if (\n event.shiftKey &&\n (this.componentAdapter.isFocusInFirstItem(\n event,\n focusElementList\n ) ||\n this.componentAdapter.isModalFocused(event, this.elRef))\n ) {\n focusChanged =\n this.componentAdapter.focusLastElement(focusElementList);\n } else if (\n !event.shiftKey &&\n this.componentAdapter.isFocusInLastItem(event, focusElementList)\n ) {\n focusChanged =\n this.componentAdapter.focusFirstElement(focusElementList);\n }\n\n if (focusChanged) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n }\n }\n }\n\n public ngAfterViewInit() {\n skyModalUniqueIdentifier++;\n this.componentAdapter.handleWindowChange(this.elRef);\n\n // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.\n // https://stackoverflow.com/questions/40562845\n this.windowRef.nativeWindow.setTimeout(() => {\n this.componentAdapter.modalOpened(this.elRef);\n });\n\n this.dockService.setDockOptions({\n location: SkyDockLocation.ElementBottom,\n referenceEl: this.modalContentWrapperElement.nativeElement,\n zIndex: 5,\n });\n }\n\n public helpButtonClick() {\n this.hostService.onOpenHelp(this.helpKey);\n }\n\n public closeButtonClick() {\n this.hostService.onClose();\n }\n\n public windowResize() {\n this.componentAdapter.handleWindowChange(this.elRef);\n }\n\n public scrollShadowChange(args: SkyModalScrollShadowEventArgs): void {\n this.scrollShadow = args;\n }\n\n private isSizeEqual(actualSize: string, size: string) {\n return actualSize && actualSize.toLowerCase() === size;\n }\n}\n","<!--\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.interface.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.interface.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,0DAA0D","sourcesContent":["// TODO: defaults won't show in the generated docs until this work is done:\n// https://github.com/blackbaud/skyux-docs-tools/issues/38\n\n/**\n * Specifies configuration options for creating a modal.\n */\nexport interface SkyModalConfigurationInterface {\n /**\n * Indicates whether to display the modal full screen.\n * This property defaults to `false`.\n */\n fullPage?: boolean;\n\n /**\n * Specifies a size for the modal. The valid options are `small`, `medium`, and `large`.\n * This property defaults to `medium`.\n */\n size?: string;\n\n /**\n * An array property of `providers`.\n * In Angular, a provider is something that can create or deliver a service.\n * This property can be used to pass context values from the component that launches the modal to the modal component.\n */\n providers?: any[];\n\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that describes\n * the modal. This sets the modal's `aria-describedby` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * The description typically includes text on the modal but not on items that users interact\n * with, such as buttons and forms. If you do not specify an ID, the default description is\n * the content of the `sky-modal-content` component.\n */\n ariaDescribedBy?: string;\n\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that labels\n * the modal. This sets the `aria-labelledby` attribute for the modal\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * This is typically a header element, and if you do not specify an ID, the default value\n * is the content of the `sky-modal-header` component.\n */\n ariaLabelledBy?: string;\n\n /**\n * Specifies an ARIA role for the modal\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n * by indicating how the modal functions and what it controls. For information about\n * how an ARIA role indicates what an item represents on a web page, see the\n * [WAI-ARIA roles model](http://www.w3.org/WAI/PF/aria/roles). By default, modals set\n * the ARIA role to `dialog`.\n * @default \"dialog\"\n */\n ariaRole?: string;\n\n /**\n * Indicates whether the modal uses tiles. When set to `true`, the modal's background switches\n * to `$sky-background-color-neutral-light` and tile headings are styled as subsection headings.\n * This property defaults to `false`.\n */\n tiledBody?: boolean;\n\n /**\n * Specifies a `helpKey` string. This property dispays\n * the <i class=\"fa fa-question-circle\" aria-hidden=\"true\"></i> button in the modal header.\n * When users click this button, the `helpOpened` event broadcasts the `helpKey` parameter.\n * Blackbaud developers can use the Help Widget, which is for internal Blackbaud use only, to\n * [display help content in a flyout panel](https://docs.blackbaud.com/bb-help-docs/components/modal-header).\n */\n helpKey?: string;\n\n /**\n * Specifies a CSS class to add to the modal, such as `ag-custom-component-popup` for\n * using a modal as part of a cell editor in Data Entry Grid.\n */\n wrapperClass?: string;\n}\n"]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { NgModule } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { RouterModule } from '@angular/router';
|
|
4
|
+
import { SkyIconModule } from '@skyux/indicators';
|
|
5
|
+
import { SkyThemeModule } from '@skyux/theme';
|
|
6
|
+
import { SkyModalsResourcesModule } from '../shared/sky-modals-resources.module';
|
|
7
|
+
import { SkyModalContentComponent } from './modal-content.component';
|
|
8
|
+
import { SkyModalFooterComponent } from './modal-footer.component';
|
|
9
|
+
import { SkyModalHeaderComponent } from './modal-header.component';
|
|
10
|
+
import { SkyModalHostComponent } from './modal-host.component';
|
|
11
|
+
import { SkyModalScrollShadowDirective } from './modal-scroll-shadow.directive';
|
|
12
|
+
import { SkyModalComponent } from './modal.component';
|
|
13
|
+
import * as i0 from "@angular/core";
|
|
14
|
+
export class SkyModalModule {
|
|
15
|
+
}
|
|
16
|
+
SkyModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
17
|
+
SkyModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
|
|
18
|
+
SkyModalContentComponent,
|
|
19
|
+
SkyModalFooterComponent,
|
|
20
|
+
SkyModalHeaderComponent,
|
|
21
|
+
SkyModalHostComponent,
|
|
22
|
+
SkyModalScrollShadowDirective], imports: [CommonModule,
|
|
23
|
+
RouterModule,
|
|
24
|
+
SkyIconModule,
|
|
25
|
+
SkyModalsResourcesModule,
|
|
26
|
+
SkyThemeModule], exports: [SkyModalComponent,
|
|
27
|
+
SkyModalContentComponent,
|
|
28
|
+
SkyModalFooterComponent,
|
|
29
|
+
SkyModalHeaderComponent] });
|
|
30
|
+
SkyModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, imports: [[
|
|
31
|
+
CommonModule,
|
|
32
|
+
RouterModule,
|
|
33
|
+
SkyIconModule,
|
|
34
|
+
SkyModalsResourcesModule,
|
|
35
|
+
SkyThemeModule,
|
|
36
|
+
]] });
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalModule, decorators: [{
|
|
38
|
+
type: NgModule,
|
|
39
|
+
args: [{
|
|
40
|
+
declarations: [
|
|
41
|
+
SkyModalComponent,
|
|
42
|
+
SkyModalContentComponent,
|
|
43
|
+
SkyModalFooterComponent,
|
|
44
|
+
SkyModalHeaderComponent,
|
|
45
|
+
SkyModalHostComponent,
|
|
46
|
+
SkyModalScrollShadowDirective,
|
|
47
|
+
],
|
|
48
|
+
imports: [
|
|
49
|
+
CommonModule,
|
|
50
|
+
RouterModule,
|
|
51
|
+
SkyIconModule,
|
|
52
|
+
SkyModalsResourcesModule,
|
|
53
|
+
SkyThemeModule,
|
|
54
|
+
],
|
|
55
|
+
exports: [
|
|
56
|
+
SkyModalComponent,
|
|
57
|
+
SkyModalContentComponent,
|
|
58
|
+
SkyModalFooterComponent,
|
|
59
|
+
SkyModalHeaderComponent,
|
|
60
|
+
],
|
|
61
|
+
entryComponents: [SkyModalHostComponent],
|
|
62
|
+
}]
|
|
63
|
+
}] });
|
|
64
|
+
//# sourceMappingURL=modal.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAEjF,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAEhF,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;;AA0BtD,MAAM,OAAO,cAAc;;4GAAd,cAAc;6GAAd,cAAc,iBAtBvB,iBAAiB;QACjB,wBAAwB;QACxB,uBAAuB;QACvB,uBAAuB;QACvB,qBAAqB;QACrB,6BAA6B,aAG7B,YAAY;QACZ,YAAY;QACZ,aAAa;QACb,wBAAwB;QACxB,cAAc,aAGd,iBAAiB;QACjB,wBAAwB;QACxB,uBAAuB;QACvB,uBAAuB;6GAId,cAAc,YAfhB;YACP,YAAY;YACZ,YAAY;YACZ,aAAa;YACb,wBAAwB;YACxB,cAAc;SACf;4FASU,cAAc;kBAxB1B,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,iBAAiB;wBACjB,wBAAwB;wBACxB,uBAAuB;wBACvB,uBAAuB;wBACvB,qBAAqB;wBACrB,6BAA6B;qBAC9B;oBACD,OAAO,EAAE;wBACP,YAAY;wBACZ,YAAY;wBACZ,aAAa;wBACb,wBAAwB;wBACxB,cAAc;qBACf;oBACD,OAAO,EAAE;wBACP,iBAAiB;wBACjB,wBAAwB;wBACxB,uBAAuB;wBACvB,uBAAuB;qBACxB;oBACD,eAAe,EAAE,CAAC,qBAAqB,CAAC;iBACzC","sourcesContent":["import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { RouterModule } from '@angular/router';\n\nimport { SkyIconModule } from '@skyux/indicators';\n\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyModalsResourcesModule } from '../shared/sky-modals-resources.module';\n\nimport { SkyModalContentComponent } from './modal-content.component';\n\nimport { SkyModalFooterComponent } from './modal-footer.component';\n\nimport { SkyModalHeaderComponent } from './modal-header.component';\n\nimport { SkyModalHostComponent } from './modal-host.component';\n\nimport { SkyModalScrollShadowDirective } from './modal-scroll-shadow.directive';\n\nimport { SkyModalComponent } from './modal.component';\n\n@NgModule({\n declarations: [\n SkyModalComponent,\n SkyModalContentComponent,\n SkyModalFooterComponent,\n SkyModalHeaderComponent,\n SkyModalHostComponent,\n SkyModalScrollShadowDirective,\n ],\n imports: [\n CommonModule,\n RouterModule,\n SkyIconModule,\n SkyModalsResourcesModule,\n SkyThemeModule,\n ],\n exports: [\n SkyModalComponent,\n SkyModalContentComponent,\n SkyModalFooterComponent,\n SkyModalHeaderComponent,\n ],\n entryComponents: [SkyModalHostComponent],\n})\nexport class SkyModalModule {}\n"]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { Injectable } from '@angular/core';
|
|
2
|
+
import { SkyDynamicComponentService } from '@skyux/core';
|
|
3
|
+
import { SkyModalInstance } from './modal-instance';
|
|
4
|
+
import { SkyModalHostComponent } from './modal-host.component';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@skyux/core";
|
|
7
|
+
/**
|
|
8
|
+
* A service that lauches modals. For information about how to test modals in SKY UX, see
|
|
9
|
+
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
10
|
+
* @dynamic
|
|
11
|
+
*/
|
|
12
|
+
export class SkyModalService {
|
|
13
|
+
// TODO: In future breaking change - remove extra parameters as they are no longer used.
|
|
14
|
+
/* tslint:disable:no-unused-variable */
|
|
15
|
+
constructor(dynamicComponentService) {
|
|
16
|
+
this.dynamicComponentService = dynamicComponentService;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* @private
|
|
20
|
+
* Removes the modal host from the DOM.
|
|
21
|
+
*/
|
|
22
|
+
dispose() {
|
|
23
|
+
if (SkyModalService.host) {
|
|
24
|
+
this.dynamicComponentService.removeComponent(SkyModalService.host);
|
|
25
|
+
SkyModalService.host = undefined;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Opens a modal using the specified component.
|
|
30
|
+
* @param component Determines the component to render.
|
|
31
|
+
* @param {SkyModalConfigurationInterface} config Populates the modal based on the `SkyModalConfigurationInterface` object.
|
|
32
|
+
*/
|
|
33
|
+
open(component, config) {
|
|
34
|
+
let modalInstance = new SkyModalInstance();
|
|
35
|
+
this.createHostComponent();
|
|
36
|
+
let params = this.getConfigFromParameter(config);
|
|
37
|
+
params.providers.push({
|
|
38
|
+
provide: SkyModalInstance,
|
|
39
|
+
useValue: modalInstance,
|
|
40
|
+
});
|
|
41
|
+
SkyModalService.host.instance.open(modalInstance, component, params);
|
|
42
|
+
return modalInstance;
|
|
43
|
+
}
|
|
44
|
+
getConfigFromParameter(providersOrConfig) {
|
|
45
|
+
let defaultParams = {
|
|
46
|
+
providers: [],
|
|
47
|
+
fullPage: false,
|
|
48
|
+
size: 'medium',
|
|
49
|
+
tiledBody: false,
|
|
50
|
+
};
|
|
51
|
+
let params = undefined;
|
|
52
|
+
let method = undefined;
|
|
53
|
+
// Object Literal Lookup for backwards compatability.
|
|
54
|
+
method = {
|
|
55
|
+
'providers?': Object.assign({}, defaultParams, {
|
|
56
|
+
providers: providersOrConfig,
|
|
57
|
+
}),
|
|
58
|
+
config: Object.assign({}, defaultParams, providersOrConfig),
|
|
59
|
+
};
|
|
60
|
+
if (Array.isArray(providersOrConfig) === true) {
|
|
61
|
+
params = method['providers?'];
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
params = method['config'];
|
|
65
|
+
}
|
|
66
|
+
return params;
|
|
67
|
+
}
|
|
68
|
+
createHostComponent() {
|
|
69
|
+
if (!SkyModalService.host) {
|
|
70
|
+
SkyModalService.host = this.dynamicComponentService.createComponent(SkyModalHostComponent);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
SkyModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalService, deps: [{ token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
75
|
+
SkyModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalService, providedIn: 'any' });
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalService, decorators: [{
|
|
77
|
+
type: Injectable,
|
|
78
|
+
args: [{
|
|
79
|
+
// Must be 'any' so that the modal component is created in the context of its module's injector.
|
|
80
|
+
// If set to 'root', the component's dependency injections would only be derived from the root
|
|
81
|
+
// injector and may loose context if the modal was opened from within a lazy-loaded module.
|
|
82
|
+
providedIn: 'any',
|
|
83
|
+
}]
|
|
84
|
+
}], ctorParameters: function () { return [{ type: i1.SkyDynamicComponentService }]; } });
|
|
85
|
+
//# sourceMappingURL=modal.service.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;;;AAI/D;;;;GAIG;AAOH,MAAM,OAAO,eAAe;IAG1B,wFAAwF;IACxF,uCAAuC;IACvC,YAAoB,uBAAoD;QAApD,4BAAuB,GAAvB,uBAAuB,CAA6B;IAAG,CAAC;IAE5E;;;OAGG;IACI,OAAO;QACZ,IAAI,eAAe,CAAC,IAAI,EAAE;YACxB,IAAI,CAAC,uBAAuB,CAAC,eAAe,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACnE,eAAe,CAAC,IAAI,GAAG,SAAS,CAAC;SAClC;IACH,CAAC;IAED;;;;OAIG;IACI,IAAI,CACT,SAAc,EACd,MAA+C;QAE/C,IAAI,aAAa,GAAG,IAAI,gBAAgB,EAAE,CAAC;QAC3C,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,MAAM,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QAEjD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,OAAO,EAAE,gBAAgB;YACzB,QAAQ,EAAE,aAAa;SACxB,CAAC,CAAC;QAEH,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QAErE,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,sBAAsB,CAC5B,iBAAsB;QAEtB,IAAI,aAAa,GAAmC;YAClD,SAAS,EAAE,EAAE;YACb,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,KAAK;SACjB,CAAC;QACF,IAAI,MAAM,GAAmC,SAAS,CAAC;QACvD,IAAI,MAAM,GAAQ,SAAS,CAAC;QAE5B,qDAAqD;QACrD,MAAM,GAAG;YACP,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE;gBAC7C,SAAS,EAAE,iBAAiB;aAC7B,CAAC;YACF,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE,iBAAiB,CAAC;SAC5D,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,EAAE;YAC7C,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;SAC/B;aAAM;YACL,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC3B;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACzB,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,eAAe,CACjE,qBAAqB,CACtB,CAAC;SACH;IACH,CAAC;;6GA5EU,eAAe;iHAAf,eAAe,cAFd,KAAK;4FAEN,eAAe;kBAN3B,UAAU;mBAAC;oBACV,gGAAgG;oBAChG,8FAA8F;oBAC9F,2FAA2F;oBAC3F,UAAU,EAAE,KAAK;iBAClB","sourcesContent":["import { ComponentRef, Injectable } from '@angular/core';\n\nimport { SkyDynamicComponentService } from '@skyux/core';\n\nimport { SkyModalInstance } from './modal-instance';\n\nimport { SkyModalHostComponent } from './modal-host.component';\n\nimport { SkyModalConfigurationInterface } from './modal.interface';\n\n/**\n * A service that lauches modals. For information about how to test modals in SKY UX, see\n * [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).\n * @dynamic\n */\n@Injectable({\n // Must be 'any' so that the modal component is created in the context of its module's injector.\n // If set to 'root', the component's dependency injections would only be derived from the root\n // injector and may loose context if the modal was opened from within a lazy-loaded module.\n providedIn: 'any',\n})\nexport class SkyModalService {\n private static host: ComponentRef<SkyModalHostComponent>;\n\n // TODO: In future breaking change - remove extra parameters as they are no longer used.\n /* tslint:disable:no-unused-variable */\n constructor(private dynamicComponentService?: SkyDynamicComponentService) {}\n\n /**\n * @private\n * Removes the modal host from the DOM.\n */\n public dispose(): void {\n if (SkyModalService.host) {\n this.dynamicComponentService.removeComponent(SkyModalService.host);\n SkyModalService.host = undefined;\n }\n }\n\n /**\n * Opens a modal using the specified component.\n * @param component Determines the component to render.\n * @param {SkyModalConfigurationInterface} config Populates the modal based on the `SkyModalConfigurationInterface` object.\n */\n public open(\n component: any,\n config?: SkyModalConfigurationInterface | any[]\n ): SkyModalInstance {\n let modalInstance = new SkyModalInstance();\n this.createHostComponent();\n let params = this.getConfigFromParameter(config);\n\n params.providers.push({\n provide: SkyModalInstance,\n useValue: modalInstance,\n });\n\n SkyModalService.host.instance.open(modalInstance, component, params);\n\n return modalInstance;\n }\n\n private getConfigFromParameter(\n providersOrConfig: any\n ): SkyModalConfigurationInterface {\n let defaultParams: SkyModalConfigurationInterface = {\n providers: [],\n fullPage: false,\n size: 'medium',\n tiledBody: false,\n };\n let params: SkyModalConfigurationInterface = undefined;\n let method: any = undefined;\n\n // Object Literal Lookup for backwards compatability.\n method = {\n 'providers?': Object.assign({}, defaultParams, {\n providers: providersOrConfig,\n }),\n config: Object.assign({}, defaultParams, providersOrConfig),\n };\n\n if (Array.isArray(providersOrConfig) === true) {\n params = method['providers?'];\n } else {\n params = method['config'];\n }\n\n return params;\n }\n\n private createHostComponent(): void {\n if (!SkyModalService.host) {\n SkyModalService.host = this.dynamicComponentService.createComponent(\n SkyModalHostComponent\n );\n }\n }\n}\n"]}
|