@covalent/core 4.2.0 → 4.4.0

package/fesm2020/covalent-core-user-profile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"covalent-core-user-profile.mjs","sources":["../../../../libs/angular/user-profile/src/user-profile-menu/user-profile-menu.component.ts","../../../../libs/angular/user-profile/src/user-profile-menu/user-profile-menu.component.html","../../../../libs/angular/user-profile/src/user-profile.component.ts","../../../../libs/angular/user-profile/src/user-profile.component.html","../../../../libs/angular/user-profile/src/user-profile.module.ts","../../../../libs/angular/user-profile/src/covalent-core-user-profile.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'td-user-profile-menu',\n  templateUrl: './user-profile-menu.component.html',\n  styleUrls: ['./user-profile-menu.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TdUserProfileMenuComponent {\n  @Input() email?: string;\n  @Input() name?: string;\n\n  _blockEvent(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n}\n","<td-menu class=\"user-profile-menu\">\n  <!--header-->\n  <mat-list td-menu-header>\n    <mat-list-item *ngIf=\"name || email\" (click)=\"_blockEvent($event)\">\n      <mat-icon matListAvatar>person</mat-icon>\n      <span matLine *ngIf=\"name\" class=\"mat-body-1\">{{ name }}</span>\n      <span matLine *ngIf=\"email\">{{ email }}</span>\n    </mat-list-item>\n    <ng-content select=\"[td-user-info-list]\"></ng-content>\n  </mat-list>\n  <!--content-->\n  <mat-action-list>\n    <ng-content select=\"[td-user-action-list]\"></ng-content>\n  </mat-action-list>\n</td-menu>\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'td-user-profile',\n  templateUrl: './user-profile.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TdUserProfileComponent {\n  @Input() name?: string;\n  @Input() email?: string;\n}\n","<button mat-icon-button [matMenuTriggerFor]=\"accountMenu\">\n  <mat-icon>person</mat-icon>\n</button>\n\n<mat-menu #accountMenu=\"matMenu\" [overlapTrigger]=\"false\">\n  <td-user-profile-menu [name]=\"name\" [email]=\"email\">\n    <ng-content select=\"[td-user-info-list]\" td-user-info-list></ng-content>\n    <ng-content select=\"[td-user-action-list]\" td-user-action-list></ng-content>\n  </td-user-profile-menu>\n</mat-menu>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatListModule } from '@angular/material/list';\n\nimport { TdUserProfileMenuComponent } from './user-profile-menu/user-profile-menu.component';\nimport { TdUserProfileComponent } from './user-profile.component';\nimport { CovalentMenuModule } from '@covalent/core/menu';\n\n@NgModule({\n  declarations: [TdUserProfileComponent, TdUserProfileMenuComponent],\n  imports: [\n    CommonModule,\n    MatMenuModule,\n    MatIconModule,\n    MatButtonModule,\n    MatListModule,\n    CovalentMenuModule,\n  ],\n  providers: [],\n  exports: [TdUserProfileComponent, TdUserProfileMenuComponent],\n})\nexport class CovalentUserProfileModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;MAQa,0BAA0B;IAIrC,WAAW,CAAC,KAAY;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;uHAPU,0BAA0B;2GAA1B,0BAA0B,sGCRvC,okBAeA;2FDPa,0BAA0B;kBANtC,SAAS;+BACE,sBAAsB,mBAGf,uBAAuB,CAAC,MAAM;8BAGtC,KAAK;sBAAb,KAAK;gBACG,IAAI;sBAAZ,KAAK;;;MEHK,sBAAsB;;mHAAtB,sBAAsB;uGAAtB,sBAAsB,iGCPnC,obAUA;2FDHa,sBAAsB;kBALlC,SAAS;+BACE,iBAAiB,mBAEV,uBAAuB,CAAC,MAAM;8BAGtC,IAAI;sBAAZ,KAAK;gBACG,KAAK;sBAAb,KAAK;;;MEeK,yBAAyB;;sHAAzB,yBAAyB;uHAAzB,yBAAyB,iBAZrB,sBAAsB,EAAE,0BAA0B,aAE/D,YAAY;QACZ,aAAa;QACb,aAAa;QACb,eAAe;QACf,aAAa;QACb,kBAAkB,aAGV,sBAAsB,EAAE,0BAA0B;uHAEjD,yBAAyB,aAHzB,EAAE,YARJ;YACP,YAAY;YACZ,aAAa;YACb,aAAa;YACb,eAAe;YACf,aAAa;YACb,kBAAkB;SACnB;2FAIU,yBAAyB;kBAbrC,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,sBAAsB,EAAE,0BAA0B,CAAC;oBAClE,OAAO,EAAE;wBACP,YAAY;wBACZ,aAAa;wBACb,aAAa;wBACb,eAAe;wBACf,aAAa;wBACb,kBAAkB;qBACnB;oBACD,SAAS,EAAE,EAAE;oBACb,OAAO,EAAE,CAAC,sBAAsB,EAAE,0BAA0B,CAAC;iBAC9D;;;ACvBD;;;;;;"}
+{"version":3,"file":"covalent-core-user-profile.mjs","sources":["../../../../libs/angular/user-profile/src/user-profile-menu/user-profile-menu.component.ts","../../../../libs/angular/user-profile/src/user-profile-menu/user-profile-menu.component.html","../../../../libs/angular/user-profile/src/user-profile.component.ts","../../../../libs/angular/user-profile/src/user-profile.component.html","../../../../libs/angular/user-profile/src/user-profile.module.ts","../../../../libs/angular/user-profile/src/covalent-core-user-profile.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'td-user-profile-menu',\n  templateUrl: './user-profile-menu.component.html',\n  styleUrls: ['./user-profile-menu.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TdUserProfileMenuComponent {\n  @Input() email?: string;\n  @Input() name?: string;\n\n  _blockEvent(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n}\n","<td-menu class=\"user-profile-menu\">\n  <!--header-->\n  <mat-list td-menu-header>\n    <mat-list-item *ngIf=\"name || email\" (click)=\"_blockEvent($event)\">\n      <mat-icon matListAvatar>person</mat-icon>\n      <span matLine *ngIf=\"name\" class=\"mat-body-1\">{{ name }}</span>\n      <span matLine *ngIf=\"email\">{{ email }}</span>\n    </mat-list-item>\n    <ng-content select=\"[td-user-info-list]\"></ng-content>\n  </mat-list>\n  <!--content-->\n  <mat-action-list>\n    <ng-content select=\"[td-user-action-list]\"></ng-content>\n  </mat-action-list>\n</td-menu>\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  selector: 'td-user-profile',\n  templateUrl: './user-profile.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TdUserProfileComponent {\n  @Input() name?: string;\n  @Input() email?: string;\n}\n","<button mat-icon-button [matMenuTriggerFor]=\"accountMenu\">\n  <mat-icon>person</mat-icon>\n</button>\n\n<mat-menu #accountMenu=\"matMenu\" [overlapTrigger]=\"false\">\n  <td-user-profile-menu [name]=\"name\" [email]=\"email\">\n    <ng-content select=\"[td-user-info-list]\" td-user-info-list></ng-content>\n    <ng-content select=\"[td-user-action-list]\" td-user-action-list></ng-content>\n  </td-user-profile-menu>\n</mat-menu>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatListModule } from '@angular/material/list';\n\nimport { TdUserProfileMenuComponent } from './user-profile-menu/user-profile-menu.component';\nimport { TdUserProfileComponent } from './user-profile.component';\nimport { CovalentMenuModule } from '@covalent/core/menu';\n\n@NgModule({\n  declarations: [TdUserProfileComponent, TdUserProfileMenuComponent],\n  imports: [\n    CommonModule,\n    MatMenuModule,\n    MatIconModule,\n    MatButtonModule,\n    MatListModule,\n    CovalentMenuModule,\n  ],\n  providers: [],\n  exports: [TdUserProfileComponent, TdUserProfileMenuComponent],\n})\nexport class CovalentUserProfileModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i2","i3","i4.TdUserProfileMenuComponent"],"mappings":"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"}

