[ADF-5505] deprecate angular flex layout library (#8562)

* ADF-5505 Removed some angular flex usages

* ADF-5505 Deprecated usage of angular flex layout in demo shell

* ADF-5505 Deprecated usage of angular flex layout in core files

* ADF-5505 Removed usage of angular flex layout from files from process services

* ADF-5505 Removed usage of angular flex layout from files from process services cloud

* ADF-5505 Removed usage of fxflex and fxlayout from left files

* ADF-5505 Removed usage of fxhide from left files

* ADF-5505 Fixed issue with incorrect colors

* ADF-5505 Fixed some lint issues

* ADF-5505 Removed imports of FlexLayoutModule

* ADF-5505 Uninstalled angular flex layout dependency

* ADF-5505 Removed usage of ngClass with gt-md

* ADF-5505 Removed duplicated selector

* ADF-5505 Removed empty line

* ADF-5505 Changed encapsulation

demo-shell/src/app/app.module.ts

@@ -18,7 +18,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ChartsModule } from 'ng2-charts';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -144,7 +143,6 @@ registerLocaleData(localeSv);
         FormsModule,
         HttpClientModule,
         MaterialModule,
-        FlexLayoutModule,
         TranslateModule.forRoot(),
         CoreModule.forRoot(),
         ContentModule.forRoot(),

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

@@ -18,7 +18,7 @@
 
                 <div class="app-layout-menu-spacer"></div>
 
-                <app-search-bar fxFlex="0 1 auto"></app-search-bar>
+                <app-search-bar></app-search-bar>
 
                 <div class="app-header-delimiexpandedSidenavter"></div>
 

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

@@ -58,12 +58,11 @@
     </small>
 
     <adf-toolbar class="app-full-content-toolbar">
-        <adf-toolbar-title fxFlex="0 1 auto">
+        <adf-toolbar-title>
             <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
             </adf-breadcrumb>
         </adf-toolbar-title>
-        <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
-        <div fxFlex="0 0 auto">
+        <adf-toolbar-divider></adf-toolbar-divider>
         <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.NEW_FOLDER_LABEL' | translate">
             <mat-icon>create_new_folder</mat-icon>
         </button>
@@ -73,13 +72,11 @@
         <button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.DELETE_NODE_LABEL' | translate">
             <mat-icon>delete</mat-icon>
         </button>
-        </div>
     </adf-toolbar>
 
     <h2>6. Dropdown Breadcrumb</h2>
 
-    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                             class="app-files-breadcrumb"
+    <adf-dropdown-breadcrumb class="app-files-breadcrumb"
                              [target]="documentList">
     </adf-dropdown-breadcrumb>
 

demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss

@@ -1,3 +1,4 @@
+app-breadcrumb-demo {
     .app-breadcrumb-container-restricted {
         width: 800px;
         max-width: 800px;
@@ -11,3 +12,10 @@
     .app-full-content-toolbar .app-toolbar-title .app-breadcrumb {
         width: 0;
     }
+
+    @media screen and (min-width: 600px) {
+        .app-files-breadcrumb {
+            display: none;
+        }
+    }
+}

demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts

@@ -15,11 +15,13 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
+    selector: 'app-breadcrumb-demo',
     templateUrl: './breadcrumb-demo.component.html',
-    styleUrls: [`./breadcrumb-demo.component.scss`]
+    styleUrls: [`./breadcrumb-demo.component.scss`],
+    encapsulation: ViewEncapsulation.None
 })
 export class BreadcrumbDemoComponent {
 

demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html

@@ -1,8 +1,4 @@
 <adf-toolbar>
-  <div fxLayout="column" fxLayoutAlign="center">
-    <div fxLayout="row">
   <div class="app-crumb">{{appName + ' >'}} </div>
   <div class="app-filter-crumb"> {{filterName | translate}}</div>
-    </div>
-  </div>
 </adf-toolbar>

demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss

@@ -1,3 +1,4 @@
+app-cloud-breadcrumbs {
     .app-app-crumb {
         opacity: 0.5;
     }
@@ -6,3 +7,8 @@
         opacity: 0.8;
         margin-left: 5px;
     }
+
+    adf-toolbar {
+        display: flex;
+    }
+}

demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'app-cloud-breadcrumbs',
     templateUrl: './cloud-breadcrumb-component.html',
