ng-devui
Version:
DevUI components based on Angular
465 lines (457 loc) • 32.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, Directive, HostBinding, Injectable, Inject, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import { Subscription, Observable, from, forkJoin, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import * as i1$1 from 'ng-devui/overlay-container';
class LoadingBackdropComponent {
constructor() {
this.backdrop = true;
}
ngOnInit() {
if (this.target) {
this.targetName = this.target.nodeName;
}
}
ngOnChanges(changes) {
if (changes.target) {
if (this.target) {
this.targetName = this.target.nodeName;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoadingBackdropComponent, selector: "d-loading-backdrop", inputs: { backdrop: "backdrop", target: "target", zIndex: "zIndex" }, usesOnChanges: true, ngImport: i0, template: `<div
class="devui-loading-backdrop"
[ngStyle]="{ 'z-index': zIndex }"
[ngClass]="{ 'devui-loading-full': targetName === 'BODY' }"
*ngIf="backdrop"
></div>`, isInline: true, styles: [".devui-loading-backdrop{position:absolute;z-index:calc(var(--devui-z-index-full-page-overlay, 1080) - 1);background-color:var(--devui-line, #dbdbdb);opacity:.3;left:0;top:0;bottom:0!important;right:0}.devui-loading-backdrop.devui-loading-full{position:fixed;width:100vw;height:100vh}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingBackdropComponent, decorators: [{
type: Component,
args: [{ selector: 'd-loading-backdrop', template: `<div
class="devui-loading-backdrop"
[ngStyle]="{ 'z-index': zIndex }"
[ngClass]="{ 'devui-loading-full': targetName === 'BODY' }"
*ngIf="backdrop"
></div>`, preserveWhitespaces: false, styles: [".devui-loading-backdrop{position:absolute;z-index:calc(var(--devui-z-index-full-page-overlay, 1080) - 1);background-color:var(--devui-line, #dbdbdb);opacity:.3;left:0;top:0;bottom:0!important;right:0}.devui-loading-backdrop.devui-loading-full{position:fixed;width:100vw;height:100vh}\n"] }]
}], propDecorators: { backdrop: [{
type: Input
}], target: [{
type: Input
}], zIndex: [{
type: Input
}] } });
class LoadingComponent {
constructor() {
this.loadingStyle = 'default';
this.spinners = new Array(12);
}
ngOnChanges(changes) {
if (changes.target && this.target) {
this.targetName = this.target.nodeName;
}
}
ngOnInit() {
if (this.target) {
this.targetName = this.target.nodeName;
}
}
// Will overwrite this method in modal service
close() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoadingComponent, selector: "d-loading", inputs: { loadingTemplateRef: "loadingTemplateRef", message: "message", top: "top", left: "left", customPosition: "customPosition", target: "target", zIndex: "zIndex", loadingStyle: "loadingStyle" }, usesOnChanges: true, ngImport: i0, template: `<div class="devui-loading-wrapper" [ngClass]="{ 'devui-loading-full': targetName === 'BODY' }" [style.zIndex]="zIndex">
<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 }"
[ngStyle]="{ top: top, left: left }"
>
<div class="devui-busy-default-sign">
<div *ngIf="loadingStyle === 'default'" class="devui-busy-default-spinner">
<svg viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none"></circle>
</svg>
<div class="devui-loading-dots">
<span *ngFor="let spinner of spinners"><i></i></span>
</div>
</div>
<div *ngIf="loadingStyle === 'infinity'" class="devui-infinity-loading-wrapper">
<svg
width="68px"
height="34px"
viewBox="0 0 68 34"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<linearGradient
x1="115.001687%"
y1="62.0561305%"
x2="5.52129005%"
y2="37.7390732%"
id="devui-container-loading-linearGradient"
>
<stop stop-color="#299BFF" offset="0%"></stop>
<stop stop-color="#0064D6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Loading" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="oldLoading" transform="translate(6.000000, 5.000000)" stroke-width="5">
<path
id="infinity-bg"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M28.8273356,12.0651475 C34.9215537,4.0217158 40.200047,0 44.6627517,0 C51.4764195,0 57,5.5964615 57,12.4999677 C57,
19.4036031 51.4764195,25 44.6627517,25 C40.258896,25 35.0606745,21.0837108 29.0680872,13.2510678 L27.8765067,
11.6765806 C21.9073188,3.8921935 16.7275235,0 12.3372483,0 C5.52358054,0 0,5.5964615 0,12.4999677 C0,
19.4036031 5.52358054,25 12.3372483,25 C16.7979128,25 22.0734732,20.9820956 28.164057,
12.9462221 L28.8273356,12.0651475 Z"
></path>
<path
stroke="url(#devui-container-loading-linearGradient)"
id="infinity-outline"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M28.8273356,12.0651475 C34.9215537,4.0217158 40.200047,0 44.6627517,0 C51.4764195,0 57,5.5964615 57,12.4999677 C57,
19.4036031 51.4764195,25 44.6627517,25 C40.258896,25 35.0606745,21.0837108 29.0680872,13.2510678 L27.8765067,
11.6765806 C21.9073188,3.8921935 16.7275235,0 12.3372483,0 C5.52358054,0 0,5.5964615 0,12.4999677 C0,
19.4036031 5.52358054,25 12.3372483,25 C16.7979128,25 22.0734732,20.9820956 28.164057,
12.9462221 L28.8273356,12.0651475 Z"
></path>
</g>
</g>
</svg>
</div>
<div class="devui-busy-default-text" *ngIf="!!message">{{ message }}</div>
</div>
</div>
</ng-template>
</div>`, isInline: true, styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-loading-wrapper{display:flex;flex:1 1 auto}.devui-loading-wrapper.devui-loading-full{position:fixed;top:0;right:0;bottom:0!important;left:0;z-index:var(--devui-z-index-full-page-overlay, 1080)}.devui-spinner-wrapper{position:absolute;z-index:var(--devui-z-index-full-page-overlay, 1080);width:max-content;max-width:100%;display:flex}.devui-message-wrapper{background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-fix-loading-position{transform:translate(-50%,-50%)}.devui-busy-default-sign{position:relative;display:inline-flex;align-items:center;z-index:var(--devui-z-index-full-page-overlay, 1080);padding:12px;color:var(--devui-text, #191919)}.devui-busy-default-text{display:inline-block;margin:auto 0 auto 8px;max-width:400px;font-size:var(--devui-font-size, 12px);text-align:left}.devui-busy-default-spinner{position:relative;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.devui-busy-default-spinner svg{position:absolute;z-index:2;width:28px;height:28px;animation:animRotate 2s linear infinite}.devui-busy-default-spinner svg circle{animation:animDash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-linecap:round;stroke-width:4.5;stroke:var(--devui-primary, #0a59f7)}.devui-busy-default-spinner .devui-loading-dots{position:relative;width:24px;height:24px;animation:animRotate 12s linear infinite;backface-visibility:hidden;-webkit-backface-visibility:hidden}.devui-busy-default-spinner .devui-loading-dots span{width:100%;height:100%;position:absolute;left:0;top:0}.devui-busy-default-spinner .devui-loading-dots span:nth-child(2){transform:rotate(30deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(3){transform:rotate(60deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(4){transform:rotate(90deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(5){transform:rotate(120deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(6){transform:rotate(150deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(7){transform:rotate(180deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(8){transform:rotate(210deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(9){transform:rotate(240deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(10){transform:rotate(270deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(11){transform:rotate(300deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(12){transform:rotate(330deg)}.devui-busy-default-spinner .devui-loading-dots span i{width:2px;height:2px;display:block;margin:0 auto;border-radius:50%;background-color:var(--devui-list-item-active-bg, #cedefd)}#infinity-outline{stroke-dasharray:1.7px,170px;stroke-dashoffset:0;animation:anim 1.8s linear infinite;opacity:1}#infinity-bg{stroke:#e2e2e6}@keyframes anim{0%{stroke-dasharray:0px,170px;stroke-dashoffset:0px}55%{stroke-dasharray:40.8px,170px;stroke-dashoffset:-61.2px}to{stroke-dasharray:-158.1px,170px;stroke-dashoffset:-158.1px}}@keyframes animDash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}66%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes animRotate{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingComponent, decorators: [{
type: Component,
args: [{ selector: 'd-loading', template: `<div class="devui-loading-wrapper" [ngClass]="{ 'devui-loading-full': targetName === 'BODY' }" [style.zIndex]="zIndex">
<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 }"
[ngStyle]="{ top: top, left: left }"
>
<div class="devui-busy-default-sign">
<div *ngIf="loadingStyle === 'default'" class="devui-busy-default-spinner">
<svg viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none"></circle>
</svg>
<div class="devui-loading-dots">
<span *ngFor="let spinner of spinners"><i></i></span>
</div>
</div>
<div *ngIf="loadingStyle === 'infinity'" class="devui-infinity-loading-wrapper">
<svg
width="68px"
height="34px"
viewBox="0 0 68 34"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<linearGradient
x1="115.001687%"
y1="62.0561305%"
x2="5.52129005%"
y2="37.7390732%"
id="devui-container-loading-linearGradient"
>
<stop stop-color="#299BFF" offset="0%"></stop>
<stop stop-color="#0064D6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Loading" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="oldLoading" transform="translate(6.000000, 5.000000)" stroke-width="5">
<path
id="infinity-bg"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M28.8273356,12.0651475 C34.9215537,4.0217158 40.200047,0 44.6627517,0 C51.4764195,0 57,5.5964615 57,12.4999677 C57,
19.4036031 51.4764195,25 44.6627517,25 C40.258896,25 35.0606745,21.0837108 29.0680872,13.2510678 L27.8765067,
11.6765806 C21.9073188,3.8921935 16.7275235,0 12.3372483,0 C5.52358054,0 0,5.5964615 0,12.4999677 C0,
19.4036031 5.52358054,25 12.3372483,25 C16.7979128,25 22.0734732,20.9820956 28.164057,
12.9462221 L28.8273356,12.0651475 Z"
></path>
<path
stroke="url(#devui-container-loading-linearGradient)"
id="infinity-outline"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M28.8273356,12.0651475 C34.9215537,4.0217158 40.200047,0 44.6627517,0 C51.4764195,0 57,5.5964615 57,12.4999677 C57,
19.4036031 51.4764195,25 44.6627517,25 C40.258896,25 35.0606745,21.0837108 29.0680872,13.2510678 L27.8765067,
11.6765806 C21.9073188,3.8921935 16.7275235,0 12.3372483,0 C5.52358054,0 0,5.5964615 0,12.4999677 C0,
19.4036031 5.52358054,25 12.3372483,25 C16.7979128,25 22.0734732,20.9820956 28.164057,
12.9462221 L28.8273356,12.0651475 Z"
></path>
</g>
</g>
</svg>
</div>
<div class="devui-busy-default-text" *ngIf="!!message">{{ message }}</div>
</div>
</div>
</ng-template>
</div>`, preserveWhitespaces: false, styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-loading-wrapper{display:flex;flex:1 1 auto}.devui-loading-wrapper.devui-loading-full{position:fixed;top:0;right:0;bottom:0!important;left:0;z-index:var(--devui-z-index-full-page-overlay, 1080)}.devui-spinner-wrapper{position:absolute;z-index:var(--devui-z-index-full-page-overlay, 1080);width:max-content;max-width:100%;display:flex}.devui-message-wrapper{background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-fix-loading-position{transform:translate(-50%,-50%)}.devui-busy-default-sign{position:relative;display:inline-flex;align-items:center;z-index:var(--devui-z-index-full-page-overlay, 1080);padding:12px;color:var(--devui-text, #191919)}.devui-busy-default-text{display:inline-block;margin:auto 0 auto 8px;max-width:400px;font-size:var(--devui-font-size, 12px);text-align:left}.devui-busy-default-spinner{position:relative;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.devui-busy-default-spinner svg{position:absolute;z-index:2;width:28px;height:28px;animation:animRotate 2s linear infinite}.devui-busy-default-spinner svg circle{animation:animDash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-linecap:round;stroke-width:4.5;stroke:var(--devui-primary, #0a59f7)}.devui-busy-default-spinner .devui-loading-dots{position:relative;width:24px;height:24px;animation:animRotate 12s linear infinite;backface-visibility:hidden;-webkit-backface-visibility:hidden}.devui-busy-default-spinner .devui-loading-dots span{width:100%;height:100%;position:absolute;left:0;top:0}.devui-busy-default-spinner .devui-loading-dots span:nth-child(2){transform:rotate(30deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(3){transform:rotate(60deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(4){transform:rotate(90deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(5){transform:rotate(120deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(6){transform:rotate(150deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(7){transform:rotate(180deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(8){transform:rotate(210deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(9){transform:rotate(240deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(10){transform:rotate(270deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(11){transform:rotate(300deg)}.devui-busy-default-spinner .devui-loading-dots span:nth-child(12){transform:rotate(330deg)}.devui-busy-default-spinner .devui-loading-dots span i{width:2px;height:2px;display:block;margin:0 auto;border-radius:50%;background-color:var(--devui-list-item-active-bg, #cedefd)}#infinity-outline{stroke-dasharray:1.7px,170px;stroke-dashoffset:0;animation:anim 1.8s linear infinite;opacity:1}#infinity-bg{stroke:#e2e2e6}@keyframes anim{0%{stroke-dasharray:0px,170px;stroke-dashoffset:0px}55%{stroke-dasharray:40.8px,170px;stroke-dashoffset:-61.2px}to{stroke-dasharray:-158.1px,170px;stroke-dashoffset:-158.1px}}@keyframes animDash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}66%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes animRotate{to{transform:rotate(1turn)}}\n"] }]
}], propDecorators: { loadingTemplateRef: [{
type: Input
}], message: [{
type: Input
}], top: [{
type: Input
}], left: [{
type: Input
}], customPosition: [{
type: Input
}], target: [{
type: Input
}], zIndex: [{
type: Input
}], loadingStyle: [{
type: Input
}] } });
class LoadingDirective {
constructor(componentFactoryResolver, elementRef, injector, triggerElementRef, viewContainerRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.elementRef = elementRef;
this.injector = injector;
this.triggerElementRef = triggerElementRef;
this.viewContainerRef = viewContainerRef;
this.loadingStyle = 'default';
this.active = true;
}
ngOnChanges(changes) {
const { backdrop, loading, loadingTemplateRef, message, positionType, showLoading, view, zIndex } = changes;
const changeArr = [backdrop, loading, loadingTemplateRef, message, positionType, showLoading, view, zIndex];
if (changeArr.find((item) => item !== undefined)) {
// loading 兼容showLoading, 赋值类型为 boolean 时触发显示
const isBoolean = typeof this.loading === 'boolean';
const flag = isBoolean ? this.loading : undefined;
const isLoading = this.showLoading !== undefined ? this.showLoading : flag;
if (isLoading !== undefined) {
this.showLoadingChangeEvent(isLoading);
}
if (!isBoolean && this.loading) {
this.loadingChangeEvent(this.loading);
}
}
}
loadingChangeEvent(loading) {
if (loading instanceof Subscription) {
this.startLoading();
loading.add(() => this.endLoading());
return;
}
const loadingArr = [].concat(loading).map((item) => (item instanceof Observable ? item : from(item)));
if (loadingArr.length > 0) {
this.startLoading();
forkJoin(loadingArr)
.pipe(catchError((error) => throwError(error)))
.subscribe({
next: null,
error: () => this.endLoading(),
complete: () => this.endLoading(),
});
}
}
showLoadingChangeEvent(showLoading) {
if (showLoading === true) {
this.startLoading();
}
else {
this.endLoading();
}
}
startLoading() {
this.position = this.positionType || 'relative';
if (this.backdrop && !this.backdropRef) {
this.createLoadingBackdrop();
}
if (!this.backdrop && this.backdropRef) {
this.backdropRef.destroy();
this.backdropRef = null;
}
if (!this.loadingRef) {
this.loadingRef = this.viewContainerRef.createComponent(LoadingComponent, { index: null, injector: 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,
zIndex: this.zIndex ? this.zIndex : '',
loadingStyle: this.loadingStyle,
});
}
endLoading() {
if (this.loadingRef) {
this.loadingRef.destroy();
this.loadingRef = null;
}
if (this.backdropRef) {
this.backdropRef.destroy();
this.backdropRef = null;
}
this.position = '';
}
createLoadingBackdrop() {
this.backdropRef =
!this.backdropRef && this.viewContainerRef.createComponent(LoadingBackdropComponent, { index: null, injector: this.injector });
this.insert(this.backdropRef.hostView);
Object.assign(this.backdropRef.instance, {
triggerElementRef: this.triggerElementRef,
backdrop: this.backdrop,
zIndex: this.zIndex ? this.zIndex : '',
});
}
insert(viewRef) {
viewRef.rootNodes.forEach((node) => this.elementRef.nativeElement.appendChild(node));
return viewRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LoadingDirective, selector: "[dLoading]", inputs: { backdrop: "backdrop", message: "message", positionType: "positionType", showLoading: "showLoading", view: "view", zIndex: "zIndex", loading: "loading", loadingStyle: "loadingStyle", loadingTemplateRef: "loadingTemplateRef" }, host: { properties: { "style.position": "this.position" } }, exportAs: ["dLoading"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingDirective, decorators: [{
type: Directive,
args: [{
selector: '[dLoading]',
exportAs: 'dLoading',
}]
}], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { backdrop: [{
type: Input
}], message: [{
type: Input
}], positionType: [{
type: Input
}], showLoading: [{
type: Input
}], view: [{
type: Input
}], zIndex: [{
type: Input
}], loading: [{
type: Input
}], loadingStyle: [{
type: Input
}], loadingTemplateRef: [{
type: Input
}], position: [{
type: HostBinding,
args: ['style.position']
}] } });
class LoadingService {
constructor(overlayContainerRef, componentFactoryResolver, rendererFactory, doc) {
this.overlayContainerRef = overlayContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.rendererFactory = rendererFactory;
this.doc = doc;
this.renderer = this.rendererFactory.createRenderer(null, null);
this.document = this.doc;
}
// loading 服务内的函数，外部就可以传入ILoadingOptions类型的参数调用它
open({ target = this.document.body, backdrop = true, message, loadingTemplateRef, positionType = 'relative', view, injector, zIndex, loadingStyle = 'default', } = {}) {
const finalComponentFactoryResolver = this.componentFactoryResolver;
let positionTypeOld = '';
positionTypeOld = '' || target.style.position;
let backdropRef;
if (backdrop) {
backdropRef = this.overlayContainerRef.createComponent(finalComponentFactoryResolver.resolveComponentFactory(LoadingBackdropComponent), injector);
Object.assign(backdropRef.instance, {
backdrop: backdrop,
zIndex: zIndex,
target: target ? target : this.document.body,
});
const viewRef = backdropRef.hostView;
viewRef.rootNodes.forEach((node) => target.appendChild(node));
}
const loadingRef = this.overlayContainerRef.createComponent(finalComponentFactoryResolver.resolveComponentFactory(LoadingComponent), injector);
Object.assign(loadingRef.instance, {
message: message,
zIndex: zIndex,
loadingTemplateRef: loadingTemplateRef,
top: view ? view.top : '50%',
left: view ? view.left : '50%',
isCustomPosition: !!view,
target: target ? target : this.document.body,
loadingStyle: loadingStyle,
});
this.renderer.setStyle(target, 'position', positionType);
const viewRef1 = loadingRef.hostView;
viewRef1.rootNodes.forEach((node) => target.appendChild(node));
loadingRef.instance.close = () => {
if (loadingRef) {
loadingRef.destroy();
}
if (backdropRef) {
backdropRef.destroy();
backdropRef = null;
}
this.renderer.setStyle(target, 'position', positionTypeOld);
};
// 返回一个对象内含2个实例loadingInstance和backdropInstance
return {
loadingInstance: loadingRef.instance,
backdropInstance: backdropRef ? backdropRef.instance : null,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingService, deps: [{ token: i1$1.OverlayContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i1$1.OverlayContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }] });
class LoadingModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LoadingModule, declarations: [LoadingDirective,
LoadingBackdropComponent,
LoadingComponent], imports: [CommonModule], exports: [LoadingDirective,
LoadingBackdropComponent,
LoadingComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingModule, providers: [LoadingService], imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
exports: [
LoadingDirective,
LoadingBackdropComponent,
LoadingComponent,
],
declarations: [
LoadingDirective,
LoadingBackdropComponent,
LoadingComponent
],
providers: [LoadingService],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LoadingBackdropComponent, LoadingComponent, LoadingDirective, LoadingModule, LoadingService };
//# sourceMappingURL=ng-devui-loading.mjs.map