@skyux/modals 5.7.2 → 5.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-modals.umd.js +43 -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 +32 -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 +44 -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,12 @@
|
|
|
816
817
|
referenceEl: this.modalContentWrapperElement.nativeElement,
|
|
817
818
|
zIndex: 5,
|
|
818
819
|
});
|
|
820
|
+
this.mediaQueryService.observe(this.modalContentWrapperElement);
|
|
821
|
+
};
|
|
822
|
+
SkyModalComponent.prototype.ngOnDestroy = function () {
|
|
823
|
+
if (this.mediaQueryService) {
|
|
824
|
+
this.mediaQueryService.unobserve();
|
|
825
|
+
}
|
|
819
826
|
};
|
|
820
827
|
SkyModalComponent.prototype.helpButtonClick = function () {
|
|
821
828
|
this.hostService.onOpenHelp(this.helpKey);
|
|
@@ -834,8 +841,15 @@
|
|
|
834
841
|
};
|
|
835
842
|
return SkyModalComponent;
|
|
836
843
|
}());
|
|
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: [
|
|
844
|
+
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.SkyMediaQueryService, host: true, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
845
|
+
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: [
|
|
846
|
+
SkyModalComponentAdapterService,
|
|
847
|
+
i3$1.SkyDockService,
|
|
848
|
+
{
|
|
849
|
+
provide: i3$1.SkyMediaQueryService,
|
|
850
|
+
useClass: i3$1.SkyResizeObserverMediaQueryService,
|
|
851
|
+
},
|
|
852
|
+
], 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
853
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyModalComponent, decorators: [{
|
|
840
854
|
type: i0.Component,
|
|
841
855
|
args: [{
|
|
@@ -843,11 +857,22 @@
|
|
|
843
857
|
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
858
|
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
859
|
animations: [skyAnimationModalState],
|
|
846
|
-
providers: [
|
|
860
|
+
providers: [
|
|
861
|
+
SkyModalComponentAdapterService,
|
|
862
|
+
i3$1.SkyDockService,
|
|
863
|
+
{
|
|
864
|
+
provide: i3$1.SkyMediaQueryService,
|
|
865
|
+
useClass: i3$1.SkyResizeObserverMediaQueryService,
|
|
866
|
+
},
|
|
867
|
+
],
|
|
847
868
|
}]
|
|
848
869
|
}], ctorParameters: function () {
|
|
849
870
|
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
871
|
type: i0.Host
|
|
872
|
+
}] }, { type: i3__namespace.SkyMediaQueryService, decorators: [{
|
|
873
|
+
type: i0.Optional
|
|
874
|
+
}, {
|
|
875
|
+
type: i0.Host
|
|
851
876
|
}] }];
|
|
852
877
|
}, propDecorators: { wrapperClass: [{
|
|
853
878
|
type: i0.HostBinding,
|
|
@@ -921,6 +946,9 @@
|
|
|
921
946
|
}]
|
|
922
947
|
}] });
|
|
923
948
|
|
|
949
|
+
/**
|
|
950
|
+
* Closes the modal instance using the `closeModal` method.
|
|
951
|
+
*/
|
|
924
952
|
var SkyModalBeforeCloseHandler = /** @class */ (function () {
|
|
925
953
|
function SkyModalBeforeCloseHandler(closeModal, closeArgs) {
|
|
926
954
|
this.closeModal = closeModal;
|
|
@@ -929,6 +957,10 @@
|
|
|
929
957
|
return SkyModalBeforeCloseHandler;
|
|
930
958
|
}());
|
|
931
959
|
|
|
960
|
+
/**
|
|
961
|
+
* Contains an object with the data passed from users when
|
|
962
|
+
* a modal is closed and the reason that the modal was closed.
|
|
963
|
+
*/
|
|
932
964
|
var SkyModalCloseArgs = /** @class */ (function () {
|
|
933
965
|
function SkyModalCloseArgs() {
|
|
934
966
|
}
|
|
@@ -966,7 +998,7 @@
|
|
|
966
998
|
* data passed from users on close or save and a `reason` property that indicates
|
|
967
999
|
* whether the modal was saved or closed without saving.
|
|
968
1000
|
* The `reason` property accepts any string value.
|
|
969
|
-
* Common examples include `cancel`, `close`, and `save`.
|
|
1001
|
+
* Common examples include `"cancel"`, `"close"`, and `"save"`.
|
|
970
1002
|
*/
|
|
971
1003
|
get: function () {
|
|
972
1004
|
return this._closed;
|
|
@@ -991,7 +1023,7 @@
|
|
|
991
1023
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the
|
|
992
1024
|
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
|
|
993
1025
|
* 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`.
|
|
1026
|
+
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
|
|
995
1027
|
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
|
|
996
1028
|
*/
|
|
997
1029
|
SkyModalInstance.prototype.close = function (result, reason, ignoreBeforeClose) {
|
|
@@ -1001,7 +1033,7 @@
|
|
|
1001
1033
|
this.closeModal(reason, result, ignoreBeforeClose);
|
|
1002
1034
|
};
|
|
1003
1035
|
/**
|
|
1004
|
-
* Closes the modal instance with `reason=cancel`.
|
|
1036
|
+
* Closes the modal instance with `reason="cancel"`.
|
|
1005
1037
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
1006
1038
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
1007
1039
|
* that this cancel function can be called from a button in the `sky-modal-footer`.
|
|
@@ -1010,7 +1042,7 @@
|
|
|
1010
1042
|
this.closeModal('cancel', result);
|
|
1011
1043
|
};
|
|
1012
1044
|
/**
|
|
1013
|
-
* Closes the modal instance with `reason=save`.
|
|
1045
|
+
* Closes the modal instance with `reason="save"`.
|
|
1014
1046
|
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
|
|
1015
1047
|
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
|
|
1016
1048
|
* that this `save` function can be called from a button in `the sky-modal-footer`.
|
|
@@ -1201,8 +1233,8 @@
|
|
|
1201
1233
|
}] });
|
|
1202
1234
|
|
|
1203
1235
|
/**
|
|
1204
|
-
* A service that
|
|
1205
|
-
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/
|
|
1236
|
+
* A service that launches modals. For information about how to test modals in SKY UX, see
|
|
1237
|
+
* [write unit tests for modals](https://developer.blackbaud.com/skyux/learn/accessibility/test).
|
|
1206
1238
|
* @dynamic
|
|
1207
1239
|
*/
|
|
1208
1240
|
var SkyModalService = /** @class */ (function () {
|