@skyux/modals 6.0.0-beta.2 → 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 +5 -5
|
@@ -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
|
|
|
@@ -563,11 +563,10 @@ let skyModalUniqueIdentifier = 0;
|
|
|
563
563
|
/**
|
|
564
564
|
* Provides a common look-and-feel for modal content with options to display
|
|
565
565
|
* a common modal header, specify body content, and display a common modal footer
|
|
566
|
-
* and buttons.
|
|
567
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
566
|
+
* and buttons.
|
|
568
567
|
*/
|
|
569
568
|
class SkyModalComponent {
|
|
570
|
-
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
|
|
569
|
+
constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
|
|
571
570
|
this.hostService = hostService;
|
|
572
571
|
this.config = config;
|
|
573
572
|
this.elRef = elRef;
|
|
@@ -575,6 +574,7 @@ class SkyModalComponent {
|
|
|
575
574
|
this.componentAdapter = componentAdapter;
|
|
576
575
|
this.coreAdapter = coreAdapter;
|
|
577
576
|
this.dockService = dockService;
|
|
577
|
+
this.mediaQueryService = mediaQueryService;
|
|
578
578
|
this.modalState = 'in';
|
|
579
579
|
this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
|
|
580
580
|
this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
|
|
@@ -680,6 +680,16 @@ class SkyModalComponent {
|
|
|
680
680
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
681
681
|
zIndex: 5,
|
|
682
682
|
});
|
|
683
|
+
/* istanbul ignore next */
|
|
684
|
+
if (this.mediaQueryService) {
|
|
685
|
+
this.mediaQueryService.observe(this.modalContentWrapperElement);
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
ngOnDestroy() {
|
|
689
|
+
/* istanbul ignore next */
|
|
690
|
+
if (this.mediaQueryService) {
|
|
691
|
+
this.mediaQueryService.unobserve();
|
|
692
|
+
}
|
|
683
693
|
}
|
|
684
694
|
helpButtonClick() {
|
|
685
695
|
this.hostService.onOpenHelp(this.helpKey);
|
|
@@ -697,14 +707,32 @@ class SkyModalComponent {
|
|
|
697
707
|
return actualSize && actualSize.toLowerCase() === size;
|
|
698
708
|
}
|
|
699
709
|
}
|
|
700
|
-
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 });
|
|
701
|
-
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
|
+
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 });
|
|
711
|
+
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: [
|
|
712
|
+
SkyModalComponentAdapterService,
|
|
713
|
+
SkyDockService,
|
|
714
|
+
{
|
|
715
|
+
provide: SkyMediaQueryService,
|
|
716
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
717
|
+
},
|
|
718
|
+
], 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] });
|
|
702
719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyModalComponent, decorators: [{
|
|
703
720
|
type: Component,
|
|
704
|
-
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
721
|
+
args: [{ selector: 'sky-modal', animations: [skyAnimationModalState], providers: [
|
|
722
|
+
SkyModalComponentAdapterService,
|
|
723
|
+
SkyDockService,
|
|
724
|
+
{
|
|
725
|
+
provide: SkyMediaQueryService,
|
|
726
|
+
useClass: SkyResizeObserverMediaQueryService,
|
|
727
|
+
},
|
|
728
|
+
], template: "<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n aria-modal=\"true\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"windowResize()\"\n>\n <div\n class=\"sky-modal sky-shadow sky-box sky-elevation-16\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small': isSmallSize,\n 'sky-modal-medium': isMediumSize,\n 'sky-modal-large': isLargeSize,\n 'sky-modal-tiled': isTiledBody\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\"\n >\n <div\n class=\"sky-modal-header\"\n [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.topShadow\n }\"\n >\n <div\n class=\"sky-modal-header-content\"\n [attr.id]=\"modalHeaderId\"\n [ngClass]=\"{\n 'sky-section-heading': modalFullPage\n }\"\n #headerContent\n >\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n <button\n *ngIf=\"helpKey\"\n class=\"sky-btn sky-modal-btn-help\"\n name=\"help-button\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n (click)=\"helpButtonClick()\"\n >\n <sky-icon icon=\"question-circle\"></sky-icon>\n </button>\n\n <button\n type=\"button\"\n class=\"sky-btn sky-modal-btn-close\"\n [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n (click)=\"closeButtonClick()\"\n >\n <sky-icon icon=\"close\"></sky-icon>\n </button>\n </div>\n </div>\n <div\n class=\"sky-modal-content sky-padding-even-large\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-labelledby]=\"modalHeaderId\"\n [attr.id]=\"modalContentId\"\n (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n #modalContentWrapper\n >\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div\n class=\"sky-modal-footer\"\n [ngStyle]=\"{\n 'box-shadow': scrollShadow?.bottomShadow\n }\"\n >\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#686c73;font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer ::ng-deep sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"] }]
|
|
705
729
|
}], ctorParameters: function () {
|
|
706
730
|
return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
|
|
707
731
|
type: Host
|
|
732
|
+
}] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
|
|
733
|
+
type: Optional
|
|
734
|
+
}, {
|
|
735
|
+
type: Host
|
|
708
736
|
}] }];
|
|
709
737
|
}, propDecorators: { wrapperClass: [{
|
|
710
738
|
type: HostBinding,
|
|
@@ -774,6 +802,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
774
802
|
}]
|
|
775
803
|
}] });
|
|
776
804
|
|
|
805
|
+
/**
|
|
806
|
+
* Closes the modal instance using the `closeModal` method.
|
|
807
|
+
*/
|
|
777
808
|
class SkyModalBeforeCloseHandler {
|
|
778
809
|
constructor(closeModal, closeArgs) {
|
|
779
810
|
this.closeModal = closeModal;
|
|
@@ -781,6 +812,10 @@ class SkyModalBeforeCloseHandler {
|
|
|
781
812
|
}
|
|
782
813
|
}
|
|
783
814
|
|
|
815
|
+
/**
|
|
816
|
+
* Contains an object with the data passed from users when
|
|
817
|
+
* a modal is closed and the reason that the modal was closed.
|
|
818
|
+
*/
|
|
784
819
|
class SkyModalCloseArgs {
|
|
785
820
|
}
|
|
786
821
|
|
|
@@ -810,7 +845,7 @@ class SkyModalInstance {
|
|
|
810
845
|
* data passed from users on close or save and a `reason` property that indicates
|
|
811
846
|
* whether the modal was saved or closed without saving.
|
|
812
847
|
* The `reason` property accepts any string value.
|
|
813
|
-
* Common examples include `cancel`, `close`, and `save`.
|
|
848
|
+
* Common examples include `"cancel"`, `"close"`, and `"save"`.
|
|
814
849
|
*/
|
|
815
850
|
get closed() {
|
|
816
851
|
return this._closed;
|
|
@@ -828,7 +863,7 @@ class SkyModalInstance {
|
|
|
828
863
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the
|
|
829
864
|
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
|
|
830
865
|
* so that this `close` function can be called from a button in the `sky-modal-footer`.
|
|
831
|
-
* @param reason Specifies the reason for the modal closing, with the default reason of `close`.
|
|
866
|
+
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
|
|
832
867
|
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
|
|
833
868
|
*/
|
|
834
869
|
close(result, reason, ignoreBeforeClose) {
|
|
@@ -838,7 +873,7 @@ class SkyModalInstance {
|
|
|
838
873
|
this.closeModal(reason, result, ignoreBeforeClose);
|
|
839
874
|
}
|
|
840
875
|
/**
|
|
841
|
-
* Closes the modal instance with `reason=cancel`.
|
|
876
|
+
* Closes the modal instance with `reason="cancel"`.
|
|
842
877
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
843
878
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
844
879
|
* that this cancel function can be called from a button in the `sky-modal-footer`.
|
|
@@ -847,7 +882,7 @@ class SkyModalInstance {
|
|
|
847
882
|
this.closeModal('cancel', result);
|
|
848
883
|
}
|
|
849
884
|
/**
|
|
850
|
-
* Closes the modal instance with `reason=save`.
|
|
885
|
+
* Closes the modal instance with `reason="save"`.
|
|
851
886
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
852
887
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
853
888
|
* that this `save` function can be called from a button in `the sky-modal-footer`.
|
|
@@ -1025,8 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1025
1060
|
}] });
|
|
1026
1061
|
|
|
1027
1062
|
/**
|
|
1028
|
-
* A service that
|
|
1029
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/get-started/advanced/unit-test-modals).
|
|
1063
|
+
* A service that launches modals.
|
|
1030
1064
|
* @dynamic
|
|
1031
1065
|
*/
|
|
1032
1066
|
class SkyModalService {
|