@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
205 lines (198 loc) • 8.27 kB
JavaScript
import * as i0 from '@angular/core';
import { input, Optional, Directive, NgModule } from '@angular/core';
import { Subject, defer } from 'rxjs';
import { startWith, auditTime, finalize } from 'rxjs/operators';
import * as i1 from '@angular/material/button';
import { CommonModule } from '@angular/common';
class PghLoader {
get active$() {
return this._active$.pipe(startWith(this.isActive), auditTime(200));
}
get isActive() {
return this._loaderActive;
}
setLoaderState(value) {
this._loaderActive = value;
this.isDataLoaded = !value;
this._active$.next(value);
}
constructor(loaderType, config) {
this._active$ = new Subject();
/**
* This shows if any data is ever loaded
* It's like `!is` but at first it's false
* Useful for empty state
*/
this.isDataLoaded = false;
this._loaderActive = false;
this.loaderType = loaderType ?? 'default';
this.config = { disabledWhileLoading: loaderType === 'button', ...config };
}
activate() {
this.setLoaderState(true);
}
deactivate() {
this.setLoaderState(false);
}
}
class PghLoaderDirective {
static extractLoaderStyleAttributes(type) {
return typeof type === 'string' ? type : type.join(' ');
}
activate() {
this.setLoaderActive(true);
}
deactivate() {
this.setLoaderActive(false);
}
constructor({ nativeElement: elm }, matButton) {
this.matButton = matButton;
this.loader = input(undefined, {
alias: 'pghLoader',
});
this._color = input(undefined, {
alias: 'color',
});
this._disabledWhileLoading = input(undefined, {
alias: 'pghDisabledWhileLoading',
});
this._loaderType = input(undefined, {
alias: 'pghLoaderType',
});
this.isActive = false;
this.loaderType = 'default';
this.loaderColor = 'primary';
this.disabledWhileLoading = false;
this.isDataLoaded = false;
this.elm = elm;
}
ngOnChanges(changes) {
this.loaderType = this.getLoaderType();
this.loaderColor = this.getLoaderColor();
this.disabledWhileLoading = this.getDisabledWhileLoading();
if (changes._disabledWhileLoading) {
this.handleDisabling();
}
if (changes.loader || changes._loaderType || changes._color) {
this.configLoaderAttributes();
}
if (changes.loader) {
this.setupActiveListener();
}
}
setLoaderActive(isActive) {
if (isActive === this.isActive)
return;
this.isActive = isActive;
if (isActive) {
this.elm.classList.add('pgh-loader-active');
}
else {
this.elm.classList.remove('pgh-loader-active');
}
this.handleDisabling();
}
handleDisabling() {
if (!this.disabledWhileLoading)
return;
const isDisabled = this.elm.disabled ?? !!this.elm.getAttribute('disabled');
if (this.isActive === isDisabled)
return;
if (this.isActive) {
this.elm.setAttribute('disabled', 'true');
}
else {
this.elm.removeAttribute('disabled');
}
if (this.matButton) {
this.matButton.disabled = this.isActive;
}
}
hasLoaderType(typePiece) {
const type = this.loaderType;
return type === typePiece || (Array.isArray(type) && type.includes(typePiece));
}
configLoaderAttributes() {
const color = this.loaderColor;
const type = this.loaderType;
const loaderStyleAttributes = PghLoaderDirective.extractLoaderStyleAttributes(type);
this.elm.setAttribute('data-pgh-loader', `${loaderStyleAttributes} ${color}`);
}
setupActiveListener() {
if (!(this.loader() instanceof PghLoader))
return;
const pghLoader = this.loader();
if (this._active$Subscription) {
this._active$Subscription.unsubscribe();
}
this._active$Subscription = pghLoader?.active$.subscribe((isActive) => {
this.setLoaderActive(isActive);
this.isDataLoaded = pghLoader.isDataLoaded;
});
}
ngOnDestroy() {
this._active$Subscription?.unsubscribe();
}
getConfig() {
const loader = this.loader();
return loader instanceof PghLoader ? loader?.config : {};
}
getLoaderType() {
const loader = this.loader();
const loaderType = this._loaderType();
return (loaderType ?? (loader instanceof PghLoader ? loader?.loaderType : this.loader()) ?? 'default');
}
getLoaderColor() {
const config = this.getConfig();
let color = this._color() ?? config.color ?? 'primary';
if (!['primary', 'accent'].includes(color)) {
color = 'primary';
}
return color;
}
getDisabledWhileLoading() {
const config = this.getConfig();
return (this._disabledWhileLoading() ?? config.disabledWhileLoading ?? this.hasLoaderType('button'));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLoaderDirective, deps: [{ token: i0.ElementRef }, { token: i1.MatButton, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.13", type: PghLoaderDirective, isStandalone: false, selector: "[pghLoader]", inputs: { loader: { classPropertyName: "loader", publicName: "pghLoader", isSignal: true, isRequired: false, transformFunction: null }, _color: { classPropertyName: "_color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, _disabledWhileLoading: { classPropertyName: "_disabledWhileLoading", publicName: "pghDisabledWhileLoading", isSignal: true, isRequired: false, transformFunction: null }, _loaderType: { classPropertyName: "_loaderType", publicName: "pghLoaderType", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["pghLoader"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLoaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[pghLoader]',
exportAs: 'pghLoader',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatButton, decorators: [{
type: Optional
}] }] });
class PghLoaderModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghLoaderModule, declarations: [PghLoaderDirective], imports: [CommonModule], exports: [PghLoaderDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLoaderModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLoaderModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghLoaderDirective],
imports: [CommonModule],
exports: [PghLoaderDirective],
}]
}] });
/**
* Add this operator to an observable and it'll activate the loader (input)
* and deactivate it when the observable completes
* @param loader
*/
const pghLoader = (loader) => (source) => defer(() => {
loader?.activate();
return source.pipe(finalize(() => {
loader?.deactivate();
}));
});
/**
* Generated bundle index. Do not edit.
*/
export { PghLoader, PghLoaderDirective, PghLoaderModule, pghLoader };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-loader.mjs.map