Update to Angular 19 (#270)

* RT-1877: Update to Angular 19

* RT-1877: PatientService and ComponentObservationMapper to remove root provider declaration

* Implement code changes to improve data handling and optimize performance

* RT-1877: Add change detection in TimelineRangeSelectorComponent after view updates

* RT-1877: Fix change detection timing in TimelineRangeSelectorComponent

* RT-1877: Refactor SharedDataLayerListService to remove providedIn root scope

* RT-1877: Update maximumError size in project.json and remove unused import in observations.service.ts

* RT-1877: Resolve comment on the PR.

* RT-1877: Resolve comments in the PR.

apps/cardio-patient/src/app/app.component.spec.ts

@@ -24,23 +24,38 @@ class MockDataLayerService implements DataLayerService {
   retrieve = () => EMPTY;
 }
 
-@Component({ selector: 'fhir-chart' })
+@Component({
+  selector: 'fhir-chart',
+  standalone: false,
+})
 class MockFhirChartComponent {
   @Input() floatingContent?: TemplateRef<unknown>;
 }
 
-@Component({ selector: 'fhir-chart-summary' })
+@Component({
+  selector: 'fhir-chart-summary',
+  standalone: false,
+})
 class MockFhirChartSummaryComponent {}
 
-@Component({ selector: 'last-report-bp' })
+@Component({
+  selector: 'last-report-bp',
+  standalone: false,
+})
 class MockLastReportBPComponent {}
 
-@Component({ selector: 'report-bp' })
+@Component({
+  selector: 'report-bp',
+  standalone: false,
+})
 class MockReportBPComponent {
   @Output() resourceCreated = new EventEmitter<number>();
 }
 
-@Component({ selector: 'options-menu' })
+@Component({
+  selector: 'options-menu',
+  standalone: false,
+})
 class MockOptionsMenuComponent {
   @Input() chart?: FhirChartComponent;
 }

apps/cardio-patient/src/app/app.component.ts

@@ -6,14 +6,18 @@ import { environment } from '../environments/environment';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
 export class AppComponent implements OnInit {
   appTitle: string = environment.env.appTitle;
   cdsicLogo = environment.env.cdsicLogo;
   selectedIndex?: number;
   showLegend = false;
 
-  constructor(readonly layerManager: DataLayerManagerService, private configService: FhirChartConfigurationService) {}
+  constructor(
+    readonly layerManager: DataLayerManagerService,
+    private readonly configService: FhirChartConfigurationService,
+  ) {}
 
   ngOnInit(): void {
     this.layerManager.autoSelect(true);

apps/cardio-patient/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { NgModule, inject, provideAppInitializer } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatCardModule } from '@angular/material/card';
@@ -24,16 +24,11 @@ import {
   withSummaryServices,
   FhirChartTagsLegendComponent,
 } from '@elimuinformatics/ngx-charts-on-fhir';
-import { environment } from '../environments/environment';
 import { ReportBPModule } from './report-bp/report-bp.module';
 import { LastReportBPModule } from './last-report-bp/last-report-bp.module';
 import { OptionsMenuModule } from './options-menu/options-menu.module';
 import { ObservationLayerService } from './datasets/observations.service';
 
-function initializeFhirClientFactory(service: FhirDataService): () => Promise<void> {
-  return () => service.initialize(environment.clientState);
-}
-
 @NgModule({
   declarations: [AppComponent],
   imports: [
@@ -55,13 +50,13 @@ function initializeFhirClientFactory(service: FhirDataService): () => Promise<vo
     FhirChartTagsLegendComponent,
   ],
   providers: [
-    { provide: APP_INITIALIZER, useFactory: initializeFhirClientFactory, deps: [FhirDataService], multi: true },
+    provideAppInitializer(() => inject(FhirDataService).initialize()),
     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },
     provideChartsOnFhir(
       withColors('#e36667', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#c36d3c', '#f781bf', '#c46358', '#5a84a1', '#ba803f', '#90b354', '#ab7490'),
       withMappers(BloodPressureMapper),
       withDataLayerServices(ObservationLayerService),
-      withSummaryServices(ScatterDataPointSummaryService)
+      withSummaryServices(ScatterDataPointSummaryService),
     ),
   ],
   bootstrap: [AppComponent],

apps/cardio-patient/src/app/datasets/observations.service.ts

@@ -21,7 +21,10 @@ export class ObservationLayerService extends DataLayerService {
     },
   ];
   query: string = '';
-  constructor(private fhir: FhirDataService, private converter: FhirConverter) {
+  constructor(
+    private readonly fhir: FhirDataService,
+    private readonly converter: FhirConverter,
+  ) {
     super();
     this.query = this.getQueryfromCoding(this.codings);
   }

apps/cardio-patient/src/app/last-report-bp/last-report-bp.component.ts

@@ -12,6 +12,7 @@ export interface LastReportedBPdata {
   selector: 'last-report-bp',
   templateUrl: './last-report-bp.component.html',
   styleUrls: ['./last-report-bp.component.css'],
+  standalone: false,
 })
 export class LastReportBPComponent {
   lastReportedBPdata?: LastReportedBPdata;
@@ -31,7 +32,7 @@ export class LastReportBPComponent {
             systolic: { date: mostRecentData['systolic']?.x, value: mostRecentData['systolic']?.y },
             diastolic: { date: mostRecentData['diastolic']?.x, value: mostRecentData['diastolic']?.y },
           };
-        })
+        }),
       )
       .subscribe((layers: any) => {
         if (layers.diastolic.date !== undefined && layers.systolic.date !== undefined) {

apps/cardio-patient/src/app/options-menu/options-menu.component.ts

@@ -3,6 +3,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   selector: 'options-menu',
   templateUrl: './options-menu.component.html',
+  standalone: false,
 })
 export class OptionsMenuComponent {
   @Input() legend?: boolean;

apps/cardio-patient/src/app/report-bp/report-bp.component.ts

@@ -14,6 +14,7 @@ const BloodPressureRangeValidator: ValidatorFn = (control: AbstractControl): Val
   selector: 'report-bp',
   templateUrl: './report-bp.component.html',
   styleUrls: ['./report-bp.component.css'],
+  standalone: false,
 })
 export class ReportBPComponent {
   submitted = false;
@@ -27,10 +28,14 @@ export class ReportBPComponent {
       systolic: [null, [Validators.required, Validators.min(this.min), Validators.max(this.max)]],
       diastolic: [null, [Validators.required, Validators.min(this.min), Validators.max(this.max)]],
     },
-    { validators: [BloodPressureRangeValidator] }
+    { validators: [BloodPressureRangeValidator] },
   );
 
