[ADF-4401] Fix DL issues because of nested 'adf-datatable-cell' items (#4615)

* [ADF-4401] remove classname from nested items - use 'adf-content-cell' instead

* [ADF-4401] some DL display fixes

- align header cells with content cells
- columns aligned on Trashcan DL
- ellipsis on long folder names inside the content node selector
- more width on highlight cell from search-results

* [ADF-4401] use 'adf-content-cell'

- to allow ellipsis to display when a parent has 'adf-ellipsis-cell' class

* [ADF-4401] remove not used styles

* [ADF-4401] rename scss classname to have 'adf-datatable' prefix

* [ADF-4401] Add documentation for datatable

demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts

@@ -38,7 +38,7 @@ import { Node } from '@alfresco/js-api';
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
+    host: { class: 'adf-datatable-content-cell adf-datatable-link adf-name-column' }
 })
 export class NameColumnComponent implements OnInit, OnDestroy {
     @Input()

demo-shell/src/app/components/files/files.component.html

@@ -288,7 +288,7 @@
                         *ngIf="searchTerm"
                         key="search"
                         title="Search"
-                        class="adf-desktop-only">
+                        class="adf-desktop-only adf-expand-cell-3">
                         <ng-template let-entry="$implicit">
                             <div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
                             </div>

demo-shell/src/app/components/trashcan/trashcan.component.html

@@ -61,7 +61,8 @@
                     key="name"
                     title="DOCUMENT_LIST.COLUMNS.DISPLAY_NAME">
                     <ng-template let-value="value" let-context>
-                        <span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
+                        <span title="{{ context?.row?.obj | adfNodeNameTooltip }}"
+                              class="adf-datatable-cell-value">{{ value }}</span>
                     </ng-template>
                 </data-column>