diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index b9e088971b..17e745dcd7 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -94,7 +94,8 @@
"ICONS": "Icons",
"PEOPLE_GROUPS_CLOUD": "People/Group Cloud",
"PEOPLE_CLOUD": "People Cloud Component",
- "GROUPS_CLOUD": "Groups Cloud Component"
+ "GROUPS_CLOUD": "Groups Cloud Component",
+ "CONFIRM-DIALOG": "Confirmation Dialog"
},
"TRASHCAN": {
"ACTIONS": {
diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index 8487d54fdc..2b06d1f38c 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -81,6 +81,7 @@ import { TemplateDemoComponent } from './components/template-list/template-demo.
import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component';
import { CloudSettingsComponent } from './components/cloud/cloud-settings.component';
import { NestedMenuPositionDirective } from './components/cloud/directives/nested-menu-position.directive';
+import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
@NgModule({
imports: [
@@ -148,7 +149,8 @@ import { NestedMenuPositionDirective } from './components/cloud/directives/neste
TemplateDemoComponent,
PeopleGroupCloudDemoComponent,
CloudSettingsComponent,
- NestedMenuPositionDirective
+ NestedMenuPositionDirective,
+ ConfirmDialogExampleComponent
],
providers: [
{
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index 75f35e58ca..f3ab662b28 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -49,6 +49,7 @@ import { StartProcessCloudDemoComponent } from './components/cloud/start-process
import { TaskDetailsCloudDemoComponent } from './components/cloud/task-details-cloud-demo.component';
import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-details-cloud-demo.component';
import { TemplateDemoComponent } from './components/template-list/template-demo.component';
+import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
@@ -209,6 +210,10 @@ export const appRoutes: Routes = [
path: 'node-selector',
loadChildren: 'app/components/content-node-selector/content-node-selector.module#AppContentNodeSelectorModule'
},
+ {
+ path: 'confirm-dialog',
+ component: ConfirmDialogExampleComponent
+ },
{
path: 'settings-layout',
loadChildren: 'app/components/settings/settings.module#AppSettingsModule'
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index f1075cfbc9..e084b44383 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -41,6 +41,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
{ href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS' },
{ href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW' },
+ { href: '/confirm-dialog', icon: 'view_headline', title: 'APP_LAYOUT.CONFIRM-DIALOG' },
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
{ href: '/sites', icon: 'format_list_bulleted', title: 'APP_LAYOUT.SITES' },
diff --git a/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.html b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.html
new file mode 100644
index 0000000000..8aa5bc2bce
--- /dev/null
+++ b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.html
@@ -0,0 +1,18 @@
+
+
+
+
+ Confirm Dialog Default Behaviour
+
+
+
+
+
+
+
+ Confirm Dialog Custom Template
+
+
+
+
+
diff --git a/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.scss b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts
new file mode 100644
index 0000000000..66dc79ce91
--- /dev/null
+++ b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts
@@ -0,0 +1,51 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
+
+@Component({
+ selector: 'app-confirm-dialog-example',
+ templateUrl: 'confirm-dialog-example.component.html',
+ styleUrls: ['confirm-dialog-example.component.scss']
+})
+export class ConfirmDialogExampleComponent {
+
+ constructor(private dialog: MatDialog) { }
+
+ openConfirmDefaultDialog() {
+ this.dialog.open(ConfirmDialogComponent, {
+ data: {
+ title: 'Upload',
+ message: `This is the default message`
+ },
+ minWidth: '250px'
+ });
+ }
+
+ openConfirmCustomDialog() {
+ this.dialog.open(ConfirmDialogComponent, {
+ data: {
+ title: 'Upload',
+ message: `This is the default message`,
+ htmlContent: '
A
Custom
Content
'
+ },
+ minWidth: '250px'
+ });
+ }
+}
diff --git a/docs/content-services/dialogs/confirm.dialog.md b/docs/content-services/dialogs/confirm.dialog.md
index 2e593e792a..5c5a4e7e45 100644
--- a/docs/content-services/dialogs/confirm.dialog.md
+++ b/docs/content-services/dialogs/confirm.dialog.md
@@ -37,6 +37,34 @@ dialogRef.afterClosed().subscribe((result) => {
});
```
+### Rendering custom html body
+It is possible now to render a custom html instead of a plain message as confirm body via the attribute `htmlContent`. The html will be sanitized and then showed.
+
+
+```ts
+constructor(private dialog: MatDialog) {}
+
+...
+
+let files = [
+ // Files defined here...
+];
+
+const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+ data: {
+ title: 'Upload',
+ htmlContent: '
A
Custom
Content
'
+ },
+ minWidth: '250px'
+});
+
+dialogRef.afterClosed().subscribe((result) => {
+ if (result === true) {
+ event.resumeUpload();
+ }
+});
+```
+
## Details
This component lets the user make a yes/no choice to confirm an action. Use the
diff --git a/lib/content-services/dialogs/confirm.dialog.html b/lib/content-services/dialogs/confirm.dialog.html
new file mode 100644
index 0000000000..0d7869e587
--- /dev/null
+++ b/lib/content-services/dialogs/confirm.dialog.html
@@ -0,0 +1,17 @@
+
{{ title | translate }}
+
+
+ {{ message | translate }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/content-services/dialogs/confirm.dialog.scss b/lib/content-services/dialogs/confirm.dialog.scss
new file mode 100644
index 0000000000..2475496a16
--- /dev/null
+++ b/lib/content-services/dialogs/confirm.dialog.scss
@@ -0,0 +1,7 @@
+.adf-dialog-spacer {
+ flex: 1 1 auto;
+}
+
+.adf-confirm-dialog .mat-dialog-actions .mat-button-wrapper {
+ text-transform: uppercase;
+}
diff --git a/lib/content-services/dialogs/confirm.dialog.spec.ts b/lib/content-services/dialogs/confirm.dialog.spec.ts
new file mode 100644
index 0000000000..dba5684748
--- /dev/null
+++ b/lib/content-services/dialogs/confirm.dialog.spec.ts
@@ -0,0 +1,143 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { ComponentFixture } from '@angular/core/testing';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { setupTestBed } from '@alfresco/adf-core';
+import { ConfirmDialogComponent } from './confirm.dialog';
+import { ContentTestingModule } from '../testing/content.testing.module';
+import { By } from '@angular/platform-browser';
+
+describe('Confirm Dialog Component', () => {
+ let fixture: ComponentFixture;
+ let component: ConfirmDialogComponent;
+ const dialogRef = {
+ close: jasmine.createSpy('close')
+ };
+
+ const data = {
+ title: 'Fake Title',
+ message: 'Base Message',
+ yesLabel: 'TAKE THIS',
+ noLabel: 'MAYBE NO'
+ };
+
+ setupTestBed({
+ imports: [ContentTestingModule],
+ providers: [
+ { provide: MatDialogRef, useValue: dialogRef },
+ { provide: MAT_DIALOG_DATA, useValue: data }
+ ]
+ });
+
+ beforeEach(() => {
+ dialogRef.close.calls.reset();
+ fixture = TestBed.createComponent(ConfirmDialogComponent);
+ component = fixture.componentInstance;
+ });
+
+ afterEach(() => {
+ fixture.destroy();
+ });
+
+ describe('When no html is given', () => {
+ beforeEach(() => {
+ fixture.detectChanges();
+ });
+
+ it('should init form with folder name and description', () => {
+ expect(component.title).toBe('Fake Title');
+ expect(component.message).toBe('Base Message');
+ expect(component.yesLabel).toBe('TAKE THIS');
+ expect(component.noLabel).toBe('MAYBE NO');
+ });
+
+ it('should render the title', () => {
+ const titleElement = fixture.debugElement.query(
+ By.css('[data-automation-id="adf-confirm-dialog-title"]')
+ );
+ expect(titleElement).not.toBeNull();
+ expect(titleElement.nativeElement.innerText).toBe('Fake Title');
+ });
+
+ it('should render the message', () => {
+ const messageElement = fixture.debugElement.query(
+ By.css('[data-automation-id="adf-confirm-dialog-base-message"]')
+ );
+ expect(messageElement).not.toBeNull();
+ expect(messageElement.nativeElement.innerText).toBe('Base Message');
+ });
+
+ it('should render the YES label', () => {
+ const messageElement = fixture.debugElement.query(
+ By.css('[data-automation-id="adf-confirm-dialog-confirmation"]')
+ );
+ expect(messageElement).not.toBeNull();
+ expect(messageElement.nativeElement.innerText).toBe('TAKE THIS');
+ });
+
+ it('should render the NO label', () => {
+ const messageElement = fixture.debugElement.query(
+ By.css('[data-automation-id="adf-confirm-dialog-reject"]')
+ );
+ expect(messageElement).not.toBeNull();
+ expect(messageElement.nativeElement.innerText).toBe('MAYBE NO');
+ });
+ });
+
+ describe('When custom html is given', () => {
+ beforeEach(() => {
+ component.htmlContent = `
I am about to do to you what Limp Bizkit did to music in the late ’90s.
`;
+ fixture.detectChanges();
+ });
+
+ it('should render the title', () => {
+ const titleElement = fixture.debugElement.query(
+ By.css('[data-automation-id="adf-confirm-dialog-title"]')
+ );
+ expect(titleElement).not.toBeNull();
+ expect(titleElement.nativeElement.innerText).toBe('Fake Title');
+ });
+
+ it('should render the custom html', () => {
+ const customElement = fixture.nativeElement.querySelector(
+ '[data-automation-id="adf-confirm-dialog-custom-content"] div'
+ );
+ expect(customElement).not.toBeNull();
+ expect(customElement.innerText).toBe(
+ 'I am about to do to you what Limp Bizkit did to music in the late ’90s.'
+ );
+ });
+
+ it('should render the YES label', () => {
+ const messageElement = fixture.debugElement.query(
+ By.css('[data-automation-id="adf-confirm-dialog-confirmation"]')
+ );
+ expect(messageElement).not.toBeNull();
+ expect(messageElement.nativeElement.innerText).toBe('TAKE THIS');
+ });
+
+ it('should render the NO label', () => {
+ const messageElement = fixture.debugElement.query(
+ By.css('[data-automation-id="adf-confirm-dialog-reject"]')
+ );
+ expect(messageElement).not.toBeNull();
+ expect(messageElement.nativeElement.innerText).toBe('MAYBE NO');
+ });
+ });
+});
diff --git a/lib/content-services/dialogs/confirm.dialog.ts b/lib/content-services/dialogs/confirm.dialog.ts
index d2e89d7272..b2ffef01ac 100644
--- a/lib/content-services/dialogs/confirm.dialog.ts
+++ b/lib/content-services/dialogs/confirm.dialog.ts
@@ -15,29 +15,14 @@
* limitations under the License.
*/
-import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, ViewEncapsulation, SecurityContext } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
+import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'adf-confirm-dialog',
- template: `
-