@blackbaud/skyux
Version:
SKY UX built on Angular 2
150 lines • 9.25 kB
JavaScript
import { animate, Component, state, style, transition, trigger, ElementRef, HostListener } from '@angular/core';
import { SkyModalHostService } from './modal-host.service';
import { SkyModalConfiguration } from './modal-configuration';
import { SkyModalComponentAdapterService } from './modal-component-adapter.service';
var skyModalUniqueIdentifier = 0;
var SkyModalComponent = (function () {
function SkyModalComponent(hostService, config, elRef, componentAdapter) {
this.hostService = hostService;
this.config = config;
this.elRef = elRef;
this.componentAdapter = componentAdapter;
this.modalState = 'in';
this.modalContentId = 'sky-modal-content-id-' + skyModalUniqueIdentifier.toString();
this.modalHeaderId = 'sky-modal-header-id-' + skyModalUniqueIdentifier.toString();
}
Object.defineProperty(SkyModalComponent.prototype, "modalZIndex", {
get: function () {
return this.hostService.getModalZIndex();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyModalComponent.prototype, "modalFullPage", {
get: function () {
return this.config.fullPage;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyModalComponent.prototype, "isSmallSize", {
get: function () {
return !this.modalFullPage && this.isSizeEqual(this.config.size, 'small');
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyModalComponent.prototype, "isMediumSize", {
get: function () {
return !this.modalFullPage && !(this.isSmallSize || this.isLargeSize);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyModalComponent.prototype, "isLargeSize", {
get: function () {
return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyModalComponent.prototype, "ariaDescribedBy", {
get: function () {
return this.config.ariaDescribedBy || this.modalContentId;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyModalComponent.prototype, "ariaLabelledBy", {
get: function () {
return this.config.ariaLabelledBy || this.modalHeaderId;
},
enumerable: true,
configurable: true
});
SkyModalComponent.prototype.onDocumentKeyDown = function (event) {
/* istanbul ignore else */
/* sanity check */
if (SkyModalHostService.openModalCount > 0) {
var topModal = SkyModalHostService.topModal;
if (topModal && topModal === this.hostService) {
switch (event.which) {
case 27: {
event.preventDefault();
this.hostService.onClose(this);
break;
}
case 9: {
var focusChanged = false;
var focusElementList = this.componentAdapter.loadFocusElementList(this.elRef);
if (event.shiftKey &&
(this.componentAdapter.isFocusInFirstItem(event, focusElementList) ||
this.componentAdapter.isModalFocused(event, this.elRef))) {
focusChanged = this.componentAdapter.focusLastElement(focusElementList);
}
else if (this.componentAdapter.isFocusInLastItem(event, focusElementList)) {
focusChanged = this.componentAdapter.focusFirstElement(focusElementList);
}
if (focusChanged) {
event.preventDefault();
event.stopPropagation();
}
break;
}
default:
break;
}
}
}
};
SkyModalComponent.prototype.ngAfterViewInit = function () {
skyModalUniqueIdentifier++;
this.componentAdapter.handleWindowChange(this.elRef);
this.componentAdapter.modalOpened(this.elRef);
};
SkyModalComponent.prototype.closeButtonClick = function () {
this.hostService.onClose(this);
};
SkyModalComponent.prototype.windowResize = function () {
this.componentAdapter.handleWindowChange(this.elRef);
};
SkyModalComponent.prototype.isSizeEqual = function (actualSize, size) {
return actualSize && actualSize.toLowerCase() === size;
};
return SkyModalComponent;
}());
export { SkyModalComponent };
SkyModalComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-modal',
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 role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (window:resize)=\"windowResize()\"\n>\n <div class=\"sky-modal\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small' : isSmallSize,\n 'sky-modal-medium' : isMediumSize,\n 'sky-modal-large' : isLargeSize\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\">\n\n <div class=\"sky-modal-header\" [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\">\n <div [attr.id]=\"modalHeaderId\" class=\"sky-modal-header-content\" #headerContent>\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n\n <button type=\"button\" class=\"sky-btn sky-modal-btn-close\" [attr.aria-label]=\"'modal_close' | skyResources\" (click)=\"closeButtonClick()\">\n\n <i class=\"fa fa-close\"></i>\n </button>\n </div>\n\n </div>\n <div [attr.id]=\"modalContentId\" class=\"sky-modal-content\">\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div class=\"sky-modal-footer\">\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;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3);position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-medium{width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}}.sky-modal-content{background-color:#fff;padding:15px}.sky-modal-header{padding-left:15px;padding-top:9px;padding-bottom:9px;padding-right:3px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons .sky-btn{border:none;color:#686c73}.sky-modal-header-buttons .sky-btn:hover{color:#282b31;transition:color 150ms}.sky-modal-header-content{flex-grow:1;color:#282b31;font-weight:600;font-size:16px}.sky-modal-header{flex-shrink:0}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0}.sky-modal-footer /deep/ sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer /deep/ sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer /deep/ .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer /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-content{color:#282b31;font-weight:300;font-size:26px;font-stretch:condensed}.sky-modal-full-page .sky-modal-header-buttons .fa-close{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}\n"],
animations: [
trigger('modalState', [
state('in', style({ opacity: '1.0' })),
state('out', style({ opacity: '0.0' })),
transition('void => *', [
style({ opacity: '0.0' }),
animate(150)
]),
transition('* => void', [
animate(150, style({ opacity: '0.0' }))
])
])
],
providers: [
SkyModalComponentAdapterService
]
},] },
];
/** @nocollapse */
SkyModalComponent.ctorParameters = function () { return [
{ type: SkyModalHostService, },
{ type: SkyModalConfiguration, },
{ type: ElementRef, },
{ type: SkyModalComponentAdapterService, },
]; };
SkyModalComponent.propDecorators = {
'onDocumentKeyDown': [{ type: HostListener, args: ['document:keydown', ['$event'],] },],
};
//# sourceMappingURL=modal.component.js.map