-  constructor(private fb: FormBuilder, private dataService: FhirDataService, private snackBar: MatSnackBar) {}
+  constructor(
+    private readonly fb: FormBuilder,
+    private readonly dataService: FhirDataService,
+    private readonly snackBar: MatSnackBar,
+  ) {}
 
   open(message: string, action = '', config?: MatSnackBarConfig) {
     return this.snackBar.open(message, action, config);

apps/cardio/src/app/app.component.ts

@@ -13,7 +13,6 @@ import {
 } from '@elimuinformatics/ngx-charts-on-fhir';
 
 @Component({
-  standalone: true,
   imports: [
     CommonModule,
     FhirChartComponent,

apps/cardio/src/app/datasets/medications.service.ts

@@ -7,7 +7,10 @@ import { from, mergeMap } from 'rxjs';
   providedIn: 'root',
 })
 export class MedicationLayerService extends DataLayerService {
-  constructor(private fhir: FhirDataService, private converter: FhirConverter) {
+  constructor(
+    private readonly fhir: FhirDataService,
+    private readonly converter: FhirConverter,
+  ) {
     super();
   }
   name = 'Medications';

apps/documentation/project.json

@@ -48,7 +48,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "3mb"
+              "maximumError": "3.1mb"
             },
             {
               "type": "anyComponentStyle",

apps/documentation/src/app/app.component.ts

@@ -4,5 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
 export class AppComponent {}

apps/documentation/src/app/pages/components/chart-layout/demo/chart-layout-demo.component.ts

@@ -11,7 +11,6 @@ import {
   selector: 'example-chart-layout-demo',
   templateUrl: './chart-layout-demo.component.html',
   styleUrls: ['./chart-layout-demo.component.css'],
-  standalone: true,
   imports: [CommonModule, FhirChartLayoutComponent, MatIconModule, MatButtonModule],
 })
 export class ChartLayoutDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/chart-legend/demos/legend/chart-legend-demo.component.ts

@@ -8,7 +8,6 @@ import {
 @Component({
   selector: 'example-chart-legend-demo',
   templateUrl: './chart-legend-demo.component.html',
-  standalone: true,
   imports: [CommonModule, FhirChartLegendComponent],
 })
 export class ChartLegendDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/chart-legend/demos/tags-legend/chart-tags-legend-demo.component.ts

@@ -2,15 +2,13 @@ import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import {
   DataLayerManagerService,
-  FhirChartLegendComponent,
   FhirChartTagsLegendComponent,
 } from '@elimuinformatics/ngx-charts-on-fhir';
 
 @Component({
   selector: 'example-chart-tags-legend-demo',
   templateUrl: './chart-tags-legend-demo.component.html',
-  standalone: true,
-  imports: [CommonModule, FhirChartLegendComponent, FhirChartTagsLegendComponent],
+  imports: [CommonModule, FhirChartTagsLegendComponent],
 })
 export class ChartTagsLegendDemoComponent implements OnInit {
   constructor(private layerManager: DataLayerManagerService) {}

apps/documentation/src/app/pages/components/chart-summary/demo/chart-summary-demo.component.ts

@@ -10,7 +10,6 @@ import {
   selector: 'example-chart-summary-demo',
   templateUrl: './chart-summary-demo.component.html',
   styleUrls: ['./chart-summary-demo.css'],
-  standalone: true,
   imports: [CommonModule, FhirChartComponent, FhirChartSummaryComponent],
 })
 export class ChartSummaryDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/chart/demos/chart/chart-demo.component.ts

@@ -1,16 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import {
-  DataLayerManagerService,
-  FhirChartLegendComponent,
-  FhirChartComponent,
-} from '@elimuinformatics/ngx-charts-on-fhir';
+import { DataLayerManagerService, FhirChartComponent } from '@elimuinformatics/ngx-charts-on-fhir';
 
 @Component({
   selector: 'example-chart-demo',
   templateUrl: './chart-demo.component.html',
-  standalone: true,
-  imports: [CommonModule, FhirChartComponent, FhirChartLegendComponent],
+  imports: [CommonModule, FhirChartComponent],
 })
 export class ChartDemoComponent implements OnInit {
   constructor(private layerManager: DataLayerManagerService) {}

apps/documentation/src/app/pages/components/chart/demos/floating-content/floating-content-demo.component.ts

@@ -9,7 +9,6 @@ import {
 @Component({
   selector: 'example-floating-content-demo',
   templateUrl: './floating-content-demo.component.html',
-  standalone: true,
   imports: [CommonModule, FhirChartComponent, FhirChartLegendComponent],
 })
 export class FloatingContentDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/data-layer-browser/demo/data-layer-browser-demo.component.ts

@@ -8,7 +8,6 @@ import {
 @Component({
   selector: 'example-data-layer-browser-demo',
   templateUrl: './data-layer-browser-demo.component.html',
-  standalone: true,
   imports: [CommonModule, DataLayerBrowserComponent],
 })
 export class DataLayerBrowserDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/data-layer-list/demo/data-layer-list-demo.component.ts

@@ -8,7 +8,6 @@ import {
 @Component({
   selector: 'example-data-layer-list-demo',
   templateUrl: './data-layer-list-demo.component.html',
-  standalone: true,
   imports: [CommonModule, DataLayerListComponent],
 })
 export class DataLayerListDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/data-layer-selector/demo/data-layer-selector-demo.component.ts

@@ -10,7 +10,6 @@ import {
 @Component({
   selector: 'example-data-layer-selector-demo',
   templateUrl: './data-layer-selector-demo.component.html',
-  standalone: true,
   imports: [CommonModule, DataLayerSelectorComponent, FhirChartComponent],
 })
 export class DataLayerSelectorDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/patient-browser/demo/patient-browser-demo.component.ts

@@ -8,7 +8,6 @@ import {
 @Component({
   selector: 'example-patient-browser-demo',
   templateUrl: './patient-browser-demo.component.html',
-  standalone: true,
   imports: [CommonModule, PatientBrowserComponent],
 })
 export class PatientBrowserDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/summary-range-selector/demo/summary-range-selector-demo.component.ts

@@ -10,7 +10,6 @@ import {
 @Component({
   selector: 'example-summary-range-selector-demo',
   templateUrl: './summary-range-selector-demo.component.html',
-  standalone: true,
   styleUrls: ['./summary-range-selector-demo.css'],
   imports: [
     CommonModule,

apps/documentation/src/app/pages/components/timeline-range-selector/demo/timeline-range-selector-demo.component.ts

@@ -9,7 +9,6 @@ import {
 @Component({
   selector: 'example-timeline-range-selector-demo',
   templateUrl: './timeline-range-selector-demo.component.html',
-  standalone: true,
   imports: [CommonModule, FhirChartComponent, TimelineRangeSelectorComponent],
 })
 export class TimelineRangeSelectorDemoComponent implements OnInit {

apps/showcase/src/app/app.component.ts

@@ -13,7 +13,6 @@ import {
 } from '@elimuinformatics/ngx-charts-on-fhir';
 
 @Component({
-  standalone: true,
   imports: [
     CommonModule,
     SummaryRangeSelectorComponent,
@@ -32,7 +31,10 @@ export class AppComponent implements OnInit {
   readonly toolbar: ToolbarButtonName[];
   active: ToolbarButtonName | null;
 
-  constructor(readonly layerManager: DataLayerManagerService, readonly patientService: PatientService) {
+  constructor(
+    readonly layerManager: DataLayerManagerService,
+    readonly patientService: PatientService,
+  ) {
     if (patientService.isSinglePatientContext) {
       this.toolbar = ['loading', 'browser', 'options'];
       this.active = 'browser';

apps/showcase/src/app/datasets/encounters.service.ts

@@ -7,7 +7,10 @@ import { from, mergeMap } from 'rxjs';
   providedIn: 'root',
 })
 export class EncounterLayerService extends DataLayerService {
-  constructor(private fhir: FhirDataService, private converter: FhirConverter) {
+  constructor(
+    private readonly fhir: FhirDataService,
+    private readonly converter: FhirConverter,
+  ) {
     super();
   }
   name = 'Medications';

apps/showcase/src/app/datasets/observations.service.ts

@@ -7,7 +7,10 @@ import { from, mergeMap } from 'rxjs';
   providedIn: 'root',
 })
 export class ObservationLayerService extends DataLayerService {
-  constructor(private fhir: FhirDataService, private converter: FhirConverter) {
+  constructor(
+    private readonly fhir: FhirDataService,
+    private readonly converter: FhirConverter,
+  ) {
     super();
   }
   name = 'Observations';

libs/ngx-charts-on-fhir/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elimuinformatics/ngx-charts-on-fhir",
-  "version": "6.1.7",
+  "version": "7.0.0",
   "description": "Charts-on-FHIR: A data visualization library for SMART-on-FHIR healthcare applications",
   "license": "Apache-2.0",
   "homepage": "https://elimuinformatics.github.io/charts-on-fhir",

libs/ngx-charts-on-fhir/src/default-fonts.scss

@@ -1,6 +1,6 @@
 $material-icons-font-path: "material-icons/iconfont/";
 
-@import "material-icons/iconfont/material-icons.scss";
+@use "material-icons/iconfont/material-icons.scss";
 @import "@fontsource/roboto/300.css";
 @import "@fontsource/roboto/400.css";
 @import "@fontsource/roboto/500.css";

libs/ngx-charts-on-fhir/src/default.scss

@@ -2,9 +2,10 @@
 @use "./lib/data-layer-toolbar/data-layer-toolbar-theme" as toolbar;
 @use "./lib/fhir-chart-layout/fhir-chart-layout-theme" as layout;
 
-@import "./default-fonts.scss";
+@use "./default-fonts.scss";
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // Define a theme.
 $primary: mat.m2-define-palette(mat.$m2-indigo-palette);

libs/ngx-charts-on-fhir/src/lib/color-picker/color-picker.component.ts

@@ -7,7 +7,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { OverlayModule } from '@angular/cdk/overlay';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule],
   selector: 'color-picker',
   templateUrl: './color-picker.component.html',