@skyux/modals 6.0.0-beta.0 → 6.0.0-beta.3
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 +372 -281
- package/esm2020/lib/modules/modal/modal-before-close-handler.mjs +4 -1
- package/esm2020/lib/modules/modal/modal-close-args.mjs +5 -1
- package/esm2020/lib/modules/modal/modal-instance.mjs +5 -5
- package/esm2020/lib/modules/modal/modal.component.mjs +37 -9
- package/esm2020/lib/modules/modal/modal.interface.mjs +1 -1
- package/esm2020/lib/modules/modal/modal.service.mjs +2 -3
- package/fesm2015/skyux-modals.mjs +47 -13
- package/fesm2015/skyux-modals.mjs.map +1 -1
- package/fesm2020/skyux-modals.mjs +47 -13
- package/fesm2020/skyux-modals.mjs.map +1 -1
- package/lib/modules/modal/modal-before-close-handler.d.ts +3 -0
- package/lib/modules/modal/modal-close-args.d.ts +11 -0
- package/lib/modules/modal/modal-instance.d.ts +4 -4
- package/lib/modules/modal/modal.component.d.ts +8 -7
- package/lib/modules/modal/modal.interface.d.ts +1 -1
- package/lib/modules/modal/modal.service.d.ts +1 -2
- package/package.json +24 -21
|
@@ -12,7 +12,7 @@ import * as i3$1 from '@skyux/i18n';
|
|
|
12
12
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
13
13
|
import { takeWhile, takeUntil } from 'rxjs/operators';
|
|
14
14
|
import * as i3 from '@skyux/core';
|
|
15
|
-
import { SkyDockLocation, SkyDockService } from '@skyux/core';
|
|
15
|
+
import { SkyDockLocation, SkyDockService, SkyMediaQueryService, SkyResizeObserverMediaQueryService } from '@skyux/core';
|
|
16
16
|
import { Subject, BehaviorSubject, zip } from 'rxjs';
|
|
17
17
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
18
18
|
|
|
@@ -561,11 +561,10 @@ let skyModalUniqueIdentifier = 0;
|
|
|
561
561
|
/**
|
|
562
562
|
* Provides a common look-and-feel for modal content with options to display
|
|
563
563
|
* a common modal header, specify body content, and display a common modal footer
|
|
564
|
-
* and buttons.
|
|
565
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
564
|
+
* and buttons.
|
|
566
565
|
*/
|
|
567
566
|
class SkyModalComponent {
|
|
568
|
-
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
|
|
567
|
+
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
|
|
569
568
|
this.hostService = hostService;
|
|
570
569
|
this.config = config;
|
|
571
570
|
this.elRef = elRef;
|
|
@@ -573,6 +572,7 @@ class SkyModalComponent {
|
|
|
573
572
|
this.componentAdapter = componentAdapter;
|
|
574
573
|
this.coreAdapter = coreAdapter;
|
|
575
574
|
this.dockService = dockService;
|
|
575
|
+
this.mediaQueryService = mediaQueryService;
|
|
576
576
|
this.modalState = 'in';
|
|
577
577
|
this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
|
|
578
578
|
this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
|
|
@@ -678,6 +678,16 @@ class SkyModalComponent {
|
|
|
678
678
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
679
679
|
zIndex: 5,
|
|
680
680
|
});
|
|
681
|
+
/* istanbul ignore next */
|
|
682
|
+
if (this.mediaQueryService) {
|
|
683
|
+
this.mediaQueryService.observe(this.modalContentWrapperElement);
|
|
684
|
+
}
|
|
685
|
+
}
|
|
686
|
+
ngOnDestroy() {
|
|
687
|
+
/* istanbul ignore next */
|
|
688
|
+
if (this.mediaQueryService) {
|
|
689
|
+
this.mediaQueryService.unobserve();
|
|
690
|
+
}
|
|
681
691
|
}
|
|
682
692
|
helpButtonClick() {
|
|
683
693
|
this.hostService.onOpenHelp(this.helpKey);
|
|
@@ -695,13 +705,31 @@ class SkyModalComponent {
|
|
|
695
705
|
return actualSize && actualSize.toLowerCase() === size;
|
|
696
706
|
}
|
|
697
707
|
}
|
|
698
|
-
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
699
|
-
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: [
|
|
708
|
+
SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }, { token: i3.SkyResizeObserverMediaQueryService, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
709
|
+
SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: [
|
|
710
|
+
SkyModalComponentAdapterService,
|
|
711
|
+
SkyDockService,
|
|
712
|
+
{
|
|
713
|
+
provide: SkyMediaQueryService,
|
|
714
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
715
|
+
},
|
|
716
|
+
], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small': isSmallSize,\n 'sky-modal-medium': isMediumSize,\n 'sky-modal-large': isLargeSize,\n 'sky-modal-tiled': isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': modalFullPage\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
|
|
700
717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
701
718
|
type: Component,
|
|
702
|
-
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
719
|
+
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
720
|
+
SkyModalComponentAdapterService,
|
|
721
|
+
SkyDockService,
|
|
722
|
+
{
|
|
723
|
+
provide: SkyMediaQueryService,
|
|
724
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
725
|
+
},
|
|
726
|
+
], template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small': isSmallSize,\n 'sky-modal-medium': isMediumSize,\n 'sky-modal-large': isLargeSize,\n 'sky-modal-tiled': isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': modalFullPage\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"] }]
|
|
703
727
|
}], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
704
728
|
type: Host
|
|
729
|
+
}] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
|
|
730
|
+
type: Optional
|
|
731
|
+
}, {
|
|
732
|
+
type: Host
|
|
705
733
|
}] }]; }, propDecorators: { wrapperClass: [{
|
|
706
734
|
type: HostBinding,
|
|
707
735
|
args: ['class']
|
|
@@ -770,6 +798,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
770
798
|
}]
|
|
771
799
|
}] });
|
|
772
800
|
|
|
801
|
+
/**
|
|
802
|
+
* Closes the modal instance using the `closeModal` method.
|
|
803
|
+
*/
|
|
773
804
|
class SkyModalBeforeCloseHandler {
|
|
774
805
|
constructor(closeModal, closeArgs) {
|
|
775
806
|
this.closeModal = closeModal;
|
|
@@ -777,6 +808,10 @@ class SkyModalBeforeCloseHandler {
|
|
|
777
808
|
}
|
|
778
809
|
}
|
|
779
810
|
|
|
811
|
+
/**
|
|
812
|
+
* Contains an object with the data passed from users when
|
|
813
|
+
* a modal is closed and the reason that the modal was closed.
|
|
814
|
+
*/
|
|
780
815
|
class SkyModalCloseArgs {
|
|
781
816
|
}
|
|
782
817
|
|
|
@@ -806,7 +841,7 @@ class SkyModalInstance {
|
|
|
806
841
|
* data passed from users on close or save and a `reason` property that indicates
|
|
807
842
|
* whether the modal was saved or closed without saving.
|
|
808
843
|
* The `reason` property accepts any string value.
|
|
809
|
-
* Common examples include `cancel`, `close`, and `save`.
|
|
844
|
+
* Common examples include `"cancel"`, `"close"`, and `"save"`.
|
|
810
845
|
*/
|
|
811
846
|
get closed() {
|
|
812
847
|
return this._closed;
|
|
@@ -824,7 +859,7 @@ class SkyModalInstance {
|
|
|
824
859
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the
|
|
825
860
|
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
|
|
826
861
|
* so that this `close` function can be called from a button in the `sky-modal-footer`.
|
|
827
|
-
* @param reason Specifies the reason for the modal closing, with the default reason of `close`.
|
|
862
|
+
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
|
|
828
863
|
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
|
|
829
864
|
*/
|
|
830
865
|
close(result, reason, ignoreBeforeClose) {
|
|
@@ -834,7 +869,7 @@ class SkyModalInstance {
|
|
|
834
869
|
this.closeModal(reason, result, ignoreBeforeClose);
|
|
835
870
|
}
|
|
836
871
|
/**
|
|
837
|
-
* Closes the modal instance with `reason=cancel`.
|
|
872
|
+
* Closes the modal instance with `reason="cancel"`.
|
|
838
873
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
839
874
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
840
875
|
* that this cancel function can be called from a button in the `sky-modal-footer`.
|
|
@@ -843,7 +878,7 @@ class SkyModalInstance {
|
|
|
843
878
|
this.closeModal('cancel', result);
|
|
844
879
|
}
|
|
845
880
|
/**
|
|
846
|
-
* Closes the modal instance with `reason=save`.
|
|
881
|
+
* Closes the modal instance with `reason="save"`.
|
|
847
882
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
848
883
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
849
884
|
* that this `save` function can be called from a button in `the sky-modal-footer`.
|
|
@@ -1019,8 +1054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1019
1054
|
}] });
|
|
1020
1055
|
|
|
1021
1056
|
/**
|
|
1022
|
-
* A service that
|
|
1023
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
1057
|
+
* A service that launches modals.
|
|
1024
1058
|
* @dynamic
|
|
1025
1059
|
*/
|
|
1026
1060
|
class SkyModalService {
|