@lenne.tech/ng-base 13.32.1 → 13.32.2

package/fesm2020/lenne.tech-ng-base-base-components.mjs

@@ -371,13 +371,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             }] } });
 
 class LoadingBarComponent {
+    constructor(ngZone, changeDetectorRef, loaderService) {
+        this.ngZone = ngZone;
+        this.changeDetectorRef = changeDetectorRef;
+        this.loaderService = loaderService;
+        this.manuallyLoading = false;
+        this.loading = false;
+        this.subscription = new Subscription();
+    }
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subscription.add(this.loaderService.isLoading.subscribe((value) => {
+                this.loading = value;
+                this.changeDetectorRef.detectChanges();
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
 }
-LoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: LoadingBarComponent, selector: "base-loading-bar", ngImport: i0, template: "<div class=\"slider\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] });
+LoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$1.LoaderService }], target: i0.ɵɵFactoryTarget.Component });
+LoadingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: LoadingBarComponent, selector: "base-loading-bar", inputs: { manuallyLoading: "manuallyLoading" }, ngImport: i0, template: "<div class=\"slider\" *ngIf=\"loading || manuallyLoading\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-loading-bar', template: "<div class=\"slider\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
-        }] });
+            args: [{ selector: 'base-loading-bar', template: "<div class=\"slider\" *ngIf=\"loading || manuallyLoading\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.LoaderService }]; }, propDecorators: { manuallyLoading: [{
+                type: Input
+            }] } });
 
 class SkeletonLoaderComponent {
     constructor() {