feat(stark-ui): implement Material dialogs presets: alert, confirm an…

…d prompt

ISSUES CLOSED: #793

packages/stark-ui/assets/stark-ui-bundle.scss

@@ -25,6 +25,12 @@
 @import "../src/modules/collapsible/components/collapsible.component";
 @import "../src/modules/collapsible/components/collapsible-theme";
 @import "../src/modules/date-range-picker/components/date-range-picker.component";
+@import "../src/modules/dialogs/components/alert-dialog.component";
+@import "../src/modules/dialogs/components/alert-dialog-theme";
+@import "../src/modules/dialogs/components/confirm-dialog.component";
+@import "../src/modules/dialogs/components/confirm-dialog-theme";
+@import "../src/modules/dialogs/components/prompt-dialog.component";
+@import "../src/modules/dialogs/components/prompt-dialog-theme";
 @import "../src/modules/generic-search/components/generic-search/generic-search.component";
 @import "../src/modules/language-selector/components/language-selector.component";
 @import "../src/modules/message-pane/components/message-pane.component";

packages/stark-ui/src/modules.ts

@@ -9,6 +9,7 @@ export * from "./modules/breadcrumb";
 export * from "./modules/collapsible";
 export * from "./modules/date-picker";
 export * from "./modules/date-range-picker";
+export * from "./modules/dialogs";
 export * from "./modules/dropdown";
 export * from "./modules/generic-search";
 export * from "./modules/input-mask-directives";

packages/stark-ui/src/modules/dialogs.ts

@@ -0,0 +1,2 @@
+export * from "./dialogs/dialogs.module";
+export * from "./dialogs/components";

packages/stark-ui/src/modules/dialogs/components.ts

@@ -0,0 +1,6 @@
+export * from "./components/alert-dialog.component";
+export * from "./components/alert-dialog-content.intf";
+export * from "./components/confirm-dialog.component";
+export * from "./components/confirm-dialog-content.intf";
+export * from "./components/prompt-dialog.component";
+export * from "./components/prompt-dialog-content.intf";

packages/stark-ui/src/modules/dialogs/components/alert-dialog-content.intf.ts

@@ -0,0 +1,3 @@
+import { StarkBaseDialogContent } from "./dialog-content.intf";
+
+export interface StarkAlertDialogContent extends StarkBaseDialogContent {}

packages/stark-ui/src/modules/dialogs/components/alert-dialog-theme.scss

@@ -0,0 +1,5 @@
+.stark-alert-dialog {
+  .button-ok {
+    color: mat-color($primary-palette, 500);
+  }
+}

packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.html

@@ -0,0 +1,9 @@
+<h2 mat-dialog-title>{{ content.title || "" | translate }}</h2>
+
+<div mat-dialog-content>
+	{{ content.textContent || "" | translate }}
+</div>
+
+<div mat-dialog-actions>
+	<button mat-button (click)="onOk()" class="button-ok">{{ content.ok || "OK" | translate }}</button>
+</div>

packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.scss

@@ -0,0 +1,8 @@
+.stark-alert-dialog {
+  [mat-dialog-actions] {
+    // TODO: remove these 3 lines below when the MatDialogActions is adapted to align with Material Design guidelines: https://github.com/angular/material2/issues/14736
+    justify-content: flex-end;
+    align-items: flex-end;
+    margin-right: -16px; 
+  }
+}

packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.ts

@@ -0,0 +1,26 @@
+import { Component, Inject, ViewEncapsulation } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { StarkAlertDialogContent } from "./alert-dialog-content.intf";
+
+export type StarkAlertDialogResult = "ok" | undefined;
+
+@Component({
+	selector: "stark-alert-dialog",
+	templateUrl: "./alert-dialog.component.html",
+	encapsulation: ViewEncapsulation.None,
+	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
+	host: {
+		class: "stark-alert-dialog"
+	}
+})
+export class StarkAlertDialogComponent {
+	public constructor(
+		public dialogRef: MatDialogRef<StarkAlertDialogComponent, StarkAlertDialogResult>,
+		@Inject(MAT_DIALOG_DATA) public content: StarkAlertDialogContent
+	) {
+	}
+
+	public onOk(): void {
+		this.dialogRef.close("ok");
+	}
+}

