From 99f58640b3bf78e68e8e13371ca581fbb1c72c2f Mon Sep 17 00:00:00 2001 From: christophercr Date: Mon, 4 Mar 2019 15:21:53 +0100 Subject: [PATCH] feat(stark-ui): implement Material dialogs presets: alert, confirm and prompt ISSUES CLOSED: #793 --- packages/stark-ui/assets/stark-ui-bundle.scss | 6 + packages/stark-ui/src/modules.ts | 1 + packages/stark-ui/src/modules/dialogs.ts | 2 + .../src/modules/dialogs/components.ts | 6 + .../components/alert-dialog-content.intf.ts | 3 + .../components/alert-dialog-theme.scss | 5 + .../components/alert-dialog.component.html | 9 ++ .../components/alert-dialog.component.scss | 8 ++ .../components/alert-dialog.component.ts | 26 +++++ .../components/confirm-dialog-content.intf.ts | 8 ++ .../components/confirm-dialog-theme.scss | 6 + .../components/confirm-dialog.component.html | 10 ++ .../components/confirm-dialog.component.scss | 8 ++ .../components/confirm-dialog.component.ts | 30 +++++ .../dialogs/components/dialog-content.intf.ts | 16 +++ .../components/prompt-dialog-content.intf.ts | 23 ++++ .../components/prompt-dialog-theme.scss | 6 + .../components/prompt-dialog.component.html | 15 +++ .../components/prompt-dialog.component.scss | 13 +++ .../components/prompt-dialog.component.ts | 34 ++++++ .../src/modules/dialogs/dialogs.module.ts | 15 +++ showcase/src/app/app-menu.config.ts | 7 ++ showcase/src/app/demo-ui/demo-ui.module.ts | 9 +- .../pages/dialogs/dialogs-page.component.html | 24 ++++ .../pages/dialogs/dialogs-page.component.scss | 16 +++ .../pages/dialogs/dialogs-page.component.ts | 110 ++++++++++++++++++ .../src/app/demo-ui/pages/dialogs/index.ts | 1 + showcase/src/app/demo-ui/pages/index.ts | 1 + showcase/src/app/demo-ui/routes.ts | 9 ++ .../examples/dialogs/predefined-dialogs.html | 9 ++ .../examples/dialogs/predefined-dialogs.ts | 88 ++++++++++++++ showcase/src/assets/translations/en.json | 35 ++++++ showcase/src/assets/translations/fr.json | 35 ++++++ showcase/src/assets/translations/nl.json | 35 ++++++ 34 files changed, 627 insertions(+), 2 deletions(-) create mode 100644 packages/stark-ui/src/modules/dialogs.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components/alert-dialog-content.intf.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components/alert-dialog-theme.scss create mode 100644 packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.html create mode 100644 packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.scss create mode 100644 packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components/confirm-dialog-content.intf.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components/confirm-dialog-theme.scss create mode 100644 packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.html create mode 100644 packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.scss create mode 100644 packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components/dialog-content.intf.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components/prompt-dialog-content.intf.ts create mode 100644 packages/stark-ui/src/modules/dialogs/components/prompt-dialog-theme.scss create mode 100644 packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.html create mode 100644 packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.scss create mode 100644 packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.ts create mode 100644 packages/stark-ui/src/modules/dialogs/dialogs.module.ts create mode 100644 showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.html create mode 100644 showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.scss create mode 100644 showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.ts create mode 100644 showcase/src/app/demo-ui/pages/dialogs/index.ts create mode 100644 showcase/src/assets/examples/dialogs/predefined-dialogs.html create mode 100644 showcase/src/assets/examples/dialogs/predefined-dialogs.ts diff --git a/packages/stark-ui/assets/stark-ui-bundle.scss b/packages/stark-ui/assets/stark-ui-bundle.scss index 095e9b817e..4340dc7c26 100644 --- a/packages/stark-ui/assets/stark-ui-bundle.scss +++ b/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"; diff --git a/packages/stark-ui/src/modules.ts b/packages/stark-ui/src/modules.ts index b5dce8bfb2..a87c747700 100644 --- a/packages/stark-ui/src/modules.ts +++ b/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"; diff --git a/packages/stark-ui/src/modules/dialogs.ts b/packages/stark-ui/src/modules/dialogs.ts new file mode 100644 index 0000000000..6752571a1a --- /dev/null +++ b/packages/stark-ui/src/modules/dialogs.ts @@ -0,0 +1,2 @@ +export * from "./dialogs/dialogs.module"; +export * from "./dialogs/components"; diff --git a/packages/stark-ui/src/modules/dialogs/components.ts b/packages/stark-ui/src/modules/dialogs/components.ts new file mode 100644 index 0000000000..ecc5a7f354 --- /dev/null +++ b/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"; diff --git a/packages/stark-ui/src/modules/dialogs/components/alert-dialog-content.intf.ts b/packages/stark-ui/src/modules/dialogs/components/alert-dialog-content.intf.ts new file mode 100644 index 0000000000..3a36994937 --- /dev/null +++ b/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 {} diff --git a/packages/stark-ui/src/modules/dialogs/components/alert-dialog-theme.scss b/packages/stark-ui/src/modules/dialogs/components/alert-dialog-theme.scss new file mode 100644 index 0000000000..cfad2f81bb --- /dev/null +++ b/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); + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.html b/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.html new file mode 100644 index 0000000000..c00aeb2fc2 --- /dev/null +++ b/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.html @@ -0,0 +1,9 @@ +

