[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
2025-07-24 17:32:15 +00:00 · 2023-05-17 14:44:59 +02:00
parent 7e2a7f5b2c
commit 3b1842f038
148 changed files with 1852 additions and 1260 deletions
--- a/lib/process-services/src/lib/app-list/apps-list.component.html
+++ b/lib/process-services/src/lib/app-list/apps-list.component.html
@@ -5,12 +5,10 @@
            <span matLine>{{getAppName(app) | async}}</span>
        </mat-list-item>
    </mat-list>
-    <div fxLayout="row wrap" *ngIf="isGrid()" class="adf-app-listgrid">
+    <div *ngIf="isGrid()" class="adf-app-listgrid">
        <div *ngFor="let app of appList"
-            class="adf-app-listgrid-item"
-            fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%">
+            class="adf-app-listgrid-item">
                <mat-card tabindex="0"
-                    fxLayout="column"
                    role="button"
                    class="adf-app-listgrid-item-card"
                    title="{{getAppName(app) | async}}"
@@ -23,7 +21,7 @@
                        <div mat-card-title class="adf-app-listgrid-item-card-title">
                            <h1>{{getAppName(app) | async}}</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">{{app.description}}</div>
                        </mat-card-subtitle>

--- a/lib/process-services/src/lib/app-list/apps-list.component.scss
+++ b/lib/process-services/src/lib/app-list/apps-list.component.scss
@@ -21,10 +21,6 @@
    /* stylelint-enable */
 }

-.adf-apps {
-    width: 100%;
-}
-
 .adf-app-list-item {
    cursor: pointer;
 }
@@ -55,104 +51,119 @@ $tile-themes: (
    }
 }

