[ADF-1820] Replaced md- prefix in docs with mat- (#2573)

docs/datatable.component.md

@@ -278,11 +278,11 @@ You can add a template that will be shown during the loading of your data:
         <loading-content-template>
             <ng-template>
                <!--Add your custom loading template here-->
-                <md-progress-spinner
+                <mat-progress-spinner
                     class="adf-document-list-loading-margin"
                     [color]="'primary'"
                     [mode]="'indeterminate'">
-                </md-progress-spinner>
+                </mat-progress-spinner>
             </ng-template>
         </loading-content-template>
         

docs/info-drawer-layout.component.md

@@ -4,18 +4,6 @@ Displays a sidebar-style information panel.
 
 ![Info drawer layout screenshot](docassets/images/infodrawerlayout.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic usage](#basic-usage)
-- [Details](#details)
-- [See also](#see-also)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic usage
 
 ```html
@@ -23,13 +11,13 @@ Displays a sidebar-style information panel.
     <div info-drawer-title>File info</div>
 
     <div info-drawer-buttons>
-        <md-icon>clear</md-icon>
+        <mat-icon>clear</mat-icon>
     </div>
 
     <div info-drawer-content>
-        <md-card>
+        <mat-card>
             Lorem ipsum dolor sit amet...
-        </md-card>
+        </mat-card>
     </div>
 </adf-info-drawer-layout>
 ```

docs/info-drawer.component.md

@@ -22,7 +22,7 @@ Displays a sidebar-style information panel with tabs.
 ```html
 <adf-info-drawer title="Activities" (currentTab)="getActiveTab($event)">
     <div info-drawer-buttons>
-        <md-icon (click)="close()">clear</md-icon>
+        <mat-icon (click)="close()">clear</mat-icon>
     </div>
 
     <adf-info-drawer-tab label="Activity">

docs/language-menu.component.md

@@ -1,21 +1,9 @@
 # Language Menu component
 
-Displays all the languages that are present in the "app.config.json" or the defaul one (EN).
+Displays all the languages that are present in the "app.config.json" or the default one (EN).
 
 ![Language Menu screenshot](docassets/images/languages-menu.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic usage](#basic-usage)
-- [Details](#details)
-- [Nested menu language](#nested-menu-language)
-- [Nested menu details](#nested-menu-details)
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic usage
 
 How to attach an ADF Language Menu as main menu
@@ -53,29 +41,29 @@ This is how the configuration looks like in the the "app.config.json"
 ```
 In case no setting is provided, the component shows only the English language.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+### Nested Menu language
-<!-- seealso start -->
-
-## Nested Menu language
 
 How to attach an ADF Language Menu as nested menu
 
 ```html
-<button md-icon-button class="dw-profile-menu" [mdMenuTriggerFor]="profileMenu">
+<button mat-icon-button class="dw-profile-menu" [matMenuTriggerFor]="profileMenu">
-    <md-icon>more_vert</md-icon>
+    <mat-icon>more_vert</mat-icon>
 </button>
-<md-menu #profileMenu="mdMenu">
+<mat-menu #profileMenu="matMenu">
-    <button md-menu-item>profile-settings</button>
+    <button mat-menu-item>profile-settings</button>
-    <button md-menu-item [matMenuTriggerFor]="langMenu">Languages</button>
+    <button mat-menu-item [matMenuTriggerFor]="langMenu">Languages</button>
-    <button md-menu-item>sign-out</button>
+    <button mat-menu-item>sign-out</button>
-</md-menu>
+</mat-menu>
-<md-menu #langMenu="mdMenu">
+<mat-menu #langMenu="matMenu">
     <adf-language-menu></adf-language-menu>
-</md-menu>
+</mat-menu>
 ```
 ![Nested Language Menu screenshot](docassets/images/languages-menu-nested.png)
 
-## Nested menu details
+### Nested menu details
 
 In the previous example we are using the ADF Language Menu as nested menu.
+
+<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+<!-- seealso start -->
 <!-- seealso end -->

docs/metadata-indicators.md

@@ -72,9 +72,9 @@ For demonstration purposes we are going to display several icons if underlying n
 ```html
 <div *ngIf="metadata">
     <ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
-        <md-icon>portrait</md-icon>
+        <mat-icon>portrait</mat-icon>
-        <md-icon>photo_filter</md-icon>
+        <mat-icon>photo_filter</mat-icon>
-        <md-icon>rotate_90_degrees_ccw</md-icon>
+        <mat-icon>rotate_90_degrees_ccw</mat-icon>
     </ng-container>
     <div *ngIf="metadata['cm:versionLabel'] !== '2.0'">
         {{metadata['cm:versionLabel']}}
@@ -82,7 +82,7 @@ For demonstration purposes we are going to display several icons if underlying n
 </div>
 ```
 
-Note: For a list of the icons that can be used with `<md-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
+Note: For a list of the icons that can be used with `<mat-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
 
 ## Testing component
 
@@ -111,9 +111,9 @@ import { Component, Input } from '@angular/core';
     template: `
         <div *ngIf="metadata">
             <ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
-                <md-icon>portrait</md-icon>
+                <mat-icon>portrait</mat-icon>
-                <md-icon>photo_filter</md-icon>
+                <mat-icon>photo_filter</mat-icon>
-                <md-icon>rotate_90_degrees_ccw</md-icon>
+                <mat-icon>rotate_90_degrees_ccw</mat-icon>
             </ng-container>
             <div *ngIf="metadata['cm:versionLabel'] !== '2.0'">
                 {{metadata['cm:versionLabel']}}

docs/node-delete.directive.md

@@ -1,25 +1,12 @@
 # Node Delete directive
 
-Delete multiple files and folders
+Deletes multiple files and folders.
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
 
 ## Basic Usage
 
 ```html
 <adf-toolbar>
-    <button md-icon-button
+    <button mat-icon-button
             (delete)="documentList.reload()"
             [adf-delete]="documentList.selection">
     </button>

docs/node-favorite.directive.md

@@ -1,25 +1,12 @@
 # Node Favorite directive
 
-Selectively toggle nodes as favorite
+Selectively toggles nodes as favorite
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
 
 ## Basic Usage
 
 ```html
 <adf-toolbar>
-    <button md-icon-button
+    <button mat-icon-button
             (toggle)="done()"
             [adf-node-favorite]="documentList.selection">
     </button>
@@ -62,13 +49,13 @@ wich provides a method to help further style the element.
 
 ```html
 <button
-    md-menu-item
+    mat-menu-item
     #selection="adfFavorite"
     [ngClass]="{ 'icon-highlight': selection.hasFavorites() }"
     [adf-node-favorite]="documentList.selection">
-    <md-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }">
+    <mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }">
         {{ selection.hasFavorites() ? 'star' : 'star_border' }}
-    </md-icon>
+    </mat-icon>
 </button>
 ```
 

docs/node-permission.directive.md

@@ -45,10 +45,10 @@ For example the "Delete" button should be disabled if no selection is present or
 
 ```html
 <adf-toolbar title="toolbar example">
-    <button md-icon-button
+    <button mat-icon-button
             adf-node-permission="delete"
             [adf-nodes]="documentList.selection">
-        <md-icon>delete</md-icon>
+        <mat-icon>delete</mat-icon>
     </button>
 </adf-toolbar>
 

docs/node-restore.directive.md

@@ -1,27 +1,14 @@
 # Node Restore directive
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
 <adf-toolbar title="toolbar example">
-    <button md-icon-button
+    <button mat-icon-button
         location="/files"
         [adf-restore]="documentList.selection"
         (restore)="documentList.reload()">
-        <md-icon>restore</md-icon>
+        <mat-icon>restore</mat-icon>
     </button>
 </adf-toolbar>
 

docs/process-audit.directive.md

@@ -1,21 +1,9 @@
 # Process Audit Directive
 
-Provide a way to fetch the Process Audit information in the pdf or json format.
+Fetches the Process Audit information in the pdf or json format.
 
 ![adf-process-audit-directive](docassets/images/adf-process-audit-directive.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -24,8 +12,8 @@ Provide a way to fetch the Process Audit information in the pdf or json format.
     [process-id]="processId"
     [format]="'pdf'"
     [download]="true"
-    md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
+    mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
-    <md-icon>assignment_ind</md-icon>
+    <mat-icon>assignment_ind</mat-icon>
 </button>
 ```
 

docs/task-audit.directive.md

@@ -1,21 +1,9 @@
 # Task Audit Directive
 
-Provides a way to fetch the Task Audit information in the pdf or json format.
+Fetches the Task Audit information in the pdf or json format.
 
 ![adf-task-audit-directive](docassets/images/adf-task-audit-directive.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -23,8 +11,8 @@ Provides a way to fetch the Task Audit information in the pdf or json format.
     adf-task-audit
     [task-id]="taskId"
     [download]="download"
-    md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
+    mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
-    <md-icon>assignment_ind</md-icon>
+    <mat-icon>assignment_ind</mat-icon>
 </button>
 ```
 

docs/toolbar.component.md

@@ -24,11 +24,11 @@ Simple container for headers, titles, actions and breadcrumbs.
 
 ```html
 <adf-toolbar title="Toolbar">
-    <button md-icon-button>
+    <button mat-icon-button>
-        <md-icon>create_new_folder</md-icon>
+        <mat-icon>create_new_folder</mat-icon>
     </button>
-    <button md-icon-button>
+    <button mat-icon-button>
-        <md-icon>delete</md-icon>
+        <mat-icon>delete</mat-icon>
     </button>
 </adf-toolbar>
 ```
@@ -80,27 +80,27 @@ You can use the following example to create a dropdown menu:
 <adf-toolbar title="Toolbar">
     ...
 
-    <button md-icon-button [mdMenuTriggerFor]="menu">
+    <button mat-icon-button [matMenuTriggerFor]="menu">
-        <md-icon>more_vert</md-icon>
+        <mat-icon>more_vert</mat-icon>
     </button>
-    <md-menu #menu="mdMenu">
+    <mat-menu #menu="matMenu">
-        <button md-menu-item>
+        <button mat-menu-item>
-            <md-icon>dialpad</md-icon>
+            <mat-icon>dialpad</mat-icon>
             <span>Redial</span>
         </button>
-        <button md-menu-item disabled>
+        <button mat-menu-item disabled>
-            <md-icon>voicemail</md-icon>
+            <mat-icon>voicemail</mat-icon>
             <span>Check voicemail</span>
         </button>
-        <button md-menu-item>
+        <button mat-menu-item>
-            <md-icon>notifications_off</md-icon>
+            <mat-icon>notifications_off</mat-icon>
             <span>Disable alerts</span>
         </button>
-    </md-menu>
+    </mat-menu>
 </adf-toolbar>
 ```
 
-The code above is based on the `<md-menu>` component from the `@angular/material` library. You can use any custom menu component as well.
+The code above is based on the `<mat-menu>` component from the `@angular/material` library. You can use any custom menu component as well.
 
 ![](docassets/images/adf-toolbar-03.png)