-    styleUrls: ['./cloud-breadcrumb-component.scss']
+    styleUrls: ['./cloud-breadcrumb-component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CloudBreadcrumbsComponent implements OnInit {
     appName: string;

demo-shell/src/app/components/cloud/cloud-layout.component.html

@@ -1,7 +1,6 @@
-<mat-tab-group fxFill class="app-cloud-layout-tab-body">
+<mat-tab-group class="app-cloud-layout-tab-body">
   <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
-    <div fxFill fxLayout>
-      <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
+    <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
       <adf-sidenav-layout-header>
         <ng-template>
           <app-cloud-breadcrumbs></app-cloud-breadcrumbs>
@@ -33,7 +32,6 @@
         </ng-template>
       </adf-sidenav-layout-content>
     </adf-sidenav-layout>
-    </div>
   </mat-tab>
   <mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
       <app-cloud-settings></app-cloud-settings>

demo-shell/src/app/components/cloud/cloud-layout.component.scss

@@ -5,3 +5,18 @@
 .app-cloud-layout-tab-body .mat-tab-body-wrapper {
     height: 100%;
 }
+
+app-cloud-layout {
+    .app-cloud-layout-tab-body {
+        height: 100%;
+        min-height: 100%;
+        min-width: 100%;
+        width: 100%;
+
+        adf-sidenav-layout {
+            flex-direction: row;
+            box-sizing: border-box;
+            display: flex;
+        }
+    }
+}

demo-shell/src/app/components/cloud/community/community-cloud.component.html

@@ -1,7 +1,6 @@
-<mat-tab-group fxFill class="app-cloud-layout-tab-body">
+<mat-tab-group class="app-cloud-layout-tab-body">
   <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
-      <div fxFill fxLayout>
-        <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
+    <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
       <adf-sidenav-layout-navigation>
         <ng-template>
           <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -28,7 +27,6 @@
           </ng-template>
         </adf-sidenav-layout-content>
     </adf-sidenav-layout>
-      </div>
   </mat-tab>
   <mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
     <app-cloud-settings></app-cloud-settings>

demo-shell/src/app/components/cloud/community/community-cloud.component.scss

@@ -0,0 +1,20 @@
+.app-cloud-layout-overflow {
+    overflow: auto;
+}
+
+.app-cloud-layout-tab-body {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .mat-tab-body-wrapper {
+        height: 100%;
+    }
+
+    adf-sidenav-layout {
+        min-height: 100%;
+        min-width: 100%;
+    }
+}
+

demo-shell/src/app/components/cloud/community/community-cloud.component.ts

@@ -21,14 +21,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
 
 @Component({
     templateUrl: './community-cloud.component.html',
-    styles: [`.app-cloud-layout-overflow {
-        overflow: auto;
-      }
-
-      .app-cloud-layout-tab-body .mat-tab-body-wrapper {
-        height: 100% !important;
-      }
-      `],
+    styleUrls: ['./community-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class CommunityCloudComponent implements OnInit {

demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html

@@ -8,11 +8,9 @@
 <div class="app-process-cloud-container">
 
     <adf-cloud-task-list
-        fxFlex
         class="app-cloud-layout-overflow"
         [processInstanceId]="processInstanceId"
-        (rowClick)="onRowClick($event)"
-        #taskCloud>
+        (rowClick)="onRowClick($event)">
     </adf-cloud-task-list>
 
     <adf-cloud-process-header

demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss

@@ -1,3 +1,4 @@
+app-community-process-details-cloud {
     .app {
         &-process-cloud-container {
             display: flex;
@@ -5,6 +6,7 @@
 
         &-cloud-layout-overflow {
             width: 67%;
+            flex: 1;
         }
 
         &-process-cloud-header {
@@ -12,3 +14,4 @@
             width: 25%;
         }
     }
+}

demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.ts

@@ -15,12 +15,14 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
+    selector: 'app-community-process-details-cloud',
     templateUrl: './community-process-details-cloud.component.html',
-    styleUrls: ['./community-process-details-cloud.component.scss']
+    styleUrls: ['./community-process-details-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityProcessDetailsCloudDemoComponent {
 

demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html

@@ -1,4 +1,3 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
 <adf-cloud-edit-process-filter
     [id]="filterId"
     [filterProperties]="processFilterProperties.filterProperties"
@@ -7,9 +6,11 @@
     (filterChange)="onFilterChange($event)"
     (action)="onProcessFilterAction($event)">
 </adf-cloud-edit-process-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-process-list #processCloud
-            fxFlex
+<div
+    class="app-cloud-process-list-container"
+    *ngIf="editedFilter">
+    <adf-cloud-process-list
+        #processCloud
         class="app-cloud-layout-overflow"
         [initiator]="editedFilter.initiator"
         [processDefinitionId]="editedFilter.processDefinitionId"
@@ -39,4 +40,3 @@
         </ul>
     </div>
 </div>
-</div>

demo-shell/src/app/components/cloud/community/community-processes-cloud.component.scss

@@ -0,0 +1,21 @@
+app-community-processes-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .app-cloud-process-list-container {
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .app-cloud-process-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .app-cloud-layout-overflow, .app-cloud-process-list-container {
+        flex: 1;
+    }
+}

demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts

@@ -15,17 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
-    ProcessListCloudComponent,
     ProcessFilterCloudModel,
-    ProcessListCloudSortingModel,
+    ProcessFilterCloudService,
     ProcessFiltersCloudComponent,
-    ProcessFilterCloudService
+    ProcessListCloudComponent,
+    ProcessListCloudSortingModel
 } from '@alfresco/adf-process-services-cloud';
 
 import { ActivatedRoute, Router } from '@angular/router';
-import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
+import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
 import { CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -35,7 +35,10 @@ const PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
 const ACTION_SAVE_AS = 'saveAs';
 
 @Component({
-    templateUrl: './community-processes-cloud.component.html'
+    selector: 'app-community-processes-cloud-demo',
+    templateUrl: './community-processes-cloud.component.html',
+    styleUrls: ['./community-processes-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
     @ViewChild('processCloud')

demo-shell/src/app/components/cloud/community/community-task-cloud.component.html

@@ -1,4 +1,3 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
 <adf-cloud-edit-task-filter
     [id]="filterId"
     [filterProperties]="taskFilterProperties.filterProperties"
@@ -7,9 +6,11 @@
     (action)="onTaskFilterAction($event)"
     (filterChange)="onFilterChange($event)">
 </adf-cloud-edit-task-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-task-list #taskCloud
-            fxFlex
+<div
+    class="app-cloud-task-list-container"
+    *ngIf="editedFilter">
+    <adf-cloud-task-list
+        #taskCloud
         class="app-cloud-layout-overflow"
         [processDefinitionId]="editedFilter.processDefinitionId"
         [processInstanceId]="editedFilter.processInstanceId"
@@ -43,4 +44,3 @@
         </ul>
     </div>
 </div>
-</div>

demo-shell/src/app/components/cloud/community/community-task-cloud.component.scss

@@ -0,0 +1,27 @@
+app-community-tasks-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .adf-cloud-layout-tab-body {
+        .mat-tab-body-wrapper {
+            height: 100%;
+        }
+    }
+
+    .app-cloud-task-list-container {
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .app-cloud-task-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .app-cloud-layout-overflow, .app-cloud-task-list-container {
+        flex: 1;
+    }
+}

demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts

@@ -15,9 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
-import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel, TaskFilterCloudService } from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    TaskFilterCloudModel,
+    TaskFilterCloudService,
+    TaskListCloudComponent,
+    TaskListCloudSortingModel
+} from '@alfresco/adf-process-services-cloud';
+import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
@@ -28,8 +33,10 @@ const ACTION_SAVE_AS = 'saveAs';
 const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';
 
 @Component({
+    selector: 'app-community-tasks-cloud-demo',
     templateUrl: './community-task-cloud.component.html',
-    styles: [`.adf-cloud-layout-tab-body .mat-tab-body-wrapper { height: 100%; }`]
+    styleUrls: ['./community-task-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy {
     @ViewChild('taskCloud')

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html

@@ -1,8 +1,7 @@
 <h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }}</h4>
 
-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <div fxLayout="row" fxFill>
-        <div fxLayout="column" fxFlex="80%">
+<div class="app-community-task-details-cloud-column">
+    <div class="app-community-task-details-cloud-row">
         <adf-cloud-task-form
             [taskId]="taskId"
             (cancelClick)="goBack()"
@@ -12,9 +11,6 @@
             (formSaved)="onFormSaved()"
             (error)="onError($event)">
         </adf-cloud-task-form>
-        </div>
-        <adf-cloud-task-header fxFlex
-            [taskId]="taskId">
-        </adf-cloud-task-header>
+        <adf-cloud-task-header [taskId]="taskId"></adf-cloud-task-header>
     </div>
 </div>

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss

@@ -1,3 +1,4 @@
+app-community-task-details-cloud {
     .app {
         &-task-detail-container {
             display: flex;
@@ -15,4 +16,33 @@
             width: 30%;
             font-family: inherit;
         }
+
+        &-community-task-details-cloud-column {
+            margin: 0;
+            flex-direction: column;
+
+            .app-community-task-details-cloud-row {
+                flex-direction: row;
+
+                adf-cloud-task-form {
+                    flex: 1 1 100%;
+                    flex-direction: column;
+                    display: flex;
+                    max-width: 80%;
+                }
+
+                adf-cloud-task-header {
+                    flex: 1;
+                }
+            }
+        }
+
+        &-community-task-details-cloud-column, &-community-task-details-cloud-row {
+            height: 100%;
+            min-height: 100%;
+            min-width: 100%;
+            width: 100%;
+            display: flex;
+        }
+    }
 }

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts

@@ -15,13 +15,15 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
 
 @Component({
+    selector: 'app-community-task-details-cloud',
     templateUrl: './community-task-details-cloud.component.html',
-    styleUrls: ['./community-task-details-cloud.component.scss']
+    styleUrls: ['./community-task-details-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityTaskDetailsCloudDemoComponent {
 

demo-shell/src/app/components/cloud/community/community.module.ts

@@ -19,7 +19,6 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import {
     ProcessServicesCloudModule,
     LocalPreferenceCloudService,
@@ -76,8 +75,7 @@ const routes: Routes = [
         CoreModule,
         ProcessServicesCloudModule,
         RouterModule.forChild(routes),
-        AppCloudSharedModule,
-        FlexLayoutModule
+        AppCloudSharedModule
     ],
     declarations: [
         CommunityCloudComponent,

demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html

@@ -7,12 +7,10 @@
 <div class="app-process-cloud-container">
 
     <adf-cloud-task-list
-        fxFlex
         class="app-cloud-layout-overflow"
         [appName]="appName"
         [processInstanceId]="processInstanceId"
-        (rowClick)="onRowClick($event)"
-        #taskCloud>
+        (rowClick)="onRowClick($event)">
     </adf-cloud-task-list>
 
     <adf-cloud-process-header

demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss

@@ -1,3 +1,4 @@
+app-process-details-cloud-demo {
     .app {
         &-process-cloud-container {
             display: flex;
@@ -5,6 +6,7 @@
 
         &-cloud-layout-overflow {
             width: 67%;
+            flex: 1;
         }
 
         &-process-cloud-header {
@@ -12,3 +14,4 @@
             width: 25%;
         }
     }
+}

demo-shell/src/app/components/cloud/process-details-cloud-demo.component.ts

@@ -15,12 +15,14 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
+    selector: 'app-process-details-cloud-demo',
     templateUrl: './process-details-cloud-demo.component.html',
-    styleUrls: ['./process-details-cloud-demo.component.scss']
+    styleUrls: ['./process-details-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ProcessDetailsCloudDemoComponent {
 

demo-shell/src/app/components/cloud/processes-cloud-demo.component.html

@@ -1,4 +1,3 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
 <adf-cloud-edit-process-filter
     [appName]="appName"
     [id]="filterId"
@@ -9,9 +8,11 @@
     (filterChange)="onFilterChange($event)"
     (action)="onProcessFilterAction($event)">
 </adf-cloud-edit-process-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-process-list #processCloud
-            fxFlex
+<div
+    *ngIf="editedFilter"
+    class="app-processes-list-container">
+    <adf-cloud-process-list
+        #processCloud
         class="app-cloud-layout-overflow"
         [appName]="editedFilter.appName"
         [appVersion]="editedFilter.appVersion"
@@ -68,4 +69,3 @@
         </div>
     </div>
 </div>
-</div>

demo-shell/src/app/components/cloud/processes-cloud-demo.component.scss

@@ -0,0 +1,22 @@
+app-processes-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .app-processes-list-container {
+        box-sizing: border-box;
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .app-processes-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .app-processes-list-container, .app-cloud-layout-overflow {
+        flex: 1;
+    }
+}

demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts

@@ -15,10 +15,16 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ProcessFilterAction, ProcessFilterCloudModel, PROCESS_FILTER_ACTION_DELETE, PROCESS_FILTER_ACTION_SAVE, PROCESS_FILTER_ACTION_SAVE_AS } from '@alfresco/adf-process-services-cloud';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    PROCESS_FILTER_ACTION_DELETE,
+    PROCESS_FILTER_ACTION_SAVE,
+    PROCESS_FILTER_ACTION_SAVE_AS,
+    ProcessFilterAction,
+    ProcessFilterCloudModel
+} from '@alfresco/adf-process-services-cloud';
 import { ActivatedRoute, Router } from '@angular/router';
-import { UserPreferencesService, DataCellEvent } from '@alfresco/adf-core';
+import { DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
 import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -26,7 +32,10 @@ import { Pagination } from '@alfresco/js-api';
 import { CloudProcessFiltersService } from './services/cloud-process-filters.service';
 
 @Component({
-    templateUrl: './processes-cloud-demo.component.html'
+    selector: 'app-processes-cloud-demo',
+    templateUrl: './processes-cloud-demo.component.html',
+    styleUrls: ['./processes-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
     appName: string = '';

demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.html

@@ -1,27 +1,23 @@
-<div fxLayout
-     fxFill>
-    <adf-cloud-service-task-filters [appName]="appName"
+<adf-cloud-service-task-filters
+    [appName]="appName"
     [filterParam]="{index: 0}"
     (filterClicked)="onTaskFilterSelected($event)"
     (filterSelected)="onTaskFilterSelected($event)">
-
 </adf-cloud-service-task-filters>
-    <div fxLayout="column"
-         fxFlex>
-        <adf-cloud-edit-service-task-filter [id]="filterId"
+<div class="app-task-list-with-filter">
+    <adf-cloud-edit-service-task-filter
+        [id]="filterId"
         [appName]="appName"
         [filterProperties]="taskFilterProperties.filterProperties"
         [sortProperties]="taskFilterProperties.sortProperties"
         [actions]="taskFilterProperties.actions"
         (filterChange)="onFilterChange($event)">
     </adf-cloud-edit-service-task-filter>
-        <div fxLayout="column"
-             fxFlex
-             fxFill
-             fxLayoutAlign="space-between"
+    <div
+        class="app-task-list-container"
         *ngIf="editedFilter">
-            <adf-cloud-service-task-list #taskCloud
-                                         fxFlex
+        <adf-cloud-service-task-list
+            #taskCloud
             [queryParams]="editedFilter"
             class="app-cloud-layout-overflow"
             [appName]="editedFilter.appName"
@@ -32,11 +28,11 @@
             [showActions]="actionMenu"
             [showContextMenu]="contextMenu">
         </adf-cloud-service-task-list>
-            <adf-pagination [target]="taskCloud"
+        <adf-pagination
+            [target]="taskCloud"
             (changePageSize)="onChangePageSize($event)"
             (nextPage)="resetSelectedRows()"
             (prevPage)="resetSelectedRows()">
         </adf-pagination>
     </div>
 </div>
-</div>

demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.scss

@@ -0,0 +1,25 @@
+app-service-task-list-cloud-demo {
+    min-height: 100%;
+    min-width: 100%;
+    display: flex;
+
+    .app-task-list-with-filter, .app-task-list-container {
+        flex-direction: column;
+        display: flex;
+        flex: 1;
+    }
+
+    &, .app-task-list-container {
+        height: 100%;
+        width: 100%;
+    }
+
+    .app-task-list-container {
+        place-content: stretch space-between;
+        align-items: stretch;
+
+        .app-cloud-layout-overflow {
+            flex: 1;
+        }
+    }
+}

demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts

@@ -15,9 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
-import { TaskListCloudSortingModel, ServiceTaskListCloudComponent, ServiceTaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService, AppConfigService, PaginationModel } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    ServiceTaskFilterCloudModel,
+    ServiceTaskListCloudComponent,
+    TaskListCloudSortingModel
+} from '@alfresco/adf-process-services-cloud';
+import { AppConfigService, PaginationModel, UserPreferencesService } from '@alfresco/adf-core';
 import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -25,7 +29,10 @@ import { takeUntil } from 'rxjs/operators';
 const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-service-task-filter';
 
 @Component({
-    templateUrl: './service-task-list-cloud-demo.component.html'
+    selector: 'app-service-task-list-cloud-demo',
+    templateUrl: './service-task-list-cloud-demo.component.html',
+    styleUrls: ['./service-task-list-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ServiceTaskListCloudDemoComponent implements OnInit, OnDestroy {
     @ViewChild('taskCloud')

demo-shell/src/app/components/cloud/shared/cloud-settings.component.html

@@ -1,4 +1,3 @@
-<div fxFlex fxLayout="column" class="app-settings-container">
 <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
     {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
 </mat-slide-toggle>
@@ -32,17 +31,15 @@
       <mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
     </mat-card-header>
     <mat-card-content>
-            <form [formGroup]="actionMenuForm" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
-                <mat-form-field fxFlex="23%">
+        <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
+            <mat-form-field>
                 <input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
             </mat-form-field>
-
-                <mat-form-field fxFlex="23%">
+            <mat-form-field>
                 <input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
             </mat-form-field>
-
-                <mat-form-field fxFlex="23%">
-                    <input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}"I>
+            <mat-form-field>
+                <input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}">
             </mat-form-field>
             <mat-checkbox formControlName="visible">
                 {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
@@ -55,7 +52,7 @@
             </button>
         </form>
         <div *ngIf="actions.length > 0">
-                <mat-chip-list #chipList>
+            <mat-chip-list>
                 <mat-chip *ngFor="let action of actions" [removable]="true">
                     {{action.title}}
                     <mat-icon
@@ -68,4 +65,3 @@
         </div>
     </mat-card-content>
 </mat-card>
-</div>

demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss

@@ -1,7 +1,25 @@
-.app-settings-container {
+app-cloud-settings {
     padding: 20px 30px;
-}
+    flex-direction: column;
+    display: flex;
+    flex: 1;
 
-.app-settings-container mat-form-field {
+    mat-form-field {
         max-width: 200px;
     }
+
+    .app-cloud-settings-form {
+        display: flex;
+        place-content: center space-around;
+        align-items: center;
+
+        mat-form-field {
+            flex: 1 1 100%;
+            max-width: 23%;
+        }
+
+        mat-form-field, mat-checkbox {
+            margin-right: 20px;
+        }
+    }
+}

demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts

@@ -15,16 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CloudLayoutService, ActionMenuModel } from '../services/cloud-layout.service';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActionMenuModel, CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 
 @Component({
     selector: 'app-cloud-settings',
     templateUrl: './cloud-settings.component.html',
-    styleUrls: ['./cloud-settings.component.scss']
+    styleUrls: ['./cloud-settings.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CloudSettingsComponent implements OnInit, OnDestroy {
     private onDestroy$ = new Subject<boolean>();

demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts

@@ -23,7 +23,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CoreModule } from '@alfresco/adf-core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule({
     imports: [
@@ -32,8 +31,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
         MatDialogModule,
         MatInputModule,
         MatSelectModule,
-        MatSlideToggleModule,
-        FlexLayoutModule
+        MatSlideToggleModule
     ],
     declarations: [ CloudSettingsComponent ],
     exports: [ CommonModule, CloudSettingsComponent]

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html

@@ -1,8 +1,7 @@
 <h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
 
-<div fxLayout="column" fxFill fxLayoutGap="2px">
-    <div fxLayout="row" fxFill>
-        <div fxLayout="column" fxFlex="80%">
+<div class="app-task-details-cloud-column">
+    <div class="app-task-details-cloud-row">
         <adf-cloud-task-form
             [appName]="appName"
             [taskId]="taskId"
@@ -12,8 +11,8 @@
             (formSaved)="onFormSaved()"
             (error)="onError($event)">
         </adf-cloud-task-form>
-        </div>
-        <adf-cloud-task-header #taskHeader fxFlex
+        <adf-cloud-task-header
+            #taskHeader
             [appName]="appName"
             [taskId]="taskId">
         </adf-cloud-task-header>

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss

@@ -1,3 +1,4 @@
+app-task-details-cloud-demo {
     .app {
         &-task-detail-container {
             display: flex;
@@ -15,4 +16,33 @@
             width: 30%;
             font-family: inherit;
         }
+
+        &-task-details-cloud-column {
+            margin: 0;
+            flex-direction: column;
+
+            .app-task-details-cloud-row {
+                flex-direction: row;
+
+                adf-cloud-task-form {
+                    flex: 1 1 100%;
+                    flex-direction: column;
+                    display: flex;
+                    max-width: 80%;
+                }
+
+                adf-cloud-task-header {
+                    flex: 1;
+                }
+            }
+        }
+
+        &-task-details-cloud-column, &-task-details-cloud-row {
+            height: 100%;
+            min-height: 100%;
+            min-width: 100%;
+            width: 100%;
+            display: flex;
+        }
+    }
 }

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts

@@ -15,15 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
 import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
 import { PreviewService } from '../../services/preview.service';
 
 @Component({
+    selector: 'app-task-details-cloud-demo',
     templateUrl: './task-details-cloud-demo.component.html',
-    styleUrls: ['./task-details-cloud-demo.component.scss']
+    styleUrls: ['./task-details-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TaskDetailsCloudDemoComponent {
 

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html

@@ -1,4 +1,3 @@
-<div fxLayout="column" fxFill fxLayoutGap="2px">
 <adf-cloud-edit-task-filter
     [appName]="appName"
     [id]="filterId"
@@ -8,9 +7,9 @@
     (action)="onTaskFilterAction($event)"
     (filterChange)="onFilterChange($event)">
 </adf-cloud-edit-task-filter>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-task-list #taskCloud
-            fxFlex
+<div class="adf-cloud-task-list-container" *ngIf="editedFilter">
+    <adf-cloud-task-list
+        #taskCloud
         class="app-cloud-layout-overflow"
         [appName]="editedFilter.appName"
         [processDefinitionId]="editedFilter.processDefinitionId"
@@ -70,4 +69,3 @@
         </div>
     </div>
 </div>
-</div>

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss

@@ -0,0 +1,22 @@
+app-tasks-cloud-demo {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .adf-cloud-task-list-container {
+        box-sizing: border-box;
+        place-content: stretch space-between;
+        align-items: stretch;
+        margin-top: 2px;
+    }
+
+    &, .adf-cloud-task-list-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    .adf-cloud-task-list-container, .app-cloud-layout-overflow {
+        flex: 1;
+    }
+}

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts

@@ -15,9 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
-import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService, AppConfigService, DataCellEvent } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    TaskFilterCloudModel,
+    TaskListCloudComponent,
+    TaskListCloudSortingModel
+} from '@alfresco/adf-process-services-cloud';
+import { AppConfigService, DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CloudLayoutService } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
@@ -28,7 +32,10 @@ const ACTION_DELETE = 'delete';
 const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';
 
 @Component({
-    templateUrl: './tasks-cloud-demo.component.html'
+    selector: 'app-tasks-cloud-demo',
+    templateUrl: './tasks-cloud-demo.component.html',
+    styleUrls: ['./tasks-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TasksCloudDemoComponent implements OnInit, OnDestroy {
     @ViewChild('taskCloud')

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

@@ -8,7 +8,7 @@
             </mat-select>
         </mat-form-field>
     </adf-toolbar-title>
-    <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+    <adf-toolbar-divider></adf-toolbar-divider>
     <button mat-icon-button
             [disabled]="!hasSelection(customSourcesDocumentList.selection)"
             title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"

demo-shell/src/app/components/files/custom-sources.component.ts

@@ -15,12 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 import { DocumentListComponent } from '@alfresco/adf-content-services';
 
 @Component({
     selector: 'app-custom-sources',
-    templateUrl: './custom-sources.component.html'
+    templateUrl: './custom-sources.component.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class CustomSourcesComponent {
 

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

@@ -33,9 +33,10 @@
         </adf-sites-dropdown>
     </div>
 
-    <div id="document-list-container" class="app-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
-         fxLayoutGap="16px">
-        <adf-upload-drag-area fxFlex="1 1 auto"
+    <div
+        id="document-list-container"
+        class="app-document-list-container">
+        <adf-upload-drag-area
                               [disabled]="disableDragArea"
                               [acceptedFilesType]="getFileFiltering()"
                               [rootFolderId]="currentFolderId"
@@ -51,21 +52,21 @@
                 <span class="app-error-message--text">{{errorMessage}}</span>
             </div>
             <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="app-files-toolbar">
-                <adf-toolbar-title  fxFlex="0 1 auto">
-                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
+                <adf-toolbar-title>
+                    <adf-breadcrumb
                                     class="app-files-breadcrumb"
                                     root="APP.PERSONAL-FILES"
                                     [target]="documentList">
                     </adf-breadcrumb>
-                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
+                    <adf-dropdown-breadcrumb
                                              class="app-files-breadcrumb"
                                              [target]="documentList">
                     </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
 
-                <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+                <adf-toolbar-divider></adf-toolbar-divider>
 
-                <div fxFlex="0 0 auto" class="app-document-action-buttons" fxShow fxHide.lt-sm="true">
+                <div class="app-document-action-buttons">
                     <button
                         mat-icon-button
                         data-automation-id="document-list-grid-view"
@@ -150,7 +151,7 @@
                     </button>
                 </div>
 
-                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker"
+                <button mat-icon-button [matMenuTriggerFor]="themePicker"
                         matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.THEME' | translate }}">
                     <mat-icon>format_color_fill</mat-icon>
                 </button>
@@ -171,9 +172,9 @@
                     </mat-icon>
                 </button>
 
-                <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
+                <adf-toolbar-divider class="app-toolbar-divider-before-more-menu"></adf-toolbar-divider>
 
-                <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
+                <button class="app-toolbar-more-menu-button" mat-icon-button [matMenuTriggerFor]="menu">
                     <mat-icon>more_vert</mat-icon>
                 </button>
                 <mat-menu #menu="matMenu">
@@ -212,7 +213,7 @@
                 </mat-menu>
             </adf-toolbar>
 
-            <div class="app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
+            <div class="app-document-list-container-in-upload-drag-area app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
                 <adf-document-list
                 #documentList
                 class="app-file-list-container"
@@ -464,7 +465,7 @@
             </adf-infinite-pagination>
         </adf-upload-drag-area>
 
-        <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar" fxFlex="0 0 auto">
+        <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
             <div info-drawer-content>
 
                 <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">

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

@@ -26,6 +26,37 @@
     .app-datatable-list {
         min-height: 400px;
     }
+
+    adf-upload-drag-area {
+        margin-right: 16px;
+
+        adf-toolbar-title {
+            flex: 0 1 auto;
+        }
+
+        .app-document-action-buttons {
+            flex: 0 0 auto;
+        }
+
+        @media screen and (max-width: 600px) {
+            adf-breadcrumb, .app-document-action-buttons {
+                display: none;
+            }
+        }
+
+        @media screen and (min-width: 600px) {
+            adf-dropdown-breadcrumb, .app-toolbar-divider-before-more-menu, .app-toolbar-more-menu-button {
+                display: none;
+            }
+        }
+    }
+
+    &:not(.app-document-list-container-in-upload-drag-area) {
+        display: flex;
+        place-content: stretch flex-start;
+        align-items: stretch;
+        max-height: 100%;
+    }
 }
 
 .adf-datatable-card .app-lock-button {
@@ -45,10 +76,10 @@
 }
 
 .app-manage-versions-sidebar {
-    width: 360px !important;
+    flex: 0 0 auto;
 
-    & .app-info-drawer-layout-header {
-        display: none !important;
+    &.adf-info-drawer-layout {
+        width: 360px;
     }
 }
 

demo-shell/src/app/components/files/metadata-dialog-adapter.component.html

@@ -3,6 +3,6 @@
     <adf-content-metadata-card [node]="contentEntry"
                                [displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
 </section>
-<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<footer mat-dialog-actions class="adf-metadata-dialog-actions">
     <button mat-button (click)="close()">{{'METADATA.DIALOG.CLOSE' | translate}}</button>
 </footer>

demo-shell/src/app/components/files/metadata-dialog-adapter.component.scss

@@ -0,0 +1,6 @@
+.adf-metadata-dialog-actions {
+    display: flex;
+    max-height: 100%;
+    place-content: center flex-end;
+    align-items: center;
+}

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html

@@ -40,6 +40,6 @@
     <adf-version-list [node]="contentEntry" [showActions]="false"></adf-version-list>
 </section>
 
-<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<footer mat-dialog-actions class="adf-version-manager-dialog-actions">
     <button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
 </footer>

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.scss

@@ -0,0 +1,6 @@
+.adf-version-manager-dialog-actions {
+    display: flex;
+    max-height: 100%;
+    place-content: center flex-end;
+    align-items: center;
+}

demo-shell/src/app/components/process-service/process-attachments.component.css

@@ -1,3 +1,9 @@
-adf-create-process-attachment ::ng-deep button {
+app-process-attachments adf-create-process-attachment button {
     float: right;
 }
+
+@media screen and (max-width: 960px) {
+    app-process-attachments .app-empty-list-drag_drop, app-process-attachments .app-empty-list__any-files-here-to-add {
+        display: none;
+    }
+}

demo-shell/src/app/components/process-service/process-attachments.component.html

@@ -15,14 +15,13 @@
                             {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
                         </div>
                         <div adf-empty-list-body *ngIf="!isCompletedProcess()">
-                            <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
+                        <div class="app-empty-list-drag_drop">
                             {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
                         </div>
-                                  <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
+                              <div class="app-empty-list__any-files-here-to-add">
                                   {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                               </div>
                         </div>
-
                     </adf-empty-list>
             </adf-process-attachment-list>
 

demo-shell/src/app/components/process-service/process-attachments.component.ts

@@ -15,11 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
-import { ProcessInstance, ProcessService ,
-    ProcessAttachmentListComponent, ProcessUploadService } from '@alfresco/adf-process-services';
+import { Component, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    ProcessAttachmentListComponent,
+    ProcessInstance,
+    ProcessService,
+    ProcessUploadService
+} from '@alfresco/adf-process-services';
 import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
-import { UploadService, DiscoveryApiService } from '@alfresco/adf-content-services';
+import { DiscoveryApiService, UploadService } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -38,7 +42,8 @@ export function processUploadServiceFactory(api: AlfrescoApiService, config: App
             useFactory: (processUploadServiceFactory),
             deps: [AlfrescoApiService, AppConfigService, DiscoveryApiService]
         }
-    ]
+    ],
+    encapsulation: ViewEncapsulation.None
 })
 
 export class ProcessAttachmentsComponent implements OnInit, OnChanges, OnDestroy {

demo-shell/src/app/components/process-service/process-service.component.html

@@ -2,8 +2,8 @@
                data-automation-id="navigation-bar">
     <mat-tab id="app-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
         <div class="app-page-content" *ngIf="showTaskTab">
-            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="app-grid-item app-tasks-menu" fxFlex.gt-md="265px">
+            <div class="app-grid">
+                <div class="app-grid-item app-tasks-menu">
                     <div class="app-list-buttons">
                         <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                  title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -36,8 +36,8 @@
                         </mat-expansion-panel>
                     </mat-accordion>
                 </div>
-                <div class="app-grid-item app-tasks-list" fxFlex.gt-md="380px"
-                     [ngClass.gt-md]="{'adf-small-pagination': true}"
+                <div
+                    class="app-grid-item app-tasks-list"
                     *ngIf="taskFilter && !isStartTaskMode()">
                     <adf-tasklist
                         [appId]="taskFilter?.appId"
@@ -74,7 +74,9 @@
                         #taskListPagination>
                     </adf-pagination>
                 </div>
-                <div class="app-grid-item app-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
+                <div
+                    class="app-grid-item app-tasks-details"
+                    *ngIf="!isStartTaskMode()"
                     data-automation-id="app-tasks-details">
                     <adf-task-details #activitiDetails
                                       [debugMode]="true"
@@ -106,7 +108,9 @@
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="app-grid-item app-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                <div
+                    class="app-grid-item app-tasks-start"
+                    *ngIf="isStartTaskMode()">
                     <adf-start-task
                         [appId]="appId"
                         [name]="defaultTaskName"
@@ -120,8 +124,10 @@
     <mat-tab id="processes-header" href="#processes"
              label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
         <div class="app-page-content" *ngIf="showProcessTab">
-            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div id="app-processes-menu"  class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
+            <div class="app-grid">
+                <div
+                    id="app-processes-menu"
+                    class="app-grid-item app-processes-menu">
                     <div class="app-list-buttons">
                         <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                  title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -157,8 +163,8 @@
                         </mat-expansion-panel>
                     </mat-accordion>
                 </div>
-                <div class="app-grid-item app-processes-list app-list" fxFlex.gt-md="380px"
-                     [ngClass.gt-md]="{'adf-small-pagination': true}"
+                <div
+                    class="app-grid-item app-processes-list app-list"
                     *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
                         #processList
@@ -190,7 +196,9 @@
                         #processListPagination>
                     </adf-pagination>
                 </div>
-                <div class="app-grid-item app-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
+                <div
+                    class="app-grid-item app-processes-details"
+                    *ngIf="!isStartProcessMode()">
                     <adf-process-instance-details
                         #activitiProcessDetails
                         [processInstanceId]="currentProcessInstanceId"
@@ -218,7 +226,8 @@
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="app-grid-item app-processes-start" fxFlex.gt-md="1 1 auto"
+                <div
+                    class="app-grid-item app-processes-start"
                     *ngIf="isStartProcessMode()">
                     <adf-start-process
                         #activitiStartProcess
@@ -238,18 +247,12 @@
     </mat-tab>
     <mat-tab id="report-header" href="#report"
              label="{{'PS-TAB.REPORTS-TAB' | translate}}">
-        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="app-grid-item app-reports-menu" fxFlex.gt-md="300px">
+        <div class="app-grid">
+            <div class="app-grid-item app-reports-menu">
                 <span><h5>Report List</h5></span>
                 <mat-divider></mat-divider>
-                <!-- <adf-analytics-report-list
-                    [appId]="appId"
-                    [selectFirst]="selectFirstReport"
-                    (reportClick)="onReportClick($event)"
-                    #analyticsReportList>
-                </adf-analytics-report-list> -->
             </div>
-            <div class="app-grid-item app-reports-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-reports-details">
                 <adf-analytics
                     *ngIf="report"
                     [appId]="appId"
@@ -267,11 +270,11 @@
     </mat-tab>
     <mat-tab id="settings-header" href="#settings"
              label="{{'PS-TAB.SETTINGS-TAB' | translate}}">
-        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="app-grid-item app-settings-menu" fxFlex.gt-md="300px">
+        <div class="app-grid">
+            <div class="app-grid-item app-settings-menu">
                 <span><h3>Settings Menu</h3></span>
             </div>
-            <div class="app-grid-item app-settings-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-settings-details">
                 <div>
                     <mat-slide-toggle id="adf-show-task-filter-icon" [(ngModel)]="showTaskFilterIcon">Show task filters icons
                     </mat-slide-toggle>
@@ -304,7 +307,7 @@
                         <mat-card-header >
                           <mat-card-title>Filter Process definitions</mat-card-title>
                         </mat-card-header>
-                        <mat-card-content  fxLayout="column" fxLayoutAlign="space-around stretch">
+                        <mat-card-content class="app-filter-process-definitions-inputs">
                             <mat-form-field>
                                 <mat-label>ApplicationId</mat-label>
                                 <input matInput [(ngModel)]="applicationId">

demo-shell/src/app/components/process-service/process-service.component.scss

@@ -5,13 +5,28 @@
 }
 
 .app-grid {
+    flex-direction: row;
+    display: flex;
+    max-height: 100%;
+    place-content: stretch flex-start;
+    align-items: stretch;
+
     .app-grid-item {
+        flex: 1;
         margin: 4px;
         box-shadow:
             0 2px 2px 0 rgba(0, 0, 0, 0.14),
             0 3px 1px -2px rgba(0, 0, 0, 0.2),
             0 1px 5px 0 rgba(0, 0, 0, 0.12);
         padding: 10px;
+
+        .app-filter-process-definitions-inputs {
+            flex-direction: column;
+            display: flex;
+            max-width: 100%;
+            place-content: stretch space-around;
+            align-items: stretch;
+        }
     }
 
     .app-list-buttons {
@@ -70,6 +85,37 @@
         margin: 10px;
     }
 
+    @media screen and (min-width: 1280px) {
+        .app-tasks-menu {
+            flex: 1 1 265px;
+            max-width: 265px;
+            min-width: 265px;
+        }
+
+        .app-tasks-list, .app-processes-list {
+            flex: 1 1 380px;
+            max-width: 380px;
+            min-width: 380px;
+        }
+
+        .app-processes-menu {
+            flex: 1 1 225px;
+            max-width: 225px;
+            min-width: 225px;
+        }
+
+        .app-reports-menu, .app-settings-menu {
+            flex: 1 1 300px;
+            max-width: 300px;
+            min-width: 300px;
+        }
+
+        .app-tasks-details, .app-tasks-start, .app-processes-details, .app-processes-start, .app-reports-details, .app-settings-details {
+            flex: 1 1 auto;
+            min-width: auto;
+        }
+    }
+
     @media screen and (max-width: 959px) {
         container-widget .app-grid-list {
             flex-direction: column;
@@ -77,6 +123,14 @@
     }
 }
 
+@media screen and (max-width: 1279px) {
+    .app-grid {
+        flex-direction: column;
+        max-width: 100%;
+        max-height: initial;
+    }
+}
+
 .app-accordion-panel {
     .mat-expansion-panel {
         background: inherit;

demo-shell/src/app/components/process-service/task-attachments.component.css

@@ -1,3 +1,9 @@
-adf-create-task-attachment ::ng-deep button {
+app-task-attachments adf-create-task-attachment button {
     float: right;
 }
+
+@media screen and (max-width: 960px) {
+    app-task-attachments .app-empty-list-drag_drop, app-task-attachments .app-empty-list__any-files-here-to-add {
+        display: none;
+    }
+}

demo-shell/src/app/components/process-service/task-attachments.component.html

@@ -13,10 +13,10 @@
                     <div adf-empty-list-header class="app-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
                     </div>
                     <div adf-empty-list-body  *ngIf="!isCompletedTask()">
-                        <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
+                        <div class="app-empty-list-drag_drop">
                             {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
                         </div>
-                        <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
+                        <div class="app-empty-list__any-files-here-to-add">
                             {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                         </div>
                     </div>

demo-shell/src/app/components/process-service/task-attachments.component.ts

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
-    TaskListService,
     TaskAttachmentListComponent,
-    TaskUploadService,
-    TaskDetailsModel
+    TaskDetailsModel,
+    TaskListService,
+    TaskUploadService
 } from '@alfresco/adf-process-services';
 import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
-import { UploadService, DiscoveryApiService } from '@alfresco/adf-content-services';
+import { DiscoveryApiService, UploadService } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -36,6 +36,7 @@ export function taskUploadServiceFactory(api: AlfrescoApiService, config: AppCon
     selector: 'app-task-attachments',
     templateUrl: './task-attachments.component.html',
     styleUrls: ['./task-attachments.component.css'],
+    encapsulation: ViewEncapsulation.None,
     providers: [
         {
             provide: UploadService,

demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.html

@@ -1,12 +1,10 @@
-<div class="app-rich-text-editor-container" fxLayout="row wrap" fxLayoutAlign="center start">
-
-    <div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-sx">
+<div class="app-rich-text-editor-container" >
+    <div class="app-rich-text-editor-col app-rich-text-editor-col-sx">
         <h1 class="app-rich-text-editor-col-title">Rich Text Editor</h1>
         <adf-cloud-rich-text-editor [data]="sampleData" #textEditor></adf-cloud-rich-text-editor>
     </div>
-    <div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-rx">
+    <div class="app-rich-text-editor-col app-rich-text-editor-col-rx">
         <h1 class="app-rich-text-editor-col-title">Output Data</h1>
         <pre class="app-rich-text-editor-output">{{editorOutputData | json}}</pre>
     </div>
-
 </div>

demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.scss

@@ -1,6 +1,12 @@
+app-rich-text-editor {
     .app-rich-text-editor-container {
+        display: flex;
+
         .app-rich-text-editor-col {
             padding: 20px;
+            flex: 1 1 50%;
+            max-width: 50%;
+            box-sizing: border-box;
 
             &-rx {
                 border-left: 1px dashed var(--theme-primary-color);
@@ -17,3 +23,4 @@
             overflow-x: scroll;
         }
     }
+}

demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
 import { OutputData } from '@editorjs/editorjs';
 import { RichTextEditorComponent as AdfRichTextEditorComponent } from '@alfresco/adf-process-services-cloud';
 import { takeUntil } from 'rxjs/operators';
@@ -24,7 +24,8 @@ import { Subject } from 'rxjs';
 @Component({
     selector: 'app-rich-text-editor',
     templateUrl: './rich-text-editor.component.html',
-    styleUrls: ['./rich-text-editor.component.scss']
+    styleUrls: ['./rich-text-editor.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class RichTextEditorComponent implements AfterViewInit, OnDestroy {
 

demo-shell/src/app/components/rich-text-editor/rich-text-editor.module.ts

@@ -22,7 +22,6 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { RichTextEditorModule } from '@alfresco/adf-process-services-cloud';
 import { CoreModule } from '@alfresco/adf-core';
 import { RouterModule, Routes } from '@angular/router';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 const routes: Routes = [
     {
@@ -38,7 +37,6 @@ const routes: Routes = [
         CoreModule,
         RouterModule.forChild(routes),
         ContentModule.forChild(),
-        FlexLayoutModule,
         RichTextEditorModule
     ]
 })

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

@@ -1,21 +1,17 @@
 <label for="nodeId"><b>Insert Node Id</b></label><br>
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
 
-<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
+<div class="app-social-example-areas">
+    <mat-card class="app-social-example-area">
         <div class="app-social-title">
             {{'SOCIAL.LIKE' | translate }}
         </div>
         <adf-like [nodeId]="nodeId"></adf-like>
     </mat-card>
-    </div>
-    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
+    <mat-card class="app-social-example-area">
         <div class="app-social-title">
             {{'SOCIAL.RATING' | translate }}
         </div>
         <adf-rating [nodeId]="nodeId"></adf-rating>
     </mat-card>
 </div>
-</div>

demo-shell/src/app/components/social/social.component.scss

@@ -1,7 +1,25 @@
+app-social {
+    .app-social-example-areas {
+        flex-direction: column;
+        box-sizing: border-box;
+        display: flex;
+        place-content: stretch flex-start;
+        align-items: stretch;
+
         .app-social-example-area {
             margin: 10px;
-}
 
             .app-social-example-title {
                 padding-bottom: 12px;
             }
+        }
+
+        @media screen and (min-width: 1280px) {
+            flex-direction: row;
+
+            .app-social-example-area {
+                flex: 1 1 auto;
+            }
+        }
+    }
+}

demo-shell/src/app/components/social/social.component.ts

@@ -15,12 +15,13 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'app-social',
     templateUrl: './social.component.html',
-    styleUrls: ['./social.component.scss']
+    styleUrls: ['./social.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class SocialComponent {
 

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

@@ -3,22 +3,18 @@
 <button mat-raised-button id="adf-tag-node-send" (click)="onSubmit()" color="primary">Confirm</button>
 
 <br>
-<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
+<div class="app-tag-example-areas">
+    <mat-card class="app-tag-example-area">
         <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
     </mat-card>
-    </div>
-    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
+    <mat-card class="app-tag-example-area">
         <div class="app-tag-example-title">
             {{'TAG.LIST' | translate }}
         </div>
         <adf-tag-list></adf-tag-list>
     </mat-card>
-    </div>
-    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
-        <mat-card>
+    <div class="app-tag-example-area">
+        <mat-card class="app-tag-example-area">
             <div class="app-tag-example-title">
                 {{'TAG.NODE_LIST' | translate }}
             </div>

demo-shell/src/app/components/tag/tag.component.scss

@@ -1,7 +1,25 @@
+app-tag {
+    .app-tag-example-areas {
+        flex-direction: column;
+        box-sizing: border-box;
+        display: flex;
+        place-content: stretch flex-start;
+        align-items: stretch;
+
         .app-tag-example-area {
             margin: 10px;
-}
 
             .app-tag-example-title {
                 padding-bottom: 12px;
             }
+        }
+
+        @media screen and (min-width: 1280px) {
+            flex-direction: row;
+
+            .app-tag-example-area {
+                flex: 1 1 auto;
+            }
+        }
+    }
+}

demo-shell/src/app/components/tag/tag.component.ts

@@ -15,12 +15,13 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'app-tag',
     templateUrl: './tag.component.html',
-    styleUrls: ['./tag.component.scss']
+    styleUrls: ['./tag.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TagComponent {
 

demo-shell/src/versions.json

@@ -260,7 +260,6 @@
               "/@angular/compiler",
               "/@angular/compiler-cli",
               "/@angular/core",
-              "/@angular/flex-layout",
               "/@angular/forms",
               "/@angular/http",
               "/@angular/material",
@@ -561,11 +560,6 @@
       },
       "peerMissing": true
     },
-    "@angular/flex-layout": {
-      "version": "7.0.0-beta.24",
-      "from": "@angular/flex-layout@^7.0.0-beta.24",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-7.0.0-beta.24.tgz"
-    },
     "@angular/forms": {
       "version": "7.2.15",
       "from": "@angular/forms@^7.2.15",

lib/content-services/package.json

@@ -16,7 +16,6 @@
     "@angular/common": ">=14.1.3",
     "@angular/compiler": ">=14.1.3",
     "@angular/core": ">=14.1.3",
-    "@angular/flex-layout": "^14.0.0-beta.40",
     "@angular/forms": ">=14.1.3",
     "@angular/material": ">=14.1.2",
     "@angular/platform-browser": ">=14.1.3",

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html

@@ -13,7 +13,7 @@
             [displayCategories]="true">
         </adf-content-metadata>
     </mat-card-content>
-    <mat-card-footer class="adf-content-metadata-card-footer" fxLayout="row" fxLayoutAlign="space-between stretch">
+    <mat-card-footer class="adf-content-metadata-card-footer">
         <div>
             <button *ngIf="isEditAspectSupported()"
                 mat-icon-button

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss

@@ -11,6 +11,10 @@
         margin: 0;
         padding: 8px 12px;
         border-top: 1px solid var(--adf-theme-foreground-text-color-007);
+        display: flex;
+        place-content: stretch space-between;
+        align-items: stretch;
+        max-height: 100%;
 
         button {
             color: var(--adf-theme-foreground-text-color-054);

lib/content-services/src/lib/content-metadata/content-metadata.module.ts

@@ -16,7 +16,6 @@
  */
 
 import { CommonModule } from '@angular/common';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { NgModule } from '@angular/core';
 import { MaterialModule } from '../material.module';
 import { CoreModule } from '@alfresco/adf-core';
@@ -29,7 +28,6 @@ import { CategoriesModule } from '../category/category.module';
     imports: [
         CommonModule,
         MaterialModule,
-        FlexLayoutModule,
         CoreModule,
         TagModule,
         CategoriesModule

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

@@ -59,10 +59,8 @@
                     </div>
                     <adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
                         <div class="adf-empty-list_template adf-empty-folder">
-                            <div fxHide.lt-md="true"
-                                 class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
-                            <div fxHide.lt-md="true"
-                                 class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
+                            <div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
+                            <div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
                             <img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image"
                                  [src]="emptyFolderImageUrl">
                         </div>

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -38,8 +38,8 @@
             <adf-empty-list *ngIf="!customNoContentTemplate">
                 <div class="adf-empty-list_template adf-empty-folder">
                     <div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
-                    <div fxHide.lt-md="true" class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
-                    <div fxHide.lt-md="true" class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
+                    <div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
+                    <div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
                     <img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
                 </div>
             </adf-empty-list>

lib/content-services/src/lib/document-list/components/document-list.component.scss

@@ -170,6 +170,13 @@
             width: 250px;
         }
     }
+
+    @media screen and (max-width: 960px) {
+        &-drag-drop,
+        &-any-files-here-to-add {
+            display: none;
+        }
+    }
 }
 
 .adf-datatable-gallery-thumbnails {

lib/content-services/src/lib/document-list/document-list.module.ts

@@ -17,7 +17,6 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { CoreModule, EditJsonDialogModule } from '@alfresco/adf-core';
 
 import { MaterialModule } from '../material.module';
@@ -43,7 +42,6 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
         CoreModule,
         CommonModule,
         ContentPipeModule,
-        FlexLayoutModule,
         MaterialModule,
         UploadModule,
         EditJsonDialogModule,

lib/content-services/src/lib/version-manager/version-manager.component.html

@@ -2,7 +2,7 @@
 
     <adf-version-comparison *ngIf="showVersionComparison" [node]="node" [newFileVersion]="newFileVersion"></adf-version-comparison>
 
-    <div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center" [@uploadToggle]="uploadState">
+    <div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" [@uploadToggle]="uploadState">
         <table class="adf-version-upload" *ngIf="uploadState !== 'close' && !versionList.isLoading">
             <tr>
                 <td>

lib/content-services/src/lib/viewer/alfresco-viewer.module.ts

@@ -18,7 +18,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { ExtensionsModule } from '@alfresco/adf-extensions';
@@ -37,7 +36,6 @@ import { ContentDirectiveModule } from '../directives';
         TranslateModule,
         FormsModule,
         ReactiveFormsModule,
-        FlexLayoutModule,
         A11yModule,
         ExtensionsModule,
         ContentDirectiveModule

lib/core/package.json

@@ -26,7 +26,6 @@
     "@angular/cdk": ">=14.1.2",
     "@angular/common": ">=14.1.3",
     "@angular/core": ">=14.1.3",
-    "@angular/flex-layout": "^14.0.0-beta.40",
     "@angular/forms": ">=14.1.3",
     "@angular/material": ">=14.1.2",
     "@angular/material-moment-adapter": ">=14.1.2",

lib/core/src/lib/buttons-menu/buttons-menu.module.ts

@@ -22,15 +22,13 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
 import { ButtonsMenuComponent } from './buttons-menu.component';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule({
     imports: [
         CommonModule,
         MatIconModule,
         MatMenuModule,
-        TranslateModule,
-        FlexLayoutModule
+        TranslateModule
     ],
     declarations: [ButtonsMenuComponent],
     exports: [ButtonsMenuComponent, MatIconModule, MatMenuModule, MatButtonModule]

lib/core/src/lib/card-view/card-view.module.ts

@@ -32,7 +32,6 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { CardViewContentProxyDirective } from './directives/card-view-content-proxy.directive';
@@ -52,7 +51,6 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        FlexLayoutModule,
         TranslateModule,
         MatDatepickerModule,
         MatNativeDateModule,

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -88,9 +88,7 @@
         class="adf-textitem-clickable"
         [ngClass]="{ 'adf-property-read-only': !isEditable }"
         [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-        (click)="clicked()"
-        fxLayout="row"
-        fxLayoutAlign="space-between center">
+        (click)="clicked()">
         <mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
             [floatLabel]="'never'">
             <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
@@ -110,7 +108,6 @@
                 [attr.data-automation-id]="'card-textitem-value-' + property.key">
             <button mat-icon-button
                 matSuffix
-                fxFlex="0 0 auto"
                 *ngIf="showClickableIcon"
                 class="adf-textitem-action"
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"

lib/core/src/lib/form/form-base.module.ts

@@ -35,7 +35,6 @@ import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimep
 import { FormRendererComponent } from './components/form-renderer.component';
 import { EditJsonDialogModule } from '../dialogs/edit-json/edit-json.dialog.module';
 import { A11yModule } from '@angular/cdk/a11y';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ViewerModule } from '../viewer/viewer.module';
 import { InplaceFormInputComponent } from './components/inplace-form-input/inplace-form-input.component';
 
@@ -43,7 +42,6 @@ import { InplaceFormInputComponent } from './components/inplace-form-input/inpla
     imports: [
         CommonModule,
         A11yModule,
-        FlexLayoutModule,
         DataTableModule,
         HttpClientModule,
         MaterialModule,

lib/core/src/lib/layout/components/header/header.component.html

@@ -28,11 +28,10 @@
         role="link"
         [attr.aria-label]="title | translate"
         [routerLink]="redirectUrl"
-        fxFlex="1 1 auto"
-        fxShow
-        fxHide.lt-sm="true"
         class="adf-app-title"
-        >{{ title }}</h1>
+        >
+        {{ title }}
+    </h1>
     <ng-content></ng-content>
 
     <button

lib/core/src/lib/viewer/components/viewer-render.component.html

@@ -1,12 +1,9 @@
 <div *ngIf="isLoading"
-     class="adf-viewer-render-main"
-     fxFlexOrder="1"
-     fxFlex="1 1 auto">
+     class="adf-viewer-render-main">
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
         <div class="adf-viewer-render-content-container">
             <ng-container *ngIf="isLoading">
-                <div class="adf-viewer-render__loading-screen"
-                     fxFlex="1 1 auto">
+                <div class="adf-viewer-render__loading-screen">
                     <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
                     <div>
                         <mat-spinner></mat-spinner>
@@ -19,9 +16,7 @@
 </div>
 
 <div *ngIf="!isLoading"
-     class="adf-viewer-render-main"
-     fxFlexOrder="1"
-     fxFlex="1 1 auto">
+     class="adf-viewer-render-main">
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
         <div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
             <ng-container *ngSwitchCase="'external'">

lib/core/src/lib/viewer/components/viewer-render.component.scss

@@ -8,6 +8,8 @@
 .adf-viewer-render {
     &-main {
         width: 0;
+        order: 1;
+        flex: 1 1 auto;
     }
 
     &-content-container {
@@ -48,6 +50,7 @@
 
     &__loading-screen {
         display: flex;
+        flex: 1 1 auto;
         align-items: center;
         justify-content: center;
         flex-direction: column;

lib/core/src/lib/viewer/components/viewer.component.html

@@ -4,7 +4,6 @@
      [class.adf-viewer-inline-container]="!overlayMode">
 
     <div class="adf-viewer-content"
-         fxLayout="column"
          [cdkTrapFocus]="overlayMode"
          cdkTrapFocusAutoCapture>
         <ng-content select="adf-viewer-toolbar"></ng-content>
@@ -35,8 +34,7 @@
                     </button>
                 </adf-toolbar-title>
 
-                <div fxFlex="1 1 auto"
-                     class="adf-viewer__file-title">
+                <div class="adf-viewer__file-title">
                     <button *ngIf="allowNavigate && canNavigateBefore"
                             data-automation-id="adf-toolbar-pref-file"
                             mat-icon-button
@@ -125,13 +123,10 @@
             </adf-toolbar>
         </ng-container>
 
-        <div fxLayout="row"
-             fxFlex="1 1 auto">
+        <div class="adf-viewer-sidebars">
 
             <ng-container *ngIf="allowRightSidebar && showRightSidebar">
-                <div class="adf-viewer__sidebar"
-                     [ngClass]="'adf-viewer__sidebar__right'"
-                     fxFlexOrder="4"
+                <div class="adf-viewer__sidebar adf-viewer__sidebar__right"
                      id="adf-right-sidebar">
                     <ng-container *ngIf="sidebarRightTemplate">
                         <ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext">
@@ -143,9 +138,7 @@
             </ng-container>
 
             <ng-container *ngIf="allowLeftSidebar && showLeftSidebar">
-                <div class="adf-viewer__sidebar"
-                     [ngClass]="'adf-viewer__sidebar__left'"
-                     fxFlexOrder="1"
+                <div class="adf-viewer__sidebar adf-viewer__sidebar__left"
                      id="adf-left-sidebar">
                     <ng-container *ngIf="sidebarLeftTemplate">
                         <ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext">
@@ -157,8 +150,6 @@
             </ng-container>
 
             <adf-viewer-render
-                fxFlexOrder="1"
-                fxFlex="1 1 auto"
                 (close)="onClose()"
                 [mimeType]="mimeType"
                 [fileName]="fileName"

lib/core/src/lib/viewer/components/viewer.component.scss

@@ -36,6 +36,7 @@
 
     &__file-title {
         text-align: center;
+        flex: 1 1 auto;
     }
 
     &__display-name {
@@ -92,6 +93,8 @@
             @extend .adf-full-screen;
 
             flex: 1;
+            flex-direction: column;
+            display: flex;
 
             & > div {
                 height: 0; // Firefox
@@ -112,7 +115,11 @@
         @extend .adf-full-screen;
     }
 
-    &__sidebar {
+    &-sidebars {
+        display: flex;
+        flex: 1 1 auto;
+
+        .adf-viewer__sidebar {
             width: 350px;
             display: block;
             padding: 0;
@@ -122,10 +129,19 @@
 
             &__right {
                 border-left: 1px solid var(--adf-theme-foreground-text-color-007);
+                order: 4;
             }
 
             &__left {
                 border-right: 1px solid var(--adf-theme-foreground-text-color-007);
+                order: 1;
+            }
+        }
+
+        adf-viewer-render {
+            order: 1;
+            flex: 1 1 auto;
+            display: flex;
         }
     }
 }

lib/core/src/lib/viewer/viewer.module.ts

@@ -18,7 +18,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { ExtensionsModule } from '@alfresco/adf-extensions';
@@ -56,7 +55,6 @@ import { DownloadPromptDialogComponent } from './components/download-prompt-dial
         ReactiveFormsModule,
         ToolbarModule,
         PipeModule,
-        FlexLayoutModule,
         DirectiveModule,
         A11yModule,
         ExtensionsModule

lib/insights/package.json

@@ -14,7 +14,6 @@
     "@angular/common": ">=14.1.3",
     "@angular/compiler": ">=14.1.3",
     "@angular/core": ">=14.1.3",
-    "@angular/flex-layout": "^14.0.0-beta.40",
     "@angular/forms": ">=14.1.3",
     "@angular/material": ">=14.1.2",
     "@alfresco/adf-core": ">=6.0.0",

lib/insights/src/lib/analytics-process/analytics-process.module.ts

@@ -36,8 +36,6 @@ import { DropdownWidgetAnalyticsComponent } from './components/widgets/dropdown/
 import { DurationWidgetComponent } from './components/widgets/duration/duration.widget';
 import { NumberWidgetAnalyticsComponent } from './components/widgets/number/number.widget';
 
-import { FlexLayoutModule } from '@angular/flex-layout';
-
 @NgModule({
     imports: [
         FormsModule,
@@ -46,7 +44,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
         ChartsModule,
         DiagramsModule,
         MaterialModule,
-        FlexLayoutModule,
         CoreModule
     ],
     declarations: [

lib/process-services-cloud/package.json

@@ -29,7 +29,6 @@
     "@angular/common": ">=14.1.3",
     "@angular/compiler": ">=14.1.3",
     "@angular/core": ">=14.1.3",
-    "@angular/flex-layout": "^14.0.0-beta.40",
     "@angular/forms": ">=14.1.3",
     "@angular/material": ">=14.1.2",
     "@angular/material-moment-adapter": ">=14.1.2",

lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts

@@ -16,7 +16,6 @@
  */
 
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MaterialModule } from '../material.module';
 import { CommonModule } from '@angular/common';
 import { AppDetailsCloudComponent } from './components/app-details-cloud.component';
@@ -28,7 +27,6 @@ import { TemplateModule, CoreModule } from '@alfresco/adf-core';
         CommonModule,
         TemplateModule,
         MaterialModule,
-        FlexLayoutModule,
         CoreModule
     ],
     declarations: [

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.html

@@ -1,7 +1,7 @@
 <div class="adf-app-listgrid">
     <div class="adf-app-listgrid-item">
-        <mat-card tabindex="0"
-            fxLayout="column"
+        <mat-card
+            tabindex="0"
             role="button"
             class="adf-app-listgrid-item-card"
             title="{{applicationInstance.name}}"
@@ -14,7 +14,7 @@
             <div mat-card-title class="adf-app-listgrid-item-card-title">
                 <h1>{{applicationInstance.name}}</h1>
             </div>
-            <mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
+            <mat-card-subtitle class="adf-app-listgrid-item-card-subtitle">
                 <div class="adf-line-clamp">{{applicationInstance.description}}</div>
             </mat-card-subtitle>
         </mat-card>

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss

@@ -34,13 +34,17 @@ $tile-themes: (
     theme-10: (bg: #cabb33, color: #baab23)
 );
 
+adf-cloud-app-details {
     .adf-app-listgrid {
         padding: 8px;
+        display: block;
 
         &-item {
             outline: none;
             padding: 8px;
             box-sizing: border-box;
+            flex: unset;
+            max-width: unset;
 
             &-card {
                 @for $i from 1 through 10 {
@@ -48,13 +52,21 @@ $tile-themes: (
                         $tile-theme: map-get($tile-themes, theme-#{$i});
 
                         background-color: map-get($tile-theme, bg);
+
+                        .adf-app-listgrid-item-card-logo-icon {
+                            color: map-get($tile-theme, color);
+                        }
                     }
                 }
 
                 outline: none;
                 transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
                 min-height: 200px;
+                flex-direction: column;
+                box-sizing: border-box;
+                display: flex;
                 padding: 0 !important;
+                max-width: unset;
 
                 &:hover {
                     box-shadow:
@@ -76,14 +88,6 @@ $tile-themes: (
                         font-size: 70px;
                         width: 1em !important;
                         height: 1em !important;
-
-                    @for $i from 1 through 10 {
-                        .theme-#{$i} & {
-                            $tile-theme: map-get($tile-themes, theme-#{$i});
-
-                            color: map-get($tile-theme, color);
-                        }
-                    }
                     }
                 }
 
@@ -108,6 +112,7 @@ $tile-themes: (
                     color: white;
                     z-index: 9999;
                     padding: 16px;
+                    flex: 1 0 auto;
 
                     .adf-line-clamp {
                         @include adf-line-clamp(1.25, 3);
@@ -136,3 +141,4 @@ $tile-themes: (
             }
         }
     }
+}

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html

@@ -1,8 +1,12 @@
 <div class="menu-container" *ngIf="apps$ | async as appsList; else loadingOrError">
     <ng-container *ngIf="appsList.length > 0; else noApps">
-        <div *ngIf="isGrid(); else appList" fxLayout="row wrap">
-            <adf-cloud-app-details fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%"
-                *ngFor="let app of appsList" [applicationInstance]="app" (selectedApp)="onSelectApp($event)">
+        <div
+            *ngIf="isGrid(); else appList"
+            class="adf-app-apps-grid">
+            <adf-cloud-app-details
+                *ngFor="let app of appsList"
+                [applicationInstance]="app"
+                (selectedApp)="onSelectApp($event)">
             </adf-cloud-app-details>
         </div>