package/fesm2020/covalent-core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"covalent-core.mjs","sources":["../../../../libs/angular/covalent-core.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"AAAA;;"}
+{"version":3,"file":"covalent-core.mjs","sources":["../../../../libs/angular/covalent-core.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"AAAA;;AAEG"}

package/layout/navigation-drawer/navigation-drawer.component.d.ts

@@ -16,9 +16,9 @@ export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
     private _layout;
     private _router;
     private _sanitize;
-    private _closeSubscription?;
     private _menuToggled;
     private _backgroundImage;
+    private _destroy$;
     get menuToggled(): boolean;
     _drawerMenu: QueryList<TdNavigationDrawerMenuDirective>;
     _toolbar: QueryList<TdNavigationDrawerToolbarDirective>;

package/loading/README.md

@@ -0,0 +1,188 @@
+# tdLoading
+
+Simply add the `tdLoading` attribute with a [name] value to the element you want to mask.
+
+Dont forget to add the asterisk syntax before the `tdLoading` directive if its not used in a `<ng-template>` element. More ingo on the asterisk (\*) syntax [here](https://angular.io/guide/structural-directives#asterisk)
+
+## API Summary
+
+#### Inputs
+
+- tdLoading: string
+  - Name reference of the loading mask, used to register/resolve requests to the mask.
+- tdLoadingType?: LoadingType or ["linear" | "circular"]
+  - Sets the type of loading mask depending on value.
+  - Defaults to [LoadingType.Circular | "circular"]
+- tdLoadingMode?: LoadingMode or ["determinate" | "indeterminate"]
+  - Sets the mode of loading mask depending on value.
+  - Defaults to [LoadingMode.Indeterminate | "indeterminate"].
+- tdLoadingStrategy?: LoadingStrategy or ["replace" | "overlay"]
+  - Sets the strategy of loading mask depending on value.
+  - Defaults to [LoadingMode.Replace | "replace"]
+- tdLoadingColor?: "primary" | "accent" | "warn"
+  - Sets the theme color of the loading component.
+  - Defaults to "primary"
+- tdLoadingUntil?: any
+  - If its null, undefined or false it will be used to register requests to the mask.
+  - Else if its any value that can be resolved as true, it will resolve the mask.
+  - [name] is optional when using [until], but can still be used to register/resolve it manually.
+
+# tdLoadingService
+
+This service is designed to be a factory of loading masks and serves as a facade for their usage.
+
+Simply add this service as a provider to be able to use it in a component.
+
+TdLoadingService.create() method receives as parameter an object that implements the [ITdLoadingConfig] interface.
+
+```typescript
+interface ITdLoadingConfig {
+  name: string;
+  type?: LoadingType;
+  mode?: LoadingMode;
+  color?: 'primary' | 'accent' | 'warn';
+}
+```
+
+## API Summary
+
+#### Methods
+
+- register: function(name?: string, registers: number = 1)
+  - Registers a request for the loading mask referenced by the name parameter.
+  - Can optionally pass registers argument to set a number of register calls.
+  - If no paramemeters are used, then default main mask will be used
+- resolve: function(name?: string, resolves: number = 1)
+  - Resolves a request for the loading mask referenced by the name parameter.
+  - Can optionally pass resolves argument to set a number of resolve calls.
+  - If no paramemeters are used, then default main mask will be used.
+- resolveAll: function(name?: string)
+  - Resolves all requests for the loading mask referenced by the name parameter.
+  - If no paramemeters are used, then default main mask will be used.
+- setValue: function(name: string, value: number)
+  - Set value on a loading mask referenced by the name parameter.
+  - Usage only available if its mode is 'determinate'.
+- create: function(options: ITdLoadingConfig
+  - Creates a fullscreen loading mask and attaches it to the DOM with the given configuration.
+  - Only displayed when the mask has a request registered on it.
+
+## Setup
+
+Import the [CovalentLoadingModule] in your NgModule:
+
+```typescript
+import { CovalentLoadingModule } from '@covalent/core/loading';
+@NgModule({
+  imports: [
+    CovalentLoadingModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Example for (\*) syntax:
+
+```html
+<div
+  *tdLoading="'stringName'; type:'circular'; mode:'indeterminate'; strategy:'replace'; color:'primary'"
+>
+  ...
+</div>
+```
+
+```typescript
+import { TdLoadingService } from '@covalent/core/loading';
+...
+})
+export class Demo {
+  constructor(private _loadingService: TdLoadingService) {
+    ...
+  }
+
+  registerLoading(): void {
+    this._loadingService.register('stringName');
+  }
+
+  resolveLoading(): void {
+    this._loadingService.resolve('stringName');
+  }
+}
+```
+
+Exmaple for (\*) until async syntax:
+
+```html
+<div
+  *tdLoading="let item until observable | async; type:'circular'; color:'primary'"
+>
+  {{item}}
+</div>
+```
+
+Example for `<ng-template>` syntax:
+
+```html
+<ng-template
+  tdLoading="stringName"
+  tdLoadingType="circular"
+  tdLoadingMode="indeterminate"
+  tdLoadingStrategy="replace"
+  tdLoadingColor="primary"
+>
+  ...
+</ng-template>
+```
+
+```typescript
+import { TdLoadingService } from '@covalent/core/loading';
+...
+})
+export class Demo {
+  constructor(private _loadingService: TdLoadingService) {
+    ...
+  }
+
+  registerLoading(): void {
+    this._loadingService.register('stringName');
+  }
+
+  resolveLoading(): void {
+    this._loadingService.resolve('stringName');
+  }
+}
+```
+
+Example for `<ng-template>` until syntax:
+
+```html
+<ng-template tdLoading [tdLoadingUntil]="boolean"> ... </ng-template>
+```
+
+Example creating a global mask with the `tdLoadingService`:
+
+```typescript
+import { TdLoadingService, LoadingType, LoadingMode } from '@covalent/core/loading';
+...
+export class Demo {
+  constructor(private _loadingService: TdLoadingService) {
+    this._loadingService.create({
+      name: 'stringName',
+      type: LoadingType.Circular,
+      mode: LoadingMode.Indeterminate,
+      color: 'accent',
+    });
+  }
+
+  registerLoading(): void {
+    this._loadingService.register('stringName');
+  }
+
+  resolveLoading(): void {
+    this._loadingService.resolve('stringName'); // or this._loadingService.resolveAll('stringName');
+  }
+}
+```

package/loading/_loading-theme.scss

@@ -0,0 +1,11 @@
+@import '../common/styles/theme-functions';
+
+@mixin td-loading-theme($theme) {
+  $background: map-get($theme, background);
+
+  .td-loading-wrapper {
+    &.td-overlay .td-loading {
+      background: rgba(mat-color($background, dialog), 0.8);
+    }
+  }
+}

package/loading/covalent-core-loading.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@covalent/core/loading" />
+export * from './public_api';

package/loading/directives/loading.directive.d.ts

@@ -0,0 +1,70 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { ViewContainerRef, TemplateRef } from '@angular/core';
+import { LoadingType, LoadingMode, LoadingStrategy } from '../loading.component';
+import { TdLoadingService } from '../services/loading.service';
+import * as i0 from "@angular/core";
+/**
+ * Context class for variable reference
+ */
+export declare class TdLoadingContext {
+    $implicit: any;
+    tdLoading: any;
+}
+export declare class TdLoadingDirective implements OnInit, OnDestroy {
+    private _viewContainerRef;
+    private _templateRef;
+    private _loadingService;
+    private _context;
+    private _loadingRef?;
+    /**
+     * tdLoading: string
+     * Name reference of the loading mask, used to register/resolve requests to the mask.
+     */
+    name: string;
+    /**
+     * tdLoadingUntil?: any
+     * If its null, undefined or false it will be used to register requests to the mask.
+     * Else if its any value that can be resolved as true, it will resolve the mask.
+     * [name] is optional when using [until], but can still be used to register/resolve it manually.
+     */
+    set until(until: any);
+    /**
+     * tdLoadingType?: LoadingType or ['linear' | 'circular']
+     * Sets the type of loading mask depending on value.
+     * Defaults to [LoadingType.Circular | 'circular'].
+     */
+    type: LoadingType;
+    /**
+     * tdLoadingMode?: LoadingMode or ['determinate' | 'indeterminate']
+     * Sets the mode of loading mask depending on value.
+     * Defaults to [LoadingMode.Indeterminate | 'indeterminate'].
+     */
+    mode: LoadingMode;
+    /**
+     * tdLoadingStrategy?: LoadingStrategy or ['replace' | 'overlay']
+     * Sets the strategy of loading mask depending on value.
+     * Defaults to [LoadingMode.Replace | 'replace'].
+     */
+    strategy: LoadingStrategy.Overlay | LoadingStrategy.Replace;
+    /**
+     * tdLoadingColor?: "primary" | "accent" | "warn"
+     * Sets the theme color of the loading component. Defaults to "primary"
+     */
+    color: 'primary' | 'accent' | 'warn';
+    constructor(_viewContainerRef: ViewContainerRef, _templateRef: TemplateRef<TdLoadingContext>, _loadingService: TdLoadingService);
+    /**
+     * Registers component in the DOM, so it will be available when calling resolve/register.
+     */
+    ngOnInit(): void;
+    /**
+     * Remove component when directive is destroyed.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Creates [TdLoadingComponent] and attaches it to this directive's [ViewContainerRef].
+     * Passes this directive's [TemplateRef] to modify DOM depending on loading `strategy`.
+     */
+    private _registerComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdLoadingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdLoadingDirective, "[tdLoading]", never, { "name": "tdLoading"; "until": "tdLoadingUntil"; "type": "tdLoadingType"; "mode": "tdLoadingMode"; "strategy": "tdLoadingStrategy"; "color": "tdLoadingColor"; }, {}, never>;
+}

package/loading/loading.component.d.ts

@@ -0,0 +1,90 @@
+import { ChangeDetectorRef, ElementRef, DoCheck } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from "@angular/core";
+export declare enum LoadingType {
+    Circular = "circular",
+    Linear = "linear"
+}
+export declare enum LoadingMode {
+    Determinate = "determinate",
+    Indeterminate = "indeterminate"
+}
+export declare enum LoadingStrategy {
+    Overlay = "overlay",
+    Replace = "replace"
+}
+export declare enum LoadingStyle {
+    FullScreen = "fullscreen",
+    Overlay = "overlay",
+    None = "none"
+}
+export declare const TD_CIRCLE_DIAMETER = 40;
+export declare class TdLoadingComponent implements DoCheck {
+    private _elementRef;
+    private _changeDetectorRef;
+    private _mode;
+    private _defaultMode;
+    private _value;
+    private _circleDiameter;
+    /**
+     * Flag for animation
+     */
+    animation: boolean;
+    /**
+     * Content injected into loading component.
+     */
+    content: TemplatePortal<any>;
+    /**
+     * Sets mode of [TdLoadingComponent] to LoadingMode.Determinate or LoadingMode.Indeterminate
+     */
+    set mode(mode: LoadingMode);
+    get mode(): LoadingMode;
+    /**
+     * Sets value of [TdLoadingComponent] if mode is 'LoadingMode.Determinate'
+     */
+    set value(value: number);
+    get value(): number;
+    style: LoadingStyle;
+    /**
+     * height: number
+     * Sets height of [TdLoadingComponent].
+     */
+    height: number;
+    /**
+     * type: LoadingType
+     * Sets type of [TdLoadingComponent] rendered.
+     */
+    type: LoadingType;
+    /**
+     * color: primary' | 'accent' | 'warn'
+     * Sets theme color of [TdLoadingComponent] rendered.
+     */
+    color: 'primary' | 'accent' | 'warn';
+    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
+    ngDoCheck(): void;
+    getHeight(): string | undefined;
+    getCircleDiameter(): number;
+    getCircleStrokeWidth(): number;
+    isCircular(): boolean;
+    isLinear(): boolean;
+    isFullScreen(): boolean;
+    isOverlay(): boolean;
+    /**
+     * Starts in animation and returns an observable for completition event.
+     */
+    show(): void;
+    /**
+     * Starts out animation and returns an observable for completition event.
+     */
+    hide(): void;
+    /**
+     * Calculate the proper diameter for the circle and set it
+     */
+    private _setCircleDiameter;
+    /**
+     * Returns the host height of the loading component
+     */
+    private _hostHeight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdLoadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdLoadingComponent, "td-loading", never, {}, {}, never, never>;
+}

package/loading/loading.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./loading.component";
+import * as i2 from "./directives/loading.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/progress-bar";
+import * as i5 from "@angular/material/progress-spinner";
+import * as i6 from "@angular/cdk/overlay";
+import * as i7 from "@angular/cdk/portal";
+export declare class CovalentLoadingModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentLoadingModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentLoadingModule, [typeof i1.TdLoadingComponent, typeof i2.TdLoadingDirective], [typeof i3.CommonModule, typeof i4.MatProgressBarModule, typeof i5.MatProgressSpinnerModule, typeof i6.OverlayModule, typeof i7.PortalModule], [typeof i1.TdLoadingComponent, typeof i2.TdLoadingDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentLoadingModule>;
+}

package/loading/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../fesm2015/covalent-core-loading.mjs",
+  "es2020": "../fesm2020/covalent-core-loading.mjs",
+  "esm2020": "../esm2020/loading/covalent-core-loading.mjs",
+  "fesm2020": "../fesm2020/covalent-core-loading.mjs",
+  "fesm2015": "../fesm2015/covalent-core-loading.mjs",
+  "typings": "covalent-core-loading.d.ts",
+  "sideEffects": false,
+  "name": "@covalent/core/loading"
+}

package/loading/public_api.d.ts

@@ -0,0 +1,5 @@
+export * from './loading.module';
+export * from './loading.component';
+export * from './directives/loading.directive';
+export * from './services/loading.service';
+export * from './services/loading.factory';

package/loading/services/loading.factory.d.ts

@@ -0,0 +1,69 @@
+import { ComponentFactoryResolver, Provider } from '@angular/core';
+import { Injector, ComponentRef, ViewContainerRef, TemplateRef } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { Observable, Subject } from 'rxjs';
+import { TdLoadingContext } from '../directives/loading.directive';
+import { LoadingStyle } from '../loading.component';
+import { ITdLoadingConfig } from './loading.service';
+import * as i0 from "@angular/core";
+export interface IInternalLoadingOptions extends ITdLoadingConfig {
+    height?: number;
+    style?: LoadingStyle;
+}
+export interface ILoadingRef {
+    observable: Observable<any>;
+    componentRef?: ComponentRef<any>;
+    subject: Subject<any>;
+    times: number;
+}
+/**
+ * NOTE: @internal usage only.
+ */
+export declare class TdLoadingFactory {
+    private _componentFactoryResolver;
+    private _overlay;
+    private _injector;
+    constructor(_componentFactoryResolver: ComponentFactoryResolver, _overlay: Overlay, _injector: Injector);
+    /**
+     * Uses material `Overlay` services to create a DOM element and attach the loading component
+     * into it. Leveraging the state and configuration from it.
+     *
+     * Saves a reference in context to be called when registering/resolving the loading element.
+     */
+    createFullScreenComponent(options: ITdLoadingConfig): ILoadingRef;
+    /**
+     * Creates a loading component dynamically and attaches it into the given viewContainerRef.
+     * Leverages TemplatePortals from material to inject the template inside of it so it fits
+     * perfectly when overlaying it.
+     *
+     * Saves a reference in context to be called when registering/resolving the loading element.
+     */
+    createOverlayComponent(options: ITdLoadingConfig, viewContainerRef: ViewContainerRef, templateRef: TemplateRef<object>): ILoadingRef;
+    /**
+     * Creates a loading component dynamically and attaches it into the given viewContainerRef.
+     * Replaces the template with the loading component depending if it was registered or resolved.
+     *
+     * Saves a reference in context to be called when registering/resolving the loading element.
+     */
+    createReplaceComponent(options: ITdLoadingConfig, viewContainerRef: ViewContainerRef, templateRef: TemplateRef<object>, context: TdLoadingContext): ILoadingRef;
+    /**
+     * Creates a fullscreen overlay for the loading usage.
+     */
+    private _createOverlay;
+    /**
+     * Creates a generic component dynamically waiting to be attached to a viewContainerRef.
+     */
+    private _createComponent;
+    /**
+     * Initialize context for loading component.
+     */
+    private _initializeContext;
+    /**
+     * Maps configuration to the loading component instance.
+     */
+    private _mapOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdLoadingFactory, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TdLoadingFactory>;
+}
+export declare function LOADING_FACTORY_PROVIDER_FACTORY(parent: TdLoadingFactory, componentFactoryResolver: ComponentFactoryResolver, overlay: Overlay, injector: Injector): TdLoadingFactory;
+export declare const LOADING_FACTORY_PROVIDER: Provider;

package/loading/services/loading.service.d.ts

@@ -0,0 +1,118 @@
+import { Provider } from '@angular/core';
+import { ViewContainerRef, TemplateRef } from '@angular/core';
+import { TdLoadingContext } from '../directives/loading.directive';
+import { LoadingMode, LoadingStrategy, LoadingType } from '../loading.component';
+import { TdLoadingFactory, ILoadingRef } from './loading.factory';
+import * as i0 from "@angular/core";
+export interface ITdLoadingConfig {
+    name: string;
+    type?: LoadingType;
+    mode?: LoadingMode;
+    color?: 'primary' | 'accent' | 'warn';
+}
+export declare class TdLoadingConfig implements ITdLoadingConfig {
+    name: string;
+    type?: LoadingType;
+    mode?: LoadingMode;
+    color?: 'primary' | 'accent' | 'warn';
+    constructor(config: ITdLoadingConfig);
+}
+export interface ITdLoadingDirectiveConfig extends ITdLoadingConfig {
+    strategy?: LoadingStrategy;
+}
+export declare class TdLoadingDirectiveConfig extends TdLoadingConfig implements ITdLoadingDirectiveConfig {
+    strategy: LoadingStrategy;
+    constructor(config: ITdLoadingDirectiveConfig);
+}
+export declare class TdLoadingService {
+    private _loadingFactory;
+    private _context;
+    private _timeouts;
+    constructor(_loadingFactory: TdLoadingFactory);
+    /**
+     * params:
+     * - config: ILoadingDirectiveConfig
+     * - viewContainerRef: ViewContainerRef
+     * - templateRef: TemplateRef<Object>
+     *
+     * Creates an replace loading mask and attaches it to the viewContainerRef.
+     * Replaces the templateRef with the mask when a request is registered on it.
+     *
+     * NOTE: @internal usage only.
+     */
+    createComponent(config: ITdLoadingDirectiveConfig, viewContainerRef: ViewContainerRef, templateRef: TemplateRef<object>, context: TdLoadingContext): ILoadingRef;
+    /**
+     * params:
+     * - config: ITdLoadingConfig
+     *
+     * Creates a fullscreen loading mask and attaches it to the DOM with the given configuration.
+     * Only displayed when the mask has a request registered on it.
+     */
+    create(config: ITdLoadingConfig): void;
+    /**
+     * params:
+     * - name: string
+     *
+     * Removes `loading` component from service context.
+     */
+    removeComponent(name: string): void;
+    /**
+     * params:
+     * - name: string
+     * - registers?: number
+     * returns: true if successful
+     *
+     * Resolves a request for the loading mask referenced by the name parameter.
+     * Can optionally pass registers argument to set a number of register calls.
+     *
+     * If no paramemeters are used, then default main mask will be used.
+     *
+     * e.g. loadingService.register()
+     */
+    register(name?: string, registers?: number): boolean;
+    /**
+     * params:
+     * - name: string
+     * - resolves?: number
+     * returns: true if successful
+     *
+     * Resolves a request for the loading mask referenced by the name parameter.
+     * Can optionally pass resolves argument to set a number of resolve calls.
+     *
+     * If no paramemeters are used, then default main mask will be used.
+     *
+     * e.g. loadingService.resolve()
+     */
+    resolve(name?: string, resolves?: number): boolean;
+    /**
+     * params:
+     * - name: string
+     * returns: true if successful
+     *
+     * Resolves all request for the loading mask referenced by the name parameter.
+     *
+     * If no paramemeters are used, then default main mask will be used.
+     *
+     * e.g. loadingService.resolveAll()
+     */
+    resolveAll(name?: string): boolean;
+    /**
+     * params:
+     * - name: string
+     * - value: number
+     * returns: true if successful
+     *
+     * Set value on a loading mask referenced by the name parameter.
+     * Usage only available if its mode is 'determinate' and if loading is showing.
+     */
+    setValue(name: string, value: number): boolean;
+    /**
+     * Clears timeout linked to the name.
+     * @param name Name of the loading component to be cleared
+     */
+    private _clearTimeout;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdLoadingService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TdLoadingService>;
+}
+export declare function LOADING_PROVIDER_FACTORY(parent: TdLoadingService, loadingFactory: TdLoadingFactory): TdLoadingService;
+export declare const LOADING_PROVIDER: Provider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/core",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "exports": {
     ".": {
       "sass": "./theming/_all-theme.scss",
@@ -70,6 +70,14 @@
       "node": "./fesm2015/covalent-core-layout.mjs",
       "default": "./fesm2020/covalent-core-layout.mjs"
     },
+    "./loading": {
+      "types": "./loading/covalent-core-loading.d.ts",
+      "esm2020": "./esm2020/loading/covalent-core-loading.mjs",
+      "es2020": "./fesm2020/covalent-core-loading.mjs",
+      "es2015": "./fesm2015/covalent-core-loading.mjs",
+      "node": "./fesm2015/covalent-core-loading.mjs",
+      "default": "./fesm2020/covalent-core-loading.mjs"
+    },
     "./menu": {
       "types": "./menu/covalent-core-menu.d.ts",
       "esm2020": "./esm2020/menu/covalent-core-menu.mjs",
@@ -127,7 +135,7 @@
     "@angular/router": "^13.2.0",
     "@angular/cdk": "^13.2.1",
     "@angular/material": "^13.2.1",
-    "@covalent/core": "4.2.0",
+    "@covalent/core": "4.4.0",
     "@angular/platform-browser": "^13.2.0",
     "rxjs": "^7.4.0",
     "@angular/animations": "^13.2.0",