Merge branch 'main' into bar-gauge-style

Author: anandtiwary

package-lock.json

@@ -36,14 +36,14 @@
     "@angular/platform-browser": "^12.2.1",
     "@angular/platform-browser-dynamic": "^12.2.1",
     "@angular/router": "^12.2.1",
-    "@apollo/client": "^3.5.6",
+    "@apollo/client": "^3.5.7",
     "@fullstory/browser": "^1.4.10",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.6.0",
     "@types/d3-hierarchy": "^2.0.2",
     "@types/d3-transition": "1.1.5",
     "apollo-angular": "^2.6.0",
-    "core-js": "^3.20.2",
+    "core-js": "^3.20.3",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
     "d3-brush": "^1.1.6",
@@ -76,7 +76,7 @@
     "@angular/cli": "12.2.1",
     "@angular/compiler-cli": "~12.2.1",
     "@angular/language-service": "~12.2.1",
-    "@commitlint/cli": "^16.0.1",
+    "@commitlint/cli": "^16.1.0",
     "@commitlint/config-conventional": "^16.0.0",
     "@compodoc/compodoc": "^1.1.18",
     "@ngneat/spectator": "^8.3.2",
@@ -94,7 +94,7 @@
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.5",
     "@types/mixpanel-browser": "^2.36.0",
-    "@types/node": "^17.0.5",
+    "@types/node": "^17.0.10",
     "@types/uuid": "^8.3.4",
     "@types/webpack-env": "^1.16.3",
     "codelyzer": "^6.0.2",
@@ -107,7 +107,7 @@
     "jest-junit": "^13.0.0",
     "jest-preset-angular": "^8.4.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^12.5.1",
+    "ng-mocks": "^13.0.0",
     "ng-packagr": "^12.2.5",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.3",

package.json

@@ -2,13 +2,14 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { IconModule } from '../icon/icon.module';
 import { MessageDisplayModule } from '../message-display/message-display.module';
+import { SkeletonModule } from '../skeleton/skeleton.module';
 import { LoadAsyncDirective } from './load-async.directive';
 import { LoaderComponent } from './loader/loader.component';
 import { LoadAsyncWrapperComponent } from './wrapper/load-async-wrapper.component';
 
 @NgModule({
   declarations: [LoadAsyncDirective, LoadAsyncWrapperComponent, LoaderComponent],
-  imports: [CommonModule, IconModule, MessageDisplayModule],
+  imports: [CommonModule, IconModule, MessageDisplayModule, SkeletonModule],
   exports: [LoadAsyncDirective]
 })
 export class LoadAsyncModule {}

projects/components/src/load-async/load-async.module.ts

@@ -62,7 +62,14 @@ export type AsyncState = LoadingAsyncState | SuccessAsyncState | NoDataOrErrorAs
 export const enum LoaderType {
   Spinner = 'spinner',
   ExpandableRow = 'expandable-row',
-  Page = 'page'
+  Page = 'page',
+  Rectangle = 'rectangle',
+  Text = 'text',
+  Square = 'square',
+  Circle = 'circle',
+  TableRow = 'table-row',
+  ListItem = 'list-item',
+  Donut = 'donut'
 }
 
 interface LoadingAsyncState {

projects/components/src/load-async/load-async.service.ts

@@ -3,10 +3,6 @@
 .ht-loader {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 
   .page {
     height: 50px;
@@ -23,3 +19,10 @@
     width: auto;
   }
 }
+
+.flex-centered {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}