@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
351 lines (342 loc) • 13.1 kB
JavaScript
import { Component, Input, Directive, ComponentFactoryResolver, ElementRef, ViewContainerRef, Injector, HostBinding, NgModule } from '@angular/core';
import { Subscription, Observable, from, forkJoin, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: loading-backdrop.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LoadingBackdropComponent {
constructor() {
this.backdrop = true;
}
}
LoadingBackdropComponent.decorators = [
{ type: Component, args: [{
selector: 'd-loading-backdrop',
template: `<div class='devui-loading-backdrop'
*ngIf='backdrop'>
</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: Input }]
};
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
*/
class LoadingComponent {
}
LoadingComponent.decorators = [
{ type: Component, args: [{
selector: 'd-loading',
template: `<div class="devui-loading-wrapper">
<ng-container *ngTemplateOutlet="loadingTemplateRef ? loadingTemplateRef : default;">
</ng-container>
<ng-template #default>
<div class="devui-spinner-wrapper"
[ngClass]="{'devui-fix-loading-position': !customPosition,'devui-message-wrapper':!!message}"
[style.top]="top"
[style.left]="left">
<div class="devui-busy-default-sign">
<div class="devui-busy-default-spinner">
<div class="devui-loading-bar1"></div>
<div class="devui-loading-bar2"></div>
<div class="devui-loading-bar3"></div>
<div class="devui-loading-bar4"></div>
</div>
<div class="devui-busy-default-text" *ngIf="!!message">{{message}}</div>
</div>
</div>
</ng-template>
</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: Input }],
message: [{ type: Input }],
top: [{ type: Input }],
left: [{ type: Input }],
customPosition: [{ type: Input }]
};
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
*/
class LoadingDirective {
/**
* @param {?} componentFactoryResolver
* @param {?} triggerElementRef
* @param {?} viewContainerRef
* @param {?} injector
* @param {?} elementRef
*/
constructor(componentFactoryResolver, triggerElementRef, viewContainerRef, injector, elementRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.triggerElementRef = triggerElementRef;
this.viewContainerRef = viewContainerRef;
this.injector = injector;
this.elementRef = elementRef;
this.active = true;
}
/**
* @param {?} _showLoading
* @return {?}
*/
set showLoading(_showLoading) {
if (_showLoading === true) {
this.startLoading();
}
else {
this.endLoading();
}
}
/**
* @param {?} loading
* @return {?}
*/
set loading(loading) {
if (loading === undefined) {
return;
}
if (loading instanceof Subscription) {
this.startLoading();
loading.add((/**
* @return {?}
*/
() => this.endLoading()));
return;
}
/** @type {?} */
const loadingArr = [].concat(loading).map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item instanceof Observable) {
return item;
}
return from(item);
}));
if (loadingArr.length > 0) {
this.startLoading();
forkJoin(loadingArr)
.pipe(catchError((/**
* @param {?} error
* @return {?}
*/
error => {
return throwError(error);
})))
.subscribe(null, (/**
* @return {?}
*/
() => {
this.endLoading();
}), (/**
* @return {?}
*/
() => {
this.endLoading();
}));
}
}
/**
* @private
* @return {?}
*/
startLoading() {
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 {?}
*/
endLoading() {
if (this.loadingRef) {
this.loadingRef.destroy();
this.loadingRef = null;
}
if (this.backdropRef) {
this.backdropRef.destroy();
this.backdropRef = null;
}
this.position = '';
}
/**
* @private
* @return {?}
*/
createLoadingBackdrop() {
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 {?}
*/
insert(viewRef) {
((/** @type {?} */ (viewRef))).rootNodes.forEach((/**
* @param {?} node
* @return {?}
*/
node => this.elementRef.nativeElement.appendChild(node)));
return viewRef;
}
}
LoadingDirective.decorators = [
{ type: Directive, args: [{
selector: '[dLoading]',
exportAs: 'dLoading'
},] }
];
/** @nocollapse */
LoadingDirective.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: ElementRef },
{ type: ViewContainerRef },
{ type: Injector },
{ type: ElementRef }
];
LoadingDirective.propDecorators = {
message: [{ type: Input }],
backdrop: [{ type: Input }],
loadingTemplateRef: [{ type: Input }],
positionType: [{ type: Input }],
view: [{ type: Input }],
position: [{ type: HostBinding, args: ['style.position',] }],
showLoading: [{ type: Input }],
loading: [{ type: Input }]
};
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
*/
class LoadingModule {
}
LoadingModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [
LoadingDirective,
LoadingBackdropComponent,
LoadingComponent,
],
declarations: [
LoadingDirective,
LoadingBackdropComponent,
LoadingComponent
],
entryComponents: [
LoadingBackdropComponent,
LoadingComponent
],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: loading.types.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-loading.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { LoadingBackdropComponent, LoadingComponent, LoadingDirective, LoadingModule };
//# sourceMappingURL=ng-devui-loading.js.map