ng-loaders
Version:
Angular component to add CSS loaders to your application
124 lines (111 loc) • 22.5 kB
JavaScript
import { CommonModule, NgIf, NgClass, NgComponentOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, InjectionToken, Input } from '@angular/core';
class RotatingCubesComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: RotatingCubesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: RotatingCubesComponent, isStandalone: true, selector: "ngx-rotating-cubes", ngImport: i0, template: "<div class=\"spinner rotating-cubes\">\n\t<div class=\"cube1\"></div>\n\t<div class=\"cube2\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:40px;height:40px;position:relative;z-index:11}.cube1,.cube2{background-color:var(--spinnerColor, var(--defaultSpinnerColor));width:15px;height:15px;position:absolute;top:0;left:0;animation:sk-cubemove 1.8s infinite ease-in-out}.cube2{animation-delay:-.9s}@keyframes sk-cubemove{25%{transform:translate(42px) rotate(-90deg) scale(.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{transform:translate(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translate(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translate(0) translateY(42px) rotate(-270deg) scale(.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(.5)}to{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: RotatingCubesComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-rotating-cubes', standalone: true, imports: [CommonModule], template: "<div class=\"spinner rotating-cubes\">\n\t<div class=\"cube1\"></div>\n\t<div class=\"cube2\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:40px;height:40px;position:relative;z-index:11}.cube1,.cube2{background-color:var(--spinnerColor, var(--defaultSpinnerColor));width:15px;height:15px;position:absolute;top:0;left:0;animation:sk-cubemove 1.8s infinite ease-in-out}.cube2{animation-delay:-.9s}@keyframes sk-cubemove{25%{transform:translate(42px) rotate(-90deg) scale(.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{transform:translate(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translate(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translate(0) translateY(42px) rotate(-270deg) scale(.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(.5)}to{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}\n"] }]
}] });
class CubeGridComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: CubeGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: CubeGridComponent, isStandalone: true, selector: "ngx-cube-grid", ngImport: i0, template: "<div class=\"sk-cube-grid cube-grid\">\n\t<div class=\"sk-cube sk-cube1\"></div>\n\t<div class=\"sk-cube sk-cube2\"></div>\n\t<div class=\"sk-cube sk-cube3\"></div>\n\t<div class=\"sk-cube sk-cube4\"></div>\n\t<div class=\"sk-cube sk-cube5\"></div>\n\t<div class=\"sk-cube sk-cube6\"></div>\n\t<div class=\"sk-cube sk-cube7\"></div>\n\t<div class=\"sk-cube sk-cube8\"></div>\n\t<div class=\"sk-cube sk-cube9\"></div>\n</div>\n", styles: [".sk-cube-grid{width:40px;height:40px;margin:0 auto;z-index:11}.sk-cube-grid .sk-cube{width:33%;height:33%;background-color:var(--spinnerColor, var(--defaultSpinnerColor));float:left;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{animation-delay:.2s}.sk-cube-grid .sk-cube2{animation-delay:.3s}.sk-cube-grid .sk-cube3{animation-delay:.4s}.sk-cube-grid .sk-cube4{animation-delay:.1s}.sk-cube-grid .sk-cube5{animation-delay:.2s}.sk-cube-grid .sk-cube6{animation-delay:.3s}.sk-cube-grid .sk-cube7{animation-delay:0s}.sk-cube-grid .sk-cube8{animation-delay:.1s}.sk-cube-grid .sk-cube9{animation-delay:.2s}@keyframes sk-cubeGridScaleDelay{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: CubeGridComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-cube-grid', standalone: true, imports: [CommonModule], template: "<div class=\"sk-cube-grid cube-grid\">\n\t<div class=\"sk-cube sk-cube1\"></div>\n\t<div class=\"sk-cube sk-cube2\"></div>\n\t<div class=\"sk-cube sk-cube3\"></div>\n\t<div class=\"sk-cube sk-cube4\"></div>\n\t<div class=\"sk-cube sk-cube5\"></div>\n\t<div class=\"sk-cube sk-cube6\"></div>\n\t<div class=\"sk-cube sk-cube7\"></div>\n\t<div class=\"sk-cube sk-cube8\"></div>\n\t<div class=\"sk-cube sk-cube9\"></div>\n</div>\n", styles: [".sk-cube-grid{width:40px;height:40px;margin:0 auto;z-index:11}.sk-cube-grid .sk-cube{width:33%;height:33%;background-color:var(--spinnerColor, var(--defaultSpinnerColor));float:left;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{animation-delay:.2s}.sk-cube-grid .sk-cube2{animation-delay:.3s}.sk-cube-grid .sk-cube3{animation-delay:.4s}.sk-cube-grid .sk-cube4{animation-delay:.1s}.sk-cube-grid .sk-cube5{animation-delay:.2s}.sk-cube-grid .sk-cube6{animation-delay:.3s}.sk-cube-grid .sk-cube7{animation-delay:0s}.sk-cube-grid .sk-cube8{animation-delay:.1s}.sk-cube-grid .sk-cube9{animation-delay:.2s}@keyframes sk-cubeGridScaleDelay{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}\n"] }]
}] });
class EllipsisComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: EllipsisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: EllipsisComponent, isStandalone: true, selector: "ngx-ellipsis", ngImport: i0, template: "<div class=\"spinner ellipsis\">\n\t<div class=\"bounce1\"></div>\n\t<div class=\"bounce2\"></div>\n\t<div class=\"bounce3\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:70px;text-align:center;z-index:11}.spinner>div{width:18px;height:18px;background-color:var(--spinnerColor, var(--defaultSpinnerColor));border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: EllipsisComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-ellipsis', standalone: true, imports: [CommonModule], template: "<div class=\"spinner ellipsis\">\n\t<div class=\"bounce1\"></div>\n\t<div class=\"bounce2\"></div>\n\t<div class=\"bounce3\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:70px;text-align:center;z-index:11}.spinner>div{width:18px;height:18px;background-color:var(--spinnerColor, var(--defaultSpinnerColor));border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
}] });
class GrowingBarsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: GrowingBarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: GrowingBarsComponent, isStandalone: true, selector: "ngx-growing-bars", ngImport: i0, template: "<div class=\"spinner growing-bars\">\n\t<div class=\"rect1\"></div>\n\t<div class=\"rect2\"></div>\n\t<div class=\"rect3\"></div>\n\t<div class=\"rect4\"></div>\n\t<div class=\"rect5\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:50px;height:40px;text-align:center;font-size:10px;z-index:11}.spinner>div{background-color:var(--spinnerColor, var(--defaultSpinnerColor));height:100%;width:6px;display:inline-block;animation:sk-stretchdelay 1.2s infinite ease-in-out}.spinner .rect2{animation-delay:-1.1s}.spinner .rect3{animation-delay:-1s}.spinner .rect4{animation-delay:-.9s}.spinner .rect5{animation-delay:-.8s}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: GrowingBarsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-growing-bars', standalone: true, imports: [CommonModule], template: "<div class=\"spinner growing-bars\">\n\t<div class=\"rect1\"></div>\n\t<div class=\"rect2\"></div>\n\t<div class=\"rect3\"></div>\n\t<div class=\"rect4\"></div>\n\t<div class=\"rect5\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:50px;height:40px;text-align:center;font-size:10px;z-index:11}.spinner>div{background-color:var(--spinnerColor, var(--defaultSpinnerColor));height:100%;width:6px;display:inline-block;animation:sk-stretchdelay 1.2s infinite ease-in-out}.spinner .rect2{animation-delay:-1.1s}.spinner .rect3{animation-delay:-1s}.spinner .rect4{animation-delay:-.9s}.spinner .rect5{animation-delay:-.8s}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}\n"] }]
}] });
class GrowingCircleComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: GrowingCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: GrowingCircleComponent, isStandalone: true, selector: "ngx-growing-circle", ngImport: i0, template: "<div class=\"spinner growing-circle\"></div>\n", styles: [".spinner{width:40px;height:40px;margin:0 auto;background-color:var(--spinnerColor, var(--defaultSpinnerColor));z-index:11;border-radius:100%;animation:sk-scaleout 1s infinite ease-in-out}@keyframes sk-scaleout{0%{transform:scale(0)}to{transform:scale(1);opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: GrowingCircleComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-growing-circle', standalone: true, imports: [CommonModule], template: "<div class=\"spinner growing-circle\"></div>\n", styles: [".spinner{width:40px;height:40px;margin:0 auto;background-color:var(--spinnerColor, var(--defaultSpinnerColor));z-index:11;border-radius:100%;animation:sk-scaleout 1s infinite ease-in-out}@keyframes sk-scaleout{0%{transform:scale(0)}to{transform:scale(1);opacity:0}}\n"] }]
}] });
class PulsingCirclesComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: PulsingCirclesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: PulsingCirclesComponent, isStandalone: true, selector: "ngx-pulsing-circles", ngImport: i0, template: "<div class=\"spinner\">\n\t<div class=\"double-bounce1\"></div>\n\t<div class=\"double-bounce2\"></div>\n</div>\n", styles: [".spinner{width:40px;height:40px;position:relative;margin:0 auto;z-index:11}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:var(--spinnerColor, var(--defaultSpinnerColor));opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: PulsingCirclesComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-pulsing-circles', standalone: true, imports: [CommonModule], template: "<div class=\"spinner\">\n\t<div class=\"double-bounce1\"></div>\n\t<div class=\"double-bounce2\"></div>\n</div>\n", styles: [".spinner{width:40px;height:40px;position:relative;margin:0 auto;z-index:11}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:var(--spinnerColor, var(--defaultSpinnerColor));opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}\n"] }]
}] });
class RotatingDotsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: RotatingDotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: RotatingDotsComponent, isStandalone: true, selector: "ngx-rotating-dots", ngImport: i0, template: "<div class=\"spinner rotating-dots\">\n\t<div class=\"dot1\"></div>\n\t<div class=\"dot2\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:40px;height:40px;position:relative;text-align:center;z-index:11;animation:sk-rotate 2s infinite linear}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--spinnerColor, var(--defaultSpinnerColor));border-radius:100%;animation:sk-bounce 2s infinite ease-in-out}.dot2{top:auto;bottom:0;animation-delay:-1s}@keyframes sk-rotate{to{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: RotatingDotsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-rotating-dots', standalone: true, imports: [CommonModule], template: "<div class=\"spinner rotating-dots\">\n\t<div class=\"dot1\"></div>\n\t<div class=\"dot2\"></div>\n</div>\n", styles: [".spinner{margin:0 auto;width:40px;height:40px;position:relative;text-align:center;z-index:11;animation:sk-rotate 2s infinite linear}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--spinnerColor, var(--defaultSpinnerColor));border-radius:100%;animation:sk-bounce 2s infinite ease-in-out}.dot2{top:auto;bottom:0;animation-delay:-1s}@keyframes sk-rotate{to{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}\n"] }]
}] });
class RotatingSquareComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: RotatingSquareComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: RotatingSquareComponent, isStandalone: true, selector: "ngx-rotating-square", ngImport: i0, template: "<div class=\"spinner\"></div>\n", styles: [".spinner{width:40px;height:40px;background-color:var(--spinnerColor, var(--defaultSpinnerColor));z-index:11;margin:0 auto;animation:sk-rotateplane 1.2s infinite ease-in-out}@keyframes sk-rotateplane{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: RotatingSquareComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-rotating-square', standalone: true, imports: [CommonModule], template: "<div class=\"spinner\"></div>\n", styles: [".spinner{width:40px;height:40px;background-color:var(--spinnerColor, var(--defaultSpinnerColor));z-index:11;margin:0 auto;animation:sk-rotateplane 1.2s infinite ease-in-out}@keyframes sk-rotateplane{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}\n"] }]
}] });
const NG_LOADERS_CONFIG = new InjectionToken('NG_LOADERS_CONFIG', { providedIn: 'root', factory: () => ({ spinnerType: 'cube-grid' }) });
class LoaderComponent {
constructor(_injector) {
this._injector = _injector;
this.config = this._injector.get(NG_LOADERS_CONFIG);
this.spinnerType = this.config.spinnerType;
this.coverContainer = false;
this.fixed = false;
this.componentsMap = {
'cube-grid': CubeGridComponent,
ellipsis: EllipsisComponent,
'growing-bars': GrowingBarsComponent,
'growing-circle': GrowingCircleComponent,
'pulsing-circles': PulsingCirclesComponent,
'rotating-cubes': RotatingCubesComponent,
'rotating-dots': RotatingDotsComponent,
'rotating-square': RotatingSquareComponent,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: LoaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: LoaderComponent, isStandalone: true, selector: "ngx-loader", inputs: { spinnerType: "spinnerType", coverContainer: "coverContainer", fixed: "fixed" }, ngImport: i0, template: "<div\n\tclass=\"ng-loader-container\"\n\t[ngClass]=\"{ 'cover-container': coverContainer, fixed }\"\n>\n\t<div *ngIf=\"coverContainer || fixed\" class=\"overlay\"></div>\n\t<ng-container\n\t\t*ngComponentOutlet=\"componentsMap[spinnerType]\"\n\t></ng-container>\n</div>\n", styles: [".ng-loader-container{--defaultSpinnerColor: blue;--defaultOverlayColor: #ffffff;--defaultOverlayOpacity: .5}.ng-loader-container.cover-container,.ng-loader-container.fixed{display:flex;height:100%;width:100%;justify-content:center;align-items:center;position:absolute;inset:0;z-index:10}.ng-loader-container.cover-container .overlay,.ng-loader-container.fixed .overlay{position:absolute;inset:0;background-color:var(--spinnerOverlayColor, var(--defaultOverlayColor));opacity:var(--spinnerOverlayOpacity, var(--defaultOverlayOpacity))}.ng-loader-container.fixed,.ng-loader-container.fixed .overlay{position:fixed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: LoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-loader', standalone: true, imports: [
NgIf,
NgClass,
NgSwitch,
NgSwitchCase,
NgSwitchDefault,
NgComponentOutlet,
], template: "<div\n\tclass=\"ng-loader-container\"\n\t[ngClass]=\"{ 'cover-container': coverContainer, fixed }\"\n>\n\t<div *ngIf=\"coverContainer || fixed\" class=\"overlay\"></div>\n\t<ng-container\n\t\t*ngComponentOutlet=\"componentsMap[spinnerType]\"\n\t></ng-container>\n</div>\n", styles: [".ng-loader-container{--defaultSpinnerColor: blue;--defaultOverlayColor: #ffffff;--defaultOverlayOpacity: .5}.ng-loader-container.cover-container,.ng-loader-container.fixed{display:flex;height:100%;width:100%;justify-content:center;align-items:center;position:absolute;inset:0;z-index:10}.ng-loader-container.cover-container .overlay,.ng-loader-container.fixed .overlay{position:absolute;inset:0;background-color:var(--spinnerOverlayColor, var(--defaultOverlayColor));opacity:var(--spinnerOverlayOpacity, var(--defaultOverlayOpacity))}.ng-loader-container.fixed,.ng-loader-container.fixed .overlay{position:fixed}\n"] }]
}], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { spinnerType: [{
type: Input
}], coverContainer: [{
type: Input
}], fixed: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { LoaderComponent, NG_LOADERS_CONFIG };
//# sourceMappingURL=ng-loaders.mjs.map