{{ content.title || "" | translate }}

+ +
+ {{ content.textContent || "" | translate }} +
+ +
+ +
diff --git a/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.scss b/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.scss new file mode 100644 index 0000000000..cec04ec39d --- /dev/null +++ b/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; + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.ts b/packages/stark-ui/src/modules/dialogs/components/alert-dialog.component.ts new file mode 100644 index 0000000000..c437e0ed35 --- /dev/null +++ b/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, + @Inject(MAT_DIALOG_DATA) public content: StarkAlertDialogContent + ) { + } + + public onOk(): void { + this.dialogRef.close("ok"); + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/confirm-dialog-content.intf.ts b/packages/stark-ui/src/modules/dialogs/components/confirm-dialog-content.intf.ts new file mode 100644 index 0000000000..14bb9e5b23 --- /dev/null +++ b/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; +} diff --git a/packages/stark-ui/src/modules/dialogs/components/confirm-dialog-theme.scss b/packages/stark-ui/src/modules/dialogs/components/confirm-dialog-theme.scss new file mode 100644 index 0000000000..121cbb96e5 --- /dev/null +++ b/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); + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.html b/packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.html new file mode 100644 index 0000000000..35ea384bfa --- /dev/null +++ b/packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.html @@ -0,0 +1,10 @@ +

{{ content.title || "" | translate }}

+ +
+ {{ content.textContent || "" | translate }} +
+ +
+ + +
diff --git a/packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.scss b/packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.scss new file mode 100644 index 0000000000..8e0c860b43 --- /dev/null +++ b/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; + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.ts b/packages/stark-ui/src/modules/dialogs/components/confirm-dialog.component.ts new file mode 100644 index 0000000000..b4b87baa52 --- /dev/null +++ b/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, + @Inject(MAT_DIALOG_DATA) public content: StarkConfirmDialogContent + ) { + } + + public onCancel(): void { + this.dialogRef.close("cancel"); + } + + public onOk(): void { + this.dialogRef.close("ok"); + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/dialog-content.intf.ts b/packages/stark-ui/src/modules/dialogs/components/dialog-content.intf.ts new file mode 100644 index 0000000000..11f2dbea2a --- /dev/null +++ b/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; +} diff --git a/packages/stark-ui/src/modules/dialogs/components/prompt-dialog-content.intf.ts b/packages/stark-ui/src/modules/dialogs/components/prompt-dialog-content.intf.ts new file mode 100644 index 0000000000..c63a9b7ed3 --- /dev/null +++ b/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; +} diff --git a/packages/stark-ui/src/modules/dialogs/components/prompt-dialog-theme.scss b/packages/stark-ui/src/modules/dialogs/components/prompt-dialog-theme.scss new file mode 100644 index 0000000000..d17faaf2f4 --- /dev/null +++ b/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); + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.html b/packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.html new file mode 100644 index 0000000000..b90284360e --- /dev/null +++ b/packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.html @@ -0,0 +1,15 @@ +

