switch angular/flex-lyaout to ngy-layout

ngy-layout is a replacement clone for the discontinued flex-layout.

See https://blog.angular.io/modern-css-in-angular-layouts-4a259dca9127
and
angular/flex-layout#1426 (comment)

Change-Id: Id6f743428d52e8e34ecbddcc3d7b28c1345a3a90

Author: bpedersen2

package-lock.json

@@ -17,6 +17,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-material-components/datetime-picker": "^16",
     "@angular/animations": "^16",
     "@angular/cdk": "^16",
     "@angular/common": "^16",
@@ -29,7 +30,7 @@
     "@angular/platform-server": "^16",
     "@angular/router": "^16",
     "@angular/service-worker": "^16",
-    "@angular-material-components/datetime-picker": "^16",	
+    "@ngbracket/ngx-layout": "^16.0.0",
     "@ngrx/effects": "^16",
     "@ngrx/router-store": "^16",
     "@ngrx/store": "^16",
@@ -50,8 +51,8 @@
     "zone.js": "^0.13"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "^16",
     "@angular-devkit/core": "^16",
-    "@angular-devkit/build-angular":"^16",
     "@angular-eslint/builder": "^16",
     "@angular-eslint/eslint-plugin": "^16",
     "@angular-eslint/eslint-plugin-template": "^16",

package.json

