[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/about/src/about.component.html

@@ -1,12 +1,12 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <button mat-icon-button [routerLink]="landingPage">
       <mat-icon class="app-profile-icon">arrow_back</mat-icon>
     </button>
     <h1>{{ 'APP.BROWSE.ABOUT.TITLE' | translate }}</h1>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content [scrollable]="true">
+  <div class="aca-page-layout-content scrollable">
     <adf-about>
       <adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
         <ng-template>
@@ -32,5 +32,5 @@
         </ng-template>
       </adf-about-panel>
     </adf-about>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/about/src/about.component.ts

@@ -28,7 +28,7 @@ import { AboutModule, AppConfigService, AuthenticationService, RepositoryInfo }
 import { DiscoveryApiService } from '@alfresco/adf-content-services';
 import { PACKAGE_JSON } from './package-json.token';
 import { TranslateModule } from '@ngx-translate/core';
-import { AppExtensionService, PageLayoutComponent, PageLayoutContentComponent, PageLayoutHeaderComponent } from '@alfresco/aca-shared';
+import { AppExtensionService, PageLayoutComponent } from '@alfresco/aca-shared';
 import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
@@ -36,17 +36,7 @@ import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   standalone: true,
-  imports: [
-    CommonModule,
-    TranslateModule,
-    AboutModule,
-    RouterModule,
-    MatIconModule,
-    MatButtonModule,
-    PageLayoutHeaderComponent,
-    PageLayoutContentComponent,
-    PageLayoutComponent
-  ],
+  imports: [CommonModule, TranslateModule, AboutModule, RouterModule, MatIconModule, MatButtonModule, PageLayoutComponent],
   selector: 'app-about-page',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],

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

projects/aca-content/src/lib/components/details/details.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb [root]="title" [folderNode]="node" (navigate)="goBack()"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="acs-details-container">
       <div class="acs-details-title">
         <div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
@@ -36,7 +36,7 @@
         </mat-tab>
       </mat-tab-group>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
 
 <ng-template #loading>

projects/aca-content/src/lib/components/details/details.component.ts

@@ -24,14 +24,7 @@
 
 import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import {
-  ContentApiService,
-  PageComponent,
-  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
-  ToolbarActionComponent
-} from '@alfresco/aca-shared';
+import { ContentApiService, PageComponent, PageLayoutComponent, ToolbarActionComponent } from '@alfresco/aca-shared';
 import { NavigateToPreviousPage, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
 import { Subject } from 'rxjs';
 import { BreadcrumbModule, PermissionManagerModule } from '@alfresco/adf-content-services';
@@ -60,9 +53,7 @@ import { CommentsTabComponent } from '../info-drawer/comments-tab/comments-tab.c
     MetadataTabComponent,
     CommentsTabComponent,
     ToolbarActionComponent,
-    PageLayoutComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent
+    PageLayoutComponent
   ],
   selector: 'app-details-manager',
   templateUrl: './details.component.html',

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -81,5 +81,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts

@@ -31,8 +31,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
 import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
@@ -57,9 +55,7 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationModule,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent
+    PageLayoutComponent
   ],
   templateUrl: './favorite-libraries.component.html',
   encapsulation: ViewEncapsulation.None

projects/aca-content/src/lib/components/favorites/favorites.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -68,5 +68,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/favorites/favorites.component.ts

@@ -28,8 +28,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -58,8 +56,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationDirective,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './favorites.component.html',

projects/aca-content/src/lib/components/files/files.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout [hasError]="!isValidPath">
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb [root]="title" [folderNode]="node" [maxItems]="isSmallScreen ? 1 : 0" (navigate)="onBreadcrumbNavigate($event)"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,13 +7,13 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-error>
+  <div class="aca-page-layout-error">
     <aca-generic-error></aca-generic-error>
-  </aca-page-layout-error>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content" *ngIf="!(showLoader$ | async)">
       <adf-upload-drag-area [rootFolderId]="node?.id" [disabled]="!canUpload" (updateFileVersion)="onUploadNewVersion($event)">
         <adf-document-list
@@ -97,5 +97,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/files/files.component.ts

@@ -34,9 +34,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutErrorComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -68,9 +65,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     InfoDrawerComponent,
     ToolbarActionComponent,
     PaginationDirective,
-    PageLayoutHeaderComponent,
-    PageLayoutContentComponent,
-    PageLayoutErrorComponent,
     PageLayoutComponent
   ],
   templateUrl: './files.component.html',

projects/aca-content/src/lib/components/libraries/libraries.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -72,5 +72,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="$any(selection).library"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/libraries/libraries.component.ts

@@ -31,8 +31,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -58,8 +56,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationDirective,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './libraries.component.html',

projects/aca-content/src/lib/components/recent-files/recent-files.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -68,5 +68,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/recent-files/recent-files.component.ts

@@ -30,8 +30,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -57,8 +55,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationDirective,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './recent-files.component.html',

projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <aca-search-input></aca-search-input>
     <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <div class="adf-search-results">
         <div class="adf-search-results__content">
@@ -87,5 +87,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.ts

@@ -34,8 +34,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -65,8 +63,6 @@ import { DocumentListDirective } from '../../../directives/document-list.directi
     DocumentListDirective,
     ToolbarActionComponent,
     PaginationDirective,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   selector: 'aca-search-results',