{{ content.title || "" | translate }}

+ +
+ {{ content.textContent || "" | translate }} + + + {{ content.label || content.placeholder }} + + +
+ +
+ + +
diff --git a/packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.scss b/packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.scss new file mode 100644 index 0000000000..201cb8ffd4 --- /dev/null +++ b/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; + } +} diff --git a/packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.ts b/packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.ts new file mode 100644 index 0000000000..a53e5dc0fb --- /dev/null +++ b/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, + @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); + } +} diff --git a/packages/stark-ui/src/modules/dialogs/dialogs.module.ts b/packages/stark-ui/src/modules/dialogs/dialogs.module.ts new file mode 100644 index 0000000000..6828091c7b --- /dev/null +++ b/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 {} diff --git a/showcase/src/app/app-menu.config.ts b/showcase/src/app/app-menu.config.ts index 92e2cb3e60..97bc5d6a50 100644 --- a/showcase/src/app/app-menu.config.ts +++ b/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", diff --git a/showcase/src/app/demo-ui/demo-ui.module.ts b/showcase/src/app/demo-ui/demo-ui.module.ts index 924adfa9f4..cb1fc9fc4e 100644 --- a/showcase/src/app/demo-ui/demo-ui.module.ts +++ b/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, diff --git a/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.html b/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.html new file mode 100644 index 0000000000..e08f2e7939 --- /dev/null +++ b/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.html @@ -0,0 +1,24 @@ +

SHOWCASE.DEMO.DIALOGS.TITLE

+
+

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

