[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/core/src/lib/buttons-menu/buttons-menu.module.ts
+++ b/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]
--- a/lib/core/src/lib/card-view/card-view.module.ts
+++ b/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,
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/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"
--- a/lib/core/src/lib/form/form-base.module.ts
+++ b/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,
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/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
--- a/lib/core/src/lib/viewer/components/viewer-render.component.html
+++ b/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'">
--- a/lib/core/src/lib/viewer/components/viewer-render.component.scss
+++ b/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;
--- a/lib/core/src/lib/viewer/components/viewer.component.html
+++ b/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"
--- a/lib/core/src/lib/viewer/components/viewer.component.scss
+++ b/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,20 +115,33 @@
        @extend .adf-full-screen;
    }

-    &__sidebar {
-        width: 350px;
-        display: block;
-        padding: 0;
-        background-color: var(--theme-background-color);
-        box-shadow: 0 2px 4px 0 var(--adf-theme-foreground-text-color-027);
-        overflow: auto;
+    &-sidebars {
+        display: flex;
+        flex: 1 1 auto;

-        &__right {
-            border-left: 1px solid var(--adf-theme-foreground-text-color-007);
+        .adf-viewer__sidebar {
+            width: 350px;
+            display: block;
+            padding: 0;
+            background-color: var(--theme-background-color);
+            box-shadow: 0 2px 4px 0 var(--adf-theme-foreground-text-color-027);
+            overflow: auto;
+
+            &__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;
+            }
        }

-        &__left {
-            border-right: 1px solid var(--adf-theme-foreground-text-color-007);
+        adf-viewer-render {
+            order: 1;
+            flex: 1 1 auto;
+            display: flex;
        }
    }
 }
--- a/lib/core/src/lib/viewer/viewer.module.ts
+++ b/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