ngx-load
Version:
A simple angular library for adding loaders.
255 lines (246 loc) • 11.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, InjectionToken, Directive, Inject, Input, Injectable, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { tap } from 'rxjs';
// Inspired from : https://loading.io/css
class DefaultLoadingComponent {
}
DefaultLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DefaultLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DefaultLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DefaultLoadingComponent, selector: "ng-component", ngImport: i0, template: `
<div class="lds-ripple"><div></div><div></div></div>
`, isInline: true, styles: [":host{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.lds-ripple{display:inline-block;position:relative;width:80px;height:80px}.lds-ripple div{position:absolute;border:4px solid black;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{top:36px;left:36px;width:0;height:0;opacity:1}to{top:0;left:0;width:72px;height:72px;opacity:0}}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DefaultLoadingComponent, decorators: [{
type: Component,
args: [{ template: `
<div class="lds-ripple"><div></div><div></div></div>
`, styles: [":host{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.lds-ripple{display:inline-block;position:relative;width:80px;height:80px}.lds-ripple div{position:absolute;border:4px solid black;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{top:36px;left:36px;width:0;height:0;opacity:1}to{top:0;left:0;width:72px;height:72px;opacity:0}}\n"] }]
}] });
const CONFIGURATION_TOKEN = new InjectionToken("LOADER_CONFIGURATION");
const DEFAULT_CONFIGURATION = {
loaderComponent: DefaultLoadingComponent
};
class OverlayLoaderDirective {
constructor(elementRef, overlay, configuration) {
this.elementRef = elementRef;
this.overlay = overlay;
this.configuration = configuration;
this.overlayRef = this.createOverlay();
}
set loadOverlayLoader(value) {
this.unsubscribeCurrentSubscription();
this.subscribe(value);
}
;
ngOnInit() {
}
ngOnDestroy() {
this.detachLoader();
this.unsubscribeCurrentSubscription();
}
unsubscribeCurrentSubscription() {
if (this.currentSubscription) {
this.detachLoader();
this.currentSubscription.unsubscribe();
}
}
subscribe(value) {
this.attachLoader();
this.currentSubscription = value.subscribe({
next: () => this.detachLoader(),
complete: () => this.detachLoader(),
error: () => this.detachLoader()
});
}
createOverlay() {
return this.overlay.create({
scrollStrategy: this.overlay.scrollStrategies.reposition(),
positionStrategy: this.overlay.position()
.flexibleConnectedTo(this.elementRef)
.withPush(false)
.withPositions([
{
originX: "center",
originY: "center",
overlayX: "center",
overlayY: "center"
}
])
});
}
attachLoader() {
this.overlayRef.attach(new ComponentPortal(this.configuration.loaderComponent));
}
detachLoader() {
this.overlayRef.detach();
}
}
OverlayLoaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: OverlayLoaderDirective, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: CONFIGURATION_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
OverlayLoaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: OverlayLoaderDirective, selector: "[loadOverlayLoader]", inputs: { loadOverlayLoader: "loadOverlayLoader" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: OverlayLoaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[loadOverlayLoader]'
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: undefined, decorators: [{
type: Inject,
args: [CONFIGURATION_TOKEN]
}] }];
}, propDecorators: { loadOverlayLoader: [{
type: Input
}] } });
class ReplacementLoaderDirective {
constructor(templateRef, elementRef, renderer, viewContainer) {
this.templateRef = templateRef;
this.elementRef = elementRef;
this.renderer = renderer;
this.viewContainer = viewContainer;
this._loaded = false;
}
set loadReplacementLoader(value) {
this.unsubscribe();
this.setIsLoading();
this.currentSubscription = value.subscribe({
next: () => this.setIsLoaded(),
error: () => this.setIsLoaded(),
complete: () => this.setIsLoaded()
});
}
;
unsubscribe() {
if (this.currentSubscription) {
this.currentSubscription.unsubscribe();
}
}
setIsLoaded() {
this._loaded = true;
this.render();
}
setIsLoading() {
this._loaded = false;
this.render();
}
set loadReplacementLoaderWithComponent(value) {
this._replacementComponent = value;
this.render();
}
render() {
if (this._loaded) {
this.displayInitialComponent();
}
else {
this.displayReplacementComponent();
}
}
displayReplacementComponent() {
if (this._replacementComponent) {
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this._replacementComponent);
}
}
displayInitialComponent() {
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.templateRef);
}
ngOnInit() {
}
ngOnDestroy() {
this.unsubscribe();
}
}
ReplacementLoaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ReplacementLoaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
ReplacementLoaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ReplacementLoaderDirective, selector: "[loadReplacementLoader]", inputs: { loadReplacementLoader: "loadReplacementLoader", loadReplacementLoaderWithComponent: "loadReplacementLoaderWithComponent" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ReplacementLoaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[loadReplacementLoader]'
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }]; }, propDecorators: { loadReplacementLoader: [{
type: Input
}], loadReplacementLoaderWithComponent: [{
type: Input
}] } });
class LoaderService {
constructor(overlay, configuration) {
this.overlay = overlay;
this.configuration = configuration;
this.overlayRef = this.overlay.create({
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
hasBackdrop: true
});
}
attachLoader() {
return tap({
subscribe: () => this.showLoader(),
next: () => this.hideLoader(),
error: () => this.hideLoader()
});
}
showLoader() {
this.overlayRef.attach(new ComponentPortal(this.configuration.loaderComponent));
}
hideLoader() {
this.overlayRef.detach();
}
}
LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoaderService, deps: [{ token: i1.Overlay }, { token: CONFIGURATION_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoaderService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoaderService, decorators: [{
type: Injectable
}], ctorParameters: function () {
return [{ type: i1.Overlay }, { type: undefined, decorators: [{
type: Inject,
args: [CONFIGURATION_TOKEN]
}] }];
} });
class NgxLoadModule {
static with(configuration) {
return {
ngModule: NgxLoadModule,
providers: [
{ provide: CONFIGURATION_TOKEN, useValue: configuration }
]
};
}
}
NgxLoadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NgxLoadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxLoadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: NgxLoadModule, declarations: [DefaultLoadingComponent,
OverlayLoaderDirective,
ReplacementLoaderDirective], imports: [CommonModule,
OverlayModule], exports: [OverlayLoaderDirective,
ReplacementLoaderDirective] });
NgxLoadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NgxLoadModule, providers: [
LoaderService,
{ provide: CONFIGURATION_TOKEN, useValue: DEFAULT_CONFIGURATION }
], imports: [CommonModule,
OverlayModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NgxLoadModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DefaultLoadingComponent,
OverlayLoaderDirective,
ReplacementLoaderDirective
],
imports: [
CommonModule,
OverlayModule
],
providers: [
LoaderService,
{ provide: CONFIGURATION_TOKEN, useValue: DEFAULT_CONFIGURATION }
],
exports: [
OverlayLoaderDirective,
ReplacementLoaderDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LoaderService, NgxLoadModule, OverlayLoaderDirective, ReplacementLoaderDirective };
//# sourceMappingURL=ngx-load.mjs.map