Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/app/groups/common-resolvers/glim-account-resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * GLIM Loans Accounts data resolver.
  */
 @Injectable()
-export class GLIMAccountsResolver implements Resolve<Object> {
+export class GLIMAccountsResolver {
   /**
    * @param {GroupsService} groupsService Groups service.
    */

src/app/groups/common-resolvers/group-account.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Group Accounts data resolver.
  */
 @Injectable()
-export class GroupAccountsResolver implements Resolve<Object> {
+export class GroupAccountsResolver {
   /**
    * @param {GroupsService} GroupsService Groups service.
    */

src/app/groups/common-resolvers/group-actions.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Group Actions data resolver.
  */
 @Injectable()
-export class GroupActionsResolver implements Resolve<Object> {
+export class GroupActionsResolver {
   /**
    * @param {GroupsService} groupsService Groups service.
    */

src/app/groups/common-resolvers/group-data-and-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Groups data and template resolver.
  */
 @Injectable()
-export class GroupDataAndTemplateResolver implements Resolve<Object> {
+export class GroupDataAndTemplateResolver {
   /**
    * @param {GroupsService} GroupsService Groups service.
    */

src/app/groups/common-resolvers/group-datatable.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Group Datatable data resolver.
  */
 @Injectable()
-export class GroupDatatableResolver implements Resolve<Object> {
+export class GroupDatatableResolver {
   /**
    * @param {GroupsService} GroupsService Groups service.
    */

src/app/groups/common-resolvers/group-datatables.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Group Datatables data resolver.
  */
 @Injectable()
-export class GroupDatatablesResolver implements Resolve<Object> {
+export class GroupDatatablesResolver {
   /**
    * @param {GroupsService} GroupsService Groups service.
    */

src/app/groups/common-resolvers/group-notes.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Group Notes data resolver.
  */
 @Injectable()
-export class GroupNotesResolver implements Resolve<Object> {
+export class GroupNotesResolver {
   /**
    * @param {GroupsService} GroupsService Groups service.
    */

src/app/groups/common-resolvers/group-summary.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Group Summary resolver.
  */
 @Injectable()
-export class GroupSummaryResolver implements Resolve<Object> {
+export class GroupSummaryResolver {
   /**
    * @param {GroupsService} GroupsService Groups service.
    */

src/app/groups/common-resolvers/group-view.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * Groups data resolver.
  */
 @Injectable()
-export class GroupViewResolver implements Resolve<Object> {
+export class GroupViewResolver {
   /**
    * @param {GroupsService} GroupsService Groups service.
    */

src/app/groups/common-resolvers/gsim-account-resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { GroupsService } from '../groups.service';
  * GSIM Accounts data resolver.
  */
 @Injectable()
-export class GSIMAccountsResolver implements Resolve<Object> {
+export class GSIMAccountsResolver {
   /**
    * @param {GroupsService} groupsService Groups service.
    */

src/app/groups/create-group/create-group.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="groupForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -95,7 +95,7 @@
           </mat-option>
         </mat-autocomplete>
 
-        <div fxLayout="row">
+        <div class="layout-row">
           <div class="mat-table" *ngIf="clientChoice.value">
             <div class="mat-header-row">
               <div class="mat-header-cell">{{ 'labels.inputs.Client Details' | translate }}</div>
@@ -129,7 +129,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/edit-group/edit-group.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="editGroupForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -68,7 +68,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/add-role/add-role.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="groupsAddRoleForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
             <mat-select formControlName="clientId">
@@ -31,7 +31,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/committee-tab/committee-tab.component.html

@@ -1,9 +1,9 @@
 <div class="tab-container mat-typography">
-  <div fxLayout="row" fxLayoutAlign="start">
+  <div class="layout-row align-start">
     <div class="m-b-10">
       <h3>{{ 'labels.heading.Client Members' | translate }}</h3>
     </div>
-    <div class="action-button m-b-10" fxLayoutGap="25px" *ngIf="groupStatus !== 'Closed'">
+    <div class="action-button m-b-10 gap-25px" *ngIf="groupStatus !== 'Closed'">
       <button
         mat-raised-button
         class="f-right"

src/app/groups/groups-view/general-tab/general-tab.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
   <h3>{{ 'labels.heading.Group Details' | translate }}</h3>
 
-  <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
+  <div class="layout-row gap-32px group-details-container m-b-30">
     <p>
       {{ 'labels.inputs.Active Client Loans' | translate }}: {{ groupSummary?.activeClientLoans }}<br />
       {{ 'labels.inputs.Active Client Borrowers' | translate }}: {{ groupSummary?.activeClientBorrowers }}<br />
@@ -60,7 +60,7 @@
   </div>
 
   <div *ngIf="loanAccounts">
-    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+    <div class="layout-row align-start table-header">
       <div class="m-b-10">
         <h3>{{ 'labels.heading.Loan Accounts' | translate }}</h3>
       </div>
@@ -227,7 +227,7 @@
   </div>
 
   <div *ngIf="gsimAccounts">
-    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+    <div class="layout-row align-start table-header">
       <div class="m-b-10">
         <h3>{{ 'labels.heading.GSIM Account Overview' | translate }}</h3>
       </div>
@@ -272,7 +272,7 @@
   </div>
 
   <div *ngIf="glimAccounts">
-    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+    <div class="layout-row align-start table-header">
       <div class="m-b-10">
         <h3>{{ 'labels.heading.GLIM Loans Account Overview' | translate }}</h3>
       </div>
@@ -317,7 +317,7 @@
   </div>
 
   <div *ngIf="savingAccounts">
-    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+    <div class="layout-row align-start table-header">
       <div class="m-b-10">
         <h3>{{ 'labels.heading.Saving Accounts' | translate }}</h3>
       </div>

src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="activateGroupForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="activationDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="activationDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
           <input
             matInput
@@ -21,7 +21,7 @@
         </mat-form-field>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="groupMeetingForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Meeting Start Date' | translate }}</mat-label>
             <input
@@ -66,7 +66,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/group-actions/close-group/close-group.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeGroupForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closureDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
             <input
@@ -21,7 +21,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
@@ -36,7 +36,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="groupEditMeetingScheduleForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
             <mat-select formControlName="presentMeetingDate">
@@ -36,7 +36,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
+<div class="container m-b-20 layout-row align-end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit Schedule' | translate }}
@@ -9,7 +9,7 @@
   <mat-card>
     <form [formGroup]="groupEditMeetingForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
@@ -72,7 +72,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="groupAssignStaffForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
@@ -18,7 +18,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <mat-card fxLayout="column" fxLayoutGap="3%">
-    <mat-form-field fxFlex>
+  <mat-card class="layout-column gap-3percent">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Meeting Date' | translate }}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
@@ -37,7 +37,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+    <mat-card-actions class="layout-row align-center gap-5px responsive-column">
       <button type="button" mat-raised-button [routerLink]="['../../']">
         {{ 'labels.buttons.Cancel' | translate }}
       </button>

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="transferClientsForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Select Client Members for Transfer' | translate }}</mat-label>
             <mat-select required formControlName="clients" multiple>
@@ -69,7 +69,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html

@@ -1,6 +1,6 @@
-<div class="container" fxLayout="row" fxLayoutGap="3%">
-  <mat-card fxFlex class="client-card" fxLayout="column" fxLayoutGap="2%">
-    <mat-form-field fxFlex="30%">
+<div class="container layout-row gap-3percent">
+  <mat-card class="client-card layout-column flex gap-2px">
+    <mat-form-field class="flex-30">
       <mat-label>{{ 'labels.inputs.Add Clients' | translate }}</mat-label>
       <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete" />
     </mat-form-field>
@@ -33,13 +33,13 @@
     </div>
   </mat-card>
 
-  <mat-card fxFlex="50%">
+  <mat-card class="flex-50">
     <h3 matSubheader>{{ 'labels.heading.Client Members' | translate }}</h3>
 
     <mat-nav-list *ngIf="clientMembers?.length">
       <div mat-list-item *ngFor="let client of clientMembers; index as i">
         <span matLine class="p-t-10">{{ client.displayName }}</span>
-        <div fxFlex></div>
+        <div class="flex-fill"></div>
         <button
           mat-icon-button
           color="warn"

src/app/groups/groups-view/groups-view.component.html

@@ -1,5 +1,5 @@
 <mat-card class="group-card">
-  <mat-card-header fxLayout="column" class="header">
+  <mat-card-header class="header layout-column">
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
@@ -8,8 +8,8 @@
       </div>
 
       <div class="mat-typography group-card-title">
-        <mat-card-title>
-          <h3 fxFlex="95%">
+        <mat-card-title class="make-flex">
+          <h3 class="flex-95">
             <i
               class="fa fa-stop"
               [ngClass]="groupViewData.status.code | statusLookup"
@@ -18,7 +18,7 @@
             {{ 'labels.heading.Group Name' | translate }} : {{ groupViewData.name }}
           </h3>
 
-          <div fxFlex="5%" fxFlex.sm="10%" fxFlex.md="5%" fxFlex.xs="15%">
+          <div class="flex-5 flex-xs-15 flex-sm-10 flex-md-5">
             <button mat-icon-button [matMenuTriggerFor]="groupMenu" aria-label="Group actions" yPosition="below">
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
@@ -27,8 +27,8 @@
           </div>
         </mat-card-title>
 
-        <mat-card-subtitle>
-          <div fxFlex="45%">
+        <mat-card-subtitle class="make-flex">
+          <div class="flex-45">
             <b>{{ 'labels.inputs.Group' | translate }} :</b> {{ groupViewData.name }} |
             <b>{{ 'labels.inputs.Center Name' | translate }}:</b> {{ groupViewData.centerName }} |
             <b>{{ 'labels.inputs.Staff' | translate }}:</b> {{ groupViewData.staffName || 'Unassigned' }}<br />
@@ -40,7 +40,7 @@
               {{ groupViewData.timeline.closedOnDate | dateFormat }}
             </span>
           </div>
-          <div fxFlex="45%" class="group-meeting" fxLayoutAlign="start start">
+          <div class="group-meeting flex-45 align-start-start">
             <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
               <p>
                 {{ 'labels.inputs.Next Meeting on' | translate }}:
@@ -177,7 +177,7 @@
   </mat-card-header>
 
   <mat-card-content>
-    <nav mat-tab-nav-bar class="navigation-tabs">
+    <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
       <a
         mat-tab-link
         [routerLink]="['./general']"
@@ -220,6 +220,8 @@
       </span>
     </nav>
 
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </mat-card-content>
 </mat-card>

src/app/groups/groups-view/groups-view.component.scss

@@ -61,3 +61,7 @@
     overflow: auto;
   }
 }
+
+.make-flex {
+  display: flex;
+}

src/app/groups/groups.component.html

@@ -1,5 +1,5 @@
 <mat-card class="container">
-  <div fxLayout="row" fxLayoutAlign="start center">
+  <div class="layout-row align-start-center">
     <div class="search-box">
       <mat-form-field>
         <input matInput placeholder="Search by Name" [formControl]="name" />
@@ -8,7 +8,7 @@
         'labels.inputs.Show Closed Groups' | translate
       }}</mat-checkbox>
     </div>
-    <div class="action-button" fxLayoutGap="25px">
+    <div class="action-button gap-25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
         <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
       </button>

src/app/groups/groups.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
+
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { UntypedFormControl } from '@angular/forms';