RT-1530: (charts-on-fhir) Update to Angular 18

.gitignore

@@ -37,6 +37,7 @@ yarn-error.log
 testem.log
 /typings
 /.nx/cache
+.nx/workspace-data
 
 # System files
 .DS_Store

.prettierignore

@@ -7,4 +7,5 @@ node_modules
 **/synthea-utils/**/*.json
 **/mock-fhir-server/**/*.json
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

apps/documentation/src/app/app.component.html

@@ -1,9 +1,9 @@
 <ng-doc-root>
-  <ng-doc-navbar [leftContent]="leftContent" [rightContent]="rightContent">
-    <ng-template #leftContent>
+  <ng-doc-navbar>
+    <ng-template ngDocNavbarLeft>
       <h3 style="margin: 0">Charts-on-FHIR</h3>
     </ng-template>
-    <ng-template #rightContent>
+    <ng-template ngDocNavbarRight>
       <div class="ng-doc-header-controls">
         <a ng-doc-button-icon size="large" href="https://github.com/elimuinformatics/charts-on-fhir" ngDocTooltip="GitHub Repository">
           <ng-doc-icon customIcon="github" [size]="24"></ng-doc-icon>

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

@@ -5,14 +5,14 @@ import { NG_DOC_CONTEXT, NgDocRootComponent } from '@ng-doc/app';
 import { NgDocNavbarComponent } from '@ng-doc/app/components/navbar';
 import { NgDocSidebarComponent } from '@ng-doc/app/components/sidebar';
 import { AppComponent } from './app.component';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [RouterModule.forRoot([]), NoopAnimationsModule, NgDocNavbarComponent, NgDocSidebarComponent, NgDocRootComponent],
       declarations: [AppComponent],
-      providers: [{ provide: NG_DOC_CONTEXT, useValue: { navigation: [] } }, HttpClientModule],
+      providers: [{ provide: NG_DOC_CONTEXT, useValue: { navigation: [] } }, provideHttpClient()],
     }).compileComponents();
   });
 

apps/documentation/src/app/app.module.ts

