chore(loading): adding back loading module

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo-basic/loading-mask-demo-basic.component.html

@@ -0,0 +1,5 @@
+<div class="loading-mask-example">
+  <td-loading-mask width="100%" height="40px"></td-loading-mask>
+  <td-loading-mask width="80%"></td-loading-mask>
+  <td-loading-mask width="40%"></td-loading-mask>
+</div>

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo-basic/loading-mask-demo-basic.component.scss

@@ -0,0 +1,8 @@
+.loading-mask-example {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  td-loading-mask {
+    margin-bottom: 8px;
+  }
+}

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo-basic/loading-mask-demo-basic.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'loading-mask-demo-basic',
+  styleUrls: ['./loading-mask-demo-basic.component.scss'],
+  templateUrl: './loading-mask-demo-basic.component.html',
+})
+export class LoadingMaskDemoBasicComponent {}

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo-basic/loading-mask-demo-basic.shared.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { TdLoadingMaskModule } from '../../../../../../../platform/experimental/loading-mask';
+import { CommonModule } from '@angular/common';
+import { LoadingMaskDemoBasicComponent } from './loading-mask-demo-basic.component';
+
+@NgModule({
+  declarations: [LoadingMaskDemoBasicComponent],
+  imports: [
+    /** Covalent Modules */
+    TdLoadingMaskModule,
+  ],
+  exports: [LoadingMaskDemoBasicComponent],
+})
+export class LoadingMaskDemoSharedModule {}

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoadingMaskDemoComponent } from './loading-mask-demo.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoadingMaskDemoComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LoadingMaskDemoRoutingModule {}

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo.component.html

@@ -0,0 +1,3 @@
+<demo-component [demoId]="'loading-mask-demo-basic'" [demoTitle]="'Basic'">
+  <loading-mask-demo-basic></loading-mask-demo-basic>
+</demo-component>

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'loading-mask-demo',
+  styleUrls: ['./loading-mask-demo.component.scss'],
+  templateUrl: './loading-mask-demo.component.html',
+})
+export class LoadingMaskDemoComponent {}

apps/docs-app/src/app/content/components/component-demos/loading-mask/demos/loading-mask-demo.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { LoadingMaskDemoComponent } from './loading-mask-demo.component';
+import { DemoModule } from '../../../../../components/shared/demo-tools/demo.module';
+import { LoadingMaskDemoSharedModule } from './loading-mask-demo-basic/loading-mask-demo-basic.shared';
+import { LoadingMaskDemoRoutingModule } from './loading-mask-demo-routing.module';
+
+@NgModule({
+  declarations: [LoadingMaskDemoComponent],
+  imports: [
+    LoadingMaskDemoSharedModule,
+    DemoModule,
+    LoadingMaskDemoRoutingModule,
+  ],
+})
+export class LoadingMaskDemosModule {}

apps/docs-app/src/app/content/components/component-demos/loading-mask/loading-mask.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ComponentDetailsModule } from 'app/components/shared/component-details/component-details.module';
+import { setComponentRoutes } from 'app/content/components/components';
+import { LoadingMaskDemoSharedModule } from './demos/loading-mask-demo-basic/loading-mask-demo-basic.shared';
+import { LoadingMaskDemoBasicComponent } from './demos/loading-mask-demo-basic/loading-mask-demo-basic.component';
+
+const routes: Routes = setComponentRoutes({
+  overviewDemoComponent: LoadingMaskDemoBasicComponent,
+  id: 'loading-mask',
+});
+
+@NgModule({
+  imports: [
+    LoadingMaskDemoSharedModule,
+    ComponentDetailsModule,
+    RouterModule.forChild(routes),
+  ],
+})
+export class LoadingMaskDemoModule {}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-basic/loading-demo-basic.component.html

