@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
348 lines (340 loc) • 15.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-devui/loading', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/common'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].loading = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.ng.common));
}(this, (function (exports, core, rxjs, operators, common) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: loading-backdrop.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingBackdropComponent = /** @class */ (function () {
function LoadingBackdropComponent() {
this.backdrop = true;
}
LoadingBackdropComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-loading-backdrop',
template: "<div class='devui-loading-backdrop'\n *ngIf='backdrop'>\n </div>",
styles: [".devui-loading-backdrop{position:absolute;z-index:1000;background-color:#adb0b8;opacity:.3;left:0;top:0;bottom:0;right:0}"]
}] }
];
LoadingBackdropComponent.propDecorators = {
backdrop: [{ type: core.Input }]
};
return LoadingBackdropComponent;
}());
if (false) {
/** @type {?} */
LoadingBackdropComponent.prototype.backdrop;
}
/**
* @fileoverview added by tsickle
* Generated from: loading.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingComponent = /** @class */ (function () {
function LoadingComponent() {
}
LoadingComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-loading',
template: "<div class=\"devui-loading-wrapper\">\n <ng-container *ngTemplateOutlet=\"loadingTemplateRef ? loadingTemplateRef : default;\">\n </ng-container>\n <ng-template #default>\n <div class=\"devui-spinner-wrapper\"\n [ngClass]=\"{'devui-fix-loading-position': !customPosition,'devui-message-wrapper':!!message}\"\n [style.top]=\"top\"\n [style.left]=\"left\">\n <div class=\"devui-busy-default-sign\">\n <div class=\"devui-busy-default-spinner\">\n <div class=\"devui-loading-bar1\"></div>\n <div class=\"devui-loading-bar2\"></div>\n <div class=\"devui-loading-bar3\"></div>\n <div class=\"devui-loading-bar4\"></div>\n </div>\n <div class=\"devui-busy-default-text\" *ngIf=\"!!message\">{{message}}</div>\n </div>\n </div>\n </ng-template>\n </div>",
styles: [".devui-loading-wrapper{display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 1 auto}.devui-spinner-wrapper{position:absolute;z-index:1001}.devui-message-wrapper{background:#fff;border-radius:5px}.devui-fix-loading-position{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.devui-busy-default-sign{position:relative;display:inline-block;z-index:1001;padding:12px 14px;color:#252b3a}.devui-busy-default-text{display:inline-block;margin-left:6px;max-width:400px;font-size:14px;text-align:left}.devui-busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;-webkit-animation:1s linear infinite devui-busy-spinner-anim;animation:1s linear infinite devui-busy-spinner-anim}.devui-busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-busy-default-spinner .devui-loading-bar1{top:0;left:0;background:#5e7ce0}.devui-busy-default-spinner .devui-loading-bar2{top:0;left:9px;background:#859bff}.devui-busy-default-spinner .devui-loading-bar3{top:9px;left:0;background:#859bff}.devui-busy-default-spinner .devui-loading-bar4{top:9px;left:9px;background:#5e7ce0}@-webkit-keyframes devui-busy-spinner-anim{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(135deg) scale(1.5);transform:rotate(135deg) scale(1.5)}100%{-webkit-transform:rotate(270deg) scale(1);transform:rotate(270deg) scale(1)}}@keyframes devui-busy-spinner-anim{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(135deg) scale(1.5);transform:rotate(135deg) scale(1.5)}100%{-webkit-transform:rotate(270deg) scale(1);transform:rotate(270deg) scale(1)}}"]
}] }
];
LoadingComponent.propDecorators = {
loadingTemplateRef: [{ type: core.Input }],
message: [{ type: core.Input }],
top: [{ type: core.Input }],
left: [{ type: core.Input }],
customPosition: [{ type: core.Input }]
};
return LoadingComponent;
}());
if (false) {
/** @type {?} */
LoadingComponent.prototype.loadingTemplateRef;
/** @type {?} */
LoadingComponent.prototype.message;
/** @type {?} */
LoadingComponent.prototype.top;
/** @type {?} */
LoadingComponent.prototype.left;
/** @type {?} */
LoadingComponent.prototype.customPosition;
}
/**
* @fileoverview added by tsickle
* Generated from: loading.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingDirective = /** @class */ (function () {
function LoadingDirective(componentFactoryResolver, triggerElementRef, viewContainerRef, injector, elementRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.triggerElementRef = triggerElementRef;
this.viewContainerRef = viewContainerRef;
this.injector = injector;
this.elementRef = elementRef;
this.active = true;
}
Object.defineProperty(LoadingDirective.prototype, "showLoading", {
set: /**
* @param {?} _showLoading
* @return {?}
*/
function (_showLoading) {
if (_showLoading === true) {
this.startLoading();
}
else {
this.endLoading();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LoadingDirective.prototype, "loading", {
set: /**
* @param {?} loading
* @return {?}
*/
function (loading) {
var _this = this;
if (loading === undefined) {
return;
}
if (loading instanceof rxjs.Subscription) {
this.startLoading();
loading.add((/**
* @return {?}
*/
function () { return _this.endLoading(); }));
return;
}
/** @type {?} */
var loadingArr = [].concat(loading).map((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item instanceof rxjs.Observable) {
return item;
}
return rxjs.from(item);
}));
if (loadingArr.length > 0) {
this.startLoading();
rxjs.forkJoin(loadingArr)
.pipe(operators.catchError((/**
* @param {?} error
* @return {?}
*/
function (error) {
return rxjs.throwError(error);
})))
.subscribe(null, (/**
* @return {?}
*/
function () {
_this.endLoading();
}), (/**
* @return {?}
*/
function () {
_this.endLoading();
}));
}
},
enumerable: true,
configurable: true
});
/**
* @private
* @return {?}
*/
LoadingDirective.prototype.startLoading = /**
* @private
* @return {?}
*/
function () {
if (!this.loadingRef) {
this.position = this.positionType || 'relative';
if (this.backdrop) {
this.createLoadingBackdrop();
}
this.loadingRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(LoadingComponent), null, this.injector);
this.insert(this.loadingRef.hostView);
Object.assign(this.loadingRef.instance, {
message: this.message,
loadingTemplateRef: this.loadingTemplateRef,
top: this.view ? this.view.top : '50%',
left: this.view ? this.view.left : '50%',
isCustomPosition: !!this.view
});
}
};
/**
* @private
* @return {?}
*/
LoadingDirective.prototype.endLoading = /**
* @private
* @return {?}
*/
function () {
if (this.loadingRef) {
this.loadingRef.destroy();
this.loadingRef = null;
}
if (this.backdropRef) {
this.backdropRef.destroy();
this.backdropRef = null;
}
this.position = '';
};
/**
* @private
* @return {?}
*/
LoadingDirective.prototype.createLoadingBackdrop = /**
* @private
* @return {?}
*/
function () {
this.backdropRef =
!this.backdropRef &&
this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(LoadingBackdropComponent), null, this.injector);
this.insert(this.backdropRef.hostView);
Object.assign(this.backdropRef.instance, {
triggerElementRef: this.triggerElementRef,
backdrop: this.backdrop
});
};
/**
* @private
* @param {?} viewRef
* @return {?}
*/
LoadingDirective.prototype.insert = /**
* @private
* @param {?} viewRef
* @return {?}
*/
function (viewRef) {
var _this = this;
((/** @type {?} */ (viewRef))).rootNodes.forEach((/**
* @param {?} node
* @return {?}
*/
function (node) { return _this.elementRef.nativeElement.appendChild(node); }));
return viewRef;
};
LoadingDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[dLoading]',
exportAs: 'dLoading'
},] }
];
/** @nocollapse */
LoadingDirective.ctorParameters = function () { return [
{ type: core.ComponentFactoryResolver },
{ type: core.ElementRef },
{ type: core.ViewContainerRef },
{ type: core.Injector },
{ type: core.ElementRef }
]; };
LoadingDirective.propDecorators = {
message: [{ type: core.Input }],
backdrop: [{ type: core.Input }],
loadingTemplateRef: [{ type: core.Input }],
positionType: [{ type: core.Input }],
view: [{ type: core.Input }],
position: [{ type: core.HostBinding, args: ['style.position',] }],
showLoading: [{ type: core.Input }],
loading: [{ type: core.Input }]
};
return LoadingDirective;
}());
if (false) {
/** @type {?} */
LoadingDirective.prototype.message;
/** @type {?} */
LoadingDirective.prototype.backdrop;
/** @type {?} */
LoadingDirective.prototype.loadingTemplateRef;
/** @type {?} */
LoadingDirective.prototype.positionType;
/** @type {?} */
LoadingDirective.prototype.view;
/** @type {?} */
LoadingDirective.prototype.position;
/** @type {?} */
LoadingDirective.prototype.backdropRef;
/** @type {?} */
LoadingDirective.prototype.loadingRef;
/** @type {?} */
LoadingDirective.prototype.active;
/**
* @type {?}
* @private
*/
LoadingDirective.prototype.componentFactoryResolver;
/**
* @type {?}
* @private
*/
LoadingDirective.prototype.triggerElementRef;
/**
* @type {?}
* @private
*/
LoadingDirective.prototype.viewContainerRef;
/**
* @type {?}
* @private
*/
LoadingDirective.prototype.injector;
/**
* @type {?}
* @private
*/
LoadingDirective.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: loading.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingModule = /** @class */ (function () {
function LoadingModule() {
}
LoadingModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
exports: [
LoadingDirective,
LoadingBackdropComponent,
LoadingComponent,
],
declarations: [
LoadingDirective,
LoadingBackdropComponent,
LoadingComponent
],
entryComponents: [
LoadingBackdropComponent,
LoadingComponent
],
providers: [],
},] }
];
return LoadingModule;
}());
exports.LoadingBackdropComponent = LoadingBackdropComponent;
exports.LoadingComponent = LoadingComponent;
exports.LoadingDirective = LoadingDirective;
exports.LoadingModule = LoadingModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-loading.umd.js.map