WIP: ps-error-card

projects/components/error-card/index.ts

@@ -0,0 +1,3 @@
+// export what ./public_api exports so we can import with the lib name like this:
+// import { ModuleA } from 'libname'
+export * from './public_api';

projects/components/error-card/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    }
+  }
+}

projects/components/error-card/public_api.ts

@@ -0,0 +1,2 @@
+export { PsErrorCardComponent } from './src/error-card.component';
+export { PsErrorCardModule } from './src/error-card.module';

projects/components/error-card/src/error-card.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'ps-error-card',
+  template: `
+    <mat-card class="ps-error-card" [class.ps-error-card--center]="center">
+      <mat-icon *ngIf="showIcon" class="ps-error-card__icon">sentiment_very_dissatisfied</mat-icon>
+      <span>{{ errorMessage }}</span>
+    </mat-card>
+  `,
+  styles: [
+    `
+      .ps-error-card {
+        color: var(--ps-error);
+      }
+
+      .ps-error-card--center {
+        display: grid;
+        justify-items: center;
+      }
+
+      .ps-error-card__icon {
+        color: var(--ps-error);
+        font-size: 72px;
+        height: 72px;
+        width: 72px;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PsErrorCardComponent {
+  @Input() public showIcon = true;
+  @Input() public errorMessage: string;
+  @Input() public center = false;
+}

projects/components/error-card/src/error-card.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { PsErrorCardComponent } from './error-card.component';
+
+@NgModule({
+  declarations: [PsErrorCardComponent],
+  imports: [CommonModule, MatCardModule, MatIconModule],
+  exports: [PsErrorCardComponent],
+})
+export class PsErrorCardModule {}

projects/components/form/src/form.component.ts

@@ -62,14 +62,12 @@ export class PsFormCancelEvent extends PsFormEvent {}
             <ng-content></ng-content>
           </ps-block-ui>
 
-          <mat-card *ngIf="hasLoadError" class="ps-form__error-container ps-form__error-container--center">
-            <mat-icon class="ps-form__error-icon">sentiment_very_dissatisfied</mat-icon>
-            <span>{{ errorMessage }}</span>
-          </mat-card>
-
-          <mat-card *ngIf="hasSaveError" class="ps-form__error-container">
-            <span>{{ errorMessage }}</span>
-          </mat-card>
+          <ps-error-card
+            *ngIf="hasLoadError || hasSaveError"
+            [errorMessage]="errorMessage"
+            [showIcon]="hasLoadError"
+            [center]="hasLoadError"
+          ></ps-error-card>
 
           <mat-card *ngIf="hasLoadError" class="ps-form__error-actions">
             <button mat-stroked-button type="button" (click)="onCancel()">
@@ -87,22 +85,6 @@ export class PsFormCancelEvent extends PsFormEvent {}
         grid-gap: 1em;
       }
 
-      .ps-form__error-container {
-        color: var(--ps-error);
-      }
-
-      .ps-form__error-container--center {
-        display: grid;
-        justify-items: center;
-      }
-
-      .ps-form__error-icon {
-        color: var(--ps-error);
-        font-size: 72px;
-        height: 72px;
-        width: 72px;
-      }
-
       .ps-form__error-actions {
         text-align: right;
       }

projects/components/form/src/form.module.ts

@@ -6,6 +6,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { PsBlockUiModule } from '@prosoft/components/block-ui';
+import { PsErrorCardModule } from '@prosoft/components/error-card';
 import { PsSavebarModule } from '@prosoft/components/savebar';
 import { PsFormActionService } from './form-action.service';
 import { PsFormComponent } from './form.component';
@@ -23,6 +24,7 @@ import { PsFormComponent } from './form.component';
 
     PsBlockUiModule,
     PsSavebarModule,
+    PsErrorCardModule,
   ],
   exports: [PsFormComponent],
 })