[ADF-1344] New Custom Loading Content Directive for Datatable Component (#4156)

* [ADF-1344] New Custom Loading Content Directive for Datatable Component

* [ADF-1344] Add unit tests for directives on Document List

* [ADF-1344] Add directive prefix to context-menu directive

* [ADF-1344] Old directive selectors have been put back

* [ADF-1344] Add old selector for empty-content directive

docs/core/context-menu.directive.md

@@ -12,7 +12,7 @@ Adds a context menu to a component.
 ## Basic Usage
 
 ```html
-<my-component [context-menu]="menuItems"></my-component>
+<my-component [adf-context-menu]="menuItems"></my-component>
 <adf-context-menu-holder></context-menu-holder>
 ```
 

docs/core/datatable.component.md

@@ -250,17 +250,17 @@ export class DataTableDemo {
 You can add [Data column component](data-column.component.md) instances to define columns for the
 table as described in the usage examples and the [Customizing columns](#customizing-columns) section.
 
-You can also supply a `<no-content-template>` or an
+You can also supply a `<adf-no-content-template>` or an
 [Empty list component](empty-list.component.md) sub-component to show when the table is empty:
 
 ```html
 <adf-datatable ...>
-    <no-content-template>
+    <adf-no-content-template>
         <!--Add your custom empty template here-->
         <ng-template>
             <h1>Sorry, no content</h1>
         </ng-template>
-    </no-content-template>
+    </adf-no-content-template>
 </adf-datatable>
 ```
 
@@ -275,12 +275,12 @@ You can also supply a `<no-content-template>` or an
 </adf-datatable>
 ```
 
-Another useful transclusion is the `<loading-content-template>`, which is shown
+Another useful transclusion is the `<adf-loading-content-template>`, which is shown
 while the data for the table is loading:
 
 ```html
 <adf-datatable ...>
-    <loading-content-template>
+    <adf-loading-content-template>
         <ng-template>
             <!--Add your custom loading template here-->
             <mat-progress-spinner
@@ -289,7 +289,7 @@ while the data for the table is loading:
                 [mode]="'indeterminate'">
             </mat-progress-spinner>
         </ng-template>
-    </loading-content-template>
+    </adf-loading-content-template>
 </adf-datatable>
 ```
 
@@ -299,7 +299,7 @@ while the data for the table is loading:
     }
 ```
 
-Note that you can use both the `<no-content-template>` and the `<loading-content-template>`
+Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
 together in the same datatable.
 
 ## Class members

docs/core/login.component.md

@@ -41,8 +41,8 @@ You can replace the content of the header and footer of the [Login component](..
 
 ```html
 <adf-login ...>
-    <login-header><ng-template>My custom HTML for the header</ng-template></login-header>
-    <login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
+    <adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
+    <adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
 </adf-login>`
 ```
 

docs/core/sidebar-action-menu.component.md

@@ -19,17 +19,17 @@ Displays a sidebar-action menu information panel.
 There are three regions where you can add your own content in `<div>` elements with
 the following names:
 
--   sidebar-menu-title-icon
--   sidebar-menu-options
--   sidebar-menu-expand-icon
+-   adf-sidebar-menu-title-icon
+-   adf-sidebar-menu-options
+-   adf-sidebar-menu-expand-icon
 
 ```html
 <adf-sidebar-action-menu>
-    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-    <div sidebar-menu-expand-icon>
+    <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+    <div adf-sidebar-menu-expand-icon>
         <mat-icon>queue</mat-icon>
     </div>
-    <div sidebar-menu-options>
+    <div adf-sidebar-menu-options>
         <button mat-menu-item>
             <mat-icon>assignment</mat-icon>
             <span>Button Name</span>