@acorex/components 7.1.0 → 7.1.2

package/fesm2022/acorex-components-loading.mjs

@@ -11,70 +11,70 @@ import { asyncScheduler, BehaviorSubject } from 'rxjs';
 import { observeOn, finalize } from 'rxjs/operators';
 import * as i1$2 from '@acorex/components/common';
 
-class AXLoadingComponent extends AXBaseComponentMixin {
-    _selectedPortal;
-    /**
-     * @ignore
-     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    visibleChange = new EventEmitter();
-    _visible;
-    get visible() {
-        return this._visible;
-    }
-    set visible(v) {
-        if (v != this._visible) {
-            this._visible = v;
-            v
-                ? this._getHostElement().classList.remove('ax-hide')
-                : this._getHostElement().classList.add('ax-hide');
-            this.visibleChange.emit(v);
-        }
-    }
-    type = 'spinner';
-    text;
-    onInit() {
-        const loading = AXConfig.get(`layout.loading.${this.type}`);
-        this._selectedPortal = new ComponentPortal(loading);
-        this._cdr.markForCheck();
-    }
-    _handleAttched(ref) {
-        ref = ref;
-        if (ref.instance) {
-            ref.instance.text = this.text;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+class AXLoadingComponent extends AXBaseComponentMixin {
+    _selectedPortal;
+    /**
+     * @ignore
+     */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+    visibleChange = new EventEmitter();
+    _visible;
+    get visible() {
+        return this._visible;
+    }
+    set visible(v) {
+        if (v != this._visible) {
+            this._visible = v;
+            v
+                ? this._getHostElement().classList.remove('ax-hide')
+                : this._getHostElement().classList.add('ax-hide');
+            this.visibleChange.emit(v);
+        }
+    }
+    type = 'spinner';
+    text;
+    onInit() {
+        const loading = AXConfig.get(`layout.loading.${this.type}`);
+        this._selectedPortal = new ComponentPortal(loading);
+        this._cdr.markForCheck();
+    }
+    _handleAttched(ref) {
+        ref = ref;
+        if (ref.instance) {
+            ref.instance.text = this.text;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type", text: "text" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: `
     <ng-template
       [cdkPortalOutlet]="_selectedPortal"
       (attached)="_handleAttched($event)"
     ></ng-template>
-  `, isInline: true, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-ghost-200))}.ax-loading-spinner{display:flex;gap:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-ghost-200))}.ax-loading-spinner{display:flex;gap:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'ax-loading', template: `
     <ng-template
       [cdkPortalOutlet]="_selectedPortal"
       (attached)="_handleAttched($event)"
     ></ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-loading' }, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-ghost-200))}.ax-loading-spinner{display:flex;gap:.75rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visibleChange: [{
-                type: Output
-            }], visible: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], text: [{
-                type: Input
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-loading' }, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-ghost-200))}.ax-loading-spinner{display:flex;gap:.75rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visibleChange: [{
+                type: Output
+            }], visible: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], text: [{
+                type: Input
             }] } });
 
