[ADF-4327] added templating for content dialog (#4549)

* [ADF-4327] added templating for content dialog

* [ADF-4327] added unit test and documentation

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": {

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: [
         {

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'

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' },

demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.html

@@ -0,0 +1,18 @@
+<mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Confirm Dialog Default Behaviour
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <button mat-raised-button (click)="openConfirmDefaultDialog()">Open Default Dialog</button>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Confirm Dialog Custom Template
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <button mat-raised-button (click)="openConfirmCustomDialog()">Open Custom Dialog</button>
+    </mat-expansion-panel>
+  </mat-accordion>

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: '<div> <p>A</p> <p>Custom</p> <p>Content</p> </div>'
+            },
+            minWidth: '250px'
+        });
+    }
+}