@@ -27,10 +27,11 @@ import {
 import { MockDataLayerService } from './mock/mock-data-layer.service';
 import { MockPatientService } from './mock/mock-patient.service';
 import { NgDocIconComponent, NgDocButtonIconComponent } from '@ng-doc/ui-kit';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 @NgModule({
   declarations: [AppComponent],
+  bootstrap: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
@@ -39,7 +40,6 @@ import { HttpClientModule } from '@angular/common/http';
     NgDocSidebarComponent,
     NgDocIconComponent,
     NgDocButtonIconComponent,
-    HttpClientModule,
     RouterModule.forRoot(
       [
         ...NG_DOC_ROUTING,
@@ -68,7 +68,7 @@ import { HttpClientModule } from '@angular/common/http';
       withSummaryServices(ScatterDataPointSummaryService)
     ),
     { provide: PatientService, useClass: MockPatientService },
+    provideHttpClient(withInterceptorsFromDi()),
   ],
-  bootstrap: [AppComponent],
 })
 export class AppModule {}

apps/documentation/src/app/pages/components/chart-layout/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "ChartLayout"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/chart-layout/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { ChartLayoutDemoComponent } from './demo/chart-layout-demo.component';
 
 const ChartLayout: NgDocPage = {
   title: 'Chart Layout',
-  keyword: 'ChartLayout',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/chart-legend/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: ChartLegend
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/chart-legend/ng-doc.page.ts

@@ -6,7 +6,6 @@ import { ChartTagsLegendDemoComponent } from './demos/tags-legend/chart-tags-leg
 const ChartLegend: NgDocPage = {
   title: `Chart Legend`,
   mdFile: './index.md',
-  keyword: `ChartLegend`,
   category: ComponentsCategory,
   imports: [],
   demos: { ChartLegendDemoComponent, ChartTagsLegendDemoComponent },

apps/documentation/src/app/pages/components/chart-summary/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "ChartSummary"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/chart-summary/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { ChartSummaryDemoComponent } from './demo/chart-summary-demo.component';
 
 const ChartSummary: NgDocPage = {
   title: 'Chart Summary',
-  keyword: 'ChartSummary',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/chart/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "Chart"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/chart/ng-doc.page.ts

@@ -5,7 +5,6 @@ import { FloatingContentDemoComponent } from './demos/floating-content/floating-
 
 const Chart: NgDocPage = {
   title: 'Chart',
-  keyword: 'Chart',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/data-layer-browser/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "DataLayerBrowser"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/data-layer-browser/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { DataLayerBrowserDemoComponent } from './demo/data-layer-browser-demo.co
 
 const DataLayerBrowser: NgDocPage = {
   title: 'Data Layer Browser',
-  keyword: 'DataLayerBrowser',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/data-layer-list/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "DataLayerList"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/data-layer-list/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { DataLayerListDemoComponent } from './demo/data-layer-list-demo.componen
 
 const DataLayerList: NgDocPage = {
   title: 'Data Layer List',
-  keyword: 'DataLayerList',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/data-layer-selector/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "DataLayerSelector"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/data-layer-selector/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { DataLayerSelectorDemoComponent } from './demo/data-layer-selector-demo.
 
 const DataLayerSelector: NgDocPage = {
   title: 'Data Layer Selector',
-  keyword: 'DataLayerSelector',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/patient-browser/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "PatientBrowser"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/patient-browser/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { PatientBrowserDemoComponent } from './demo/patient-browser-demo.compone
 
 const PatientBrowser: NgDocPage = {
   title: 'Patient Browser',
-  keyword: 'PatientBrowser',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/summary-range-selector/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "SummaryRangeSelector"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/summary-range-selector/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { SummaryRangeSelectorDemoComponent } from './demo/summary-range-selector
 
 const SummaryRangeSelector: NgDocPage = {
   title: 'Summary Range Selector',
-  keyword: 'SummaryRangeSelector',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/components/timeline-range-selector/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "TimelineRangeSelector"
+---
 
 ## Overview
 

apps/documentation/src/app/pages/components/timeline-range-selector/ng-doc.page.ts

@@ -4,7 +4,6 @@ import { TimelineRangeSelectorDemoComponent } from './demo/timeline-range-select
 
 const TimelineRangeSelector: NgDocPage = {
   title: 'Timeline Range Selector',
-  keyword: 'TimelineRangeSelector',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

apps/documentation/src/app/pages/getting-started/connecting-to-a-fhir-server/index.md

@@ -1,5 +1,3 @@
-# {{ NgDocPage.title }}
-
 Charts-on-FHIR provides an Angular service (`FhirDataService`) that wraps the [SMART Health IT FHIR Client](http://docs.smarthealthit.org/client-js/) and makes it easier to integrate with Angular applications. This service should be initialized during the Angular bootstrap process so it can handle the SMART launch authorization flow before the application starts up.
 
 ```ts

apps/documentation/src/app/pages/getting-started/installation/index.md

@@ -1,5 +1,3 @@
-# {{ NgDocPage.title }}
-
 Before installing Charts-on-FHIR, you will need to create an Angular project.
 
 ## Install Angular

apps/documentation/src/app/pages/getting-started/retrieving-data/index.md

@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "RetrievingData"
+---
 
 ## Implement a DataLayerService
 

apps/documentation/src/app/pages/getting-started/retrieving-data/ng-doc.page.ts

@@ -3,7 +3,6 @@ import GettingStartedCategory from '../ng-doc.category';
 
 const RetrievingData: NgDocPage = {
   title: 'Retrieving Data',
-  keyword: 'RetrievingData',
   category: GettingStartedCategory,
   mdFile: './index.md',
   order: 3,

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

@@ -1,6 +1,6 @@
 {
   "name": "@elimuinformatics/ngx-charts-on-fhir",
-  "version": "4.0.1",
+  "version": "5.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.scss

@@ -7,16 +7,16 @@
 @include mat.core();
 
 // Define a theme.
-$primary: mat.define-palette(mat.$indigo-palette);
-$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
-$theme: mat.define-light-theme(
+$theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $primary,
       accent: $accent,
     ),
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
     density: -1,
   )
 );

libs/ngx-charts-on-fhir/src/lib/data-layer-toolbar/_data-layer-toolbar-theme.scss

@@ -2,11 +2,11 @@
 @use "@angular/material" as mat;
 
 @mixin theme($theme) {
-  $color-config: mat.get-color-config($theme);
+  $color-config: mat.m2-get-color-config($theme);
   $primary-palette: map.get($color-config, "primary");
 
   .layout-toolbar {
-    background-color: mat.get-color-from-palette($primary-palette, 500);
+    background-color: mat.m2-get-color-from-palette($primary-palette, 500);
   }
   .mat-badge-content {
     background: none;

libs/ngx-charts-on-fhir/src/lib/fhir-chart-layout/_fhir-chart-layout-theme.scss

@@ -2,10 +2,10 @@
 @use "@angular/material" as mat;
 
 @mixin theme($theme) {
-  $color-config: mat.get-color-config($theme);
+  $color-config: mat.m2-get-color-config($theme);
   $primary-palette: map.get($color-config, "primary");
 
   .sidebar-close-button {
-    background-color: mat.get-color-from-palette($primary-palette, 500);
+    background-color: mat.m2-get-color-from-palette($primary-palette, 500);
   }
 }