packages/stark-ui/src/modules/dialogs/components/confirm-dialog-content.intf.ts

@@ -0,0 +1,8 @@
+import { StarkBaseDialogContent } from "./dialog-content.intf";
+
+export interface StarkConfirmDialogContent extends StarkBaseDialogContent {
+	/**
+	 * Label to be set in the "Cancel" button.
+	 */
+	cancel?: string;
+}

packages/stark-ui/src/modules/dialogs/components/confirm-dialog-theme.scss

@@ -0,0 +1,6 @@
+.stark-confirm-dialog {
+  .button-ok,
+  .button-cancel {
+    color: mat-color($primary-palette, 500);
+  }
+}

packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.html

@@ -0,0 +1,10 @@
+<h2 mat-dialog-title>{{ content.title || "" | translate }}</h2>
+
+<div mat-dialog-content>
+	{{ content.textContent || "" | translate }}
+</div>
+
+<div mat-dialog-actions>
+	<button mat-button (click)="onCancel()" class="button-cancel">{{ content.cancel || "CANCEL" | translate }}</button>
+	<button mat-button cdkFocusInitial (click)="onOk()" class="button-ok">{{ content.ok || "OK" | translate }}</button>
+</div>

packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.scss

@@ -0,0 +1,8 @@
+.stark-confirm-dialog {
+  [mat-dialog-actions] {
+    // TODO: remove these 3 lines below when the MatDialogActions is adapted to align with Material Design guidelines: https://github.com/angular/material2/issues/14736
+    justify-content: flex-end;
+    align-items: flex-end;
+    margin-right: -16px;
+  }
+}

packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.ts

@@ -0,0 +1,30 @@
+import { Component, Inject, ViewEncapsulation } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { StarkConfirmDialogContent } from "./confirm-dialog-content.intf";
+
+export type StarkConfirmDialogResult = "ok" | "cancel" | undefined;
+
+@Component({
+	selector: "stark-confirm-dialog",
+	templateUrl: "./confirm-dialog.component.html",
+	encapsulation: ViewEncapsulation.None,
+	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
+	host: {
+		class: "stark-confirm-dialog"
+	}
+})
+export class StarkConfirmDialogComponent {
+	public constructor(
+		public dialogRef: MatDialogRef<StarkConfirmDialogComponent, StarkConfirmDialogResult>,
+		@Inject(MAT_DIALOG_DATA) public content: StarkConfirmDialogContent
+	) {
+	}
+
+	public onCancel(): void {
+		this.dialogRef.close("cancel");
+	}
+
+	public onOk(): void {
+		this.dialogRef.close("ok");
+	}
+}

packages/stark-ui/src/modules/dialogs/components/dialog-content.intf.ts

@@ -0,0 +1,16 @@
+export interface StarkBaseDialogContent {
+	/**
+	 * Dialog's title.
+	 */
+	title?: string;
+
+	/**
+	 * Dialog's simple text content.
+	 */
+	textContent?: string;
+
+	/**
+	 * Label to be set in the "Ok" button.
+	 */
+	ok?: string;
+}

packages/stark-ui/src/modules/dialogs/components/prompt-dialog-content.intf.ts

@@ -0,0 +1,23 @@
+import { StarkBaseDialogContent } from "./dialog-content.intf";
+
+export interface StarkPromptDialogContent extends StarkBaseDialogContent {
+	/**
+	 * Text to be shown as label of the prompt input.
+	 */
+	label?: string;
+
+	/**
+	 * Placeholder text of the prompt input.
+	 */
+	placeholder?: string;
+
+	/**
+	 * Initial value to be set to the prompt input.
+	 */
+	initialValue?: string;
+
+	/**
+	 * Label to be set in the "Cancel" button.
+	 */
+	cancel?: string;
+}

packages/stark-ui/src/modules/dialogs/components/prompt-dialog-theme.scss

