From f7372eef31070e93bafe8bb4072bb1e2295210fe Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 31 Jan 2022 12:28:30 +0100 Subject: [PATCH 1/3] Types for Dialog component --- .../dialog-api/dialog-api.component.html | 14 ++++- .../dialog-table-properties.component.html | 16 +++--- .../lib/dxc-dialog/dxc-dialog.component.ts | 57 +++++++++++++++++-- 3 files changed, 71 insertions(+), 16 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/dialog-api/dialog-api.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/dialog-api/dialog-api.component.html index 7edda6af8..908255e90 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/dialog-api/dialog-api.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/dialog-api/dialog-api.component.html @@ -1,5 +1,15 @@ - + - \ No newline at end of file +

+ This component uses the pattern content projection, so all content inside will + be accepted and rendered inside the dialog. +

+ + diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html index 6e9eefd2a..e3dc9bc50 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html @@ -21,16 +21,16 @@ onCloseClick: EventEmitter - This function will be called when the user clicks the close 'x' button. - The user has the responsibility of hidding the modal. + This event will emit when the user clicks the close 'x' button. + The responsibility of hiding the modal lies with the user. onBackgroundClick: EventEmitter - This function will be called when the user clicks background of the modal - button. The user has the responsibility of hidding the modal. + This event will emit when the user clicks the background. + The responsibility of hiding the modal lies with the user. @@ -38,21 +38,21 @@ true - If true, the dialog will be displayed over a darker background. + If true, the dialog will be displayed over a darker background that covers the content behind - padding: any (string | object) + padding: string | object Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an - object with 'top', 'bottom', 'left' and 'right' properties in order to + object with 'top', 'bottom', 'left' and 'right' to specify different padding sizes. tabIndexValue: number 0 - Value of the tabindex given to the close 'x' button. + Value of the tabindex given to the close button. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts index 1a652b8cf..bad275586 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts @@ -15,12 +15,32 @@ import { } from "@angular/cdk/coercion"; import { BackgroundProviderService } from "../background-provider/service/background-provider.service"; +type Space = { + xxsmall: "6px"; + xsmall: "16px"; + small: "24px"; + medium: "36px"; + large: "48px"; + xlarge: "64px"; + xxlarge: "100px"; +}; + +type Padding = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + @Component({ selector: "dxc-dialog", templateUrl: "./dxc-dialog.component.html", providers: [CssUtils, BackgroundProviderService], }) export class DxcDialogComponent { + /** + * If true, the dialog will be displayed over a darker background that covers the content behind. + */ @Input() get overlay(): boolean { return this._overlay; @@ -29,6 +49,10 @@ export class DxcDialogComponent { this._overlay = coerceBooleanProperty(value); } private _overlay; + + /** + * If true, the close 'x' button will be visible. + */ @Input() get isCloseVisible(): boolean { return this._isCloseVisible; @@ -37,7 +61,18 @@ export class DxcDialogComponent { this._isCloseVisible = coerceBooleanProperty(value); } private _isCloseVisible = true; - @Input() padding: any; + + /** + * Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | + * 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an + * object with 'top', 'bottom', 'left' and 'right' to + * specify different padding sizes. + */ + @Input() padding: Space | Padding; + + /** + * Value of the tabindex given to the close button. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -46,8 +81,18 @@ export class DxcDialogComponent { this._tabIndexValue = coerceNumberProperty(value); } private _tabIndexValue; - @Output() onCloseClick = new EventEmitter(); - @Output() onBackgroundClick = new EventEmitter(); + + /** + * This event will emit when the user clicks the close 'x' button. + * The responsibility of hiding the modal lies with the user. + */ + @Output() onCloseClick: EventEmitter = new EventEmitter(); + + /** + * This event will emit when the user clicks the background. + * The responsibility of hiding the modal lies with the user. + * */ + @Output() onBackgroundClick: EventEmitter = new EventEmitter(); @HostBinding("class") className; @@ -79,11 +124,11 @@ export class DxcDialogComponent { } public onCloseHandler($event: any): void { - this.onCloseClick.emit($event); + this.onCloseClick.emit(); } public onBackgroundClickHandler($event: any): void { - this.onBackgroundClick.emit($event); + this.onBackgroundClick.emit(); } private overlayStyle(overlay: boolean) { @@ -172,7 +217,7 @@ export class DxcDialogComponent { width: 3px; } ::-webkit-scrollbar-track { - background-color: #D9D9D9; + background-color: #d9d9d9; border-radius: 3px; } ::-webkit-scrollbar-thumb { From 8e26565266b27ae0a2c1bad333d980b5515f37a0 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 31 Jan 2022 13:32:16 +0100 Subject: [PATCH 2/3] adding some words for consistency --- .../dialog-table-properties.component.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html index e3dc9bc50..cc12f566c 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html @@ -21,16 +21,16 @@ onCloseClick: EventEmitter - This event will emit when the user clicks the close 'x' button. - The responsibility of hiding the modal lies with the user. + This event will emit when the user clicks the close 'x' button. The + responsibility of hiding the modal lies with the user. onBackgroundClick: EventEmitter - This event will emit when the user clicks the background. - The responsibility of hiding the modal lies with the user. + This event will emit when the user clicks the background. The + responsibility of hiding the modal lies with the user. @@ -38,7 +38,10 @@ true - If true, the dialog will be displayed over a darker background that covers the content behind + + If true, the dialog will be displayed over a darker background that covers + the content behind + padding: string | object @@ -46,7 +49,7 @@ Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an - object with 'top', 'bottom', 'left' and 'right' to + object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes. From c584b9d7d67691e44746e84df9678c92e01d4969 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 31 Jan 2022 17:09:29 +0100 Subject: [PATCH 3/3] removing modal from documentation --- .../dialog/properties/dialog-table-properties.component.html | 4 ++-- .../dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html index cc12f566c..a6530f471 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/dialog/properties/dialog-table-properties.component.html @@ -22,7 +22,7 @@ This event will emit when the user clicks the close 'x' button. The - responsibility of hiding the modal lies with the user. + responsibility of hiding the dialog lies with the user. @@ -30,7 +30,7 @@ This event will emit when the user clicks the background. The - responsibility of hiding the modal lies with the user. + responsibility of hiding the dialog lies with the user. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts index bad275586..2ab7251bd 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts @@ -84,13 +84,13 @@ export class DxcDialogComponent { /** * This event will emit when the user clicks the close 'x' button. - * The responsibility of hiding the modal lies with the user. + * The responsibility of hiding the dialog lies with the user. */ @Output() onCloseClick: EventEmitter = new EventEmitter(); /** * This event will emit when the user clicks the background. - * The responsibility of hiding the modal lies with the user. + * The responsibility of hiding the dialog lies with the user. * */ @Output() onBackgroundClick: EventEmitter = new EventEmitter();