@skyux/modals 5.7.2 → 5.8.2
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/bundles/skyux-modals.umd.js +47 -11
- package/documentation.json +370 -279
- package/esm2015/lib/modules/modal/modal-before-close-handler.js +3 -0
- package/esm2015/lib/modules/modal/modal-before-close-handler.js.map +1 -1
- package/esm2015/lib/modules/modal/modal-close-args.js +4 -0
- package/esm2015/lib/modules/modal/modal-close-args.js.map +1 -1
- package/esm2015/lib/modules/modal/modal-instance.js +4 -4
- package/esm2015/lib/modules/modal/modal-instance.js.map +1 -1
- package/esm2015/lib/modules/modal/modal.component.js +36 -7
- package/esm2015/lib/modules/modal/modal.component.js.map +1 -1
- package/esm2015/lib/modules/modal/modal.interface.js.map +1 -1
- package/esm2015/lib/modules/modal/modal.service.js +2 -2
- package/esm2015/lib/modules/modal/modal.service.js.map +1 -1
- package/fesm2015/skyux-modals.js +48 -12
- package/fesm2015/skyux-modals.js.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 -6
- package/lib/modules/modal/modal.interface.d.ts +1 -1
- package/lib/modules/modal/modal.service.d.ts +2 -2
- package/package.json +6 -6
|
@@ -651,10 +651,10 @@
|
|
|
651
651
|
* Provides a common look-and-feel for modal content with options to display
|
|
652
652
|
* a common modal header, specify body content, and display a common modal footer
|
|
653
653
|
* and buttons. For information about how to test modals in SKY UX, see
|
|
654
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/
|
|
654
|
+
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).
|
|
655
655
|
*/
|
|
656
656
|
var SkyModalComponent = /** @class */ (function () {
|
|
657
|
-
function SkyModalComponent(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService) {
|
|
657
|
+
function SkyModalComponent(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
|
|
658
658
|
this.hostService = hostService;
|
|
659
659
|
this.config = config;
|
|
660
660
|
this.elRef = elRef;
|
|
@@ -662,6 +662,7 @@
|
|
|
662
662
|
this.componentAdapter = componentAdapter;
|
|
663
663
|
this.coreAdapter = coreAdapter;
|
|
664
664
|
this.dockService = dockService;
|
|
665
|
+
this.mediaQueryService = mediaQueryService;
|
|
665
666
|
this.modalState = 'in';
|
|
666
667
|
this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
|
|
667
668
|
this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
|
|
@@ -816,6 +817,16 @@
|
|
|
816
817
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
817
818
|
zIndex: 5,
|
|
818
819
|
});
|
|
820
|
+
/* istanbul ignore next */
|
|
821
|
+
if (this.mediaQueryService) {
|
|
822
|
+
this.mediaQueryService.observe(this.modalContentWrapperElement);
|
|
823
|
+
}
|
|
824
|
+
};
|
|
825
|
+
SkyModalComponent.prototype.ngOnDestroy = function () {
|
|
826
|
+
/* istanbul ignore next */
|
|
827
|
+
if (this.mediaQueryService) {
|
|
828
|
+
this.mediaQueryService.unobserve();
|
|
829
|
+
}
|
|
819
830
|
};
|
|
820
831
|
SkyModalComponent.prototype.helpButtonClick = function () {
|
|
821
832
|
this.hostService.onOpenHelp(this.helpKey);
|
|
@@ -834,8 +845,15 @@
|
|
|
834
845
|
};
|
|
835
846
|
return SkyModalComponent;
|
|
836
847
|
}());
|
|
837
|
-
SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3__namespace.SkyCoreAdapterService }, { token: i3__namespace.SkyDockService, host: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
838
|
-
SkyModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
|
|
848
|
+
SkyModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3__namespace.SkyCoreAdapterService }, { token: i3__namespace.SkyDockService, host: true }, { token: i3__namespace.SkyResizeObserverMediaQueryService, host: true, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
849
|
+
SkyModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
|
|
850
|
+
SkyModalComponentAdapterService,
|
|
851
|
+
i3$1.SkyDockService,
|
|
852
|
+
{
|
|
853
|
+
provide: i3$1.SkyMediaQueryService,
|
|
854
|
+
useClass: i3$1.SkyResizeObserverMediaQueryService,
|
|
855
|
+
},
|
|
856
|
+
], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [skyAnimationModalState] });
|
|
839
857
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, decorators: [{
|
|
840
858
|
type: i0.Component,
|
|
841
859
|
args: [{
|
|
@@ -843,11 +861,22 @@
|
|
|
843
861
|
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",
|
|
844
862
|
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"],
|
|
845
863
|
animations: [skyAnimationModalState],
|
|
846
|
-
providers: [
|
|
864
|
+
providers: [
|
|
865
|
+
SkyModalComponentAdapterService,
|
|
866
|
+
i3$1.SkyDockService,
|
|
867
|
+
{
|
|
868
|
+
provide: i3$1.SkyMediaQueryService,
|
|
869
|
+
useClass: i3$1.SkyResizeObserverMediaQueryService,
|
|
870
|
+
},
|
|
871
|
+
],
|
|
847
872
|
}]
|
|
848
873
|
}], ctorParameters: function () {
|
|
849
874
|
return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0__namespace.ElementRef }, { type: i3__namespace.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3__namespace.SkyCoreAdapterService }, { type: i3__namespace.SkyDockService, decorators: [{
|
|
850
875
|
type: i0.Host
|
|
876
|
+
}] }, { type: i3__namespace.SkyResizeObserverMediaQueryService, decorators: [{
|
|
877
|
+
type: i0.Optional
|
|
878
|
+
}, {
|
|
879
|
+
type: i0.Host
|
|
851
880
|
}] }];
|
|
852
881
|
}, propDecorators: { wrapperClass: [{
|
|
853
882
|
type: i0.HostBinding,
|
|
@@ -921,6 +950,9 @@
|
|
|
921
950
|
}]
|
|
922
951
|
}] });
|
|
923
952
|
|
|
953
|
+
/**
|
|
954
|
+
* Closes the modal instance using the `closeModal` method.
|
|
955
|
+
*/
|
|
924
956
|
var SkyModalBeforeCloseHandler = /** @class */ (function () {
|
|
925
957
|
function SkyModalBeforeCloseHandler(closeModal, closeArgs) {
|
|
926
958
|
this.closeModal = closeModal;
|
|
@@ -929,6 +961,10 @@
|
|
|
929
961
|
return SkyModalBeforeCloseHandler;
|
|
930
962
|
}());
|
|
931
963
|
|
|
964
|
+
/**
|
|
965
|
+
* Contains an object with the data passed from users when
|
|
966
|
+
* a modal is closed and the reason that the modal was closed.
|
|
967
|
+
*/
|
|
932
968
|
var SkyModalCloseArgs = /** @class */ (function () {
|
|
933
969
|
function SkyModalCloseArgs() {
|
|
934
970
|
}
|
|
@@ -966,7 +1002,7 @@
|
|
|
966
1002
|
* data passed from users on close or save and a `reason` property that indicates
|
|
967
1003
|
* whether the modal was saved or closed without saving.
|
|
968
1004
|
* The `reason` property accepts any string value.
|
|
969
|
-
* Common examples include `cancel`, `close`, and `save`.
|
|
1005
|
+
* Common examples include `"cancel"`, `"close"`, and `"save"`.
|
|
970
1006
|
*/
|
|
971
1007
|
get: function () {
|
|
972
1008
|
return this._closed;
|
|
@@ -991,7 +1027,7 @@
|
|
|
991
1027
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the
|
|
992
1028
|
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
|
|
993
1029
|
* so that this `close` function can be called from a button in the `sky-modal-footer`.
|
|
994
|
-
* @param reason Specifies the reason for the modal closing, with the default reason of `close`.
|
|
1030
|
+
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
|
|
995
1031
|
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
|
|
996
1032
|
*/
|
|
997
1033
|
SkyModalInstance.prototype.close = function (result, reason, ignoreBeforeClose) {
|
|
@@ -1001,7 +1037,7 @@
|
|
|
1001
1037
|
this.closeModal(reason, result, ignoreBeforeClose);
|
|
1002
1038
|
};
|
|
1003
1039
|
/**
|
|
1004
|
-
* Closes the modal instance with `reason=cancel`.
|
|
1040
|
+
* Closes the modal instance with `reason="cancel"`.
|
|
1005
1041
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
1006
1042
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
1007
1043
|
* that this cancel function can be called from a button in the `sky-modal-footer`.
|
|
@@ -1010,7 +1046,7 @@
|
|
|
1010
1046
|
this.closeModal('cancel', result);
|
|
1011
1047
|
};
|
|
1012
1048
|
/**
|
|
1013
|
-
* Closes the modal instance with `reason=save`.
|
|
1049
|
+
* Closes the modal instance with `reason="save"`.
|
|
1014
1050
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
1015
1051
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
1016
1052
|
* that this `save` function can be called from a button in `the sky-modal-footer`.
|
|
@@ -1201,8 +1237,8 @@
|
|
|
1201
1237
|
}] });
|
|
1202
1238
|
|
|
1203
1239
|
/**
|
|
1204
|
-
* A service that
|
|
1205
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/
|
|
1240
|
+
* A service that launches modals. For information about how to test modals in SKY UX, see
|
|
1241
|
+
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).
|
|
1206
1242
|
* @dynamic
|
|
1207
1243
|
*/
|
|
1208
1244
|
var SkyModalService = /** @class */ (function () {
|