@@ -0,0 +1,6 @@
+.stark-prompt-dialog {
+  .button-ok,
+  .button-cancel {
+    color: mat-color($primary-palette, 500);
+  }
+}

packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.html

@@ -0,0 +1,15 @@
+<h2 mat-dialog-title>{{ content.title || "" | translate }}</h2>
+
+<div mat-dialog-content>
+	{{ content.textContent || "" | translate }}
+
+	<mat-form-field class="prompt-text">
+		<mat-label translate>{{ content.label || content.placeholder }}</mat-label>
+		<input matInput [placeholder]="content.placeholder || '' | translate" [formControl]="formControl" />
+	</mat-form-field>
+</div>
+
+<div mat-dialog-actions>
+	<button mat-button (click)="onCancel()" class="button-cancel">{{ content.cancel || "CANCEL" | translate }}</button>
+	<button mat-button (click)="onOk()" class="button-ok" [disabled]="!formControl.value">{{ content.ok || "OK" | translate }}</button>
+</div>

packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.scss

@@ -0,0 +1,13 @@
+.stark-prompt-dialog {
+  [mat-dialog-actions] {
+    // TODO: remove these 3 lines below when the MatDialogActions is adapted to align with Material Design guidelines: https://github.com/angular/material2/issues/14736
+    justify-content: flex-end;
+    align-items: flex-end;
+    margin-right: -16px;
+  }
+
+  .mat-form-field.prompt-text {
+    display: block;
+    margin: 16px 0;
+  }
+}

packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.ts

@@ -0,0 +1,34 @@
+import { Component, Inject, ViewEncapsulation } from "@angular/core";
+import { FormControl } from "@angular/forms";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { StarkPromptDialogContent } from "./prompt-dialog-content.intf";
+
+export type StarkPromptDialogResult = string | "cancel" | undefined;
+
+@Component({
+	selector: "stark-prompt-dialog",
+	templateUrl: "./prompt-dialog.component.html",
+	encapsulation: ViewEncapsulation.None,
+	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
+	host: {
+		class: "stark-prompt-dialog"
+	}
+})
+export class StarkPromptDialogComponent {
+	public formControl: FormControl;
+
+	public constructor(
+		public dialogRef: MatDialogRef<StarkPromptDialogComponent, StarkPromptDialogResult>,
+		@Inject(MAT_DIALOG_DATA) public content: StarkPromptDialogContent
+	) {
+		this.formControl = new FormControl(this.content.initialValue);
+	}
+
+	public onCancel(): void {
+		this.dialogRef.close("cancel");
+	}
+
+	public onOk(): void {
+		this.dialogRef.close(this.formControl.value);
+	}
+}

packages/stark-ui/src/modules/dialogs/dialogs.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialogModule } from "@angular/material/dialog";
+import { TranslateModule } from "@ngx-translate/core";
+import { StarkAlertDialogComponent, StarkConfirmDialogComponent, StarkPromptDialogComponent } from "./components";
+import { MatInputModule } from "@angular/material/input";
+
+@NgModule({
+	declarations: [StarkAlertDialogComponent, StarkConfirmDialogComponent, StarkPromptDialogComponent],
+	imports: [FormsModule, ReactiveFormsModule, MatButtonModule, MatDialogModule, MatInputModule, TranslateModule],
+	exports: [StarkAlertDialogComponent, StarkConfirmDialogComponent, StarkPromptDialogComponent],
+	entryComponents: [StarkAlertDialogComponent, StarkConfirmDialogComponent, StarkPromptDialogComponent]
+})
+export class StarkDialogsModule {}

showcase/src/app/app-menu.config.ts

@@ -108,6 +108,13 @@ export const APP_MENU_CONFIG: StarkMenuConfig = {
 							isEnabled: true,
 							targetState: "demo-ui.date-range-picker"
 						},