+ +
+ + + +
+ +
+ {{ dialogStatus | translate: { result: dialogResult } }} +
+ +
+ diff --git a/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.scss b/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.scss new file mode 100644 index 0000000000..e22251a393 --- /dev/null +++ b/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; +} diff --git a/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.ts b/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.ts new file mode 100644 index 0000000000..6c03baed17 --- /dev/null +++ b/showcase/src/app/demo-ui/pages/dialogs/dialogs-page.component.ts @@ -0,0 +1,110 @@ +import { Component, Inject } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; +import { + StarkAlertDialogComponent, + StarkAlertDialogContent, + StarkAlertDialogResult, + StarkConfirmDialogComponent, + StarkConfirmDialogContent, + StarkConfirmDialogResult, + StarkPromptDialogComponent, + StarkPromptDialogContent, + StarkPromptDialogResult +} from "@nationalbankbelgium/stark-ui"; +import { ReferenceLink } from "../../../shared/components/reference-block"; + +@Component({ + selector: "demo-dialogs", + templateUrl: "./dialogs-page.component.html", + styleUrls: ["./dialogs-page.component.scss"] +}) +export class DemoDialogsPageComponent { + public referenceList: ReferenceLink[]; + public dialogStatus: string; + public dialogResult: any = ""; + + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService, public dialogService: MatDialog) { + this.referenceList = [ + { + label: "Stark Alert Dialog component", + url: "blabla" + }, + { + label: "Stark Confirm Dialog component", + url: "blabla" + }, + { + label: "Stark Prompt Dialog component", + url: "blabla" + } + ]; + } + + public showAlert(): void { + this.dialogService + .open(StarkAlertDialogComponent, { + data: { + title: "SHOWCASE.DEMO.DIALOGS.ALERT.TITLE", + textContent: "SHOWCASE.DEMO.DIALOGS.ALERT.TEXT", + ok: "SHOWCASE.DEMO.DIALOGS.ALERT.OK" + }, + ariaLabel: "Alert Dialog Demo" + }) + .afterClosed() + .subscribe((result: StarkAlertDialogResult) => { + this.dialogResult = result || "undefined"; + if (result === "ok") { + this.dialogStatus = "SHOWCASE.DEMO.DIALOGS.ALERT.RESULT_OK"; + } else { + this.dialogStatus = "SHOWCASE.DEMO.DIALOGS.ALERT.RESULT_CANCEL"; + } + }); + } + + public showConfirm(): void { + this.dialogService + .open(StarkConfirmDialogComponent, { + data: { + title: "SHOWCASE.DEMO.DIALOGS.CONFIRM.TITLE", + textContent: "SHOWCASE.DEMO.DIALOGS.CONFIRM.TEXT", + ok: "SHOWCASE.DEMO.DIALOGS.CONFIRM.OK", + cancel: "SHOWCASE.DEMO.DIALOGS.CONFIRM.CANCEL" + }, + ariaLabel: "Lucky day" + }) + .afterClosed() + .subscribe((result: StarkConfirmDialogResult) => { + this.dialogResult = result || "undefined"; + if (result === "ok") { + this.dialogStatus = "SHOWCASE.DEMO.DIALOGS.CONFIRM.RESULT_OK"; + } else { + this.dialogStatus = "SHOWCASE.DEMO.DIALOGS.CONFIRM.RESULT_CANCEL"; + } + }); + } + + public showPrompt(): void { + this.dialogService + .open(StarkPromptDialogComponent, { + data: { + title: "SHOWCASE.DEMO.DIALOGS.PROMPT.TITLE", + textContent: "SHOWCASE.DEMO.DIALOGS.PROMPT.TEXT", + placeholder: "SHOWCASE.DEMO.DIALOGS.PROMPT.PLACEHOLDER", + initialValue: "", + ok: "SHOWCASE.DEMO.DIALOGS.PROMPT.OK", + cancel: "SHOWCASE.DEMO.DIALOGS.PROMPT.CANCEL" + }, + ariaLabel: "Dog name" + }) + .afterClosed() + .subscribe((result: StarkPromptDialogResult) => { + this.dialogResult = result || "undefined"; + if (result === "cancel") { + this.dialogStatus = "SHOWCASE.DEMO.DIALOGS.PROMPT.RESULT_CANCEL"; + } else { + this.dialogStatus = "SHOWCASE.DEMO.DIALOGS.PROMPT.RESULT_OK"; + } + }); + } +} diff --git a/showcase/src/app/demo-ui/pages/dialogs/index.ts b/showcase/src/app/demo-ui/pages/dialogs/index.ts new file mode 100644 index 0000000000..6d751f1ba6 --- /dev/null +++ b/showcase/src/app/demo-ui/pages/dialogs/index.ts @@ -0,0 +1 @@ +export * from "./dialogs-page.component"; diff --git a/showcase/src/app/demo-ui/pages/index.ts b/showcase/src/app/demo-ui/pages/index.ts index 5ea00dc1c8..e5b903ec07 100644 --- a/showcase/src/app/demo-ui/pages/index.ts +++ b/showcase/src/app/demo-ui/pages/index.ts @@ -4,6 +4,7 @@ export * from "./breadcrumb"; export * from "./collapsible"; export * from "./date-picker"; export * from "./date-range-picker"; +export * from "./dialogs"; export * from "./dropdown"; export * from "./footer"; export * from "./generic-search"; diff --git a/showcase/src/app/demo-ui/routes.ts b/showcase/src/app/demo-ui/routes.ts index 8086e497ca..5f8f418c3c 100644 --- a/showcase/src/app/demo-ui/routes.ts +++ b/showcase/src/app/demo-ui/routes.ts @@ -6,6 +6,7 @@ import { DemoCollapsiblePageComponent, DemoDatePickerPageComponent, DemoDateRangePickerPageComponent, + DemoDialogsPageComponent, DemoDropdownPageComponent, DemoFooterPageComponent, DemoGenericSearchPageComponent, @@ -77,6 +78,14 @@ export const DEMO_STATES: Ng2StateDeclaration[] = [ }, views: { "@": { component: DemoDateRangePickerPageComponent } } }, + { + name: "demo-ui.dialogs", + url: "/dialogs", + data: { + translationKey: "SHOWCASE.DEMO.DIALOGS.TITLE" + }, + views: { "@": { component: DemoDialogsPageComponent } } + }, { name: "demo-ui.dropdown", url: "/dropdown", diff --git a/showcase/src/assets/examples/dialogs/predefined-dialogs.html b/showcase/src/assets/examples/dialogs/predefined-dialogs.html new file mode 100644 index 0000000000..df831fbf2b --- /dev/null +++ b/showcase/src/assets/examples/dialogs/predefined-dialogs.html @@ -0,0 +1,9 @@ +
+ + + +
+ +
+ {{ dialogStatus }} +
diff --git a/showcase/src/assets/examples/dialogs/predefined-dialogs.ts b/showcase/src/assets/examples/dialogs/predefined-dialogs.ts new file mode 100644 index 0000000000..da39fcf381 --- /dev/null +++ b/showcase/src/assets/examples/dialogs/predefined-dialogs.ts @@ -0,0 +1,88 @@ +import { Component, Inject } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; +import { + StarkAlertDialogComponent, + StarkAlertDialogContent, + StarkAlertDialogResult, + StarkConfirmDialogComponent, + StarkConfirmDialogContent, + StarkConfirmDialogResult, + StarkPromptDialogComponent, + StarkPromptDialogContent, + StarkPromptDialogResult +} from "@nationalbankbelgium/stark-ui"; + +@Component({ + selector: "demo-dialogs", + templateUrl: "./demo-dialogs.component.html" +}) +export class DemoDialogsComponent { + public dialogStatus: string; + + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService, public dialogService: MatDialog) {} + + public showAlert(): void { + this.dialogService + .open(StarkAlertDialogComponent, { + data: { + title: "This is an alert title", + textContent: "You can specify some description text in here.", + ok: "Got it!" + }, + ariaLabel: "Alert Dialog Demo" + }) + .afterClosed() + .subscribe((result: StarkAlertDialogResult) => { + if (result === "ok") { + this.dialogStatus = "Alert dialog closed with value '" + result + "'"; + } else { + this.dialogStatus = "Alert dialog cancelled with value '" + result + "'"; + } + }); + } + + public showConfirm(): void { + this.dialogService + .open(StarkConfirmDialogComponent, { + data: { + title: "Would you like to delete your debt?", + textContent: "All of the banks have agreed to forgive you your debts.", + ok: "Please do it!", + cancel: "Sounds like a scam" + }, + ariaLabel: "Lucky day" + }) + .afterClosed() + .subscribe((result: StarkConfirmDialogResult) => { + if (result === "ok") { + this.dialogStatus = "You decided to get rid of your debt."; + } else { + this.dialogStatus = "You decided to keep your debt."; + } + }); + } + + public showPrompt(): void { + this.dialogService + .open(StarkPromptDialogComponent, { + data: { + title: "What would you name your dog?", + textContent: "Bowser is a common name.", + placeholder: "Dog name", + initialValue: "", + ok: "Okay!", + cancel: "I'm a cat person" + }, + ariaLabel: "Dog name" + }) + .afterClosed() + .subscribe((result: StarkPromptDialogResult) => { + if (result === "cancel") { + this.dialogStatus = "You didn't name your dog."; + } else { + this.dialogStatus = "You decided to name your dog '" + result + "'"; + } + }); + } +} diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 237a251231..dd74462f74 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -51,6 +51,41 @@ "DATE_RANGE_PICKER": { "TITLE": "Date range picker" }, + "DIALOGS": { + "ALERT": { + "TITLE": "This is an alert title", + "TEXT": "You can specify some description text in here.", + "OK": "Got it!", + "RESULT_OK": "Alert dialog closed with value '{{ result }}'", + "RESULT_CANCEL": "Alert dialog cancelled with value '{{ result }}'" + }, + "CONFIRM": { + "TITLE": "Would you like to delete your debt?", + "TEXT": "All of the banks have agreed to forgive you your debts.", + "OK": "Please do it!", + "CANCEL": "Sounds like a scam", + "RESULT_OK": "You decided to get rid of your debt.", + "RESULT_CANCEL": "You decided to keep your debt." + }, + "PROMPT": { + "TITLE": "What would you name your dog?", + "TEXT": "Bowser is a common name.", + "PLACEHOLDER": "Dog name", + "OK": "Okay!", + "CANCEL": "I'm a cat person", + "RESULT_OK": "You decided to name your dog '{{ result }}'", + "RESULT_CANCEL": "You didn't name your dog." + }, + "FULLSCREEN": { + "TITLE": "Warning!", + "TEXT": "There’s a problem with this parcel." + }, + "TITLE": "Dialogs", + "PREDEFINED_DIALOGS": "Predefined dialogs", + "ALERT_DIALOG": "Alert dialog", + "CONFIRM_DIALOG": "Confirm dialog", + "PROMPT_DIALOG": "Prompt dialog" + }, "DROPDOWN": { "PR": "IT applications", "BLANK": "Single selection with default blank", diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index 9591713577..d70e185d26 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -51,6 +51,41 @@ "DATE_RANGE_PICKER": { "TITLE": "Date range picker" }, + "DIALOGS": { + "ALERT": { + "TITLE": "C'est un titre d'alerte", + "TEXT": "Vous pouvez spécifier un texte de description ici.", + "OK": "Je l'ai!", + "RESULT_OK": "Dialogue d'alerte fermé avec valeur '{{ result }}'", + "RESULT_CANCEL": "dialogue d'alerte annulée avec valeur '{{ result }}'" + }, + "CONFIRM": { + "TITLE": "Voulez-vous supprimer votre dette?", + "TEXT": "Toutes les banques ont accepté de vous pardonner vos dettes.", + "OK": "Faites-le!", + "CANCEL": "On dirait une arnaque", + "RESULT_OK": "Vous avez décidé de vous débarrasser de votre dette.", + "RESULT_CANCEL": "Vous avez décidé de garder votre dette." + }, + "PROMPT": { + "TITLE": "Comment nommeriez-vous votre chien?", + "TEXT": "Bowser est un nom commun.", + "PLACEHOLDER": "Nom du chien", + "OK": "D'accord!", + "CANCEL": "Je suis une personne de chat", + "RESULT_OK": "Vous avez décidé de nommer votre chien '{{ result }}'", + "RESULT_CANCEL": "Vous n'avez pas nommé votre chien." + }, + "FULLSCREEN": { + "TITLE": "Attention!", + "TEXT": "Il y a un problème avec ce colis." + }, + "TITLE": "Dialogues", + "PREDEFINED_DIALOGS": "Dialogues prédéfinis", + "ALERT_DIALOG": "Dialogue d'alerte", + "CONFIRM_DIALOG": "Dialogue de confirmation", + "PROMPT_DIALOG": "Dialogue d'invite" + }, "DROPDOWN": { "PR": "Applications informatiques", "BLANK": "Option par défaut (blank)", diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 0d4d47a7d7..941aa2b21e 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -51,6 +51,41 @@ "DATE_RANGE_PICKER": { "TITLE": "Date range picker" }, + "DIALOGS": { + "ALERT": { + "TITLE": "Dit is een waarschuwing titel", + "TEXT": "U kunt een aantal beschrijvende tekst opgeven in hier.", + "OK": "Begrepen!", + "RESULT_OK": "Waarschuwingsdialoog gesloten met waarde '{{ result }}'", + "RESULT_CANCEL": "Waarschuwingsdialoog geannuleerd met waarde '{{ result }}'" + }, + "CONFIRM": { + "TITLE": "Wilt u uw schuld te schrappen?", + "TEXT": "Alle banken hebben afgesproken om je te vergeven uw schulden.", + "OK": "Doe het alsjeblieft!", + "CANCEL": "Klinkt als een scam", + "RESULT_OK": "Je hebt besloten om je schuld kwijt te raken.", + "RESULT_CANCEL": "Je hebt besloten je schuld te houden." + }, + "PROMPT": { + "TITLE": "Wat zou u uw hond te noemen?", + "TEXT": "Bowser is een veel voorkomende naam.", + "PLACEHOLDER": "Naam van de hond", + "OK": "Okay!", + "CANCEL": "Ik ben een kat persoon", + "RESULT_OK": "Je hebt besloten om je hond een naam te geven '{{ result }}'", + "RESULT_CANCEL": "Je hebt je hond niet genoemd." + }, + "FULLSCREEN": { + "TITLE": "Waarschuwing!", + "TEXT": "Er is een probleem met dit pakket." + }, + "TITLE": "Dialogen", + "PREDEFINED_DIALOGS": "Voorgedefinieerde dialogen", + "ALERT_DIALOG": "Waarschuwingsdialoog", + "CONFIRM_DIALOG": "bevestigingsdialoog", + "PROMPT_DIALOG": "Promptdialoog" + }, "DROPDOWN": { "PR": "Informaticatoepassingen", "BLANK": "Bij verstek keus (blank)",