@lenne.tech/ng-base 13.32.1 → 13.32.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base-components/components/loading-bar/loading-bar.component.d.ts +14 -2
- package/esm2020/base-components/components/loading-bar/loading-bar.component.mjs +30 -6
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +25 -4
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +25 -4
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,17 @@
|
|
|
1
|
+
import { ChangeDetectorRef, NgZone, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
+
import { LoaderService } from '@lenne.tech/ng-base/shared';
|
|
3
|
+
import { Subscription } from 'rxjs';
|
|
1
4
|
import * as i0 from "@angular/core";
|
|
2
|
-
export declare class LoadingBarComponent {
|
|
5
|
+
export declare class LoadingBarComponent implements OnInit, OnDestroy {
|
|
6
|
+
private ngZone;
|
|
7
|
+
private changeDetectorRef;
|
|
8
|
+
private loaderService;
|
|
9
|
+
manuallyLoading: boolean;
|
|
10
|
+
loading: boolean;
|
|
11
|
+
subscription: Subscription;
|
|
12
|
+
constructor(ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, loaderService: LoaderService);
|
|
13
|
+
ngOnInit(): void;
|
|
14
|
+
ngOnDestroy(): void;
|
|
3
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<LoadingBarComponent, never>;
|
|
4
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LoadingBarComponent, "base-loading-bar", never, {}, {}, never, never>;
|
|
16
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LoadingBarComponent, "base-loading-bar", never, { "manuallyLoading": "manuallyLoading"; }, {}, never, never>;
|
|
5
17
|
}
|
|
@@ -1,11 +1,35 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { Subscription } from 'rxjs';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@lenne.tech/ng-base/shared";
|
|
5
|
+
import * as i2 from "@angular/common";
|
|
3
6
|
export class LoadingBarComponent {
|
|
7
|
+
constructor(ngZone, changeDetectorRef, loaderService) {
|
|
8
|
+
this.ngZone = ngZone;
|
|
9
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
10
|
+
this.loaderService = loaderService;
|
|
11
|
+
this.manuallyLoading = false;
|
|
12
|
+
this.loading = false;
|
|
13
|
+
this.subscription = new Subscription();
|
|
14
|
+
}
|
|
15
|
+
ngOnInit() {
|
|
16
|
+
this.ngZone.runOutsideAngular(() => {
|
|
17
|
+
this.subscription.add(this.loaderService.isLoading.subscribe((value) => {
|
|
18
|
+
this.loading = value;
|
|
19
|
+
this.changeDetectorRef.detectChanges();
|
|
20
|
+
}));
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
ngOnDestroy() {
|
|
24
|
+
this.subscription.unsubscribe();
|
|
25
|
+
}
|
|
4
26
|
}
|
|
5
|
-
LoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
-
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"] });
|
|
27
|
+
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.LoaderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
28
|
+
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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
7
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, decorators: [{
|
|
8
30
|
type: Component,
|
|
9
|
-
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"] }]
|
|
10
|
-
}] }
|
|
11
|
-
|
|
31
|
+
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"] }]
|
|
32
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LoaderService }]; }, propDecorators: { manuallyLoading: [{
|
|
33
|
+
type: Input
|
|
34
|
+
}] } });
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctYmFzZS9iYXNlLWNvbXBvbmVudHMvY29tcG9uZW50cy9sb2FkaW5nLWJhci9sb2FkaW5nLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1iYXNlL2Jhc2UtY29tcG9uZW50cy9jb21wb25lbnRzL2xvYWRpbmctYmFyL2xvYWRpbmctYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBcUIsU0FBUyxFQUFFLEtBQUssRUFBNkIsTUFBTSxlQUFlLENBQUM7QUFFL0YsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQzs7OztBQU9wQyxNQUFNLE9BQU8sbUJBQW1CO0lBSzlCLFlBQ1UsTUFBYyxFQUNkLGlCQUFvQyxFQUNwQyxhQUE0QjtRQUY1QixXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ2Qsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUNwQyxrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQVA3QixvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUNqQyxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQU0vQixDQUFDO0lBRUosUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsaUJBQWlCLENBQUMsR0FBRyxFQUFFO1lBQ2pDLElBQUksQ0FBQyxZQUFZLENBQUMsR0FBRyxDQUNuQixJQUFJLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDL0MsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7Z0JBQ3JCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN6QyxDQUFDLENBQUMsQ0FDSCxDQUFDO1FBQ0osQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEMsQ0FBQzs7Z0hBeEJVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLHdHQ1RoQywrS0FLQTsyRkRJYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0Usa0JBQWtCO3lKQUtuQixlQUFlO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgSW5wdXQsIE5nWm9uZSwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IExvYWRlclNlcnZpY2UgfSBmcm9tICdAbGVubmUudGVjaC9uZy1iYXNlL3NoYXJlZCc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYmFzZS1sb2FkaW5nLWJhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9sb2FkaW5nLWJhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2xvYWRpbmctYmFyLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIExvYWRpbmdCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIG1hbnVhbGx5TG9hZGluZyA9IGZhbHNlO1xuICBsb2FkaW5nID0gZmFsc2U7XG4gIHN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIG5nWm9uZTogTmdab25lLFxuICAgIHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHByaXZhdGUgbG9hZGVyU2VydmljZTogTG9hZGVyU2VydmljZVxuICApIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgdGhpcy5zdWJzY3JpcHRpb24uYWRkKFxuICAgICAgICB0aGlzLmxvYWRlclNlcnZpY2UuaXNMb2FkaW5nLnN1YnNjcmliZSgodmFsdWUpID0+IHtcbiAgICAgICAgICB0aGlzLmxvYWRpbmcgPSB2YWx1ZTtcbiAgICAgICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICAgICAgfSlcbiAgICAgICk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2xpZGVyXCIgKm5nSWY9XCJsb2FkaW5nIHx8IG1hbnVhbGx5TG9hZGluZ1wiPlxuICA8ZGl2IGNsYXNzPVwibGluZVwiPjwvZGl2PlxuICA8ZGl2IGNsYXNzPVwic3VibGluZSBpbmNcIj48L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInN1YmxpbmUgZGVjXCI+PC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -375,13 +375,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
375
375
|
}] } });
|
|
376
376
|
|
|
377
377
|
class LoadingBarComponent {
|
|
378
|
+
constructor(ngZone, changeDetectorRef, loaderService) {
|
|
379
|
+
this.ngZone = ngZone;
|
|
380
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
381
|
+
this.loaderService = loaderService;
|
|
382
|
+
this.manuallyLoading = false;
|
|
383
|
+
this.loading = false;
|
|
384
|
+
this.subscription = new Subscription();
|
|
385
|
+
}
|
|
386
|
+
ngOnInit() {
|
|
387
|
+
this.ngZone.runOutsideAngular(() => {
|
|
388
|
+
this.subscription.add(this.loaderService.isLoading.subscribe((value) => {
|
|
389
|
+
this.loading = value;
|
|
390
|
+
this.changeDetectorRef.detectChanges();
|
|
391
|
+
}));
|
|
392
|
+
});
|
|
393
|
+
}
|
|
394
|
+
ngOnDestroy() {
|
|
395
|
+
this.subscription.unsubscribe();
|
|
396
|
+
}
|
|
378
397
|
}
|
|
379
|
-
LoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
380
|
-
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"] });
|
|
398
|
+
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 });
|
|
399
|
+
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"] }] });
|
|
381
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, decorators: [{
|
|
382
401
|
type: Component,
|
|
383
|
-
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"] }]
|
|
384
|
-
}] }
|
|
402
|
+
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"] }]
|
|
403
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.LoaderService }]; }, propDecorators: { manuallyLoading: [{
|
|
404
|
+
type: Input
|
|
405
|
+
}] } });
|
|
385
406
|
|
|
386
407
|
class SkeletonLoaderComponent {
|
|
387
408
|
constructor() {
|