Merge branch 'dev' into deploy/documentation-2024-10-17

* dev: Update Fhi.Frontend.Style to lates version (#734) Release/fhi-angular-components/5.1.0 (#733) Release/fhi-angular-highcharts/5.1.0 (#732) Changes from @folkehelseinstituttet/angular-components/4.5.0 (#731) Changes from @folkehelseinstituttet/angular-highcharts/v/4.6.0 (#729) Changes from @folkehelseinstituttet/angular-highcharts/v/4.5.0 (#726) Changes from patch @folkehelseinstituttet/angular-highcharts/v/4.4.1 (#704) Bugfix/tree-view-selection Make sure there is no duplicate IDs on checkboxes (or radios) if more than one instance on the same page (#717)
folkehelseinstituttet · Oct 17, 2024 · 7adca61 · 7adca61
2 parents 9dd3414 + a7b1338
commit 7adca61
Show file tree

Hide file tree

Showing 22 changed files with 2,194 additions and 1,468 deletions.
diff --git a/Fhi.Frontend.Style b/Fhi.Frontend.Style
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/fhi-angular-components/CHANGELOG.md b/projects/fhi-angular-components/CHANGELOG.md
@@ -1,4 +1,18 @@
-# 5.0.1
+# 5.1.0
+
+> Oct 17, 2024
+
+* :tada: **Enhancement** Changes from @folkehelseinstituttet/angular-components/4.5.0 [(#731)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/731)
+* :bug: **Bugfix** Make sure there is no duplicate IDs on checkboxes (or radios) if more than one instance of `FhiTreeViewCheckboxComponent` or `FhiTreeViewRadioComponent` on the same page [(#717)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/717)
+
+## 4.5.0
+
+> Oct 17, 2024
+
+* :tada: **Enhancement** Add support for disable closing, and closing `fhi-modal` by a method call from the parent [(#721)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/721)
+* :bug: **Bugfix** Make sure there is no duplicate IDs on checkboxes (or radios) if more than one instance of `FhiTreeViewCheckboxComponent` or `FhiTreeViewRadioComponent` on the same page [(#719)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/719)
+
+## 5.0.1
 
 > Sep 20, 2024
 

diff --git a/projects/fhi-angular-components/package.json b/projects/fhi-angular-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@folkehelseinstituttet/angular-components",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "publishConfig": {
     "tag": "latest"
   },

diff --git a/projects/fhi-angular-components/src/lib/fhi-modal/README.md b/projects/fhi-angular-components/src/lib/fhi-modal/README.md
@@ -1,17 +1,29 @@
-# FHI Modal
+# FHI Modal <!-- omit from toc -->
+
+- [API](#api)
+  - [Input](#input)
+  - [Output](#output)
+  - [FhiModalActionButton](#fhimodalactionbutton)
+- [How To](#how-to)
+  - [Keep modal open while waiting for server](#keep-modal-open-while-waiting-for-server)
+  - [Destroy services or reset forms when closing modal](#destroy-services-or-reset-forms-when-closing-modal)
 
 ## API
 
 ### Input
 
-| Input                   | Type                     | Default        | Required | Description |
-| ----------------------- | ------------------------ | -------------- | -------- | ----------- |
-| `[actionButtons]`       | `FhiModalActionButton[]` | -              | no       | Object defining the buttons in the modal. |
-| `modalTitle`            | `string`                 | -              | no       | Title at the top of the modal. |
-| `openModalButtonClass`  | `string`                 | `fhi-btn-link` | no       | Button class on the button that opens the modal. The button can also be modified with markup inside the button. |
-| `[openModalFromParent]` | `boolean`                | `false`        | no       | When set to `true` the method `FhiModalComponent.modal.open()` will be triggered. To be able to trigger change detection more than once, parent component is responsible for toggeling the value. |
-| `[scrollable]`          | `boolean`                | `true`         | no       | Same as NgbModal |
-| `size`                  | `string`                 | `md`           | no       | Same as NgbModal |
+| Input                    | Type                     | Default        | Required | Description |
+| ------------------------ | ------------------------ | -------------- | -------- | ----------- |
+| `[actionButtons]`        | `FhiModalActionButton[]` | -              | no       | Object defining the buttons in the modal. |
+| `modalTitle`             | `string`                 | -              | no       | Title at the top of the modal. |
+| `openModalButtonClass`   | `string`                 | `fhi-btn-link` | no       | Button class on the button that opens the modal. The button can also be modified with markup inside the button. |
+| `[openModalFromParent]`  | `boolean`                | `false`        | no       | When set to `true`* the method `FhiModalComponent.modal.open()` will be called. |
+| `[closeModalFromParent]` | `boolean`                | `false`        | no       | When set to `true`* the method `FhiModalComponent.modal.dismissAll()` will be called. |
+| `[disableCloseOnAction]` | `boolean`                | `false`        | no       | When set to `true`* the method `FhiModalComponent.modal.dismissAll()` will NOT be called when `FhiModalComponent.onModalAction()` is called. |
+| `[scrollable]`           | `boolean`                | `true`         | no       | Same as NgbModal |
+| `size`                   | `string`                 | `md`           | no       | Same as NgbModal |
+
+*\* To be able to trigger change detection more than once, parent component is responsible for toggeling the value.*
 
 ### Output
 
@@ -27,4 +39,20 @@
 | ---------- | --------- | ------- | -------- | ----------- |
 | `name`     | `string`  | -       | yes      | Name of the button calling the action. |
 | `disabled` | `boolean` | -       | no       | Whether the button is disabled or not. |
-| `primary`  | `boolean` | -       | no       | Whether the button calls the primary action or not. |
+| `primary`*  | `boolean` | -       | no       | Whether the button calls the primary action or not. |
+
+\* **NB!** Property `primary` will be deprecated in v6.0.0 of [@folkehelseinstituttet/angular-components](https://www.npmjs.com/package/@folkehelseinstituttet/angular-components).
+
+## How To
+
+Code demonstrating the use cases below is located [here](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/tree/dev/src/app/views/shared/dynamic-library-examples/example-components/modals) (see example 5).
+
+### Keep modal open while waiting for server
+
+If the modal should be kept open while waiting for a server response, the input `disableCloseOnAction` must be set to `true`. The parent component must then take responsebility for closing the modal. This is done by setting input `closeModalFromParent` to `true`.
+
+**NB!** To trigger change detection every time input `closeModalFromParent` is set to `true`, it must be set to `false` in between, so the parent component will have to do some state management. The same logic applies to inputs `openModalFromParent` btw.
+
+### Destroy services or reset forms when closing modal
+
+If the template content inside `<ng-container fhi-modal.body></ng-container>` contains a child component, a form or some service logic, and it's necessary to destroy component, reset form or do some other clean up when the modal is closed, this is the responsibility of the parent component. In example 5 this is demonstrated by a form reset (see method `onDismissModalExample5()`).
diff --git a/projects/fhi-angular-components/src/lib/fhi-modal/fhi-modal.component.ts b/projects/fhi-angular-components/src/lib/fhi-modal/fhi-modal.component.ts
@@ -29,6 +29,8 @@ export class FhiModalComponent implements OnChanges {
   @Input() modalTitle!: string;
   @Input() openModalButtonClass = 'fhi-btn-link';
   @Input() openModalFromParent = false;
+  @Input() closeModalFromParent = false;
+  @Input() disableCloseOnAction = false;
   @Input() scrollable = true;
   @Input() size = 'md';
 
@@ -50,6 +52,9 @@ export class FhiModalComponent implements OnChanges {
     if (changes['openModalFromParent']?.currentValue === true) {
       this.modalOpen(this.modalContentRef);
     }
+    if (changes['closeModalFromParent']?.currentValue === true) {
+      this.modal.dismissAll();
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -59,7 +64,9 @@ export class FhiModalComponent implements OnChanges {
 
   onModalAction(button: FhiModalActionButton) {
     this.modalAction.emit(button.name);
-    this.modal.dismissAll();
+    if (!this.disableCloseOnAction) {
+      this.modal.dismissAll();
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/...i-angular-components/src/lib/fhi-tree-view-selection/fhi-tree-view-selection.component.ts b/...i-angular-components/src/lib/fhi-tree-view-selection/fhi-tree-view-selection.component.ts
@@ -233,6 +233,8 @@ export class FhiTreeViewSelectionComponent implements OnInit, OnChanges {
     items.forEach((item) => {
       if (item.id === undefined) {
         item.id = this.instanceID + '-' + itemID++;
+      } else {
+        item.id = this.instanceID + '-' + item.id;
       }
       if (item.children && item.children.length > 0) {
         this.createIds(item.children, itemID * 10);

diff --git a/projects/fhi-angular-highcharts/CHANGELOG.md b/projects/fhi-angular-highcharts/CHANGELOG.md
@@ -1,20 +1,42 @@
-# Unreleased
+# 5.1.0
 
-> Sep 24, 2024
+> Oct 17, 2024
 
+* :tada: **Enhancement** Changes from @folkehelseinstituttet/angular-highcharts/v/4.6.0 [(#729)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/729)
+* :tada: **Enhancement** Changes from @folkehelseinstituttet/angular-highcharts/v/4.5.0 [(#726)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/726)
+* :tada: **Enhancement** Add description also in full screen view [(#710)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/710)
+* :bug: **Bugfix** Changes from @folkehelseinstituttet/angular-highcharts/v/4.4.1 [(#704)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/704)
 * :bug: **Bugfix** Remove deprecated property DiagramTypeIds.map which should have been removed in [(#693)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/693)
 
+## 4.6.0
+
+> Oct 16, 2024
+
+* :tada: **Enhancement** Add zIndex to series if diagram type is `columnAndLine`, add a better test for disabling diagram type `columnAndLine`, and add better documentation for using two units [(#727)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/727)
+
+## 4.5.0
+
+> Oct 14, 2024
+
+* :tada: **Enhancement** Add a custom version of the diagram type class and expose it in the public API Surface [(#720)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/720)
+
+## 4.4.1
+
+> Sep 24, 2024
+
+* :bug: **Bugfix** Fix so that table don't break if flagged data in the data set. [(#702)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/702)
+
 ## 5.0.2
 
 > Sep 20, 2024
 
-* :bug: **Bugfix** Less specific version for @angular
+* :bug: **Bugfix** Less specific version for @angular [(#697)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/697)
 
 ## 5.0.1
 
 > Sep 20, 2024
 
-* :bug: **Bugfix** Bump peerDependency @folkehelseinstituttet/angular-components to v5
+* :bug: **Bugfix** Bump peerDependency @folkehelseinstituttet/angular-components to v5 [(#695)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/695)
 
 ## 5.0.0
 

diff --git a/projects/fhi-angular-highcharts/README.md b/projects/fhi-angular-highcharts/README.md
@@ -12,6 +12,7 @@ _An opinionated wrapper to the official minimal [Highcharts wrapper for Angular]
     - [Inputs](#inputs)
     - [Outputs](#outputs)
     - [Interface FhiDiagramOptions](#interface-fhidiagramoptions)
+      - [Using two units](#using-two-units)
     - [Interface FhiDiagramControls](#interface-fhidiagramcontrols)
     - [Interface FhiDiagramFooter](#interface-fhidiagramfooter)
     - [Interface FhiDiagramSerie](#interface-fhidiagramserie)
@@ -94,7 +95,7 @@ From one of the comments:
 
 _Highcharts uses the UMD pattern which includes AMD, and it is probably detected by angular. On the other hand, I don't think that using an ES6 module pattern will change anything in the performance matters, you would have to import the entire highcharts core anyway, so technically it will be the same package - I would suggest ignoring the warning by adding Highcharts to the allowedCommonJsDependencies property in the angular.json file._
 
-This is where `allowedCommonJsDependencies` i located in `angular.json`
+This is where `allowedCommonJsDependencies` is located in `angular.json`
 
 ```js
 ...
@@ -132,7 +133,19 @@ This is where `allowedCommonJsDependencies` i located in `angular.json`
 | `[series]`          | `FhiDiagramSerie[]`  | -         | yes      | The data used to render a diagram. See [FhiDiagramSerie](#interface-fhidiagramserie) for details. |
 | `tableOrientation`  | `string`             | -         | no       | Transpose table by setting preferd orientation. Values defined by enum `FhiTableOrientations` |
 | `title`             | `string`             | -         | yes      | The title above the diagram. |
-| `units`             | `FhiDiagramUnit[]`   | -         | no       | Decimal count, and metadata for y-axis and tooltip. See [FhiDiagramUnit](#interface-fhidiagramunit) for details. |
+| `units`             | `FhiDiagramUnit[]`   | -         | no       | Decimal count, and metadata for y-axis and tooltip. See [FhiDiagramUnit](#interface-fhidiagramunit) for details. Currently only diagram type `columnAndLine` supports two units, all other diagram types supports max 1 unit. See below this table for more info about using two units. |
+
+#### Using two units
+
+Only diagram type `columnAndLine` supports two units, and to make it work
+
+- both units must have an id (see [FhiDiagramUnit](#interface-fhidiagramunit) for more info about unit id)
+- at least two series must have `unitId` (with two unique values), and those ids must be present in the units array
+
+Also nice to know
+
+- the first "unit" in "units" will always represent the left y-axis
+- and series associated with the first "unit" in "units" will always become columns
 
 ### Interface FhiDiagramControls
 

diff --git a/projects/fhi-angular-highcharts/package.json b/projects/fhi-angular-highcharts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@folkehelseinstituttet/angular-highcharts",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "publishConfig": {
     "tag": "latest"
   },

diff --git a/projects/fhi-angular-highcharts/src/lib/constants-and-enums/fhi-diagram-types.ts b/projects/fhi-angular-highcharts/src/lib/constants-and-enums/fhi-diagram-types.ts
@@ -128,3 +128,51 @@ export const AllDiagramTypes = [
 
 export const ChartTypes = [line, column, bar, columnStacked, barStacked, pie, columnAndLine];
 export const MapTypes = [mapFylker, mapFylker2019, mapFylker2023];
+
+// For the public API Surface
+export class FhiDiagramTypes {
+  static bar = {
+    id: bar.id,
+    name: bar.name,
+  };
+  static barStacked = {
+    id: barStacked.id,
+    name: barStacked.name,
+  };
+  static column = {
+    id: column.id,
+    name: column.name,
+  };
+  static columnAndLine = {
+    id: columnAndLine.id,
+    name: columnAndLine.name,
+  };
+  static columnStacked = {
+    id: columnStacked.id,
+    name: columnStacked.name,
+  };
+  static line = {
+    id: line.id,
+    name: line.name,
+  };
+  static mapFylker = {
+    id: mapFylker.id,
+    name: mapFylker.name,
+  };
+  static mapFylker2019 = {
+    id: mapFylker2019.id,
+    name: mapFylker2019.name,
+  };
+  static mapFylker2023 = {
+    id: mapFylker2023.id,
+    name: mapFylker2023.name,
+  };
+  static pie = {
+    id: pie.id,
+    name: pie.name,
+  };
+  static table = {
+    id: table.id,
+    name: table.name,
+  };
+}
diff --git a/projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.html b/projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.html
@@ -154,7 +154,7 @@ <h1 class="h3 mb-3">{{ diagramOptions.title }}</h1>
               {{ tableCell.name }}
             </th>
             <td class="text-end" *ngIf="!tableCell.isHeading">
-              <ng-container *ngIf="tableCellDataOK(tableCell.data); else tableCellDataIsString">
+              <ng-container *ngIf="isNumber(tableCell.data); else tableCellDataIsString">
                 {{ tableCell.data | number: '1.' + tableCell.decimals + '-' + tableCell.decimals }}
               </ng-container>
               <ng-template #tableCellDataIsString>

diff --git a/projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.ts b/projects/fhi-angular-highcharts/src/lib/fhi-angular-highcharts.component.ts
@@ -137,11 +137,8 @@ export class FhiAngularHighchartsComponent implements OnChanges {
     this.diagramTypeNavigation.emit(DiagramTypeIds.table as FhiDiagramTypeIds);
   }
 
-  tableCellDataOK(data: number | string): boolean {
-    if (typeof data === 'number') {
-      return true;
-    }
-    return false;
+  isNumber(data: number | string): boolean {
+    return typeof data === 'number';
   }
 
   getFlaggedDataPoints(): Array<string> {

diff --git a/projects/fhi-angular-highcharts/src/lib/services/diagram-type-group.service.ts b/projects/fhi-angular-highcharts/src/lib/services/diagram-type-group.service.ts
@@ -24,6 +24,7 @@ export class DiagramTypeGroupService {
     flaggedData: 'series.length > 1 && flaggedSeries?.length !== 0',
     moreThanOneSeries: 'series.length > 1',
     notTwoUnits: 'diagramOptions.units?.length !== 2',
+    notMinTwoUnitsInSeries: 'this.uniqueUnitIdCountInSeries() < 2',
     notGeo: 'series.length === 1 && isNotGeo(this.series[0])',
     noSeriesOrNoData: 'this.series.length === 0 || this.series[0].data.length === 0',
     allDataInOneOrMoreSeriesAreFlagged: 'allDataInOneOrMoreSeriesAreFlagged',
@@ -234,10 +235,20 @@ export class DiagramTypeGroupService {
       this.diagramTypeDisabledWarnings.columnAndLine =
         this.diagramTypeDisabledWarningsText.notTwoUnits;
       return true;
+    } else if (this.uniqueUnitIdCountInSeries() < 2) {
+      this.diagramTypeDisabledWarnings.columnAndLine =
+        this.diagramTypeDisabledWarningsText.notMinTwoUnitsInSeries;
+      return true;
     }
     return false;
   }
 
+  private uniqueUnitIdCountInSeries() {
+    const uniqueIds = new Set<string | number>();
+    this.series.filter((serie) => serie.unitId).forEach((serie) => uniqueIds.add(serie.unitId));
+    return uniqueIds.size;
+  }
+
   private disableColumnStacked(): boolean {
     if (this.disableBar()) {
       this.diagramTypeDisabledWarnings.columnStacked =

diff --git a/projects/fhi-angular-highcharts/src/lib/services/options.service.ts b/projects/fhi-angular-highcharts/src/lib/services/options.service.ts
@@ -235,13 +235,15 @@ export class OptionsService {
           tooltip: this.getTooltip({}, units[0]),
           yAxis: 0,
           type: 'column',
+          zIndex: 0,
         } as SeriesOptionsType;
       } else if (units[1].id === serie.unitId) {
         options.series[i] = {
           ...options.series[i],
           tooltip: this.getTooltip({}, units[1]),
           yAxis: 1,
           type: 'line',
+          zIndex: 1,
         } as SeriesOptionsType;
       }
     });

diff --git a/projects/fhi-angular-highcharts/src/lib/services/table.service.ts b/projects/fhi-angular-highcharts/src/lib/services/table.service.ts
@@ -73,10 +73,11 @@ export class TableService {
           };
         } else {
           // Table row data
-          const decimals = this.decimalsCount(series[j - 1].data[i].y as number);
+          const data = series[j - 1].data[i].y;
+          const decimals = this.decimalCount(data);
           tbodyRows[i][j] = {
             isHeading: false,
-            data: series[j - 1].data[i].y,
+            data: data,
             decimals:
               decimals < metadataForSeries[j - 1].decimals
                 ? decimals
@@ -141,10 +142,11 @@ export class TableService {
           };
         } else {
           // Table row data
-          const decimals = this.decimalsCount(series[i].data[j - dimentionsCount].y as number);
+          const data = series[i].data[j - dimentionsCount].y;
+          const decimals = this.decimalCount(data);
           tbodyRows[i][j] = {
             isHeading: false,
-            data: series[i].data[j - dimentionsCount].y,
+            data: data,
             decimals:
               decimals < metadataForSeries[i].decimals ? decimals : metadataForSeries[i].decimals,
           };
@@ -208,7 +210,8 @@ export class TableService {
     return counts;
   }
 
-  private decimalsCount(value: number) {
+  private decimalCount(value: number | string): number {
+    if (typeof value !== 'number') return 0;
     if (Math.floor(value) === value) return 0;
     return value.toString().split('.')[1].length || 0;
   }

diff --git a/projects/fhi-angular-highcharts/src/public-api.ts b/projects/fhi-angular-highcharts/src/public-api.ts
@@ -9,3 +9,5 @@ export * from './lib/models/fhi-diagram-flag.model';
 export * from './lib/models/fhi-diagram-options.model';
 export * from './lib/models/fhi-diagram-serie.model';
 export * from './lib/models/fhi-diagram-serie-data.model';
+
+export { FhiDiagramTypes } from './lib/constants-and-enums/fhi-diagram-types';
diff --git a/src/MOCK_DB_DATA/library-items/modals/modal.ts b/src/MOCK_DB_DATA/library-items/modals/modal.ts
@@ -71,6 +71,10 @@ function getCodeHtml(): string | null {
 <fhi-modal [openModalFromParent]="openModal" (dismissModal)="onDismissModal()">
   <ng-container fhi-modal.body><p>Modalvindu innhold.</p></ng-container>
 </fhi-modal>
+
+<!-- Eks. 5
+  For å se koden til skjemaeksemplet, gå til demokoden som det lenkes til under "Nyttige lenker" lenger opp på siden.</p>
+-->
 `;
 }
+11 −4		CHANGELOG.md
+2 −2		package-lock.json
+5 −1		package.json
+1 −0		src/fhi/blocks/buttons/_fhi-btn-icon.block.scss