[ACS-5631] Improved page layout and provide documentation (#3346)

* page layout supports CSS selectors

* migrate to using CSS selectors for page layout

* add docs

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html

@@ -1,15 +1,15 @@
 <aca-page-layout>
 
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-toolbar class="adf-toolbar--inline">
       <button mat-icon-button (click)="goBack()">
         <mat-icon>arrow_back</mat-icon>
       </button>
     </adf-toolbar>
     <adf-breadcrumb root="{{'ACA_FOLDER_RULES.ACTIONS.MANAGE_RULES' | translate}}"></adf-breadcrumb>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
 
       <ng-container *ngIf="((ruleSetsLoading$ | async) && (inheritedRuleSets$ | async).length === 0) || (actionsLoading$ | async); else onLoaded">
@@ -127,14 +127,14 @@
         </ng-container>
 
         <ng-template #genericError>
-          <aca-page-layout-error>
+          <div class="aca-page-layout-error">
             <aca-generic-error></aca-generic-error>
-          </aca-page-layout-error>
+          </div>
         </ng-template>
 
       </ng-template>
 
     </div>
-  </aca-page-layout-content>
+  </div>
 
 </aca-page-layout>

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts

@@ -42,13 +42,7 @@ import { RuleSetPickerSmartComponent } from '../rule-set-picker/rule-set-picker.
 import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { ActionParameterConstraint } from '../model/action-parameter-constraint.model';
 import { TranslateModule } from '@ngx-translate/core';
-import {
-  GenericErrorComponent,
-  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutErrorComponent,
-  PageLayoutHeaderComponent
-} from '@alfresco/aca-shared';
+import { GenericErrorComponent, PageLayoutComponent } from '@alfresco/aca-shared';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -72,9 +66,6 @@ import { RuleDetailsUiComponent } from '../rule-details/rule-details.ui-componen
     RuleListUiComponent,
     RouterModule,
     TemplateModule,
-    PageLayoutErrorComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     GenericErrorComponent,
     RuleDetailsUiComponent,
     MatDialogModule