update to angular 16

package.json

@@ -11,33 +11,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.10",
-    "@angular/cdk": "^15.2.9",
-    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^15.2.10",
-    "@angular/core": "^15.2.10",
-    "@angular/flex-layout": "^15.0.0-beta.42",
-    "@angular/forms": "^15.2.10",
-    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^15.2.10",
+    "@angular/animations": "^16.2.12",
+    "@angular/cdk": "^16.2.14",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/material": "^16.2.14",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
     "@ngx-formly/core": "^6.0.0",
     "@ngx-formly/material": "^6.0.0",
     "core-js": "^3.25.1",
     "hammerjs": "^2.0.8",
     "ng-inline-svg-2": "^15.0.1",
-    "ngx-page-scroll": "^10.0.0",
-    "ngx-page-scroll-core": "^10.0.0",
+    "ngx-page-scroll": "^11.0.0",
+    "ngx-page-scroll-core": "^11.0.0",
     "rxjs": "^7.5.6",
     "tslib": "^2.4.0",
-    "zone.js": "~0.11.8"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.11",
-    "@angular/cli": "^15.2.11",
-    "@angular/compiler-cli": "^15.2.10",
-    "@angular/language-service": "^15.2.10",
+    "@angular-devkit/build-angular": "^16.2.15",
+    "@angular/cli": "^16.2.15",
+    "@angular/compiler-cli": "^16.2.12",
+    "@angular/language-service": "^16.2.12",
     "@types/jasmine": "^4.3.0",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^18.7.18",

src/app/about-us/about-us.component.html

@@ -1,11 +1,11 @@
-<div class="about-us" fxLayout="column" fxLayoutAlign="start start">
+<div class="about-us flex-col "  fxLayoutAlign="start start">
   <div class="title">
     <h1 class="mat-display-1">About Us</h1>
     <h2 class="mat-display-3">What We Do</h2>
   </div>
-  <div fxLayout="column" fxLayout.gt-lg="row">
+  <div class="flex-col">
     <div fxHide fxShow.gt-lg fxFlex.xl="33.333%"></div>
-    <div class="capabilities" fxFlex.xl="66.667%" fxLayout="column">
+    <div class="capabilities flex-col" fxFlex.xl="66.667%">
       <app-capability-details
         *ngFor="let c of capabilities; let i = index"
         [capability]="c"

src/app/app.module.ts

@@ -1,6 +1,5 @@
 import {HttpClientModule} from '@angular/common/http';
 import {Injectable, NgModule} from '@angular/core';