-class AXLoadingSpinnerComponent {
-    text;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+class AXLoadingSpinnerComponent {
+    text;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", host: { classAttribute: "ax-loading-spinner" }, ngImport: i0, template: `
     <svg
       version="1.1"
@@ -101,12 +101,12 @@ class AXLoadingSpinnerComponent {
       </path>
     </svg>
     <span *ngIf="text"> {{ text }} </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-loading-spinner',
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-loading-spinner',
                     template: `
     <svg
       version="1.1"
@@ -133,264 +133,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
       </path>
     </svg>
     <span *ngIf="text"> {{ text }} </span>
-  `,
-                    host: { class: 'ax-loading-spinner' },
-                }]
+  `,
+                    host: { class: 'ax-loading-spinner' },
+                }]
         }] });
 
-const OVERLAY_CLASS = 'ax-loading-overlay';
-// This directive places an overlay with a loading spinner over its host element
-// if isLoading equals to true and hides the overlay when isLoading becomes false.
-class AXLoadingDirective {
-    elementRef;
-    renderer;
-    changeDetectorRef;
-    viewContainerRef;
-    componentFactoryResolver;
-    isLoading = false;
-    overlayElement;
-    spinnerElement;
-    hostElement;
-    //TODO: ComponentFactoryResolver is deprecated
-    constructor(elementRef, renderer, changeDetectorRef, viewContainerRef, componentFactoryResolver) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.changeDetectorRef = changeDetectorRef;
-        this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.hostElement = this.elementRef.nativeElement;
-        this.hostElement.style.position = 'relative';
-    }
-    ngOnChanges(changes) {
-        if (!this.overlayElement || !this.spinnerElement) {
-            this.init();
-        }
-        if (changes.isLoading) {
-            const isLoadingValue = changes.isLoading.currentValue;
-            if (isLoadingValue) {
-                this.addLoadingIndicator();
-            }
-            else {
-                this.removeLoadingIndicator();
-            }
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    addLoadingIndicator() {
-        this.renderer.appendChild(this.hostElement, this.overlayElement);
-        this.renderer.appendChild(this.overlayElement, this.spinnerElement);
-    }
-    removeLoadingIndicator() {
-        this.renderer.removeChild(this.overlayElement, this.spinnerElement);
-        this.renderer.removeChild(this.hostElement, this.overlayElement);
-        this.viewContainerRef.clear();
-    }
-    init() {
-        this.initOverlayElement();
-        this.initSpinnerComponent();
-    }
-    initSpinnerComponent() {
-        const spinnerComponentFactory = this.componentFactoryResolver.resolveComponentFactory(AXLoadingComponent);
-        const spinnerComponent = this.viewContainerRef.createComponent(spinnerComponentFactory);
-        this.spinnerElement = spinnerComponent.location.nativeElement;
-    }
-    initOverlayElement() {
-        this.overlayElement = this.renderer.createElement('div');
-        this.renderer.addClass(this.overlayElement, OVERLAY_CLASS);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AXLoadingDirective, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[axIsLoading]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { isLoading: [{
-                type: Input,
-                args: ['axIsLoading']
+const OVERLAY_CLASS = 'ax-loading-overlay';
+// This directive places an overlay with a loading spinner over its host element
+// if isLoading equals to true and hides the overlay when isLoading becomes false.
+class AXLoadingDirective {
+    elementRef;
+    renderer;
+    changeDetectorRef;
+    viewContainerRef;
+    componentFactoryResolver;
+    isLoading = false;
+    overlayElement;
+    spinnerElement;
+    hostElement;
+    //TODO: ComponentFactoryResolver is deprecated
+    constructor(elementRef, renderer, changeDetectorRef, viewContainerRef, componentFactoryResolver) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.hostElement = this.elementRef.nativeElement;
+        this.hostElement.style.position = 'relative';
+    }
+    ngOnChanges(changes) {
+        if (!this.overlayElement || !this.spinnerElement) {
+            this.init();
+        }
+        if (changes.isLoading) {
+            const isLoadingValue = changes.isLoading.currentValue;
+            if (isLoadingValue) {
+                this.addLoadingIndicator();
+            }
+            else {
+                this.removeLoadingIndicator();
+            }
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    addLoadingIndicator() {
+        this.renderer.appendChild(this.hostElement, this.overlayElement);
+        this.renderer.appendChild(this.overlayElement, this.spinnerElement);
+    }
+    removeLoadingIndicator() {
+        this.renderer.removeChild(this.overlayElement, this.spinnerElement);
+        this.renderer.removeChild(this.hostElement, this.overlayElement);
+        this.viewContainerRef.clear();
+    }
+    init() {
+        this.initOverlayElement();
+        this.initSpinnerComponent();
+    }
+    initSpinnerComponent() {
+        const spinnerComponentFactory = this.componentFactoryResolver.resolveComponentFactory(AXLoadingComponent);
+        const spinnerComponent = this.viewContainerRef.createComponent(spinnerComponentFactory);
+        this.spinnerElement = spinnerComponent.location.nativeElement;
+    }
+    initOverlayElement() {
+        this.overlayElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.overlayElement, OVERLAY_CLASS);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AXLoadingDirective, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axIsLoading]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { isLoading: [{
+                type: Input,
+                args: ['axIsLoading']
             }] } });
 
-const COMPONENT = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES = [CommonModule, OverlayModule, PortalModule];
-class AXLoadingModule {
-    constructor() {
-        AXConfig.set({
-            layout: {
-                loading: {
-                    spinner: AXLoadingSpinnerComponent,
-                }
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, imports: [MODULES] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
+const COMPONENT = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES = [CommonModule, OverlayModule, PortalModule];
+class AXLoadingModule {
+    constructor() {
+        AXConfig.set({
+            layout: {
+                loading: {
+                    spinner: AXLoadingSpinnerComponent,
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, imports: [MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }], ctorParameters: function () { return []; } });
 
-const DEFAULT_LOADER_ID = '_DEFAULT';
-/**
- * Used for centrally setting/unsetting loading flags for components or services.
- * Should be connected to global HTTP interceptor which will unset
- * the loading flags in case an error happens using the clearLoadings() method.
- *
- * FAQ:
- * Q: How to change loading flag for a parent component?
- * A: Inject the parent component as a dependency to your constructor and
- *    call loadingService.setLoading(parentComponent, STATE).
- *
- * Q: How to change loading flag for a child component?
- * A: Use a @ViewChild with component selector and pass the
- *    reference of the child to setLoading method.
- *
- * Q: I need more loading indicators in my components. How to?
- * A: Assign a LoaderId to each indicator and then use them
- *    with calls to methods of this service.
- */
-class AXLoadingService {
-    zoneRef;
-    overlayService;
-    // WeakMap will remove components from itself upon
-    // their garbage collection by JS runtime.
-    loadingStates = new WeakMap();
-    // Both loading state maps are kept in-sync such that
-    // they can be used by both sync and async methods.
-    loadingStates$ = new WeakMap();
-    constructor(zoneRef, overlayService) {
-        this.zoneRef = zoneRef;
-        this.overlayService = overlayService;
-    }
-    _stack = [];
-    show(location) {
-        let host;
-        if (location) {
-            host = location.closest('.ax-loading-host');
-        }
-        const containerElement = (host || location);
-        const com = this.overlayService.show(AXLoadingComponent, {}, {
-            closeOnClickOutside: false,
-            containerElement,
-            hasBackdrop: true,
-            backdropClass: ['ax-loading-overlay'],
-            scroll: 'block',
-        });
-        com.instance.visible = true;
-        const id = new Date().getTime();
-        this._stack.push({ id, component: com });
-        return id;
-    }
-    hide(id) {
-        const f = this._stack.find((c) => c.id === id);
-        if (f) {
-            f.component.dispose();
-            this._stack = this._stack.filter((c) => c.id !== id);
-        }
-    }
-    // Observable creation operator.
-    // LoaderId can be used when there are multiple loading indicators associated to a single context.
-    // Context can be any object, though in practice, components and services will be the most common contexts.
-    // loaderId is a non-mandatory parameter - when not specified, a default loaderId is used.
-    // Such a scenario is used when your context has contains only one loading indicator.
-    doLoading(source$, context, loaderId) {
-        this.startLoading(context, loaderId);
-        return source$.pipe(observeOn(asyncScheduler), finalize(() => this.endLoading(context, loaderId)));
-    }
-    // To be used in your html templates.
-    // Returns a boolean indicating whether a given loader is active in a given context.
-    // If loaderId is unspecified, the method will return a logical disjunction of all
-    // loader states in the context.
-    isLoading(context, loaderId) {
-        const loaderStates = this.loadingStates.get(context);
-        if (!loaderStates) {
-            return false;
-        }
-        else {
-            if (loaderId !== undefined) {
-                return loaderStates.get(this.getLoaderId(loaderId)) ?? false;
-            }
-            else {
-                return [...loaderStates.values()].filter((state) => state).length > 0;
-            }
-        }
-    }
-    // To be used in your html templates with async pipes.
-    // Returns an Observable of booleans indicating whether a given loader is active in a given context.
-    isLoading$(context, loaderId) {
-        const coalescedLoaderId = this.getLoaderId(loaderId);
-        if (!this.hasLoadingStates(context, coalescedLoaderId)) {
-            this.setLoadingState(context, false, loaderId);
-        }
-        return this.loadingStates$.get(context).get(coalescedLoaderId);
-    }
-    // The startLoading and endLoading methods are intended to be used when handling
-    // complex scenarios where a need for extended usage flexibility is desired.
-    startLoading(context, loaderId) {
-        this.setLoadingState(context, true, this.getLoaderId(loaderId));
-    }
-    endLoading(context, loaderId) {
-        this.setLoadingState(context, false, this.getLoaderId(loaderId));
-    }
-    // To be called by middleware code (HTTP interceptors/routing listeners, etc.).
-    clearLoadings() {
-        this.loadingStates = new WeakMap();
-        this.loadingStates$ = new WeakMap();
-    }
-    setLoadingState(context, state, loaderId) {
-        if (!this.hasLoadingStates(context, loaderId)) {
-            if (this.hasContextLoadingState(context)) {
-                this.loadingStates.get(context).set(loaderId, state);
-                this.loadingStates$
-                    .get(context)
-                    .set(loaderId, new BehaviorSubject(state));
-            }
-            else {
-                this.loadingStates.set(context, new Map([[loaderId, state]]));
-                this.loadingStates$.set(context, new Map([
-                    [loaderId, new BehaviorSubject(state)],
-                ]));
-            }
-        }
-        else {
-            // @ts-ignore - loadingStates[context] is surely defined in this branch
-            this.loadingStates.get(context).set(loaderId, state);
-            this.loadingStates$.get(context).get(loaderId).next(state);
-        }
-    }
-    hasLoadingStates(context, loaderId) {
-        return (this.hasContextLoadingState(context) &&
-            this.hasLoaderLoadingState(context, loaderId));
-    }
-    hasContextLoadingState(context) {
-        return this.loadingStates.has(context) && this.loadingStates$.has(context);
-    }
-    hasLoaderLoadingState(context, loaderId) {
-        return (this.loadingStates.get(context).has(loaderId) &&
-            this.loadingStates$.get(context).has(loaderId));
-    }
-    getLoaderId(loaderId) {
-        return loaderId ?? DEFAULT_LOADER_ID;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingService, deps: [{ token: i0.NgZone }, { token: i1$2.AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+const DEFAULT_LOADER_ID = '_DEFAULT';
+/**
+ * Used for centrally setting/unsetting loading flags for components or services.
+ * Should be connected to global HTTP interceptor which will unset
+ * the loading flags in case an error happens using the clearLoadings() method.
+ *
+ * FAQ:
+ * Q: How to change loading flag for a parent component?
+ * A: Inject the parent component as a dependency to your constructor and
+ *    call loadingService.setLoading(parentComponent, STATE).
+ *
+ * Q: How to change loading flag for a child component?
+ * A: Use a @ViewChild with component selector and pass the
+ *    reference of the child to setLoading method.
+ *
+ * Q: I need more loading indicators in my components. How to?
+ * A: Assign a LoaderId to each indicator and then use them
+ *    with calls to methods of this service.
+ */
+class AXLoadingService {
+    zoneRef;
+    overlayService;
+    // WeakMap will remove components from itself upon
+    // their garbage collection by JS runtime.
+    loadingStates = new WeakMap();
+    // Both loading state maps are kept in-sync such that
+    // they can be used by both sync and async methods.
+    loadingStates$ = new WeakMap();
+    constructor(zoneRef, overlayService) {
+        this.zoneRef = zoneRef;
+        this.overlayService = overlayService;
+    }
+    _stack = [];
+    show(location) {
+        let host;
+        if (location) {
+            host = location.closest('.ax-loading-host');
+        }
+        const containerElement = (host || location);
+        const com = this.overlayService.show(AXLoadingComponent, {}, {
+            closeOnClickOutside: false,
+            containerElement,
+            hasBackdrop: true,
+            backdropClass: ['ax-loading-overlay'],
+            scroll: 'block',
+        });
+        com.instance.visible = true;
+        const id = new Date().getTime();
+        this._stack.push({ id, component: com });
+        return id;
+    }
+    hide(id) {
+        const f = this._stack.find((c) => c.id === id);
+        if (f) {
+            f.component.dispose();
+            this._stack = this._stack.filter((c) => c.id !== id);
+        }
+    }
+    // Observable creation operator.
+    // LoaderId can be used when there are multiple loading indicators associated to a single context.
+    // Context can be any object, though in practice, components and services will be the most common contexts.
+    // loaderId is a non-mandatory parameter - when not specified, a default loaderId is used.
+    // Such a scenario is used when your context has contains only one loading indicator.
+    doLoading(source$, context, loaderId) {
+        this.startLoading(context, loaderId);
+        return source$.pipe(observeOn(asyncScheduler), finalize(() => this.endLoading(context, loaderId)));
+    }
+    // To be used in your html templates.
+    // Returns a boolean indicating whether a given loader is active in a given context.
+    // If loaderId is unspecified, the method will return a logical disjunction of all
+    // loader states in the context.
+    isLoading(context, loaderId) {
+        const loaderStates = this.loadingStates.get(context);
+        if (!loaderStates) {
+            return false;
+        }
+        else {
+            if (loaderId !== undefined) {
+                return loaderStates.get(this.getLoaderId(loaderId)) ?? false;
+            }
+            else {
+                return [...loaderStates.values()].filter((state) => state).length > 0;
+            }
+        }
+    }
+    // To be used in your html templates with async pipes.
+    // Returns an Observable of booleans indicating whether a given loader is active in a given context.
+    isLoading$(context, loaderId) {
+        const coalescedLoaderId = this.getLoaderId(loaderId);
+        if (!this.hasLoadingStates(context, coalescedLoaderId)) {
+            this.setLoadingState(context, false, loaderId);
+        }
+        return this.loadingStates$.get(context).get(coalescedLoaderId);
+    }
+    // The startLoading and endLoading methods are intended to be used when handling
+    // complex scenarios where a need for extended usage flexibility is desired.
+    startLoading(context, loaderId) {
+        this.setLoadingState(context, true, this.getLoaderId(loaderId));
+    }
+    endLoading(context, loaderId) {
+        this.setLoadingState(context, false, this.getLoaderId(loaderId));
+    }
+    // To be called by middleware code (HTTP interceptors/routing listeners, etc.).
+    clearLoadings() {
+        this.loadingStates = new WeakMap();
+        this.loadingStates$ = new WeakMap();
+    }
+    setLoadingState(context, state, loaderId) {
+        if (!this.hasLoadingStates(context, loaderId)) {
+            if (this.hasContextLoadingState(context)) {
+                this.loadingStates.get(context).set(loaderId, state);
+                this.loadingStates$
+                    .get(context)
+                    .set(loaderId, new BehaviorSubject(state));
+            }
+            else {
+                this.loadingStates.set(context, new Map([[loaderId, state]]));
+                this.loadingStates$.set(context, new Map([
+                    [loaderId, new BehaviorSubject(state)],
+                ]));
+            }
+        }
+        else {
+            // @ts-ignore - loadingStates[context] is surely defined in this branch
+            this.loadingStates.get(context).set(loaderId, state);
+            this.loadingStates$.get(context).get(loaderId).next(state);
+        }
+    }
+    hasLoadingStates(context, loaderId) {
+        return (this.hasContextLoadingState(context) &&
+            this.hasLoaderLoadingState(context, loaderId));
+    }
+    hasContextLoadingState(context) {
+        return this.loadingStates.has(context) && this.loadingStates$.has(context);
+    }
+    hasLoaderLoadingState(context, loaderId) {
+        return (this.loadingStates.get(context).has(loaderId) &&
+            this.loadingStates$.get(context).has(loaderId));
+    }
+    getLoaderId(loaderId) {
+        return loaderId ?? DEFAULT_LOADER_ID;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingService, deps: [{ token: i0.NgZone }, { token: i1$2.AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXLoadingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$2.AXOverlayService }]; } });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent };