feat(status-dialog): angular component for status dialog (#2169)

* feat(status-dialog): angular component for status dialog
* refactor(dialog-demo): change button text to sentence case

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

@@ -1,19 +1,10 @@
-<button
-  mat-button
-  color="accent"
-  (click)="openAlert()"
-  class="text-upper push-right-sm"
->
+<button mat-button color="accent" (click)="openAlert()" class="push-right-sm">
   Open Alert
 </button>
-<button
-  mat-button
-  color="accent"
-  (click)="openConfirm()"
-  class="text-upper push-right-sm"
->
+<button mat-button color="accent" (click)="openConfirm()" class="push-right-sm">
   Open Confirm
 </button>
-<button mat-button color="accent" (click)="openPrompt()" class="text-upper">
-  Open Prompt
+<button mat-button color="accent" (click)="openPrompt()" class="push-right-sm">
+  Open prompt
 </button>
+<button mat-button color="accent" (click)="openStatus()">Open status</button>

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

@@ -38,4 +38,16 @@ export class DialogsDemoBasicComponent {
       acceptButton: 'Ok',
     });
   }
+
+  openStatus(): void {
+    this._dialogService.openStatus({
+      title: 'Status dialog',
+      disableClose: true,
+      closeButton: 'Close',
+      state: 'error',
+      details: 'Additional information about the error.',
+      message:
+        'This is how simple it is to create a status dialog with this wrapper service.',
+    });
+  }
 }

apps/docs-app/src/app/content/components/components.ts

@@ -77,7 +77,7 @@ export const createComponentDetails: IComponentDetails[] = [
     name: 'Dialogs',
     id: 'dialogs',
     description:
-      'Quick way to use alert, confirm, prompt, and draggable dialogs',
+      'Quick way to use alert, confirm, prompt, draggable and status dialogs',
     apiDocUrl: 'libs/angular/dialogs/README.md',
     icon: 'open_in_browser',
     category: buttons.name,

libs/angular/dialogs/README.md

@@ -16,6 +16,8 @@ Note: if no [ViewContainerRef] is provided, [TdDialogService] will throw an erro
   - Opens a confirm dialog with the provided config.
 - openPrompt: function(IPromptConfig): MatDialogRef<TdPromptDialogComponent>
   - Opens a prompt dialog with the provided config.
+- openStatus: function(IStatusConfig): MatDialogRef<TdStatusDialogComponent>
+  - Opens a status dialog with the provided config.
 - open: function<T>(component: ComponentType<T>, config: MatDialogConfig): MatDialogRef<T>
   - Wrapper function over the open() method in MatDialog. Opens a modal dialog containing the given component.
 - openDraggable: function<T>(IDraggableConfig<T>): MatDialogRef<T>
@@ -87,6 +89,28 @@ export class Demo {
     });
   }
 
