@covalent/core 11.0.0-beta.2 → 11.0.0-beta.4

package/fesm2022/covalent-core-loading.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, Optional, SkipSelf, ComponentFactoryResolver, Injector, Directive, Input, NgModule } from '@angular/core';
+import { inject, ElementRef, ChangeDetectorRef, Component, ComponentFactoryResolver, Injector, Injectable, Optional, SkipSelf, ViewContainerRef, TemplateRef, Directive, Input, NgModule } from '@angular/core';
 import { tdFadeInOutAnimation } from '@covalent/core/common';
 import { CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { MatProgressBar } from '@angular/material/progress-bar';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { Subject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 
@@ -47,8 +46,8 @@ var LoadingStyle;
 })(LoadingStyle || (LoadingStyle = {}));
 const TD_CIRCLE_DIAMETER = 40;
 class TdLoadingComponent {
-    _elementRef;
-    _changeDetectorRef;
+    _elementRef = inject(ElementRef);
+    _changeDetectorRef = inject(ChangeDetectorRef);
     _mode = LoadingMode.Indeterminate;
     _defaultMode = LoadingMode.Indeterminate;
     _value = 0;
@@ -97,10 +96,6 @@ class TdLoadingComponent {
      * Sets theme color of [TdLoadingComponent] rendered.
      */
     color = 'primary';
-    constructor(_elementRef, _changeDetectorRef) {
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-    }
     ngDoCheck() {
         // When overlay is used and the host width has a value greater than 1px
         // set the circle diameter when possible incase the loading component was rendered in a hidden state
@@ -202,7 +197,7 @@ class TdLoadingComponent {
         }
         return 0;
     }
-    static ɵfac = function TdLoadingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function TdLoadingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdLoadingComponent, selectors: [["td-loading"]], decls: 5, vars: 14, consts: [[1, "td-loading-wrapper"], [1, "td-loading"], [3, "mode", "value", "color", "diameter", "strokeWidth", 4, "ngIf"], [3, "mode", "value", "color", 4, "ngIf"], [3, "cdkPortalOutlet"], [3, "mode", "value", "color", "diameter", "strokeWidth"], [3, "mode", "value", "color"]], template: function TdLoadingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, TdLoadingComponent_mat_progress_spinner_2_Template, 1, 5, "mat-progress-spinner", 2)(3, TdLoadingComponent_mat_progress_bar_3_Template, 1, 3, "mat-progress-bar", 3);
@@ -221,33 +216,21 @@ class TdLoadingComponent {
             i0.ɵɵproperty("ngIf", ctx.isLinear());
             i0.ɵɵadvance();
             i0.ɵɵproperty("cdkPortalOutlet", ctx.content);
-        } }, dependencies: [CommonModule, i1.NgIf, MatProgressBar,
-            MatProgressSpinner,
-            CdkPortalOutlet], styles: [".td-loading-wrapper[_ngcontent-%COMP%]{position:relative;display:block}.td-loading-wrapper.td-fullscreen[_ngcontent-%COMP%]{position:inherit}.td-loading-wrapper[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:center;flex:1}.td-loading-wrapper.td-overlay[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]{position:absolute;margin:0;top:0;left:0;right:0;z-index:1000}.td-loading-wrapper.td-overlay[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]   mat-progress-bar[_ngcontent-%COMP%]{position:absolute;top:0;left:0;right:0}.td-loading-wrapper.td-overlay-circular[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]{bottom:0}"], data: { animation: [tdFadeInOutAnimation] } });
+        } }, dependencies: [CommonModule, i1.NgIf, MatProgressBar, MatProgressSpinner, CdkPortalOutlet], styles: [".td-loading-wrapper[_ngcontent-%COMP%]{position:relative;display:block}.td-loading-wrapper.td-fullscreen[_ngcontent-%COMP%]{position:inherit}.td-loading-wrapper[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:center;flex:1}.td-loading-wrapper.td-overlay[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]{position:absolute;margin:0;top:0;left:0;right:0;z-index:1000}.td-loading-wrapper.td-overlay[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]   mat-progress-bar[_ngcontent-%COMP%]{position:absolute;top:0;left:0;right:0}.td-loading-wrapper.td-overlay-circular[_ngcontent-%COMP%]   .td-loading[_ngcontent-%COMP%]{bottom:0}"], data: { animation: [tdFadeInOutAnimation] } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLoadingComponent, [{
         type: Component,
-        args: [{ selector: 'td-loading', animations: [tdFadeInOutAnimation], imports: [
-                    CommonModule,
-                    MatProgressBar,
-                    MatProgressSpinner,
-                    CdkPortalOutlet,
-                ], template: "<div\n  class=\"td-loading-wrapper\"\n  [style.min-height]=\"getHeight()\"\n  [class.td-overlay-circular]=\"(isOverlay() || isFullScreen()) && !isLinear()\"\n  [class.td-overlay]=\"isOverlay() || isFullScreen()\"\n  [class.td-fullscreen]=\"isFullScreen()\"\n>\n  <div\n    [@tdFadeInOut]=\"animation\"\n    [style.min-height]=\"getHeight()\"\n    class=\"td-loading\"\n  >\n    <mat-progress-spinner\n      *ngIf=\"isCircular()\"\n      [mode]=\"mode\"\n      [value]=\"value\"\n      [color]=\"color\"\n      [diameter]=\"getCircleDiameter()\"\n      [strokeWidth]=\"getCircleStrokeWidth()\"\n    ></mat-progress-spinner>\n    <mat-progress-bar\n      *ngIf=\"isLinear()\"\n      [mode]=\"mode\"\n      [value]=\"value\"\n      [color]=\"color\"\n    ></mat-progress-bar>\n  </div>\n  <ng-template [cdkPortalOutlet]=\"content\"></ng-template>\n</div>\n", styles: [".td-loading-wrapper{position:relative;display:block}.td-loading-wrapper.td-fullscreen{position:inherit}.td-loading-wrapper .td-loading{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:center;flex:1}.td-loading-wrapper.td-overlay .td-loading{position:absolute;margin:0;top:0;left:0;right:0;z-index:1000}.td-loading-wrapper.td-overlay .td-loading mat-progress-bar{position:absolute;top:0;left:0;right:0}.td-loading-wrapper.td-overlay-circular .td-loading{bottom:0}\n"] }]
-    }], () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLoadingComponent, { className: "TdLoadingComponent", filePath: "loading.component.ts", lineNumber: 48 }); })();
+        args: [{ selector: 'td-loading', animations: [tdFadeInOutAnimation], imports: [CommonModule, MatProgressBar, MatProgressSpinner, CdkPortalOutlet], template: "<div\n  class=\"td-loading-wrapper\"\n  [style.min-height]=\"getHeight()\"\n  [class.td-overlay-circular]=\"(isOverlay() || isFullScreen()) && !isLinear()\"\n  [class.td-overlay]=\"isOverlay() || isFullScreen()\"\n  [class.td-fullscreen]=\"isFullScreen()\"\n>\n  <div\n    [@tdFadeInOut]=\"animation\"\n    [style.min-height]=\"getHeight()\"\n    class=\"td-loading\"\n  >\n    <mat-progress-spinner\n      *ngIf=\"isCircular()\"\n      [mode]=\"mode\"\n      [value]=\"value\"\n      [color]=\"color\"\n      [diameter]=\"getCircleDiameter()\"\n      [strokeWidth]=\"getCircleStrokeWidth()\"\n    ></mat-progress-spinner>\n    <mat-progress-bar\n      *ngIf=\"isLinear()\"\n      [mode]=\"mode\"\n      [value]=\"value\"\n      [color]=\"color\"\n    ></mat-progress-bar>\n  </div>\n  <ng-template [cdkPortalOutlet]=\"content\"></ng-template>\n</div>\n", styles: [".td-loading-wrapper{position:relative;display:block}.td-loading-wrapper.td-fullscreen{position:inherit}.td-loading-wrapper .td-loading{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:center;flex:1}.td-loading-wrapper.td-overlay .td-loading{position:absolute;margin:0;top:0;left:0;right:0;z-index:1000}.td-loading-wrapper.td-overlay .td-loading mat-progress-bar{position:absolute;top:0;left:0;right:0}.td-loading-wrapper.td-overlay-circular .td-loading{bottom:0}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdLoadingComponent, { className: "TdLoadingComponent", filePath: "loading.component.ts", lineNumber: 44 }); })();
 
 /**
  * NOTE: @internal usage only.
  */
 class TdLoadingFactory {
-    _componentFactoryResolver;
-    _overlay;
-    _injector;
-    constructor(_componentFactoryResolver, _overlay, _injector) {
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._overlay = _overlay;
-        this._injector = _injector;
-    }
+    _componentFactoryResolver = inject(ComponentFactoryResolver);
+    _overlay = inject(Overlay);
+    _injector = inject(Injector);
     /**
      * Uses material `Overlay` services to create a DOM element and attach the loading component
      * into it. Leveraging the state and configuration from it.
@@ -416,14 +399,14 @@ class TdLoadingFactory {
             instance.color = options.color;
         }
     }
-    static ɵfac = function TdLoadingFactory_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingFactory)(i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(i1$1.Overlay), i0.ɵɵinject(i0.Injector)); };
+    static ɵfac = function TdLoadingFactory_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingFactory)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TdLoadingFactory, factory: TdLoadingFactory.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLoadingFactory, [{
         type: Injectable
-    }], () => [{ type: i0.ComponentFactoryResolver }, { type: i1$1.Overlay }, { type: i0.Injector }], null); })();
-function LOADING_FACTORY_PROVIDER_FACTORY(parent, componentFactoryResolver, overlay, injector) {
-    return (parent || new TdLoadingFactory(componentFactoryResolver, overlay, injector));
+    }], null, null); })();
+function LOADING_FACTORY_PROVIDER_FACTORY(parent) {
+    return parent || new TdLoadingFactory();
 }
 const LOADING_FACTORY_PROVIDER = {
     // If there is already a service available, use that. Otherwise, provide a new one.
@@ -460,11 +443,10 @@ class TdLoadingDirectiveConfig extends TdLoadingConfig {
     }
 }
 class TdLoadingService {
-    _loadingFactory;
+    _loadingFactory = inject(TdLoadingFactory);
     _context = {};
     _timeouts = {};
-    constructor(_loadingFactory) {
-        this._loadingFactory = _loadingFactory;
+    constructor() {
         this.create({
             name: 'td-loading-main',
         });
@@ -635,14 +617,14 @@ class TdLoadingService {
         clearTimeout(this._timeouts[name]);
         delete this._timeouts[name];
     }
-    static ɵfac = function TdLoadingService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingService)(i0.ɵɵinject(TdLoadingFactory)); };
+    static ɵfac = function TdLoadingService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TdLoadingService, factory: TdLoadingService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLoadingService, [{
         type: Injectable
-    }], () => [{ type: TdLoadingFactory }], null); })();
-function LOADING_PROVIDER_FACTORY(parent, loadingFactory) {
-    return parent || new TdLoadingService(loadingFactory);
+    }], () => [], null); })();
+function LOADING_PROVIDER_FACTORY(parent) {
+    return parent || new TdLoadingService();
 }
 const LOADING_PROVIDER = {
     // If there is already a service available, use that. Otherwise, provide a new one.
@@ -661,9 +643,9 @@ class TdLoadingContext {
 // Constant for generation of the id for the next component
 let TD_LOADING_NEXT_ID = 0;
 class TdLoadingDirective {
-    _viewContainerRef;
-    _templateRef;
-    _loadingService;
+    _viewContainerRef = inject(ViewContainerRef);
+    _templateRef = inject(TemplateRef);
+    _loadingService = inject(TdLoadingService);
     _context = new TdLoadingContext();
     _loadingRef;
     /**
@@ -712,11 +694,6 @@ class TdLoadingDirective {
      * Sets the theme color of the loading component. Defaults to "primary"
      */
     color = 'primary';
-    constructor(_viewContainerRef, _templateRef, _loadingService) {
-        this._viewContainerRef = _viewContainerRef;
-        this._templateRef = _templateRef;
-        this._loadingService = _loadingService;
-    }
     /**
      * Registers component in the DOM, so it will be available when calling resolve/register.
      */
@@ -750,7 +727,7 @@ class TdLoadingDirective {
             }, this._viewContainerRef, this._templateRef, this._context);
         }
     }
-    static ɵfac = function TdLoadingDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(TdLoadingService)); };
+    static ɵfac = function TdLoadingDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdLoadingDirective)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdLoadingDirective, selectors: [["", "tdLoading", ""]], inputs: { name: [0, "tdLoading", "name"], until: [0, "tdLoadingUntil", "until"], type: [0, "tdLoadingType", "type"], mode: [0, "tdLoadingMode", "mode"], strategy: [0, "tdLoadingStrategy", "strategy"], color: [0, "tdLoadingColor", "color"] } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdLoadingDirective, [{
@@ -758,7 +735,7 @@ class TdLoadingDirective {
         args: [{
                 selector: '[tdLoading]',
             }]
-    }], () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: TdLoadingService }], { name: [{
+    }], null, { name: [{
             type: Input,
             args: ['tdLoading']
         }], until: [{