@@ -0,0 +1,21 @@
+<div
+  *tdLoading="
+    'overlayStarSyntax';
+    mode: loadingMode.Indeterminate;
+    type: loadingType.Circular;
+    strategy: loadingStrategy.Overlay;
+    color: 'accent'
+  "
+>
+  <div class="pad text-center">loading content...</div>
+</div>
+<div layout="row">
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="toggleOverlayStarSyntax()"
+    class="text-upper"
+  >
+    Toggle Loader
+  </button>
+</div>

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-basic/loading-demo-basic.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import {
+  LoadingMode,
+  LoadingStrategy,
+  LoadingType,
+  TdLoadingService,
+} from '@covalent/core/loading';
+
+@Component({
+  selector: 'loading-demo-basic',
+  styleUrls: ['./loading-demo-basic.component.scss'],
+  templateUrl: './loading-demo-basic.component.html',
+})
+export class LoadingDemoBasicComponent {
+  loadingMode = LoadingMode;
+  loadingStrategy = LoadingStrategy;
+  loadingType = LoadingType;
+
+  overlayStarSyntax = false;
+
+  constructor(private _loadingService: TdLoadingService) {}
+
+  toggleOverlayStarSyntax(): void {
+    this.overlayStarSyntax = !this.overlayStarSyntax;
+    if (this.overlayStarSyntax) {
+      this._loadingService.register('overlayStarSyntax');
+    } else {
+      this._loadingService.resolve('overlayStarSyntax');
+    }
+  }
+}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-fullscreen/loading-demo-fullscreen.component.html

@@ -0,0 +1,17 @@
+<button
+  mat-raised-button
+  color="primary"
+  (click)="toggleDefaultFullscreenDemo()"
+  class="text-upper"
+>
+  Toggle default fullscreen Loader
+</button>
+
+<button
+  mat-raised-button
+  color="primary"
+  (click)="toggleCustomFullscreenDemo()"
+  class="text-upper"
+>
+  Toggle custom Fullscreen Loader
+</button>

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-fullscreen/loading-demo-fullscreen.component.scss

@@ -0,0 +1,3 @@
+button {
+  margin-right: 1em;
+}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-fullscreen/loading-demo-fullscreen.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import {
+  TdLoadingService,
+  LoadingMode,
+  LoadingType,
+} from '@covalent/core/loading';
+
+@Component({
+  selector: 'loading-demo-fullscreen',
+  styleUrls: ['./loading-demo-fullscreen.component.scss'],
+  templateUrl: './loading-demo-fullscreen.component.html',
+})
+export class LoadingDemoFullscreenComponent {
+  constructor(private _loadingService: TdLoadingService) {
+    // optional, only necessary for a custom config
+    // used in toggleCustomFullscreenDemo()
+    this._loadingService.create({
+      name: 'customFullscreenDemo',
+      mode: LoadingMode.Indeterminate,
+      type: LoadingType.Linear,
+      color: 'accent',
+    });
+  }
+
+  toggleDefaultFullscreenDemo(): void {
+    this._loadingService.register();
+    setTimeout(() => this._loadingService.resolve(), 1500);
+  }
+
+  toggleCustomFullscreenDemo(): void {
+    this._loadingService.register('customFullscreenDemo');
+    setTimeout(
+      () => this._loadingService.resolve('customFullscreenDemo'),
+      1500
+    );
+  }
+}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-icon/loading-demo-icon.component.html