-import {FlexLayoutModule} from '@angular/flex-layout';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {InlineSVGModule} from 'ng-inline-svg-2';
@@ -86,7 +85,6 @@ export class FormlyConfig {
     imports: [
         BrowserAnimationsModule,
         BrowserModule,
-        FlexLayoutModule,
         FormsModule,
         FormlyMaterialModule,
         FormlyModule.forRoot(FormlyConfig.config),

src/app/capability-details/capability-details.component.html

@@ -1,6 +1,4 @@
-<div
-  fxHide
-  fxShow.gt-md
+<div class="hide show-gt-md"
   gdColumns.gt-md="3fr 1fr 1fr 3fr"
   [ngClass]="{
     'capability': true,
@@ -12,39 +10,35 @@
   }"
   [@scrollAnimation]="state"
 >
-  <div class="details-left" [fxHide]="!isEven(index)" fxShow.gt-md>
+  <div class="details-left show-gt-md" [ngClass]="{'hide':!isEven(index)}">
     <ng-container *ngIf="isEven(index)">
       <h3>{{capability.title}}</h3>
       <p>{{capability.description}}</p>
     </ng-container>
   </div>
-  <div class="icon-left" [fxHide]="!isEven(index)" fxShow.gt-md>
+  <div class="icon-left show-gt-md" [ngClass]="{'hide':!isEven(index)}">
     <span
       *ngIf="isEven(index)"
       [inlineSVG]="capability.icon_url"
       class="capability-icon"
     ></span>
   </div>
-  <div class="icon-right" [fxHide]="isEven(index)" fxShow.gt-md>
+  <div class="icon-right show-gt-md" [ngClass]="{'hide':isEven(index)}">
     <span
       *ngIf="!isEven(index)"
       [inlineSVG]="capability.icon_url"
       class="capability-icon"
     ></span>
   </div>
-  <div class="details-right" [fxHide]="isEven(index)" fxShow.gt-md>
+  <div class="details-right  show-gt-md" [ngClass]="{'hide':isEven(index)}">
     <ng-container *ngIf="!isEven(index)">
       <h3>{{capability.title}}</h3>
       <p>{{capability.description}}</p>
     </ng-container>
   </div>
 </div>
 <div
-  class="capability-sm"
-  fxShow
-  fxHide.gt-md
-  fxLayout="column"
-  fxLayoutAlign="center center"
+  class="capability-sm flex-col justify-center items-center hide-xs hide-gt-md"
   [@scrollAnimation]="state"
 >
   <div class="icon">

src/app/case-studies/case-studies.component.html

@@ -5,7 +5,7 @@ <h1>Sample Engagements
   class="case-studies"
   *ngIf="caseStudies && caseStudies.length > 0"
 >
-  <div fxLayout="column" fxLayoutGap="80px">
+  <div class="flex-col gap-80">
     <app-case-study
       *ngFor="let c of caseStudies, let i = index;"
       [caseStudy]="c"
@@ -17,15 +17,13 @@ <h1>Sample Engagements
 
   <div
     *ngIf="isExpanded && selectedStudyId && selectedStudy"
-    class="selected-case-study"
-    fxLayout="column"
-    fxLayoutGap="20px"
+    class="selected-case-study flex-col gap-20"
     [@scrollAnimation]="expandedState"
   >
     <button mat-fab color="primary" (click)="toggleExpanded(selectedStudy.id)" id="back">
       <mat-icon>arrow_back</mat-icon>
     </button>
-    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="40px" fxLayoutAlign="center center">
+    <div class="flex-row flex-col-xs justify-center items-center">
       <img src="{{ selectedStudy.imageLink }}" class="full-size">
       <div>
         <h3>{{ selectedStudy.organizationName }}</h3>
@@ -44,7 +42,7 @@ <h2>{{ selectedStudy.projectName }}</h2>
                 <cite>{{t.title}}</cite></footer>
             </blockquote>
 
-            <div fxLayout="row" fxLayoutGap="10px">
+            <div class="flex-row gap-10">
               <a
                 *ngIf="selectedStudy.websiteLink"
                 mat-flat-button

src/app/case-study/case-study.component.html

@@ -1,11 +1,5 @@
 <div
-  class="case-study"
-  fxFlexAlign="{{isEven(index) ? 'start' : 'end'}}"
-  fxHide
-  fxShow.gt-sm
-  fxLayout="row"
-  fxLayoutAlign="{{isEven(index) ? 'start' : 'end'}} center"
-  fxLayoutGap="20px"
+  class="case-study flex-row {{isEven(index) ? 'even' : 'odd'}} hide show-gt-md "
   [@scrollAnimation]="state"
 >
   <img *ngIf="isEven(index)" class="thumbnail" src="{{ caseStudy.featureLink }}">
@@ -17,13 +11,7 @@ <h4>{{ caseStudy.tagLine }}</h4>
   <img *ngIf="!isEven(index)" class="thumbnail" src="{{ caseStudy.featureLink }}">
 </div>
 <div
-  class="case-study"
-  fxFlexAlign="start"
-  fxShow
-  fxHide.gt-sm
-  fxLayout="column"
-  fxLayoutAlign="start center"
-  fxLayoutGap="20px"
+  class="case-study flex-col hide-gt-md justify-start items-center gap-20"
   [@scrollAnimation]="state"
 >
   <img class="thumbnail" src="{{ caseStudy.featureLink }}">

src/app/case-study/case-study.component.scss

@@ -1,7 +1,12 @@
 .case-study {
-  &.case-study-left { justify-self: start; }
+  &.case-study-left { justify-self: flex-start; }
   &.case-study-right { justify-self: end; }
 
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+
+
   .thumbnail {
     width: 300px;
     height: 300px;
@@ -13,3 +18,15 @@
     padding: 0;
   }
 }
+
+.even {
+  align-self: flex-start;
+  justify-content: flex-start;
+  gap:20px;
+}
+
+.odd {
+  align-self: flex-end;
+  justify-content: flex-end;
+  gap:20px;
+}

src/app/header/header.component.html

@@ -1,4 +1,4 @@
-<div class="full-screen" fxLayout="column" fxLayoutAlign="center center">
+<div class="full-screen">
   <img
     class="half-height"
     @fadeInOut
@@ -9,8 +9,6 @@
     pageScroll
     [pageScrollAdjustHash]="true"
     href="#welcome"
-    fxLayout="column"
-    fxLayoutAlign="center center"
     class="explore mat-subheading-2 text-uppercase"
   >
     Explore<br />

src/app/header/header.component.scss

@@ -5,6 +5,12 @@ a.explore {
   width: 200px;
   border-radius: 100%;
   padding-top: 40px;
+  display: flex;
+  flex-direction: column;
+  place-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  text-align: center;
 }
 
 ::ng-deep .chevron-down svg {

src/app/home/home.component.html

@@ -8,9 +8,6 @@
   </button>
   <div
     id="menu"
-    fxLayout="column"
-    fxLayoutGap="20px"
-    fxLayoutAlign="center end"
     [ngClass]="{'expanded': isExpanded}"
     (mouseover)="keepMenuOpen()"
     (mouseout)="isExpanded = false"

src/app/home/home.component.scss

@@ -20,6 +20,11 @@
   background-color: rgba(255, 255, 255, 0.8);
   padding: 80px;
   transition: all 1s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  place-content: center;
+  align-items: end;
+  gap: 20px;
 
   &.expanded {
     right: 0px;

src/app/style-guide/style-guide.component.html

@@ -1,7 +1,7 @@
 <h1 class="full-width-heading bg-primary">Color Palette</h1>
 <div class="container">
-  <div fxLayout="column" fxLayoutGap="10px">
-    <div *ngFor="let hue of hues" fxLayout="row" fxLayoutGap="0px">
+  <div class="flex-col gap-10">
+    <div *ngFor="let hue of hues" class="flex-row gap-0">
       <div
         *ngFor="let variant of variants"
         class="swatch bg-{{hue}}{{variant.suffix}} text-{{variant.contrast}}"

src/app/welcome/welcome.component.html

@@ -1,15 +1,6 @@
-<div
-  class="gradient-overlay-section"
-  fxLayout="column"
-  fxLayout.gt-md="row"
-  fxLayoutAlign="space-between center"
->
+<div class="welcome-div gradient-overlay-section">
   <div class="container pad-left-8 z-10" fxFlex.gt-md="50%">
-    <div
-      fxLayout="column"
-      fxLayoutAlign="center start"
-      fxLayoutAlign.gt-md="start start"
-    >
+    <div class="flex-col justify-center items-start">
       <h1 class="text-align-left">
         <span class="mat-display-3">Welcome to</span><br />
         <span class="mat-display-4">Sartography</span>
@@ -18,10 +9,9 @@ <h1 class="text-align-left">
       <p class="mat-subheading-2 pad-top-2 pad-bottom-2">
         Building transparency, empathy, and understanding through business process automation.
       </p>
-
       <a mat-flat-button color="primary" pageScroll href="#contact_us">Get Started</a>
     </div>
   </div>
   <div class="bg-welcome" [@scrollAnimation]="state" fxFlex.gt-md="50%"></div>
 </div>
-<div class="bg-welcome-xs" [@scrollAnimation]="state" fxShow fxHide.gt-md></div>
+<div class="bg-welcome-xs hide-gt-md" [@scrollAnimation]="state"></div>

src/app/welcome/welcome.component.scss

@@ -13,6 +13,20 @@
   @media screen and (min-width: 1920px) and (max-width: 5000px) { height: 100vh; }
 }
 
+.welcome-div {
+  display: flex;
+  flex-direction: column;
+  place-content: center space-between;
+  align-items: center;
+}
+
+.welcome-div { @media screen and (min-width: 1280px) {
+  flex-direction: row;
+  box-sizing: border-box;
+ }
+}
+
+
 .color-tile {
   height: 72px;
   width: 72px;
@@ -27,3 +41,4 @@
   min-height: 75vh;
   min-width: 100vw;
 }
+