@skyux/modals 5.9.4 → 6.0.0-beta.10
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 +34 -34
- package/esm2020/index.mjs +26 -0
- package/esm2020/lib/modules/confirm/confirm-button-action.mjs +2 -0
- package/esm2020/lib/modules/confirm/confirm-button-config.mjs +2 -0
- package/esm2020/lib/modules/confirm/confirm-button.mjs +2 -0
- package/esm2020/lib/modules/confirm/confirm-closed-event-args.mjs +2 -0
- package/esm2020/lib/modules/confirm/confirm-config.mjs +2 -0
- package/esm2020/lib/modules/confirm/confirm-instance.mjs +12 -0
- package/esm2020/lib/modules/confirm/confirm-modal-context.mjs +6 -0
- package/esm2020/lib/modules/confirm/confirm-type.mjs +24 -0
- package/esm2020/lib/modules/confirm/confirm.component.mjs +123 -0
- package/esm2020/lib/modules/confirm/confirm.module.mjs +34 -0
- package/esm2020/lib/modules/confirm/confirm.service.mjs +54 -0
- package/esm2020/lib/modules/modal/modal-adapter.service.mjs +47 -0
- package/esm2020/lib/modules/modal/modal-before-close-handler.mjs +10 -0
- package/esm2020/lib/modules/modal/modal-close-args.mjs +7 -0
- package/esm2020/lib/modules/modal/modal-component-adapter.service.mjs +98 -0
- package/esm2020/lib/modules/modal/modal-configuration.mjs +19 -0
- package/esm2020/lib/modules/modal/modal-content.component.mjs +14 -0
- package/esm2020/lib/modules/modal/modal-footer.component.mjs +14 -0
- package/esm2020/lib/modules/modal/modal-header.component.mjs +15 -0
- package/esm2020/lib/modules/modal/modal-host.component.mjs +96 -0
- package/esm2020/lib/modules/modal/modal-host.service.mjs +55 -0
- package/esm2020/lib/modules/modal/modal-instance.mjs +100 -0
- package/esm2020/lib/modules/modal/modal-scroll-shadow-event-args.mjs +2 -0
- package/esm2020/lib/modules/modal/modal-scroll-shadow.directive.mjs +122 -0
- package/esm2020/lib/modules/modal/modal-state-animation.mjs +8 -0
- package/esm2020/lib/modules/modal/modal.component.mjs +206 -0
- package/esm2020/lib/modules/modal/modal.interface.mjs +4 -0
- package/esm2020/lib/modules/modal/modal.module.mjs +63 -0
- package/esm2020/lib/modules/modal/modal.service.mjs +83 -0
- package/esm2020/lib/modules/shared/sky-modals-resources.module.mjs +54 -0
- package/esm2020/skyux-modals.mjs +5 -0
- package/esm2020/testing/modal-fixture.mjs +168 -0
- package/esm2020/testing/public-api.mjs +2 -0
- package/esm2020/testing/skyux-modals-testing.mjs +5 -0
- package/fesm2015/{skyux-modals-testing.js → skyux-modals-testing.mjs} +1 -1
- package/fesm2015/skyux-modals-testing.mjs.map +1 -0
- package/fesm2015/skyux-modals.mjs +1189 -0
- package/fesm2015/skyux-modals.mjs.map +1 -0
- package/{esm2015/testing/modal-fixture.js → fesm2020/skyux-modals-testing.mjs} +8 -2
- package/fesm2020/skyux-modals-testing.mjs.map +1 -0
- package/{fesm2015/skyux-modals.js → fesm2020/skyux-modals.mjs} +62 -95
- package/fesm2020/skyux-modals.mjs.map +1 -0
- package/lib/modules/modal/modal.component.d.ts +1 -2
- package/lib/modules/modal/modal.service.d.ts +1 -2
- package/package.json +38 -14
- package/testing/package.json +5 -5
- package/bundles/skyux-modals-testing.umd.js +0 -538
- package/bundles/skyux-modals.umd.js +0 -1388
- package/esm2015/index.js +0 -26
- package/esm2015/index.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-button-action.js +0 -2
- package/esm2015/lib/modules/confirm/confirm-button-action.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-button-config.js +0 -2
- package/esm2015/lib/modules/confirm/confirm-button-config.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-button.js +0 -2
- package/esm2015/lib/modules/confirm/confirm-button.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-closed-event-args.js +0 -2
- package/esm2015/lib/modules/confirm/confirm-closed-event-args.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-config.js +0 -2
- package/esm2015/lib/modules/confirm/confirm-config.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-instance.js +0 -12
- package/esm2015/lib/modules/confirm/confirm-instance.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-modal-context.js +0 -6
- package/esm2015/lib/modules/confirm/confirm-modal-context.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm-type.js +0 -24
- package/esm2015/lib/modules/confirm/confirm-type.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm.component.js +0 -127
- package/esm2015/lib/modules/confirm/confirm.component.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm.module.js +0 -35
- package/esm2015/lib/modules/confirm/confirm.module.js.map +0 -1
- package/esm2015/lib/modules/confirm/confirm.service.js +0 -54
- package/esm2015/lib/modules/confirm/confirm.service.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-adapter.service.js +0 -47
- package/esm2015/lib/modules/modal/modal-adapter.service.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-before-close-handler.js +0 -10
- package/esm2015/lib/modules/modal/modal-before-close-handler.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-close-args.js +0 -7
- package/esm2015/lib/modules/modal/modal-close-args.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-component-adapter.service.js +0 -98
- package/esm2015/lib/modules/modal/modal-component-adapter.service.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-configuration.js +0 -19
- package/esm2015/lib/modules/modal/modal-configuration.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-content.component.js +0 -19
- package/esm2015/lib/modules/modal/modal-content.component.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-footer.component.js +0 -18
- package/esm2015/lib/modules/modal/modal-footer.component.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-header.component.js +0 -19
- package/esm2015/lib/modules/modal/modal-header.component.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-host.component.js +0 -101
- package/esm2015/lib/modules/modal/modal-host.component.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-host.service.js +0 -55
- package/esm2015/lib/modules/modal/modal-host.service.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-instance.js +0 -100
- package/esm2015/lib/modules/modal/modal-instance.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-scroll-shadow-event-args.js +0 -2
- package/esm2015/lib/modules/modal/modal-scroll-shadow-event-args.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-scroll-shadow.directive.js +0 -122
- package/esm2015/lib/modules/modal/modal-scroll-shadow.directive.js.map +0 -1
- package/esm2015/lib/modules/modal/modal-state-animation.js +0 -8
- package/esm2015/lib/modules/modal/modal-state-animation.js.map +0 -1
- package/esm2015/lib/modules/modal/modal.component.js +0 -213
- package/esm2015/lib/modules/modal/modal.component.js.map +0 -1
- package/esm2015/lib/modules/modal/modal.interface.js +0 -4
- package/esm2015/lib/modules/modal/modal.interface.js.map +0 -1
- package/esm2015/lib/modules/modal/modal.module.js +0 -64
- package/esm2015/lib/modules/modal/modal.module.js.map +0 -1
- package/esm2015/lib/modules/modal/modal.service.js +0 -85
- package/esm2015/lib/modules/modal/modal.service.js.map +0 -1
- package/esm2015/lib/modules/shared/sky-modals-resources.module.js +0 -54
- package/esm2015/lib/modules/shared/sky-modals-resources.module.js.map +0 -1
- package/esm2015/skyux-modals.js +0 -5
- package/esm2015/skyux-modals.js.map +0 -1
- package/esm2015/testing/modal-fixture.js.map +0 -1
- package/esm2015/testing/public-api.js +0 -2
- package/esm2015/testing/public-api.js.map +0 -1
- package/esm2015/testing/skyux-modals-testing.js +0 -5
- package/esm2015/testing/skyux-modals-testing.js.map +0 -1
- package/fesm2015/skyux-modals-testing.js.map +0 -1
- package/fesm2015/skyux-modals.js.map +0 -1
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Injectable } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* @internal
|
|
5
|
-
*/
|
|
6
|
-
export class SkyModalConfiguration {
|
|
7
|
-
constructor() {
|
|
8
|
-
this.size = 'medium';
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
SkyModalConfiguration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
12
|
-
SkyModalConfiguration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalConfiguration, providedIn: 'any' });
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalConfiguration, decorators: [{
|
|
14
|
-
type: Injectable,
|
|
15
|
-
args: [{
|
|
16
|
-
providedIn: 'any',
|
|
17
|
-
}]
|
|
18
|
-
}], ctorParameters: function () { return []; } });
|
|
19
|
-
//# sourceMappingURL=modal-configuration.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal-configuration.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-configuration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAE3C;;GAEG;AAIH,MAAM,OAAO,qBAAqB;IAUhC;QACE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;;mHAZU,qBAAqB;uHAArB,qBAAqB,cAFpB,KAAK;4FAEN,qBAAqB;kBAHjC,UAAU;mBAAC;oBACV,UAAU,EAAE,KAAK;iBAClB","sourcesContent":["import { Injectable } from '@angular/core';\n\n/**\n * @internal\n */\n@Injectable({\n providedIn: 'any',\n})\nexport class SkyModalConfiguration {\n public fullPage?: boolean;\n public size?: string;\n public ariaDescribedBy?: string;\n public ariaLabelledBy?: string;\n public ariaRole?: string;\n public tiledBody?: boolean;\n public helpKey?: string;\n public wrapperClass?: string;\n\n constructor() {\n this.size = 'medium';\n }\n}\n"]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Component, ViewEncapsulation } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* Specifies content to display in the modal's body.
|
|
5
|
-
*/
|
|
6
|
-
export class SkyModalContentComponent {
|
|
7
|
-
}
|
|
8
|
-
SkyModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
-
SkyModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 });
|
|
10
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalContentComponent, decorators: [{
|
|
11
|
-
type: Component,
|
|
12
|
-
args: [{
|
|
13
|
-
selector: 'sky-modal-content',
|
|
14
|
-
templateUrl: './modal-content.component.html',
|
|
15
|
-
styleUrls: ['./modal-content.component.scss'],
|
|
16
|
-
encapsulation: ViewEncapsulation.None,
|
|
17
|
-
}]
|
|
18
|
-
}] });
|
|
19
|
-
//# sourceMappingURL=modal-content.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal-content.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-content.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-content.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;;AAE7D;;GAEG;AAOH,MAAM,OAAO,wBAAwB;;sHAAxB,wBAAwB;0GAAxB,wBAAwB,yDCXrC,6BACA;4FDUa,wBAAwB;kBANpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,WAAW,EAAE,gCAAgC;oBAC7C,SAAS,EAAE,CAAC,gCAAgC,CAAC;oBAC7C,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC","sourcesContent":["import { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Specifies content to display in the modal's body.\n */\n@Component({\n selector: 'sky-modal-content',\n templateUrl: './modal-content.component.html',\n styleUrls: ['./modal-content.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class SkyModalContentComponent {}\n","<ng-content></ng-content>\n"]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* Specifies content to display in the modal's footer.
|
|
5
|
-
*/
|
|
6
|
-
export class SkyModalFooterComponent {
|
|
7
|
-
}
|
|
8
|
-
SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
-
SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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"] });
|
|
10
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
|
|
11
|
-
type: Component,
|
|
12
|
-
args: [{
|
|
13
|
-
selector: 'sky-modal-footer',
|
|
14
|
-
templateUrl: './modal-footer.component.html',
|
|
15
|
-
styleUrls: ['./modal-footer.component.scss'],
|
|
16
|
-
}]
|
|
17
|
-
}] });
|
|
18
|
-
//# sourceMappingURL=modal-footer.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal-footer.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-footer.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-footer.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C;;GAEG;AAMH,MAAM,OAAO,uBAAuB;;qHAAvB,uBAAuB;yGAAvB,uBAAuB,wDCVpC,0GAGA;4FDOa,uBAAuB;kBALnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,WAAW,EAAE,+BAA+B;oBAC5C,SAAS,EAAE,CAAC,+BAA+B,CAAC;iBAC7C","sourcesContent":["import { Component } from '@angular/core';\n\n/**\n * Specifies content to display in the modal's footer.\n */\n@Component({\n selector: 'sky-modal-footer',\n templateUrl: './modal-footer.component.html',\n styleUrls: ['./modal-footer.component.scss'],\n})\nexport class SkyModalFooterComponent {}\n","<div class=\"sky-modal-footer-container sky-padding-even-large\">\n <ng-content></ng-content>\n</div>\n"]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "@skyux/theme";
|
|
4
|
-
/**
|
|
5
|
-
* Specifies a header for the modal.
|
|
6
|
-
*/
|
|
7
|
-
export class SkyModalHeaderComponent {
|
|
8
|
-
}
|
|
9
|
-
SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
-
SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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"] }] });
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
|
|
12
|
-
type: Component,
|
|
13
|
-
args: [{
|
|
14
|
-
selector: 'sky-modal-header',
|
|
15
|
-
templateUrl: './modal-header.component.html',
|
|
16
|
-
styleUrls: ['./modal-header.component.scss'],
|
|
17
|
-
}]
|
|
18
|
-
}] });
|
|
19
|
-
//# sourceMappingURL=modal-header.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal-header.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-header.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-header.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;AAE1C;;GAEG;AAMH,MAAM,OAAO,uBAAuB;;qHAAvB,uBAAuB;yGAAvB,uBAAuB,wDCVpC,4IAQA;4FDEa,uBAAuB;kBALnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,WAAW,EAAE,+BAA+B;oBAC5C,SAAS,EAAE,CAAC,+BAA+B,CAAC;iBAC7C","sourcesContent":["import { Component } from '@angular/core';\n\n/**\n * Specifies a header for the modal.\n */\n@Component({\n selector: 'sky-modal-header',\n templateUrl: './modal-header.component.html',\n styleUrls: ['./modal-header.component.scss'],\n})\nexport class SkyModalHeaderComponent {}\n","<h1\n class=\"sky-emphasized\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n>\n <ng-content></ng-content>\n</h1>\n"]}
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectorRef, Component, ComponentFactoryResolver, Injector, ViewChild, ViewContainerRef, } from '@angular/core';
|
|
2
|
-
import { NavigationStart, Router } from '@angular/router';
|
|
3
|
-
import { takeWhile } from 'rxjs/operators';
|
|
4
|
-
import { SkyModalAdapterService } from './modal-adapter.service';
|
|
5
|
-
import { SkyModalConfiguration } from './modal-configuration';
|
|
6
|
-
import { SkyModalHostService } from './modal-host.service';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "./modal-adapter.service";
|
|
9
|
-
import * as i2 from "@angular/router";
|
|
10
|
-
import * as i3 from "@angular/common";
|
|
11
|
-
/**
|
|
12
|
-
* @internal
|
|
13
|
-
*/
|
|
14
|
-
export class SkyModalHostComponent {
|
|
15
|
-
constructor(resolver, adapter, injector, router, changeDetector) {
|
|
16
|
-
this.resolver = resolver;
|
|
17
|
-
this.adapter = adapter;
|
|
18
|
-
this.injector = injector;
|
|
19
|
-
this.router = router;
|
|
20
|
-
this.changeDetector = changeDetector;
|
|
21
|
-
}
|
|
22
|
-
get modalOpen() {
|
|
23
|
-
return SkyModalHostService.openModalCount > 0;
|
|
24
|
-
}
|
|
25
|
-
get backdropZIndex() {
|
|
26
|
-
return SkyModalHostService.backdropZIndex;
|
|
27
|
-
}
|
|
28
|
-
open(modalInstance, component, config) {
|
|
29
|
-
const params = Object.assign({}, config);
|
|
30
|
-
const factory = this.resolver.resolveComponentFactory(component);
|
|
31
|
-
const hostService = new SkyModalHostService();
|
|
32
|
-
hostService.fullPage = !!params.fullPage;
|
|
33
|
-
const adapter = this.adapter;
|
|
34
|
-
const modalOpener = adapter.getModalOpener();
|
|
35
|
-
let isOpen = true;
|
|
36
|
-
params.providers.push({
|
|
37
|
-
provide: SkyModalHostService,
|
|
38
|
-
useValue: hostService,
|
|
39
|
-
});
|
|
40
|
-
params.providers.push({
|
|
41
|
-
provide: SkyModalConfiguration,
|
|
42
|
-
useValue: params,
|
|
43
|
-
});
|
|
44
|
-
adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
|
|
45
|
-
adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
|
|
46
|
-
const providers = params.providers || /* istanbul ignore next */ [];
|
|
47
|
-
const injector = Injector.create({
|
|
48
|
-
providers,
|
|
49
|
-
parent: this.injector,
|
|
50
|
-
});
|
|
51
|
-
const modalComponentRef = this.target.createComponent(factory, undefined, injector);
|
|
52
|
-
modalInstance.componentInstance = modalComponentRef.instance;
|
|
53
|
-
function closeModal() {
|
|
54
|
-
hostService.destroy();
|
|
55
|
-
adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
|
|
56
|
-
adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
|
|
57
|
-
/* istanbul ignore else */
|
|
58
|
-
/* sanity check */
|
|
59
|
-
if (modalOpener && modalOpener.focus) {
|
|
60
|
-
modalOpener.focus();
|
|
61
|
-
}
|
|
62
|
-
modalComponentRef.destroy();
|
|
63
|
-
}
|
|
64
|
-
hostService.openHelp.subscribe((helpKey) => {
|
|
65
|
-
modalInstance.openHelp(helpKey);
|
|
66
|
-
});
|
|
67
|
-
hostService.close.subscribe(() => {
|
|
68
|
-
modalInstance.close();
|
|
69
|
-
});
|
|
70
|
-
this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
|
|
71
|
-
/* istanbul ignore else */
|
|
72
|
-
if (event instanceof NavigationStart) {
|
|
73
|
-
modalInstance.close();
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
modalInstance.closed.subscribe(() => {
|
|
77
|
-
isOpen = false;
|
|
78
|
-
closeModal();
|
|
79
|
-
});
|
|
80
|
-
// Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit
|
|
81
|
-
this.changeDetector.detectChanges();
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
SkyModalHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i1.SkyModalAdapterService }, { token: i0.Injector }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
85
|
-
SkyModalHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] });
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostComponent, decorators: [{
|
|
87
|
-
type: Component,
|
|
88
|
-
args: [{
|
|
89
|
-
selector: 'sky-modal-host',
|
|
90
|
-
templateUrl: './modal-host.component.html',
|
|
91
|
-
styleUrls: ['./modal-host.component.scss'],
|
|
92
|
-
viewProviders: [SkyModalAdapterService],
|
|
93
|
-
}]
|
|
94
|
-
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i1.SkyModalAdapterService }, { type: i0.Injector }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
|
|
95
|
-
type: ViewChild,
|
|
96
|
-
args: ['target', {
|
|
97
|
-
read: ViewContainerRef,
|
|
98
|
-
static: true,
|
|
99
|
-
}]
|
|
100
|
-
}] } });
|
|
101
|
-
//# sourceMappingURL=modal-host.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal-host.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-host.component.ts","../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-host.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,wBAAwB,EACxB,QAAQ,EACR,SAAS,EACT,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;;;;;AAI3D;;GAEG;AAOH,MAAM,OAAO,qBAAqB;IAqBhC,YACU,QAAkC,EAClC,OAA+B,EAC/B,QAAkB,EAClB,MAAc,EACd,cAAiC;QAJjC,aAAQ,GAAR,QAAQ,CAA0B;QAClC,YAAO,GAAP,OAAO,CAAwB;QAC/B,aAAQ,GAAR,QAAQ,CAAU;QAClB,WAAM,GAAN,MAAM,CAAQ;QACd,mBAAc,GAAd,cAAc,CAAmB;IACxC,CAAC;IA1BJ,IAAW,SAAS;QAClB,OAAO,mBAAmB,CAAC,cAAc,GAAG,CAAC,CAAC;IAChD,CAAC;IAED,IAAW,cAAc;QACvB,OAAO,mBAAmB,CAAC,cAAc,CAAC;IAC5C,CAAC;IAsBM,IAAI,CACT,aAA+B,EAC/B,SAAc,EACd,MAAuC;QAEvC,MAAM,MAAM,GAAmC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzE,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;QAEjE,MAAM,WAAW,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC9C,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;QAEzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,MAAM,WAAW,GAAgB,OAAO,CAAC,cAAc,EAAE,CAAC;QAE1D,IAAI,MAAM,GAAG,IAAI,CAAC;QAElB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,OAAO,EAAE,mBAAmB;YAC5B,QAAQ,EAAE,WAAW;SACtB,CAAC,CAAC;QACH,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,OAAO,EAAE,qBAAqB;YAC9B,QAAQ,EAAE,MAAM;SACjB,CAAC,CAAC;QAEH,OAAO,CAAC,aAAa,CAAC,mBAAmB,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;QAC9D,OAAO,CAAC,wBAAwB,CAC9B,mBAAmB,CAAC,kBAAkB,GAAG,CAAC,CAC3C,CAAC;QAEF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,0BAA0B,CAAC,EAAE,CAAC;QACpE,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;YAC/B,SAAS;YACT,MAAM,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAC,CAAC;QAEH,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,CACnD,OAAO,EACP,SAAS,EACT,QAAQ,CACT,CAAC;QAEF,aAAa,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,QAAQ,CAAC;QAE7D,SAAS,UAAU;YACjB,WAAW,CAAC,OAAO,EAAE,CAAC;YACtB,OAAO,CAAC,aAAa,CAAC,mBAAmB,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;YAC9D,OAAO,CAAC,wBAAwB,CAC9B,mBAAmB,CAAC,kBAAkB,GAAG,CAAC,CAC3C,CAAC;YACF,0BAA0B;YAC1B,kBAAkB;YAClB,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;gBACpC,WAAW,CAAC,KAAK,EAAE,CAAC;aACrB;YACD,iBAAiB,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC;QAED,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,OAAgB,EAAE,EAAE;YAClD,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;YAC/B,aAAa,CAAC,KAAK,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACnE,0BAA0B;YAC1B,IAAI,KAAK,YAAY,eAAe,EAAE;gBACpC,aAAa,CAAC,KAAK,EAAE,CAAC;aACvB;QACH,CAAC,CAAC,CAAC;QAEH,aAAa,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;YAClC,MAAM,GAAG,KAAK,CAAC;YACf,UAAU,EAAE,CAAC;QACf,CAAC,CAAC,CAAC;QAEH,qFAAqF;QACrF,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;IACtC,CAAC;;mHA7GU,qBAAqB;uGAArB,qBAAqB,mIAgBxB,gBAAgB,2CC3C1B,0JAQA,kNDiBiB,CAAC,sBAAsB,CAAC;4FAE5B,qBAAqB;kBANjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,WAAW,EAAE,6BAA6B;oBAC1C,SAAS,EAAE,CAAC,6BAA6B,CAAC;oBAC1C,aAAa,EAAE,CAAC,sBAAsB,CAAC;iBACxC;gOAoBQ,MAAM;sBAJZ,SAAS;uBAAC,QAAQ,EAAE;wBACnB,IAAI,EAAE,gBAAgB;wBACtB,MAAM,EAAE,IAAI;qBACN","sourcesContent":["import {\n ChangeDetectorRef,\n Component,\n ComponentFactoryResolver,\n Injector,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { NavigationStart, Router } from '@angular/router';\n\nimport { takeWhile } from 'rxjs/operators';\n\nimport { SkyModalAdapterService } from './modal-adapter.service';\nimport { SkyModalConfiguration } from './modal-configuration';\nimport { SkyModalHostService } from './modal-host.service';\nimport { SkyModalInstance } from './modal-instance';\nimport { SkyModalConfigurationInterface } from './modal.interface';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-modal-host',\n templateUrl: './modal-host.component.html',\n styleUrls: ['./modal-host.component.scss'],\n viewProviders: [SkyModalAdapterService],\n})\nexport class SkyModalHostComponent {\n public get modalOpen() {\n return SkyModalHostService.openModalCount > 0;\n }\n\n public get backdropZIndex() {\n return SkyModalHostService.backdropZIndex;\n }\n\n /**\n * Use `any` for backwards-compatibility with Angular 4-7.\n * See: https://github.com/angular/angular/issues/30654\n * TODO: Remove the `any` in a breaking change.\n * @internal\n */\n @ViewChild('target', {\n read: ViewContainerRef,\n static: true,\n } as any)\n public target: ViewContainerRef;\n\n constructor(\n private resolver: ComponentFactoryResolver,\n private adapter: SkyModalAdapterService,\n private injector: Injector,\n private router: Router,\n private changeDetector: ChangeDetectorRef\n ) {}\n\n public open(\n modalInstance: SkyModalInstance,\n component: any,\n config?: SkyModalConfigurationInterface\n ) {\n const params: SkyModalConfigurationInterface = Object.assign({}, config);\n const factory = this.resolver.resolveComponentFactory(component);\n\n const hostService = new SkyModalHostService();\n hostService.fullPage = !!params.fullPage;\n\n const adapter = this.adapter;\n const modalOpener: HTMLElement = adapter.getModalOpener();\n\n let isOpen = true;\n\n params.providers.push({\n provide: SkyModalHostService,\n useValue: hostService,\n });\n params.providers.push({\n provide: SkyModalConfiguration,\n useValue: params,\n });\n\n adapter.setPageScroll(SkyModalHostService.openModalCount > 0);\n adapter.toggleFullPageModalClass(\n SkyModalHostService.fullPageModalCount > 0\n );\n\n const providers = params.providers || /* istanbul ignore next */ [];\n const injector = Injector.create({\n providers,\n parent: this.injector,\n });\n\n const modalComponentRef = this.target.createComponent(\n factory,\n undefined,\n injector\n );\n\n modalInstance.componentInstance = modalComponentRef.instance;\n\n function closeModal() {\n hostService.destroy();\n adapter.setPageScroll(SkyModalHostService.openModalCount > 0);\n adapter.toggleFullPageModalClass(\n SkyModalHostService.fullPageModalCount > 0\n );\n /* istanbul ignore else */\n /* sanity check */\n if (modalOpener && modalOpener.focus) {\n modalOpener.focus();\n }\n modalComponentRef.destroy();\n }\n\n hostService.openHelp.subscribe((helpKey?: string) => {\n modalInstance.openHelp(helpKey);\n });\n\n hostService.close.subscribe(() => {\n modalInstance.close();\n });\n\n this.router.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {\n /* istanbul ignore else */\n if (event instanceof NavigationStart) {\n modalInstance.close();\n }\n });\n\n modalInstance.closed.subscribe(() => {\n isOpen = false;\n closeModal();\n });\n\n // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit\n this.changeDetector.detectChanges();\n }\n}\n","<div\n class=\"sky-modal-host-backdrop\"\n [hidden]=\"!modalOpen\"\n [ngStyle]=\"{\n zIndex: backdropZIndex\n }\"\n></div>\n<div #target></div>\n"]}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { EventEmitter, Injectable } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* @internal
|
|
5
|
-
* @dynamic
|
|
6
|
-
*/
|
|
7
|
-
export class SkyModalHostService {
|
|
8
|
-
constructor() {
|
|
9
|
-
this.close = new EventEmitter();
|
|
10
|
-
this.fullPage = false;
|
|
11
|
-
this.openHelp = new EventEmitter();
|
|
12
|
-
SkyModalHostService.modalHosts.push(this);
|
|
13
|
-
}
|
|
14
|
-
static get openModalCount() {
|
|
15
|
-
return SkyModalHostService.modalHosts.length;
|
|
16
|
-
}
|
|
17
|
-
static get fullPageModalCount() {
|
|
18
|
-
const fullPageModals = SkyModalHostService.modalHosts.filter((modal) => modal.fullPage);
|
|
19
|
-
return fullPageModals.length;
|
|
20
|
-
}
|
|
21
|
-
static get BASE_Z_INDEX() {
|
|
22
|
-
return 1040;
|
|
23
|
-
}
|
|
24
|
-
static get backdropZIndex() {
|
|
25
|
-
return (SkyModalHostService.BASE_Z_INDEX +
|
|
26
|
-
SkyModalHostService.modalHosts.length * 10);
|
|
27
|
-
}
|
|
28
|
-
static get topModal() {
|
|
29
|
-
return SkyModalHostService.modalHosts[SkyModalHostService.modalHosts.length - 1];
|
|
30
|
-
}
|
|
31
|
-
getModalZIndex() {
|
|
32
|
-
let zIndex = SkyModalHostService.BASE_Z_INDEX + 1;
|
|
33
|
-
zIndex += (SkyModalHostService.modalHosts.indexOf(this) + 1) * 10;
|
|
34
|
-
return zIndex;
|
|
35
|
-
}
|
|
36
|
-
onClose() {
|
|
37
|
-
this.close.emit();
|
|
38
|
-
}
|
|
39
|
-
onOpenHelp(helpKey) {
|
|
40
|
-
this.openHelp.emit(helpKey);
|
|
41
|
-
}
|
|
42
|
-
destroy() {
|
|
43
|
-
SkyModalHostService.modalHosts.splice(SkyModalHostService.modalHosts.indexOf(this), 1);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
SkyModalHostService.modalHosts = [];
|
|
47
|
-
SkyModalHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
48
|
-
SkyModalHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostService, providedIn: 'root' });
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyModalHostService, decorators: [{
|
|
50
|
-
type: Injectable,
|
|
51
|
-
args: [{
|
|
52
|
-
providedIn: 'root',
|
|
53
|
-
}]
|
|
54
|
-
}], ctorParameters: function () { return []; } });
|
|
55
|
-
//# sourceMappingURL=modal-host.service.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal-host.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/modals/src/lib/modules/modal/modal-host.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAEzD;;;GAGG;AAIH,MAAM,OAAO,mBAAmB;IAmC9B;QAJO,UAAK,GAAG,IAAI,YAAY,EAAQ,CAAC;QACjC,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,IAAI,YAAY,EAAO,CAAC;QAGxC,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IApCM,MAAM,KAAK,cAAc;QAC9B,OAAO,mBAAmB,CAAC,UAAU,CAAC,MAAM,CAAC;IAC/C,CAAC;IAEM,MAAM,KAAK,kBAAkB;QAClC,MAAM,cAAc,GAAG,mBAAmB,CAAC,UAAU,CAAC,MAAM,CAC1D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAC1B,CAAC;QACF,OAAO,cAAc,CAAC,MAAM,CAAC;IAC/B,CAAC;IAEO,MAAM,KAAK,YAAY;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,MAAM,KAAK,cAAc;QAC9B,OAAO,CACL,mBAAmB,CAAC,YAAY;YAChC,mBAAmB,CAAC,UAAU,CAAC,MAAM,GAAG,EAAE,CAC3C,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,QAAQ;QACxB,OAAO,mBAAmB,CAAC,UAAU,CACnC,mBAAmB,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAC1C,CAAC;IACJ,CAAC;IAYM,cAAc;QACnB,IAAI,MAAM,GAAG,mBAAmB,CAAC,YAAY,GAAG,CAAC,CAAC;QAClD,MAAM,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;QAClE,OAAO,MAAM,CAAC;IAChB,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAEM,UAAU,CAAC,OAAgB;QAChC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,OAAO;QACZ,mBAAmB,CAAC,UAAU,CAAC,MAAM,CACnC,mBAAmB,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5C,CAAC,CACF,CAAC;IACJ,CAAC;;AA7Bc,8BAAU,GAA0B,EAAE,CAAC;iHA7B3C,mBAAmB;qHAAnB,mBAAmB,cAFlB,MAAM;4FAEP,mBAAmB;kBAH/B,UAAU;mBAAC;oBACV,UAAU,EAAE,MAAM;iBACnB","sourcesContent":["import { EventEmitter, Injectable } from '@angular/core';\n\n/**\n * @internal\n * @dynamic\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class SkyModalHostService {\n public static get openModalCount(): number {\n return SkyModalHostService.modalHosts.length;\n }\n\n public static get fullPageModalCount(): number {\n const fullPageModals = SkyModalHostService.modalHosts.filter(\n (modal) => modal.fullPage\n );\n return fullPageModals.length;\n }\n\n private static get BASE_Z_INDEX(): number {\n return 1040;\n }\n\n public static get backdropZIndex(): number {\n return (\n SkyModalHostService.BASE_Z_INDEX +\n SkyModalHostService.modalHosts.length * 10\n );\n }\n\n public static get topModal(): SkyModalHostService {\n return SkyModalHostService.modalHosts[\n SkyModalHostService.modalHosts.length - 1\n ];\n }\n\n private static modalHosts: SkyModalHostService[] = [];\n\n public close = new EventEmitter<void>();\n public fullPage = false;\n public openHelp = new EventEmitter<any>();\n\n constructor() {\n SkyModalHostService.modalHosts.push(this);\n }\n\n public getModalZIndex(): number {\n let zIndex = SkyModalHostService.BASE_Z_INDEX + 1;\n zIndex += (SkyModalHostService.modalHosts.indexOf(this) + 1) * 10;\n return zIndex;\n }\n\n public onClose(): void {\n this.close.emit();\n }\n\n public onOpenHelp(helpKey?: string) {\n this.openHelp.emit(helpKey);\n }\n\n public destroy(): void {\n SkyModalHostService.modalHosts.splice(\n SkyModalHostService.modalHosts.indexOf(this),\n 1\n );\n }\n}\n"]}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { Subject } from 'rxjs';
|
|
2
|
-
import { SkyModalBeforeCloseHandler } from './modal-before-close-handler';
|
|
3
|
-
import { SkyModalCloseArgs } from './modal-close-args';
|
|
4
|
-
export class SkyModalInstance {
|
|
5
|
-
constructor() {
|
|
6
|
-
this._beforeClose = new Subject();
|
|
7
|
-
this._closed = new Subject();
|
|
8
|
-
this._helpOpened = new Subject();
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* An event that the modal instance emits when it is about to close.
|
|
12
|
-
* It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method
|
|
13
|
-
* that closes the modal. If a subscription exists for this event,
|
|
14
|
-
* the modal does not close until the subscriber calls the `closeModal` method.
|
|
15
|
-
*/
|
|
16
|
-
get beforeClose() {
|
|
17
|
-
return this._beforeClose;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* An event that the modal instance emits when it closes.
|
|
21
|
-
* It emits a `SkyModalCloseArgs` object with a `data` property that includes
|
|
22
|
-
* data passed from users on close or save and a `reason` property that indicates
|
|
23
|
-
* whether the modal was saved or closed without saving.
|
|
24
|
-
* The `reason` property accepts any string value.
|
|
25
|
-
* Common examples include `"cancel"`, `"close"`, and `"save"`.
|
|
26
|
-
*/
|
|
27
|
-
get closed() {
|
|
28
|
-
return this._closed;
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* An event that the modal instance emits when users click
|
|
32
|
-
* the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
|
|
33
|
-
* If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.
|
|
34
|
-
*/
|
|
35
|
-
get helpOpened() {
|
|
36
|
-
return this._helpOpened;
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* Closes the modal instance.
|
|
40
|
-
* @param result Specifies an object to emit to subscribers of the `closed` event of the
|
|
41
|
-
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
|
|
42
|
-
* so that this `close` function can be called from a button in the `sky-modal-footer`.
|
|
43
|
-
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
|
|
44
|
-
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
|
|
45
|
-
*/
|
|
46
|
-
close(result, reason, ignoreBeforeClose) {
|
|
47
|
-
if (reason === undefined) {
|
|
48
|
-
reason = 'close';
|
|
49
|
-
}
|
|
50
|
-
this.closeModal(reason, result, ignoreBeforeClose);
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* Closes the modal instance with `reason="cancel"`.
|
|
54
|
-
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
55
|
-
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
56
|
-
* that this cancel function can be called from a button in the `sky-modal-footer`.
|
|
57
|
-
*/
|
|
58
|
-
cancel(result) {
|
|
59
|
-
this.closeModal('cancel', result);
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Closes the modal instance with `reason="save"`.
|
|
63
|
-
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
64
|
-
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
65
|
-
* that this `save` function can be called from a button in `the sky-modal-footer`.
|
|
66
|
-
*/
|
|
67
|
-
save(result) {
|
|
68
|
-
this.closeModal('save', result);
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open
|
|
72
|
-
* when users click the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
|
|
73
|
-
* @param helpKey Specifies a string to emit to subscribers of
|
|
74
|
-
* the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider
|
|
75
|
-
* into a component's constructor to call the `openHelp` function in the modal template.
|
|
76
|
-
*/
|
|
77
|
-
openHelp(helpKey) {
|
|
78
|
-
this._helpOpened.next(helpKey);
|
|
79
|
-
}
|
|
80
|
-
closeModal(type, result, ignoreBeforeClose = false) {
|
|
81
|
-
const args = new SkyModalCloseArgs();
|
|
82
|
-
args.reason = type;
|
|
83
|
-
args.data = result;
|
|
84
|
-
if (this._beforeClose.observers.length === 0 || ignoreBeforeClose) {
|
|
85
|
-
this.notifyClosed(args);
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
88
|
-
this._beforeClose.next(new SkyModalBeforeCloseHandler(() => {
|
|
89
|
-
this.notifyClosed(args);
|
|
90
|
-
}, args));
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
notifyClosed(args) {
|
|
94
|
-
this._closed.next(args);
|
|
95
|
-
this._closed.complete();
|
|
96
|
-
this._beforeClose.complete();
|
|
97
|
-
this._helpOpened.complete();
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
//# sourceMappingURL=modal-instance.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,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 { SkyModalBeforeCloseHandler } from './modal-before-close-handler';\nimport { SkyModalCloseArgs } from './modal-close-args';\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 `SkyModalCloseArgs` 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"]}
|
|
@@ -1 +0,0 @@
|
|
|
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"]}
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import { Directive, ElementRef, EventEmitter, HostListener, NgZone, Optional, Output, } from '@angular/core';
|
|
2
|
-
import { MutationObserverService } from '@skyux/core';
|
|
3
|
-
import { SkyTheme, SkyThemeService } from '@skyux/theme';
|
|
4
|
-
import { Subject } from 'rxjs';
|
|
5
|
-
import { takeUntil } from 'rxjs/operators';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
import * as i1 from "@skyux/core";
|
|
8
|
-
import * as i2 from "@skyux/theme";
|
|
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, mutationObserverSvc, ngZone, themeSvc) {
|
|
16
|
-
this.elRef = elRef;
|
|
17
|
-
this.mutationObserverSvc = mutationObserverSvc;
|
|
18
|
-
this.ngZone = ngZone;
|
|
19
|
-
this.themeSvc = themeSvc;
|
|
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.MutationObserverService }, { token: i0.NgZone }, { token: i2.SkyThemeService, optional: true }], 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.MutationObserverService }, { type: i0.NgZone }, { type: i2.SkyThemeService, decorators: [{
|
|
112
|
-
type: Optional
|
|
113
|
-
}] }]; }, 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
|
|
@@ -1 +0,0 @@
|
|
|
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 NgZone,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n} from '@angular/core';\nimport { MutationObserverService } from '@skyux/core';\nimport { SkyTheme, SkyThemeService } from '@skyux/theme';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\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 private mutationObserverSvc: MutationObserverService,\n private ngZone: NgZone,\n @Optional() private themeSvc?: SkyThemeService\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"]}
|
|
@@ -1,8 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"]}
|