projects/aca-content/src/lib/components/search/search-results/search-results.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <aca-search-input></aca-search-input>
     <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <div class="adf-search-results">
         <div class="adf-search-results__content">
@@ -140,5 +140,5 @@
         </div>
       </ng-template>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/search/search-results/search-results.component.ts

@@ -42,8 +42,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -88,8 +86,6 @@ import { SearchResultsRowComponent } from '../search-results-row/search-results-
     PaginationDirective,
     ViewerModule,
     ToolbarActionComponent,
-    PageLayoutHeaderComponent,
-    PageLayoutContentComponent,
     PageLayoutComponent
   ],
   selector: 'aca-search-results',

projects/aca-content/src/lib/components/shared-files/shared-files.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.SHARED.TITLE"></adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -67,5 +67,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/shared-files/shared-files.component.ts

@@ -31,8 +31,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -58,8 +56,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     InfoDrawerComponent,
     PaginationDirective,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './shared-files.component.html',

projects/aca-content/src/lib/components/trashcan/trashcan.component.html

@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -77,5 +77,5 @@
 
       <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>

projects/aca-content/src/lib/components/trashcan/trashcan.component.ts

@@ -25,15 +25,7 @@
 import { getUserProfile } from '@alfresco/aca-shared/store';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import {
-  ContextActionsDirective,
-  PageComponent,
-  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
-  PaginationDirective,
-  ToolbarActionComponent
-} from '@alfresco/aca-shared';
+import { ContextActionsDirective, PageComponent, PageLayoutComponent, PaginationDirective, ToolbarActionComponent } from '@alfresco/aca-shared';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
@@ -56,8 +48,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     ContextActionsDirective,
     PaginationDirective,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './trashcan.component.html',

projects/aca-shared/src/lib/components/page-layout/page-layout-content.component.ts

@@ -24,6 +24,7 @@
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
 
+// @deprecated Use `.aca-page-layout-content` CSS selector instead
 @Component({
   standalone: true,
   selector: 'aca-page-layout-content',

projects/aca-shared/src/lib/components/page-layout/page-layout-error.component.ts

@@ -24,6 +24,7 @@
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 
+// @deprecated Use `.aca-page-layout-error` selectors instead
 @Component({
   standalone: true,
   selector: 'aca-page-layout-error',

projects/aca-shared/src/lib/components/page-layout/page-layout-header.component.ts

@@ -24,6 +24,7 @@
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 
+// @deprecated Use `.aca-page-layout-header` CSS selector instead
 @Component({
   standalone: true,
   selector: 'aca-page-layout-header',

projects/aca-shared/src/lib/components/page-layout/page-layout.component.html

@@ -1,11 +1,17 @@
-  <div class="aca-content-header">
-      <button *ngIf="(appNavNarMode$ | async) === 'collapsed'"
-        mat-icon-button
-        (click)="toggleClick()"
-        title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
-        <mat-icon>keyboard_double_arrow_right</mat-icon>
-      </button>
-      <ng-content select="aca-page-layout-header"></ng-content>
-  </div>
-  <ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
-  <ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
+<div class="aca-content-header">
+    <button *ngIf="(appNavNarMode$ | async) === 'collapsed'"
+      mat-icon-button
+      (click)="toggleClick()"
+      title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
+      <mat-icon>keyboard_double_arrow_right</mat-icon>
+    </button>
+    <ng-content select=".aca-page-layout-header, aca-page-layout-header"></ng-content>
+</div>
+
+<ng-container *ngIf="hasError">
+  <ng-content select=".aca-page-layout-error, aca-page-layout-error"></ng-content>
+</ng-container>
+
+<ng-container *ngIf="!hasError">
+  <ng-content select=".aca-page-layout-content, aca-page-layout-content"></ng-content>
+</ng-container>

projects/aca-shared/src/lib/components/page-layout/page-layout.md

@@ -0,0 +1,69 @@
+# Page Layout Component
+
+Selector: `aca-page-layout`
+
+## Layout Structure
+
+The layout component provides a set of slots for your custom content:
+
+- header
+- error
+- content
+
+```html
+<aca-page-layout>
+  
+  <div class="aca-page-layout-header">
+    <!-- Header Component -->
+  </div>
+  
+  <div class="aca-page-layout-error">
+    <!-- Error Component -->
+  </div>
+  
+  <div class="aca-page-layout-content">
+    <!-- Main Content -->
+  </div>
+  
+</aca-page-layout>
+```
+
+## Layout Header
+
+Supports any HTML or Angular component as a content
+
+```html
+<aca-page-layout>
+  <div class="aca-page-layout-header">
+    <!-- Header Component -->
+  </div>
+</aca-page-layout>
+```
+
+## Layout Error
+
+Supports any HTML or Angular component as the error visualisation.
+Displayed only when an error is detected by the parent container component.
+
+```html
+<aca-page-layout>
+  <div class="aca-page-layout-error">
+    <!-- Error Component -->
+  </div>
+</aca-page-layout>
+```
+
+## Layout Content
+
+You can provide any Angular component or HTML element as the main content.
+In addition, you can use `scrollable` class to make the content scroll.
+
+The content is displayed only when there are no errors detected.
+
+```html
+<aca-page-layout>
+  <div class="aca-page-layout-content scrollable">
+    <!-- Main Content -->
+  </div>
+</aca-page-layout>
+```