@blackbaud/skyux
Version:
SKY UX built on Angular 2
62 lines • 3.59 kB
JavaScript
import { Component, Input, ElementRef } from '@angular/core';
import { SkyWaitAdapterService } from './wait-adapter.service';
var SkyWaitComponent = (function () {
function SkyWaitComponent(elRef, adapterService) {
this.elRef = elRef;
this.adapterService = adapterService;
}
Object.defineProperty(SkyWaitComponent.prototype, "isWaiting", {
get: function () {
return this._isWaiting;
},
set: function (value) {
if (value && !this._isFullPage) {
this.adapterService.setWaitBounds(this.elRef);
}
else if (!value && !this._isFullPage) {
this.adapterService.removeWaitBounds(this.elRef);
}
this.adapterService.setBusyState(this.elRef, this._isFullPage, value);
this._isWaiting = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyWaitComponent.prototype, "isFullPage", {
get: function () {
return this._isFullPage;
},
set: function (value) {
if (value) {
this.adapterService.removeWaitBounds(this.elRef);
}
else if (!value && this._isWaiting) {
this.adapterService.setWaitBounds(this.elRef);
}
this._isFullPage = value;
},
enumerable: true,
configurable: true
});
return SkyWaitComponent;
}());
export { SkyWaitComponent };
SkyWaitComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-wait',
template: "<div class=\"sky-wait-container\">\n <div\n *ngIf=\"isWaiting\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n</div>\n\n",
styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;top:0;right:0;left:0;bottom:0;background-color:rgba(255,255,255,0.7);z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{top:auto;right:auto;bottom:0;left:0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#71bf43;opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:sk-bounce 2.0s infinite ease-in-out;animation:sk-bounce 2.0s infinite ease-in-out}.sky-wait-double-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}@-webkit-keyframes sk-bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"],
providers: [SkyWaitAdapterService]
},] },
];
/** @nocollapse */
SkyWaitComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: SkyWaitAdapterService, },
]; };
SkyWaitComponent.propDecorators = {
'isWaiting': [{ type: Input },],
'isFullPage': [{ type: Input },],
'isNonBlocking': [{ type: Input },],
};
//# sourceMappingURL=wait.component.js.map