@@ -0,0 +1,17 @@
+<mat-list>
+  <ng-template let-item let-last="last" ngFor [ngForOf]="itemList">
+    <mat-list-item>
+      <div matListAvatar>
+        <ng-template
+          tdLoading
+          [tdLoadingUntil]="!item.value"
+          [tdLoadingStrategy]="loadingStrategy.Overlay"
+        >
+          <mat-icon matListAvatar>settings_backup_restore</mat-icon>
+        </ng-template>
+      </div>
+      <h3 matLine>{{ item.label }}</h3>
+    </mat-list-item>
+    <mat-divider *ngIf="!last"></mat-divider>
+  </ng-template>
+</mat-list>

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-icon/loading-demo-icon.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import {
+  LoadingMode,
+  LoadingStrategy,
+  LoadingType,
+} from '@covalent/core/loading';
+
+@Component({
+  selector: 'loading-demo-icon',
+  templateUrl: './loading-demo-icon.component.html',
+  styleUrls: ['./loading-demo-icon.component.scss'],
+})
+export class LoadingDemoIconComponent {
+  loadingMode = LoadingMode;
+  loadingStrategy = LoadingStrategy;
+  loadingType = LoadingType;
+  itemList: any[] = [
+    { label: 'Light', value: true },
+    { label: 'Console', value: false },
+    { label: 'T.V.', value: true },
+  ];
+}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-observable/loading-demo-observable.component.html

@@ -0,0 +1,15 @@
+<div *tdLoading="let item; until: observable$ | async">
+  <div class="pad text-center">
+    {{ item.name }}
+  </div>
+</div>
+<div layout="row">
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="toggle()"
+    class="text-upper"
+  >
+    Toggle Loader
+  </button>
+</div>

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-observable/loading-demo-observable.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Component({
+  selector: 'loading-demo-observable',
+  styleUrls: ['./loading-demo-observable.component.scss'],
+  templateUrl: './loading-demo-observable.component.html',
+})
+export class LoadingDemoObservableComponent {
+  private _subject: BehaviorSubject<any> = new BehaviorSubject<any>({
+    name: 'I am here!',
+  });
+  observable$: Observable<any> = this._subject.asObservable();
+
+  toggle(): void {
+    this._subject = new BehaviorSubject<any>(undefined);
+    this.observable$ = this._subject.asObservable();
+    setTimeout(() => {
+      this._subject.next({ name: 'I am here!' });
+    }, 1000);
+  }
+}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-replace/loading-demo-replace.component.html

@@ -0,0 +1,13 @@
+<ng-template tdLoading [tdLoadingUntil]="!loading">
+  <div class="pad text-center">loading content...</div>
+</ng-template>
+<div layout="row">
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="toggle()"
+    class="text-upper"
+  >
+    Toggle Loader
+  </button>
+</div>

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-replace/loading-demo-replace.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'loading-demo-replace',
+  styleUrls: ['./loading-demo-replace.component.scss'],
+  templateUrl: './loading-demo-replace.component.html',
+})
+export class LoadingDemoReplaceComponent {
+  loading: boolean = false;
+
+  toggle(): void {
+    this.loading = !this.loading;
+  }
+}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoadingDemoComponent } from './loading-demo.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoadingDemoComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LoadingDemoRoutingModule {}

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo.component.html

@@ -0,0 +1,25 @@
+<demo-component [demoId]="'loading-demo-basic'" [demoTitle]="'Basic'">
+  <loading-demo-basic></loading-demo-basic>
+</demo-component>
+
+<demo-component
+  [demoId]="'loading-demo-replace'"
+  [demoTitle]="'Template Until Syntax'"
+>
+  <loading-demo-replace></loading-demo-replace>
+</demo-component>
+
+<demo-component
+  [demoId]="'loading-demo-observable'"
+  [demoTitle]="'Until Syntax Using Observables'"
+>
+  <loading-demo-observable></loading-demo-observable>
+</demo-component>
+
+<demo-component [demoId]="'loading-demo-fullscreen'" [demoTitle]="'Fullscreen'">
+  <loading-demo-fullscreen></loading-demo-fullscreen>
+</demo-component>
+
+<demo-component [demoId]="'loading-demo-icon'" [demoTitle]="'Icon'">
+  <loading-demo-icon></loading-demo-icon>
+</demo-component>

apps/docs-app/src/app/content/components/component-demos/loading/demos/loading-demo.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'loading-demo',
+  styleUrls: ['./loading-demo.component.scss'],
+  templateUrl: './loading-demo.component.html',
+})
+export class LoadingDemoComponent {}