+  openStatus(): void {
+    this._dialogService.openStatus({
+      closeButton: 'Close', //OPTIONAL, defaults to 'CLOSE'
+      details: 'Additional information about the error.', //OPTIONAL, additional details to be displayed in the message
+      detailsLabels: {
+        showDetailsLabel: 'Show more details',
+        hideDetailsLabel: 'Hide more details'
+      }, //OPTIONAL, defaults to 'Show details' and 'Hide details'
+      disableClose: true, // defaults to false
+      message:
+        'This is how simple it is to create a status dialog with this wrapper service.',
+      state: 'error', // represents the state ('error' | 'positive' | 'warning') of the dialog, defaults to 'error'
+      title: 'Status dialog', //OPTIONAL, hides if not provided
+    }).afterClosed().subscribe((newValue: string) => {
+      if (newValue) {
+        // DO SOMETHING
+      } else {
+        // DO SOMETHING ELSE
+      }
+    });;
+  }
+
   openDraggable(): void {
     this._dialogService.openDraggable({
       component: DraggableDemoComponent,
@@ -150,25 +174,15 @@ A utility to make a draggable dialog resizable.
 ```
 
 ```ts
-const {
-  matDialogRef,
-  dragRefSubject,
-}: IDraggableRefs<DraggableResizableDialogComponent> = this._dialogService.openDraggable(
-  {
-    component: DraggableResizableDialogComponent,
-    // CSS selectors of element(s) inside the component meant to be drag handle(s)
-    dragHandleSelectors: ['.drag-handle'],
-  }
-);
+const { matDialogRef, dragRefSubject }: IDraggableRefs<DraggableResizableDialogComponent> = this._dialogService.openDraggable({
+  component: DraggableResizableDialogComponent,
+  // CSS selectors of element(s) inside the component meant to be drag handle(s)
+  dragHandleSelectors: ['.drag-handle'],
+});
 
 let resizableDraggableDialog: ResizableDraggableDialog;
 dragRefSubject.subscribe((dragRf: DragRef) => {
-  resizableDraggableDialog = new ResizableDraggableDialog(
-    this._document,
-    this._renderer2,
-    matDialogRef,
-    dragRf
-  );
+  resizableDraggableDialog = new ResizableDraggableDialog(this._document, this._renderer2, matDialogRef, dragRf);
 });
 
 // Detach resize-ability event listeners after dialog closes
@@ -200,12 +214,7 @@ A component that can be utilized to create a dialog with a toolbar
 ```ts
 @Component({
   template: `
-    <td-window-dialog
-      [title]="'Title'"
-      [toolbarColor]="'accent'"
-      [closeLabel]="'Close'"
-      (closed)="closed.emit()"
-    >
+    <td-window-dialog [title]="'Title'" [toolbarColor]="'accent'" [closeLabel]="'Close'" (closed)="closed.emit()">
       <p>Comes with a handy toolbar</p>
     </td-window-dialog>
   `,
@@ -216,8 +225,7 @@ export class DraggableResizableWindowDialogComponent {
 ```
 
 ```ts
-const matDialogRef: MatDialogRef<DraggableResizableWindowDialogComponent> =
-  this._dialogService.open(DraggableResizableWindowDialogComponent);
+const matDialogRef: MatDialogRef<DraggableResizableWindowDialogComponent> = this._dialogService.open(DraggableResizableWindowDialogComponent);
 // listen to close event
 matDialogRef.componentInstance.closed.subscribe(() => matDialogRef.close());
 ```

libs/angular/dialogs/_dialog-theme.scss

@@ -2,14 +2,20 @@
 @import '../common/styles/typography-functions';
 
 @mixin td-dialog-typography($config) {
-  .td-dialog-title {
+  .td-dialog-title,
+  .td-status-dialog-title {
     font: {
       family: td-font-family($config);
       size: td-font-size($config, title);
       weight: td-font-weight($config, title);
     }
   }
 
+  .td-status-dialog-title,
+  .td-status-dialog-title .td-dialog-message {
+    line-height: td-line-height($config, subheading-1);
+  }
+
   .td-dialog-message {
     font: {
       family: td-font-family($config);

libs/angular/dialogs/src/dialog.component.html

@@ -1,10 +1,24 @@
-<div mat-dialog-title *ngIf="dialogTitle.length > 0">
-  <ng-content select="[tdDialogTitle]"></ng-content>
+<div class="td-dialog-wrapper">
+  <ng-content
+    *ngIf="dialogStatus.length > 0"
+    select="[tdDialogStatus]"
+  ></ng-content>
+  <section class="td-dialog">
+    <div mat-dialog-title *ngIf="dialogTitle.length > 0">
+      <ng-content select="[tdDialogTitle]"></ng-content>
+    </div>
+    <mat-dialog-content
+      class="td-dialog-content"
+      *ngIf="dialogContent.length > 0"
+    >
+      <ng-content select="[tdDialogContent]"></ng-content>
+    </mat-dialog-content>
+    <mat-dialog-actions
+      class="td-dialog-actions"
+      *ngIf="dialogActions.length > 0"
+    >
+      <span class="td-dialog-spacer"></span>
+      <ng-content select="[tdDialogActions]"></ng-content>
+    </mat-dialog-actions>
+  </section>
 </div>
-<mat-dialog-content class="td-dialog-content" *ngIf="dialogContent.length > 0">
-  <ng-content select="[tdDialogContent]"></ng-content>
-</mat-dialog-content>
-<mat-dialog-actions class="td-dialog-actions" *ngIf="dialogActions.length > 0">
-  <span class="td-dialog-spacer"></span>
-  <ng-content select="[tdDialogActions]"></ng-content>
-</mat-dialog-actions>

libs/angular/dialogs/src/dialog.component.scss

@@ -1,3 +1,11 @@
+.td-dialog {
+  width: 100%;
+}
+
+.td-dialog-wrapper {
+  display: flex;
+}
+
 .td-dialog-actions {
   // [layout="row"]
   flex-direction: row;
@@ -22,4 +30,14 @@
     padding-right: 8px;
     min-width: 64px;
   }
+
+  ::ng-deep .td-status-dialog___button {
+    padding: 9px 16px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .td-dialog-wrapper {
+    flex-direction: column;
+  }
 }

libs/angular/dialogs/src/dialog.component.ts

@@ -15,6 +15,9 @@ export class TdDialogContentDirective {}
 @Directive({ selector: '[tdDialogActions]' })
 export class TdDialogActionsDirective {}
 
+@Directive({ selector: '[tdDialogStatus]' })
+export class TdDialogStatusDirective {}
+
 @Component({
   selector: 'td-dialog',
   templateUrl: './dialog.component.html',
@@ -27,6 +30,8 @@ export class TdDialogComponent implements AfterContentInit {
   dialogContent!: QueryList<TdDialogContentDirective>;
   @ContentChildren(TdDialogActionsDirective, { descendants: true })
   dialogActions!: QueryList<TdDialogActionsDirective>;
+  @ContentChildren(TdDialogStatusDirective, { descendants: true })
+  dialogStatus!: QueryList<TdDialogStatusDirective>;
 
   ngAfterContentInit(): void {
     if (this.dialogTitle.length > 1) {
@@ -38,5 +43,8 @@ export class TdDialogComponent implements AfterContentInit {
     if (this.dialogActions.length > 1) {
       throw new Error('Duplicate td-dialog-actions component at in td-dialog.');
     }
+    if (this.dialogStatus.length > 1) {
+      throw new Error('Duplicate td-dialog-status component at in td-dialog.');
+    }
   }
 }

libs/angular/dialogs/src/dialogs.module.ts

@@ -12,10 +12,12 @@ import {
   TdDialogTitleDirective,
   TdDialogActionsDirective,
   TdDialogContentDirective,
+  TdDialogStatusDirective,
 } from './dialog.component';
 import { TdAlertDialogComponent } from './alert-dialog/alert-dialog.component';
 import { TdConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { TdPromptDialogComponent } from './prompt-dialog/prompt-dialog.component';
+import { TdStatusDialogComponent } from './status-dialog/status-dialog.component';
 import { TdDialogService } from './services/dialog.service';
 import { TdWindowDialogComponent } from './window-dialog/window-dialog.component';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -27,13 +29,15 @@ const TD_DIALOGS: Type<any>[] = [
   TdConfirmDialogComponent,
   TdPromptDialogComponent,
   TdDialogComponent,
+  TdDialogStatusDirective,
   TdDialogTitleDirective,
   TdDialogActionsDirective,
   TdDialogContentDirective,
   TdWindowDialogComponent,
   TdAlertDialogComponent,
   TdConfirmDialogComponent,
   TdPromptDialogComponent,
+  TdStatusDialogComponent,
 ];
 
 @NgModule({

libs/angular/dialogs/src/public_api.ts

@@ -3,6 +3,7 @@ export * from './dialog.component';
 export * from './alert-dialog/alert-dialog.component';
 export * from './confirm-dialog/confirm-dialog.component';
 export * from './prompt-dialog/prompt-dialog.component';
+export * from './status-dialog/status-dialog.component';
 export * from './services/dialog.service';
 export * from './resizable-draggable-dialog/resizable-draggable-dialog';
 export * from './window-dialog/window-dialog.component';

libs/angular/dialogs/src/services/dialog.service.ts

@@ -12,6 +12,11 @@ import { TdPromptDialogComponent } from '../prompt-dialog/prompt-dialog.componen
 import { DragDrop, DragRef } from '@angular/cdk/drag-drop';
 import { DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
+import {
+  TdStatusDialogStates,
+  TdStatusDialogComponent,
+  TdStatusDialogDetailsLabels,
+} from '../status-dialog/status-dialog.component';
 
 export interface IDialogConfig extends MatDialogConfig {
   title?: string;
@@ -32,6 +37,12 @@ export interface IPromptConfig extends IConfirmConfig {
   value?: string;
 }
 
+export interface IStatusConfig extends IAlertConfig {
+  state?: TdStatusDialogStates;
+  details?: string;
+  detailsLabels?: TdStatusDialogDetailsLabels;
+}
+
 export interface IDraggableConfig<T> {
   component: ComponentType<T>;
   config?: MatDialogConfig;
@@ -246,4 +257,44 @@ export class TdDialogService {
     Object.assign(dialogConfig, config);
     return dialogConfig;
   }
+
+  /**
+   * params:
+   * - config: IStatusConfig {
+   *     closeButton?: string;
+   *     details?: string;
+   *     detailsLabels?: TdStatusDialogDetailsLabels;
+   *     message: string;
+   *     state?: 'error' | 'positive' | 'warning'
+   *     title?: string;
+   *     viewContainerRef?: ViewContainerRef;
+   * }
+   *
+   * Opens a status dialog with the provided config.
+   * Returns an MatDialogRef<TdStatusDialogComponent> object.
+   */
+  public openStatus(
+    config: IStatusConfig
+  ): MatDialogRef<TdStatusDialogComponent> {
+    config.panelClass = 'td-status-dialog';
+    config.autoFocus = false;
+    config.width = '575px';
+    config.maxWidth = '96vw';
+    const dialogConfig: MatDialogConfig = this._createConfig(config);
+    const dialogRef: MatDialogRef<TdStatusDialogComponent> =
+      this._dialogService.open(TdStatusDialogComponent, dialogConfig);
+    const statusDialogComponent: TdStatusDialogComponent =
+      dialogRef.componentInstance;
+    statusDialogComponent.title = config.title;
+    statusDialogComponent.message = config.message;
+    statusDialogComponent.state = config.state;
+    statusDialogComponent.details = config.details;
+    if (config.detailsLabels) {
+      statusDialogComponent.detailsLabels = config.detailsLabels;
+    }
+    if (config.closeButton) {
+      statusDialogComponent.closeButton = config.closeButton;
+    }
+    return dialogRef;
+  }
 }