+						{
+							id: "menu-stark-ui-components-dialogs",
+							label: "SHOWCASE.DEMO.DIALOGS.TITLE",
+							isVisible: true,
+							isEnabled: true,
+							targetState: "demo-ui.dialogs"
+						},
 						{
 							id: "menu-stark-ui-components-dropdown",
 							label: "SHOWCASE.DEMO.DROPDOWN.TITLE",

showcase/src/app/demo-ui/demo-ui.module.ts

@@ -29,6 +29,7 @@ import {
 	StarkCollapsibleModule,
 	StarkDatePickerModule,
 	StarkDateRangePickerModule,
+	StarkDialogsModule,
 	StarkDropdownModule,
 	StarkGenericSearchModule,
 	StarkInputMaskDirectivesModule,
@@ -51,6 +52,7 @@ import {
 	DemoCollapsiblePageComponent,
 	DemoDatePickerPageComponent,
 	DemoDateRangePickerPageComponent,
+	DemoDialogsPageComponent,
 	DemoDropdownPageComponent,
 	DemoFooterPageComponent,
 	DemoGenericSearchFormComponent,
@@ -80,10 +82,10 @@ import {
 	TableRegularComponent,
 	TableWithCustomActionsComponent,
 	TableWithCustomStylingComponent,
+	TableWithFixedActionsComponent,
 	TableWithFixedHeaderComponent,
 	TableWithSelectionComponent,
-	TableWithTranscludedActionBarComponent,
-	TableWithFixedActionsComponent
+	TableWithTranscludedActionBarComponent
 } from "./components";
 
 @NgModule({
@@ -119,6 +121,7 @@ import {
 		StarkCollapsibleModule,
 		StarkDatePickerModule,
 		StarkDateRangePickerModule,
+		StarkDialogsModule,
 		StarkDropdownModule,
 		StarkGenericSearchModule,
 		StarkInputMaskDirectivesModule,
@@ -142,6 +145,7 @@ import {
 		DemoCollapsiblePageComponent,
 		DemoDatePickerPageComponent,
 		DemoDateRangePickerPageComponent,
+		DemoDialogsPageComponent,
 		DemoDropdownPageComponent,
 		DemoFooterPageComponent,
 		DemoGenericSearchPageComponent,
@@ -177,6 +181,7 @@ import {
 		DemoCollapsiblePageComponent,
 		DemoDatePickerPageComponent,
 		DemoDateRangePickerPageComponent,
+		DemoDialogsPageComponent,
 		DemoDropdownPageComponent,
 		DemoFooterPageComponent,
 		DemoGenericSearchPageComponent,

showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.html

@@ -0,0 +1,24 @@
+<h1 class="mat-display-3" translate>SHOWCASE.DEMO.DIALOGS.TITLE</h1>
+<section class="stark-section">
+	<h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
+	<example-viewer
+		[extensions]="['HTML', 'TS']"
+		filesPath="dialogs/predefined-dialogs"
+		exampleTitle="SHOWCASE.DEMO.DIALOGS.PREDEFINED_DIALOGS"
+	>
+		<div class="dialog-demo-content">
+			<button mat-raised-button color="alert" (click)="showAlert()">{{ "SHOWCASE.DEMO.DIALOGS.ALERT_DIALOG" | translate }}</button>
+			<button mat-raised-button color="primary" (click)="showConfirm()">
+				{{ "SHOWCASE.DEMO.DIALOGS.CONFIRM_DIALOG" | translate }}
+			</button>
+			<button mat-stroked-button color="primary" (click)="showPrompt()">
+				{{ "SHOWCASE.DEMO.DIALOGS.PROMPT_DIALOG" | translate }}
+			</button>
+		</div>
+
+		<div *ngIf="dialogStatus" class="demo-prompt-dialog-status">
+			<b>{{ dialogStatus | translate: { result: dialogResult } }}</b>
+		</div>
+	</example-viewer>
+</section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>

showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.scss

@@ -0,0 +1,16 @@
+.dialog-demo-content {
+  //display: flex;
+  //flex-direction: row;
+  //justify-content: space-between;
+  display: block;
+  text-align: center;
+
+  button {
+    margin: 10px;
+  }
+}
+
+.demo-prompt-dialog-status {
+  text-align: center;
+  padding: 16px 0;
+}