@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { AboutComponent } from "./about/about.component";
 import { MatCardModule } from "@angular/material/card";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { LinkyModule } from "ngx-linky";
 
 @NgModule({

src/app/about/about.module.ts

@@ -4,7 +4,7 @@ import { LinkyModule } from "ngx-linky";
 import { ArchivingService } from "./archiving.service";
 import { BatchViewComponent } from "./batch-view/batch-view.component";
 import { AsyncPipe, CommonModule } from "@angular/common";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
 import { MatChipsModule } from "@angular/material/chips";

src/app/datasets/datasets.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from "@angular/common";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
 import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { SharedScicatFrontendModule } from "shared/shared.module";
 import { FilesDashboardComponent } from "./files-dashboard/files-dashboard.component";
 

src/app/files/files.module.ts

@@ -16,7 +16,7 @@ import { saveCustomMetadataAction } from "state-management/actions/instruments.a
 import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
 import { MatTabsModule } from "@angular/material/tabs";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { AppConfigService } from "app-config.service";
 
 const getConfig = () => ({

src/app/instruments/instrument-details/instrument-details.component.spec.ts

@@ -23,7 +23,7 @@ import {
 } from "state-management/actions/instruments.actions";
 import { Router } from "@angular/router";
 import { Instrument } from "shared/sdk";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 
 describe("InstrumentsDashboardComponent", () => {
   let component: InstrumentsDashboardComponent;

src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { InstrumentsDashboardComponent } from "./instruments-dashboard/instruments-dashboard.component";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { StoreModule } from "@ngrx/store";
 import { instrumentsReducer } from "state-management/reducers/instruments.reducer";
 import { EffectsModule } from "@ngrx/effects";

src/app/instruments/instruments.module.ts

@@ -20,7 +20,7 @@ import {
 } from "state-management/actions/jobs.actions";
 import { PageChangeEvent } from "shared/modules/table/table.component";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
 

src/app/jobs/jobs-dashboard/jobs-dashboard.component.spec.ts

@@ -9,7 +9,7 @@ import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
 import { StoreModule } from "@ngrx/store";
 import { jobsReducer } from "state-management/reducers/jobs.reducer";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { SharedScicatFrontendModule } from "shared/shared.module";
 import { JobsDashboardNewComponent } from "./jobs-dashboard-new/jobs-dashboard-new.component";
 

src/app/jobs/jobs.module.ts

@@ -10,7 +10,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatPaginatorModule } from "@angular/material/paginator";
 import { MatSortModule } from "@angular/material/sort";
 import { MatTableModule } from "@angular/material/table";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { LinkyModule } from "ngx-linky";
 import { RouterModule } from "@angular/router";
 import { SharedScicatFrontendModule } from "shared/shared.module";

src/app/logbooks/logbooks.module.ts

@@ -42,7 +42,7 @@ import {
 import { MatCheckboxChange } from "@angular/material/checkbox";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 describe("PoliciesDashboardComponent", () => {

src/app/policies/policies-dashboard/policies-dashboard.component.spec.ts

@@ -26,7 +26,7 @@ import { SharedScicatFrontendModule } from "shared/shared.module";
 import { StoreModule } from "@ngrx/store";
 import { policiesReducer } from "state-management/reducers/policies.reducer";
 import { PoliciesDashboardComponent } from "./policies-dashboard/policies-dashboard.component";
-import { FlexModule } from "@angular/flex-layout";
+import { FlexModule } from "@ngbracket/ngx-layout";
 
 @NgModule({
   imports: [

src/app/policies/policies.module.ts

@@ -25,7 +25,7 @@ import { MatTableModule } from "@angular/material/table";
 import { MatTabsModule } from "@angular/material/tabs";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { SharedScicatFrontendModule } from "shared/shared.module";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { FileSizePipe } from "shared/pipes/filesize.pipe";
 import { ProposalFilterComponent } from "./proposal-filter/proposal-filter.component";
 import { LogbooksModule } from "logbooks/logbooks.module";

src/app/proposals/proposals.module.ts

@@ -16,7 +16,7 @@ import { MatCheckboxChange } from "@angular/material/checkbox";
 import { of } from "rxjs";
 import { Message, MessageType } from "state-management/models";
 import { showMessageAction } from "state-management/actions/user.actions";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 import { AppConfigService } from "app-config.service";

src/app/publisheddata/publisheddata-dashboard/publisheddata-dashboard.component.spec.ts

@@ -24,7 +24,7 @@ import { MatInputModule } from "@angular/material/input";
 import { MatSelectModule } from "@angular/material/select";
 import { MatOptionModule } from "@angular/material/core";
 import { MatButtonModule } from "@angular/material/button";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 
 describe("PublisheddataEditComponent", () => {
   let component: PublisheddataEditComponent;

src/app/publisheddata/publisheddata-edit/publisheddata-edit.component.spec.ts

@@ -14,7 +14,7 @@ import { StoreModule } from "@ngrx/store";
 import { publishedDataReducer } from "state-management/reducers/published-data.reducer";
 import { PublisheddataDashboardComponent } from "./publisheddata-dashboard/publisheddata-dashboard.component";
 import { PublisheddataEditComponent } from "./publisheddata-edit/publisheddata-edit.component";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatChipsModule } from "@angular/material/chips";

src/app/publisheddata/publisheddata.module.ts

@@ -24,7 +24,7 @@ import { SampleDialogComponent } from "samples/sample-dialog/sample-dialog.compo
 import { MatCardModule } from "@angular/material/card";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatTableModule } from "@angular/material/table";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 import { MatChipsModule } from "@angular/material/chips";

src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts

@@ -29,7 +29,7 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
 import { MatTabsModule } from "@angular/material/tabs";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { AppConfigService } from "app-config.service";
 
 const getConfig = () => ({

src/app/samples/sample-detail/sample-detail.component.spec.ts

@@ -16,7 +16,7 @@ import { samplesReducer } from "../state-management/reducers/samples.reducer";
 import { SampleDialogComponent } from "./sample-dialog/sample-dialog.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { SampleDashboardComponent } from "./sample-dashboard/sample-dashboard.component";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { NgxJsonViewerModule } from "ngx-json-viewer";
 import { SharedScicatFrontendModule } from "shared/shared.module";
 import { MatChipsModule } from "@angular/material/chips";

src/app/samples/samples.module.ts

@@ -10,7 +10,7 @@ import { MatAutocompleteModule } from "@angular/material/autocomplete";
 import { CommonModule, DatePipe } from "@angular/common";
 import { MatInputModule } from "@angular/material/input";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { FlexLayoutModule, FlexModule } from "@angular/flex-layout";
+import { FlexLayoutModule, FlexModule } from "@ngbracket/ngx-layout";
 import { MatDividerModule } from "@angular/material/divider";
 import { TreeViewComponent } from "./tree-view/tree-view.component";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";

src/app/shared/modules/scientific-metadata-tree/scientific-metadata-tree.modules.ts

@@ -13,7 +13,7 @@ import { MetadataViewComponent } from "./metadata-view/metadata-view.component";
 import { MetadataEditComponent } from "./metadata-edit/metadata-edit.component";
 import { PipesModule } from "shared/pipes/pipes.module";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { FlexModule } from "@angular/flex-layout";
+import { FlexModule } from "@ngbracket/ngx-layout";
 
 @NgModule({
   declarations: [MetadataViewComponent, MetadataEditComponent],

src/app/shared/modules/scientific-metadata/scientific-metadata.module.ts

@@ -25,7 +25,7 @@ import { MatToolbarModule } from "@angular/material/toolbar";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { ObjKeysPipe } from "shared/pipes/obj-keys.pipe";
 import { RouterModule } from "@angular/router";

src/app/shared/modules/shared-table/shared-table.module.ts

@@ -14,7 +14,7 @@ import { UserSettingsComponent } from "./user-settings.component";
 import { SharedScicatFrontendModule } from "shared/shared.module";
 import { Message, MessageType } from "state-management/models";
 import { showMessageAction } from "state-management/actions/user.actions";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
 

src/app/users/user-settings/user-settings.component.spec.ts

@@ -2,7 +2,7 @@ import { UserEffects } from "./../state-management/effects/user.effects";
 import { EffectsModule } from "@ngrx/effects";
 import { ADAuthService } from "./adauth.service";
 import { CommonModule } from "@angular/common";
-import { FlexLayoutModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { LoginComponent } from "users/login/login.component";
 import { NgModule } from "@angular/core";