-.adf-app-listgrid {
-    padding: 8px;
+.adf-apps {
+    width: 100%;

-    &-item {
-        outline: none;
+    .adf-app-listgrid {
        padding: 8px;
-        box-sizing: border-box;
-
-        &-card {
-            @for $i from 1 through 10 {
-                &.theme-#{$i} {
-                    $tile-theme: map-get($tile-themes, theme-#{$i});
-
-                    background-color: map-get($tile-theme, bg);
-                }
-            }
+        flex-flow: row wrap;
+        display: flex;

+        &-item {
            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;
-            padding: 0 !important;
+            padding: 8px;
+            box-sizing: border-box;
+            flex: 1 1 33.3333%;
+            max-width: 33.3333%;

-            &:hover {
-                box-shadow:
-                    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
-                    0 5px 5px -3px rgba(0, 0, 0, 0.2);
-                cursor: pointer;
-                transform: scale(1.015);
+            @media screen and (max-width: 960px) {
+                flex: 1 1 50%;
+                max-width: 50%;
            }

-            &-logo {
-                position: absolute;
-                right: 20px;
-                top: 20px;
-                padding: 16px;
-                z-index: 9;
+            @media screen and (max-width: 600px) {
+                flex: 1 1 100%;
+                max-width: 100%;
+            }

-                &-icon {
-                    font-size: 70px;
-                    width: 1em !important;
-                    height: 1em !important;
+            &-card {
+                @for $i from 1 through 10 {
+                    &.theme-#{$i} {
+                        $tile-theme: map-get($tile-themes, theme-#{$i});

-                    @for $i from 1 through 10 {
-                        .theme-#{$i} & {
-                            $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);
                        }
                    }
                }
-            }

-            &-title {
-                padding: 16px;
-                margin-bottom: 0 !important;
-                z-index: 9999;
+                outline: none;
+                flex-direction: column;
+                display: flex;
+                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;
+                padding: 0 !important;

-                h1 {
+                &:hover {
+                    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
+                    0 5px 5px -3px rgba(0, 0, 0, 0.2);
+                    cursor: pointer;
+                    transform: scale(1.015);
+                }
+
+                &-logo {
+                    position: absolute;
+                    right: 20px;
+                    top: 20px;
+                    padding: 16px;
+                    z-index: 9;
+
+                    &-icon {
+                        font-size: 70px;
+                        width: 1em !important;
+                        height: 1em !important;
+                    }
+                }
+
+                &-title {
+                    padding: 16px;
+                    margin-bottom: 0 !important;
+                    z-index: 9999;
+
+                    h1 {
+                        color: white;
+                        width: 80%;
+                        font-size: var(--theme-headline-font-size);
+                        margin: 0;
+                        line-height: normal;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                }
+
+                &-subtitle {
                    color: white;
-                    width: 80%;
-                    font-size: var(--theme-headline-font-size);
-                    margin: 0;
-                    line-height: normal;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-            }
+                    z-index: 9999;
+                    padding: 16px;
+                    flex: 1 0 auto;

-            &-subtitle {
-                color: white;
-                z-index: 9999;
-                padding: 16px;
-
-                .adf-line-clamp {
-                    @include adf-line-clamp(1.25, 3);
-                }
-            }
-
-            &-actions {
-                padding: 0 16px 16px !important;
-                border-top: 1px solid rgba(0, 0, 0, 0.1);
-                min-height: 48px;
-                box-sizing: border-box;
-
-                &-icon {
-                    color: #e9f1f3;
+                    .adf-line-clamp {
+                        @include adf-line-clamp(1.25, 3);
+                    }
                }

-                &.mat-card-actions {
-                    margin-left: 0;
-                    margin-right: 0;
+                &-actions {
+                    padding: 0 16px 16px !important;
+                    border-top: 1px solid rgba(0, 0, 0, 0.1);
+                    min-height: 48px;
+                    box-sizing: border-box;

-                    &:last-child {
-                        margin-bottom: 0 !important;
+                    &-icon {
+                        color: #e9f1f3;
+                    }
+
+                    &.mat-card-actions {
+                        margin-left: 0;
+                        margin-right: 0;
+
+                        &:last-child {
+                            margin-bottom: 0 !important;
+                        }
                    }
                }
            }
--- a/lib/process-services/src/lib/app-list/apps-list.module.ts
+++ b/lib/process-services/src/lib/app-list/apps-list.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';
@@ -28,7 +27,6 @@ import { SelectAppsDialogComponent } from './select-apps-dialog.component';
    imports: [
        CommonModule,
        MaterialModule,
-        FlexLayoutModule,
        CoreModule
    ],
    declarations: [
--- a/lib/process-services/src/lib/app-list/select-apps-dialog.component.html
+++ b/lib/process-services/src/lib/app-list/select-apps-dialog.component.html
@@ -8,6 +8,6 @@
    </mat-select>

 </section>
-<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<footer mat-dialog-actions class="adf-select-apps-dialog-actions">
    <button mat-button (click)="onStart()">{{'APP.DIALOG.START' | translate}}</button>
 </footer>
--- a/lib/process-services/src/lib/app-list/select-apps-dialog.component.scss
+++ b/lib/process-services/src/lib/app-list/select-apps-dialog.component.scss
@@ -0,0 +1,8 @@
+adf-select-apps-dialog {
+    .adf-select-apps-dialog-actions {
+        display: flex;
+        max-height: 100%;
+        place-content: center flex-end;
+        align-items: center;
+    }
+}
--- a/lib/process-services/src/lib/app-list/select-apps-dialog.component.ts
+++ b/lib/process-services/src/lib/app-list/select-apps-dialog.component.ts
@@ -15,13 +15,15 @@
 * limitations under the License.
 */

-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AppsProcessService } from './services/apps-process.service';

@Component({
    selector: 'adf-select-apps-dialog',
-    templateUrl: './select-apps-dialog.component.html'
+    templateUrl: './select-apps-dialog.component.html',
+    styleUrls: ['./select-apps-dialog.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class SelectAppsDialogComponent {

--- a/lib/process-services/src/lib/process-list/components/process-filters.component.html
+++ b/lib/process-services/src/lib/process-list/components/process-filters.component.html
@@ -1,11 +1,12 @@
 <div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-    <button (click)="selectFilter(filter)"
-      [attr.aria-label]="filter.name | translate"
-      [id]="filter.id"
-      [attr.data-automation-id]="filter.name + '_filter'"
-      mat-button
-      class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
-      <adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" [value]="getFilterIcon(filter.icon)"></adf-icon>
-      <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+    <button
+        (click)="selectFilter(filter)"
+        [attr.aria-label]="filter.name | translate"
+        [id]="filter.id"
+        [attr.data-automation-id]="filter.name + '_filter'"
+        mat-button
+        class="adf-filter-action-button adf-full-width">
+        <adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" [value]="getFilterIcon(filter.icon)"></adf-icon>
+        <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
    </button>
 </div>
--- a/lib/process-services/src/lib/process-list/process-list.module.ts
+++ b/lib/process-services/src/lib/process-list/process-list.module.ts
@@ -17,7 +17,6 @@

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CoreModule } from '@alfresco/adf-core';
 import { MaterialModule } from '../material.module';
@@ -39,7 +38,6 @@ import { ProcessNamePipe } from '../pipes/process-name.pipe';
    imports: [
        CommonModule,
        MaterialModule,
-        FlexLayoutModule,
        FormsModule,
        ReactiveFormsModule,
        CoreModule,
--- a/lib/process-services/src/lib/task-list/components/start-task.component.html
+++ b/lib/process-services/src/lib/task-list/components/start-task.component.html
@@ -1,11 +1,11 @@
-<mat-card fxFlex="70%" class="adf-new-task-layout-card">
-    <mat-card-header fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px" class="adf-new-task-heading">
+<mat-card class="adf-new-task-layout-card">
+    <mat-card-header class="adf-new-task-heading">
        <mat-card-title>{{'ADF_TASK_LIST.START_TASK.FORM.TITLE' | translate}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
-        <form [formGroup]="taskForm" fxLayout="column" fxLayoutGap="10px">
+        <form [formGroup]="taskForm" class="adf-new-task-form">
            <div class="adf-task-name">
-                <mat-form-field fxFlex>
+                <mat-form-field>
                    <mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME' | translate}}</mat-label>
                    <input
                        matInput
@@ -20,7 +20,7 @@
                </mat-form-field>
            </div>
            <div class="adf-task-description">
-                <mat-form-field fxFlex>
+                <mat-form-field>
                    <mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION' | translate}}</mat-label>
                    <textarea
                        matInput
@@ -33,8 +33,8 @@
                    </mat-error>
                </mat-form-field>
            </div>
-            <div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
-                <mat-form-field fxFlex>
+            <div class="input-row">
+                <mat-form-field>
                    <input
                        matInput
                        (keyup)="onDateChanged($any($event).srcElement.value)"
@@ -56,29 +56,25 @@
                        </div>
                    </div>
                </mat-form-field>
-                <div fxFlex>
-                    <people-widget
-                        (peopleSelected)="getAssigneeId($event)"
-                        [field]="field"
-                        class="adf-people-widget-content"></people-widget>
-                </div>
-            </div>
-            <div class="adf-task-form">
-                <mat-form-field fxFlex="48%" fxFlex.xs="100%">
-                    <mat-label id="form_label">{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}</mat-label>
-                    <mat-select
-                        id="form_id"
-                        class="form-control"
-                        formControlName="formKey">
-                    <mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
-                    <mat-option *ngFor="let form of forms$ | async" [value]="form.id">{{ form.name }}</mat-option>
-                    </mat-select>
-                </mat-form-field>
+                <people-widget
+                    (peopleSelected)="getAssigneeId($event)"
+                    [field]="field"
+                    class="adf-people-widget-content"></people-widget>
            </div>
+            <mat-form-field class="adf-task-form">
+                <mat-label id="form_label">{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}</mat-label>
+                <mat-select
+                    id="form_id"
+                    class="form-control"
+                    formControlName="formKey">
+                <mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
+                <mat-option *ngFor="let form of forms$ | async" [value]="form.id">{{ form.name }}</mat-option>
+                </mat-select>
+            </mat-form-field>
        </form>
    </mat-card-content>
    <mat-card-actions>
-        <div class="adf-new-task-footer" fxLayout="row" fxLayoutAlign="end end">
+        <div class="adf-new-task-footer">
            <button
                mat-button
                class="adf-uppercase"
--- a/lib/process-services/src/lib/task-list/components/start-task.component.scss
+++ b/lib/process-services/src/lib/task-list/components/start-task.component.scss
@@ -9,18 +9,55 @@
    }
 }

-.adf-new-task-form {
-    width: 100%;
-}
-
 .adf-new-task-layout-card {
    margin: 10px auto;
+    flex: 1 1 100%;
+    max-width: 70%;
+
+    .adf-new-task-form {
+        flex-direction: column;
+        display: flex;
+
+        .adf-task-name, .adf-task-description, .input-row {
+            display: flex;
+            margin-bottom: 10px;
+
+            mat-form-field {
+                flex: 1;
+            }
+        }
+
+        .input-row {
+            @media screen and (max-width: 960px){
+                flex-direction: column;
+            }
+
+            @media screen and (min-width: 960px) {
+                mat-form-field {
+                    margin-right: 20px;
+                }
+            }
+        }
+
+        .adf-task-form {
+            flex: 1 1 100%;
+            box-sizing: border-box;
+            max-width: 48%;
+
+            @media screen and (max-width: 600px){
+                max-width: 100%;
+            }
+        }
+    }
 }

 .adf-new-task-footer {
    padding: 4px;
    font-size: var(--theme-adf-task-footer-font-size);
    border-top: 1px solid #eee;
+    display: flex;
+    place-content: flex-end;
+    align-items: flex-end;
 }

 .adf-mat-select {
--- a/lib/process-services/src/lib/task-list/components/task-details.component.html
+++ b/lib/process-services/src/lib/task-list/components/task-details.component.html
@@ -15,11 +15,7 @@
        </h2>
    </div>

-    <div class="adf-task-details-core"
-        fxLayout="column"
-        fxLayoutGap="8px"
-        fxLayout.lt-lg="column">
-
+    <div class="adf-task-details-core">
        <div class="adf-task-details-core-form">
            <div *ngIf="isAssigned()">
                <adf-task-form
@@ -82,7 +78,7 @@
                <adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE">
                    <mat-card *ngIf="showComments">
                        <mat-card-content>
-                            <adf-task-comments 
+                            <adf-task-comments
                                #activitiComments
                                [readOnly]="isReadOnlyComment()"
                                [taskId]="taskDetails.id"
--- a/lib/process-services/src/lib/task-list/components/task-details.component.scss
+++ b/lib/process-services/src/lib/task-list/components/task-details.component.scss
@@ -1,96 +1,94 @@
-:host {
+adf-task-details {
    width: 100%;
-}

-.adf-error-dialog h3 {
-    margin: 16px 0;
-}
-
-.adf-activiti-task-details__header {
-    align-self: flex-end;
-    display: flex;
-    font-size: var(--theme-headline-font-size);
-    font-weight: 300;
-    line-height: normal;
-    overflow: hidden;
-    margin: 8px 0 16px;
-    cursor: pointer;
-    user-select: none;
-}
-
-.adf-activiti-task-details__action-button {
-    text-transform: uppercase;
-}
-
-.adf-assignment-container {
-    padding: 10px 20px;
-    width: auto;
-}
-
-adf-task-header.adf-assign-edit-view ::ng-deep adf-card-view ::ng-deep .adf-property[data-automation-id='header-assignee'] {
-    display: none;
-}
-
-.adf-task-details {
-    &-header {
+    .adf-activiti-task-details__header {
+        align-self: flex-end;
        display: flex;
-        justify-content: space-between;
+        font-size: var(--theme-headline-font-size);
+        font-weight: 300;
+        line-height: normal;
+        overflow: hidden;
+        margin: 8px 0 16px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .adf-activiti-task-details__action-button {
+        text-transform: uppercase;
+    }
+
+    .adf-assignment-container {
+        padding: 10px 20px;
+        width: auto;
+    }
+
+    adf-task-header.adf-assign-edit-view adf-card-view .adf-property[data-automation-id='header-assignee'] {
+        display: none;
+    }
+
+    .adf-task-details {
+        &-header {
+            display: flex;
+            justify-content: space-between;
+
+            &-toggle {
+                position: relative;
+                top: 10px;
+                margin-right: 2px;
+                height: 23px;
+                cursor: pointer;
+                user-select: none;
+            }
+        }

        &-toggle {
            position: relative;
-            top: 10px;
-            margin-right: 2px;
-            height: 23px;
-            cursor: pointer;
-            user-select: none;
-        }
-    }
-
-    &-toggle {
-        position: relative;
-    }
-
-    &-core {
-        display: flex;
-        justify-content: space-between;
-
-        &-sidebar {
-            &-drawer {
-                @media screen and (max-width: 1279px) {
-                    margin-left: 0;
-                }
-            }
-
-            &-checklist {
-                margin-top: 30px;
-                padding-left: 20px;
-                padding-right: 20px;
-            }
        }

-        &-form {
-            flex-grow: 1;
+        &-core {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;

-            & ::ng-deep .adf-form-debug-container {
-                display: flex;
-                flex-direction: column;
-                padding: 20px 0;
-
-                .mat-slide-toggle {
-                    margin-left: auto;
-
-                    & + div {
-                        background-color: black;
-                        padding: 20px;
-                        clear: both;
-                        margin-top: 30px;
-                        color: white;
+            &-sidebar {
+                &-drawer {
+                    @media screen and (max-width: 1279px) {
+                        margin-left: 0;
                    }
                }
+
+                &-checklist {
+                    margin-top: 30px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                }
            }

-            & ::ng-deep .mat-tab-label {
+            &-form {
                flex-grow: 1;
+                margin-bottom: 8px;
+
+                & .adf-form-debug-container {
+                    display: flex;
+                    flex-direction: column;
+                    padding: 20px 0;
+
+                    .mat-slide-toggle {
+                        margin-left: auto;
+
+                        & + div {
+                            background-color: black;
+                            padding: 20px;
+                            clear: both;
+                            margin-top: 30px;
+                            color: white;
+                        }
+                    }
+                }
+
+                & .mat-tab-label {
+                    flex-grow: 1;
+                }
            }
        }
    }
--- a/lib/process-services/src/lib/task-list/components/task-details.component.ts
+++ b/lib/process-services/src/lib/task-list/components/task-details.component.ts
@@ -18,22 +18,26 @@
 import {
    CardViewUpdateService,
    ClickNotification,
-    LogService,
-    UpdateNotification,
    CommentsComponent,
-    ContentLinkModel, FormFieldValidator, FormModel, FormOutcomeEvent
+    ContentLinkModel,
+    FormFieldValidator,
+    FormModel,
+    FormOutcomeEvent,
+    LogService,
+    UpdateNotification
 } from '@alfresco/adf-core';
 import {
    Component,
    EventEmitter,
    Input,
    OnChanges,
+    OnDestroy,
    OnInit,
    Output,
    SimpleChanges,
    TemplateRef,
    ViewChild,
-    OnDestroy
+    ViewEncapsulation
 } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Observable, Observer, of, Subject } from 'rxjs';
@@ -48,7 +52,8 @@ import { PeopleProcessService } from '../../common/services/people-process.servi
@Component({
    selector: 'adf-task-details',
    templateUrl: './task-details.component.html',
-    styleUrls: ['./task-details.component.scss']
+    styleUrls: ['./task-details.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TaskDetailsComponent implements OnInit, OnChanges, OnDestroy {

--- a/lib/process-services/src/lib/task-list/components/task-filters.component.html
+++ b/lib/process-services/src/lib/task-list/components/task-filters.component.html
@@ -1,13 +1,14 @@
 <div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-    <button (click)="onFilterClick(filter)"
-      [attr.aria-label]="filter.name | translate"
-      [id]="filter.id"
-      [attr.data-automation-id]="filter.name + '_filter'"
-      mat-button
-      class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
-      <ng-container *ngIf="showIcon">
-        <adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)"></adf-icon>
-      </ng-container>
-      <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+    <button
+        (click)="onFilterClick(filter)"
+        [attr.aria-label]="filter.name | translate"
+        [id]="filter.id"
+        [attr.data-automation-id]="filter.name + '_filter'"
+        mat-button
+        class="adf-filter-action-button adf-full-width">
+        <ng-container *ngIf="showIcon">
+            <adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)"></adf-icon>
+        </ng-container>
+        <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
    </button>
 </div>
--- a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html
+++ b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html
@@ -98,7 +98,5 @@
  </ng-template>
 </ng-container>
 <ng-template #loadingTemplate>
-  <div fxLayout="row" fxLayoutAlign="center center">
-      <mat-spinner></mat-spinner>
-  </div>
+  <mat-spinner></mat-spinner>
 </ng-template>
--- a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss
+++ b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss
@@ -22,3 +22,12 @@
        }
    }
 }
+
+adf-task-form {
+    mat-spinner {
+        display: flex;
+        max-height: 100%;
+        place-content: center;
+        align-items: center;
+    }
+}
--- a/lib/process-services/src/lib/task-list/task-list.module.ts
+++ b/lib/process-services/src/lib/task-list/task-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 } from '@alfresco/adf-core';
 import { ProcessCommentsModule } from '../process-comments/process-comments.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -45,7 +44,6 @@ import { TaskCommentsModule } from '../task-comments/task-comments.module';
@NgModule({
    imports: [
        CommonModule,
-        FlexLayoutModule,
        MaterialModule,
        FormsModule,
        FormModule,