feat(angular15): removed deprecated package "@angular/flex-layout"

Removed the deprecated package "@angular/flex-layout" and reconstruct the used functionality in
"plain" scss

Author: Sazeidya

package-lock.json

@@ -22,7 +22,6 @@
     "@angular/common": "^14.0.6",
     "@angular/compiler": "^14.0.6",
     "@angular/core": "^14.0.6",
-    "@angular/flex-layout": "^14.0.0-beta.40",
     "@angular/forms": "^14.0.6",
     "@angular/material": "^14.0.5",
     "@angular/platform-browser": "^14.0.6",

package.json

@@ -7,7 +7,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatButtonModule } from '@angular/material/button';
-import { FlexModule } from '@angular/flex-layout';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
@@ -53,7 +52,6 @@ import { ScrollDialogComponent } from './scroll-dialog/scroll-dialog.component';
         NgxPageScrollModule,
         MatChipsModule,
         MatButtonModule,
-        FlexModule,
         MatIconModule,
         MatDialogModule,
         MatSelectModule,

src/app/app.module.ts

@@ -9,10 +9,10 @@
   </p>
 </mat-card>
 
-<mat-card fxLayout="row" fxLayoutGap="5px">
+<mat-card class="flex-mat-card-container">
 
-  <div fxFlex fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutGap="5px" fxLayoutAlign.gt-sm="center">
-    <h3 fxFlex.gt-sm="grow">Namespace <code>default</code></h3>
+  <div class="flex-container">
+    <h3 class="flex-header">Namespace <code>default</code></h3>
     <button mat-raised-button color="primary" (click)="startDefaultNamespaceScrolls()"
             id="startDefaultNamespaceScrollsButton" matTooltip="Start scroll animation">
       <mat-icon>play_arrow</mat-icon>
@@ -27,8 +27,8 @@ <h3 fxFlex.gt-sm="grow">Namespace <code>default</code></h3>
     </button>
   </div>
 
-  <div fxFlex fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutGap="5px" fxLayoutAlign.gt-sm="center">
-    <h3 fxFlex.gt-sm="grow">Namespace <code>customSpace</code></h3>
+  <div class="flex-container">
+    <h3 class="flex-header">Namespace <code>customSpace</code></h3>
     <button mat-raised-button color="primary" (click)="startCustomNamespaceScroll()"
             id="startCustomNamespaceScrollsButton" matTooltip="Start scroll animation">
       <mat-icon>play_arrow</mat-icon>
@@ -42,16 +42,16 @@ <h3 fxFlex.gt-sm="grow">Namespace <code>customSpace</code></h3>
       <mat-icon>replay</mat-icon>
     </button>
   </div>
-  <div fxFlex fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutGap="5px" fxLayoutAlign.gt-sm="center">
-    <h3 fxFlex.gt-sm="grow">All Namespaces</h3>
+  <div class="flex-container">
+    <h3 class="flex-header">All Namespaces</h3>
     <button mat-raised-button color="primary" (click)="pageScrollService.stopAll()"
             id="stopAllNamespaceScrollsButton" matTooltip="Stop all scroll animations">
       <mat-icon>stop</mat-icon>
     </button>
   </div>
 </mat-card>
 
-<mat-card fxLayout="row" fxLayoutGap="5px">
+<mat-card class="flex-mat-card-container">
   <div>
     <h4>Namespace default</h4>
     <div #container1 id="container1" class="scrollContainer">

src/app/namespace-scroll/namespace-scroll.component.html

@@ -3,3 +3,46 @@
   overflow: auto;
   position: relative;
 }
+
+.flex-mat-card-container {
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+}
+
+.flex-mat-card-container div {
+    margin-right: 5px;
+
+    &:nth-last-child(1) {
+        margin-right: 0;
+    }
+}
+
+.flex-container {
+    box-sizing: border-box;
+    flex: 1 1 0%;
+}
+
+.flex-header {
+    flex: 1 1 100%;
+    box-sizing: border-box;
+    max-width: 100%;
+}
+
+@media screen and (min-width: 960px) {
+    .flex-container {
+        display: flex;
+        flex-flow: row wrap;
+        place-content: stretch center;
+    }
+
+    .flex-header {
+        margin-right: 5px;
+    }
+}
+
+@media screen and (max-width: 959px) {
+    .flex-header {
+        margin-bottom: 5px;
+    }
+}

src/app/namespace-scroll/namespace-scroll.component.scss

@@ -17,7 +17,7 @@
   </button>
 </mat-card>
 
-<div fxLayout="column" fxLayout.gt-sm="row">
+<div class="flex-container">
   <mat-card>
     <mat-card-title>A basic card</mat-card-title>
     <mat-card-content #basicContainer id="basicContainer" class="scrollContainer">

src/app/nested-scroll/nested-scroll.component.html

@@ -10,3 +10,14 @@
 #complexContainer.scrollContainer {
   height: 300px;
 }
+
+.flex-container {
+    display: flex;
+    flex-direction: column;
+}
+
+@media screen and (min-width: 960px) {
+    .flex-container {
+        flex-direction: row;
+    }
+}