@dotglitch/ngx-common 1.0.25 → 1.0.27

package/fesm2020/dotglitch-ngx-common.mjs

@@ -1400,9 +1400,23 @@ class LazyLoaderComponent {
          */
         this.componentLoaded = new EventEmitter();
         // Force 500ms delay before revealing the spinner
-        this.loaderEmitter = new EventEmitter();
-        this.clearLoader$ = this.loaderEmitter.pipe(debounceTime(300));
-        this.showLoader = true; // whether we render the DOM for the spinner
+        this.clearEmitter = new EventEmitter();
+        this.clearLoader$ = this.clearEmitter.pipe(debounceTime(300));
+        this.showEmitter = new EventEmitter();
+        this.showLoader$ = this.showEmitter.pipe(debounceTime(1));
+        this.subscriptions = [
+            this.clearLoader$.subscribe(() => {
+                this.isClearingLoader = true;
+                setTimeout(() => {
+                    this.renderSpinner = false;
+                }, 300);
+            }),
+            this.showLoader$.subscribe(() => {
+                this.isClearingLoader = false;
+                this.renderSpinner = true;
+            })
+        ];
+        this.renderSpinner = true; // whether we render the DOM for the spinner
         this.isClearingLoader = false; // should the spinner start fading out
         this.initialized = false;
         this.config = LazyLoaderService.config;
@@ -1416,14 +1430,11 @@ class LazyLoaderComponent {
             this.id = this.dialogArguments.id;
             this.group = this.dialogArguments.group;
         }
-        this.loaderSub = this.clearLoader$.subscribe(() => {
-            this.showLoader = false;
-        });
     }
     async ngAfterViewInit() {
         this.ngOnDestroy(false);
         this.isClearingLoader = false;
-        this.showLoader = true;
+        this.renderSpinner = true;
         this.initialized = true;
         if (!this._id) {
             this.warn("No component was specified!");
@@ -1480,22 +1491,15 @@ class LazyLoaderComponent {
             const isLoading$ = instance['ngxShowDistractor$'];
             if (isLoading$ && typeof isLoading$.subscribe == "function") {
                 this.distractorSubscription = isLoading$.subscribe(loading => {
-                    if (!loading) {
-                        this.isClearingLoader = true;
-                        this.loaderEmitter.emit();
-                    }
-                    else {
-                        this.showLoader = true;
-                        this.isClearingLoader = false;
-                    }
+                    loading ? this.showEmitter.emit() : this.clearEmitter.emit();
                 });
             }
             else {
-                this.isClearingLoader = true;
+                this.clearEmitter.emit();
             }
             const name = Object.keys(bundle)[0];
             this.log(`Loaded '${name}'`);
-            this.loaderEmitter.emit();
+            this.clearEmitter.emit();
             return componentRef;
         }
         catch (ex) {
@@ -1520,7 +1524,9 @@ class LazyLoaderComponent {
         this.outputSubscriptions = {};
         // Clear all things
         if (clearAll) {
-            this.loaderSub?.unsubscribe();
+            Object.entries(this.subscriptions).forEach(([key, sub]) => {
+                sub.unsubscribe();
+            });
         }
         this.distractorSubscription?.unsubscribe();
         // Clear target container
@@ -1589,7 +1595,7 @@ class LazyLoaderComponent {
     loadDefault() {
         if (this.config.notFoundComponent)
             this.targetContainer.createComponent(this.config.notFoundComponent);
-        this.showLoader = false;
+        this.clearEmitter.emit();
     }
     /**
      * Load the "Error" component.
@@ -1600,14 +1606,14 @@ class LazyLoaderComponent {
     loadError() {
         if (this.config.errorComponent)
             this.targetContainer.createComponent(this.config.errorComponent);
-        this.showLoader = false;
+        this.clearEmitter.emit();
     }
 }
 LazyLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderComponent, deps: [{ token: LazyLoaderService }, { token: i0.ViewContainerRef, optional: true }, { token: i2$1.DialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LazyLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LazyLoaderComponent, isStandalone: true, selector: "ngx-lazy-loader", inputs: { id: ["component", "id"], group: "group", inputs: "inputs", outputs: "outputs" }, outputs: { componentLoadError: "componentLoadError", componentLoaded: "componentLoaded" }, viewQueries: [{ propertyName: "targetContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #content></ng-container>\n\n<div class=\"ngx-lazy-loader-distractor\" [class.destroying]=\"isClearingLoader\">\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+LazyLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LazyLoaderComponent, isStandalone: true, selector: "ngx-lazy-loader", inputs: { id: ["component", "id"], group: "group", inputs: "inputs", outputs: "outputs" }, outputs: { componentLoadError: "componentLoadError", componentLoaded: "componentLoaded" }, viewQueries: [{ propertyName: "targetContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #content></ng-container>\n\n<div\n    *ngIf=\"renderSpinner\"\n    class=\"ngx-lazy-loader-distractor\"\n    [class.destroying]=\"isClearingLoader\"\n>\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999;animation:fade-in .3s ease}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}@keyframes fade-in{0%{opacity:0;pointer-events:none}to{opacity:1;pointer-events:all}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-lazy-loader', imports: [NgIf, NgComponentOutlet, NgTemplateOutlet], standalone: true, template: "<ng-container #content></ng-container>\n\n<div class=\"ngx-lazy-loader-distractor\" [class.destroying]=\"isClearingLoader\">\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}\n"] }]
+            args: [{ selector: 'ngx-lazy-loader', imports: [NgIf, NgComponentOutlet, NgTemplateOutlet], standalone: true, template: "<ng-container #content></ng-container>\n\n<div\n    *ngIf=\"renderSpinner\"\n    class=\"ngx-lazy-loader-distractor\"\n    [class.destroying]=\"isClearingLoader\"\n>\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999;animation:fade-in .3s ease}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}@keyframes fade-in{0%{opacity:0;pointer-events:none}to{opacity:1;pointer-events:all}}\n"] }]
         }], ctorParameters: function () { return [{ type: LazyLoaderService }, { type: i0.ViewContainerRef, decorators: [{
                     type: Optional
                 }] }, { type: i2$1.DialogRef, decorators: [{