@igo2/common
Version:
110 lines (104 loc) • 6.29 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Component, Self, Directive, NgModule } from '@angular/core';
import * as i2 from '@igo2/core/activity';
import { debounceTime } from 'rxjs/operators';
import { NgClass, AsyncPipe } from '@angular/common';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { BehaviorSubject } from 'rxjs';
class SpinnerComponent {
shown$ = new BehaviorSubject(false);
set shown(value) {
this.shown$.next(value);
}
get shown() {
return this.shown$.value;
}
show() {
this.shown = true;
}
hide() {
this.shown = false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "igo-spinner", inputs: { shown: "shown" }, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'igo-spinner-container': true,\n 'igo-spinner-shown': (shown$ | async)\n }\"\n>\n <div class=\"igo-spinner-background\"></div>\n <mat-progress-spinner\n diameter=\"40\"\n mode=\"indeterminate\"\n ></mat-progress-spinner>\n</div>\n", styles: [":host .igo-spinner-container{display:none;position:relative;pointer-events:none}:host .igo-spinner-container.igo-spinner-shown{display:block}:host mat-progress-spinner{height:40px;width:40px;border-radius:50%}:host .igo-spinner-background{height:36px;width:36px;border-radius:50%;border:4px solid #ffffff;position:absolute;top:2px;left:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'igo-spinner', imports: [NgClass, MatProgressSpinner, AsyncPipe], template: "<div\n [ngClass]=\"{\n 'igo-spinner-container': true,\n 'igo-spinner-shown': (shown$ | async)\n }\"\n>\n <div class=\"igo-spinner-background\"></div>\n <mat-progress-spinner\n diameter=\"40\"\n mode=\"indeterminate\"\n ></mat-progress-spinner>\n</div>\n", styles: [":host .igo-spinner-container{display:none;position:relative;pointer-events:none}:host .igo-spinner-container.igo-spinner-shown{display:block}:host mat-progress-spinner{height:40px;width:40px;border-radius:50%}:host .igo-spinner-background{height:36px;width:36px;border-radius:50%;border:4px solid #ffffff;position:absolute;top:2px;left:2px}\n"] }]
}], propDecorators: { shown: [{
type: Input
}] } });
/**
* A directive to bind a SpinnerComponent to the activity service.
* The activity service tracks any HTTP request and this directive
* will display the spinner it's attached to when the activity counter
* is greater than 0.
*/
class SpinnerActivityDirective {
spinner;
activityService;
/**
* Subscription to the activity service counter
*/
counter$$;
constructor(spinner, activityService) {
this.spinner = spinner;
this.activityService = activityService;
}
/**
* Subscribe to the activity service counter and display the spinner
* when it's is greater than 0.
* @internal
*/
ngOnInit() {
this.counter$$ = this.activityService.counter$
.pipe(debounceTime(50))
.subscribe((count) => {
count > 0 ? this.spinner.show() : this.spinner.hide();
});
}
/**
* Unsubcribe to the activity service counter.
* @internal
*/
ngOnDestroy() {
this.counter$$.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerActivityDirective, deps: [{ token: SpinnerComponent, self: true }, { token: i2.ActivityService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: SpinnerActivityDirective, isStandalone: true, selector: "[igoSpinnerActivity]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerActivityDirective, decorators: [{
type: Directive,
args: [{
selector: '[igoSpinnerActivity]',
standalone: true
}]
}], ctorParameters: () => [{ type: SpinnerComponent, decorators: [{
type: Self
}] }, { type: i2.ActivityService }] });
const SPINNER_DIRECTIVES = [
SpinnerActivityDirective,
SpinnerComponent
];
/**
* @deprecated import the components/directives directly or SPINNER_DIRECTIVES for every components/directives
*/
class IgoSpinnerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: IgoSpinnerModule, imports: [SpinnerActivityDirective,
SpinnerComponent], exports: [SpinnerActivityDirective,
SpinnerComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoSpinnerModule, imports: [SpinnerComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoSpinnerModule, decorators: [{
type: NgModule,
args: [{
imports: [...SPINNER_DIRECTIVES],
exports: [...SPINNER_DIRECTIVES]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgoSpinnerModule, SPINNER_DIRECTIVES, SpinnerActivityDirective, SpinnerComponent };
//# sourceMappingURL=igo2-common-spinner.mjs.map