Merge branch 'dev' into deploy/documentation-2025-01-23

* dev: (32 commits) Release/fhi-angular-highcharts/5.3.0 (#796) Release/fhi-angular-components/5.3.0 (#795) Bugfix/tree view selection immutable ids (#778) Enhancement/mark required inputs (#784) Internal/update landing page (#787) Enhancement/highcharts diagram menu styling (#781) Enhancement/highcharts always show flags (#780) Enhancement/highcharts line design (#779) Enhancement/ignore unknown diagram types (#776) Update highcharts doc (#775) Enhancement/highcharts to many zeros in tooltip (#773) Enhancement/tree view selection search (#769) FhiAngularHighcharts: Use cloneDeep() to make diagramOptions immutable (#765) Update qualitative series in _all.scss (#771) Enhancement/highcharts category axis title (#763) Release/fhi-angular-highcharts/5.2.0 (#764) Enhancement/highcharts disable diagramtypes cleanup (#761) Update CHANGELOG Release/fhi-angular-components/5.2.0 (#757) Make FhiMultiselectComponent standalone (#755) ...
folkehelseinstituttet · Jan 23, 2025 · 63270fd · 63270fd
2 parents d43a720 + fef80bc
commit 63270fd
Show file tree

Hide file tree

Showing 49 changed files with 1,890 additions and 2,082 deletions.
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,21 @@
-# 5.1.0
+# 5.3.0
+
+> Jan 22, 2025
+
+* :bug: **Bugfix** Make selected value visible before ng-select is touched (in `FhiAutosuggestComponent`) [(#762)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/762)
+* :bug: **Bugfix** In `FhiTreeViewSelectionComponent`, add property internal, and make sure property `FhiTreeViewSelectionItem.id` set by consumer is treated as immutable [(#778)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/778)
+* :tada: **Enhancement** Start search while typing, and at first character, in `FhiTreeViewSelectionComponent` [(#769)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/769)
+* :tada: **Enhancement** Mark inputs that are required, and remove some redundant initializations [(#784)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/784)
+
+## 5.2.0
+
+> Nov 25, 2024
+
+* :tada: **Enhancement** Make `FhiMultiselectComponent` standalone [(#755)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/755)
+* :tada: **Enhancement** Make `FhiAutosuggestComponent` standalone [(#751)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/751)
+* :tada: **Enhancement** Make `FhiTreeViewNavigationComponent` standalone [(#747)](https://github.com/folkehelseinstituttet/Fhi.Frontend.Demo/pull/747)
+
+## 5.1.0
 
 > Oct 17, 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.1.0",
+  "version": "5.3.0",
   "publishConfig": {
     "tag": "latest"
   },

diff --git a/projects/fhi-angular-components/src/lib/fhi-angular-components.module.ts b/projects/fhi-angular-components/src/lib/fhi-angular-components.module.ts
@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 
-import { FhiAutosuggestModule } from './fhi-autosuggest/fhi-autosuggest.module';
-import { FhiMultiselectModule } from './fhi-multiselect/fhi-multiselect.module';
+import { FhiAutosuggestComponent } from './fhi-autosuggest/fhi-autosuggest.component';
+import { FhiMultiselectComponent } from './fhi-multiselect/fhi-multiselect.component';
 import { FhiTableModule } from './fhi-table/fhi-table.module';
-import { FhiTreeViewNavigationModule } from './fhi-tree-view-navigation/fhi-tree-view-navigation.module';
 
+import { FhiTreeViewNavigationComponent } from './fhi-tree-view-navigation/fhi-tree-view-navigation.component';
 import { FhiTreeViewSelectionComponent } from './fhi-tree-view-selection/fhi-tree-view-selection.component';
 import { FhiTreeViewRadioComponent } from './fhi-tree-view-selection/fhi-tree-view-radio/fhi-tree-view-radio.component';
 import { FhiTreeViewCheckboxComponent } from './fhi-tree-view-selection/fhi-tree-view-checkbox/fhi-tree-view-checkbox.component';
@@ -22,11 +22,11 @@ import { FhiModalComponent } from './fhi-modal/fhi-modal.component';
 import { FhiPopoverMenuComponent } from './fhi-popover-menu/fhi-popover-menu.component';
 
 const FHI_ANGULAR_MODULES_AND_COMPONENTS = [
-  FhiAutosuggestModule,
-  FhiMultiselectModule,
+  FhiAutosuggestComponent,
+  FhiMultiselectComponent,
   FhiTableModule,
-  FhiTreeViewNavigationModule,
 
+  FhiTreeViewNavigationComponent,
   FhiTreeViewSelectionComponent,
   FhiTreeViewCheckboxComponent,
   FhiTreeViewRadioComponent,

diff --git a/projects/fhi-angular-components/src/lib/fhi-autosuggest/README.md b/projects/fhi-angular-components/src/lib/fhi-autosuggest/README.md
@@ -4,10 +4,10 @@
 
 | Input              | Type                        | Default | Required | Description |
 | ------------------ | --------------------------- | ------- | -------- | ----------- |
-| `[items]`          | `Array<FhiAutosuggestItem>` | `[]`    | yes      | Items array (same as in ng-select except for item type `FhiAutosuggestItem`). |
+| `[items]`          | `Array<FhiAutosuggestItem>` | -       | yes      | Items array (same as in ng-select except for item type `FhiAutosuggestItem`). |
 | `labelForId`       | `string`                    | -       | no       | Id to associate control with label (same as in ng-select). |
 | `placeholder`      | `string`                    | -       | no       | Placeholder text (same as in ng-select). |
 | `description`      | `string`                    | -       | no       | Description below the label (custom for FHI Autosuggest). |
-| `label`            | `string`                    | `Label` | yes      | Label above the ng-select field (custom for FHI Autosuggest). |
+| `label`            | `string`                    | -       | yes      | Label above the ng-select field (custom for FHI Autosuggest). |
 | `notFoundText`     | `string`                    | `Ingen resultater funnet` | no       | Set custom text when filter returns empty result (same as in ng-select). |
-| `[(selectedItem)]`   | `number`                    | `null`  | yes      | A two way binding to access ng-select's `ngModel`. The $event value returned is always item.id |
+| `[(selectedItem)]` | `number`                    | -       | yes      | A two way binding to access ng-select's `ngModel`. The $event value returned is always item.id |
diff --git a/projects/fhi-angular-components/src/lib/fhi-autosuggest/fhi-autosuggest.component.ts b/projects/fhi-angular-components/src/lib/fhi-autosuggest/fhi-autosuggest.component.ts
@@ -1,19 +1,24 @@
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 import { FhiAutosuggestItem } from './fhi-autosuggest.model';
 
 @Component({
   selector: 'fhi-autosuggest',
+  imports: [CommonModule, NgSelectModule, FormsModule],
+  standalone: true,
   templateUrl: './fhi-autosuggest.component.html',
   encapsulation: ViewEncapsulation.None,
 })
 export class FhiAutosuggestComponent {
-  @Input() items: Array<FhiAutosuggestItem> = [];
-  @Input() labelForId: string = undefined;
-  @Input() placeholder = '';
-  @Input() description: string = undefined;
-  @Input() label = 'Label';
-  @Input() selectedItem: number = null;
+  @Input({ required: true }) items!: Array<FhiAutosuggestItem>;
+  @Input() labelForId: string | undefined;
+  @Input() placeholder: string | undefined;
+  @Input() description: string | undefined;
+  @Input({ required: true }) label!: string;
+  @Input({ required: true }) selectedItem!: number;
   @Input() notFoundText = 'Ingen elementer funnet';
 
   @Output() selectedItemChange = new EventEmitter<number>();

diff --git a/projects/fhi-angular-components/src/lib/fhi-autosuggest/fhi-autosuggest.module.ts b/projects/fhi-angular-components/src/lib/fhi-autosuggest/fhi-autosuggest.module.ts
diff --git a/projects/fhi-angular-components/src/lib/fhi-multiselect/README.md b/projects/fhi-angular-components/src/lib/fhi-multiselect/README.md
@@ -4,11 +4,11 @@
 
 | Input               | Type                        | Default   | Required | Description |
 | ------------------- | --------------------------- | -------   | -------- | ----------- |
-| `[items]`           | `Array<FhiMultiselectItem>` | `[]`      | yes      | Items array (same as in ng-select except for item type `FhiMultiselectItem`). |
+| `[items]`           | `Array<FhiMultiselectItem>` | -         | yes      | Items array (same as in ng-select except for item type `FhiMultiselectItem`). |
 | `labelForId`        | `string`                    | -         | no       | Id to associate control with label (same as in ng-select). |
 | `placeholder`       | `string`                    | -         | no       | Placeholder text (same as in ng-select). |
 | `description`       | `string`                    | -         | no       | Description below the label (custom for FHI Multiselect). |
-| `label`             | `string`                    | `Label`   | yes      | Label above the ng-select field (custom for FHI Multiselect). |
+| `label`             | `string`                    | -         | yes      | Label above the ng-select field (custom for FHI Multiselect). |
 | `notFoundText`      | `string`                    | `Ingen resultater funnet` | no       | Set custom text when filter returns empty result (same as in ng-select). |
-| `disableTags`       | `boolean`                   | undefined | no       | Disable tags list. |
-| `[(selectedItems)]` | `Array<any>`                | `[]`      | yes      | A two way binding to access ng-select's `ngModel`. |
+| `disableTags`       | `boolean`                   | -         | no       | Disable tags list. |
+| `[(selectedItems)]` | `Array<any>`                | -         | yes      | A two way binding to access ng-select's `ngModel`. |
diff --git a/projects/fhi-angular-components/src/lib/fhi-multiselect/fhi-multiselect.component.html b/projects/fhi-angular-components/src/lib/fhi-multiselect/fhi-multiselect.component.html
@@ -37,7 +37,7 @@
       {{ getSelectedName(selected) }}
       <i class="icon-x"></i>
     </button>
-    <button type="button" class="btn fhi-btn-link" *ngIf="selectedItems.length > 1" (click)="unselectAll()">
+    <button type="button" class="btn fhi-btn-link" *ngIf="selectedItems?.length > 1" (click)="unselectAll()">
       Fjern valgte
     </button>
   </div>

diff --git a/projects/fhi-angular-components/src/lib/fhi-multiselect/fhi-multiselect.component.ts b/projects/fhi-angular-components/src/lib/fhi-multiselect/fhi-multiselect.component.ts
@@ -1,21 +1,26 @@
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 import { FhiMultiselectItem } from './fhi-multiselect.model';
 
 @Component({
   selector: 'fhi-multiselect',
+  imports: [CommonModule, FormsModule, NgSelectModule],
+  standalone: true,
   templateUrl: './fhi-multiselect.component.html',
   encapsulation: ViewEncapsulation.None,
 })
 export class FhiMultiselectComponent {
-  @Input() items: Array<FhiMultiselectItem> = [];
-  @Input() labelForId: string = undefined;
-  @Input() placeholder = '';
-  @Input() disableTags: boolean;
-  @Input() description: string = undefined;
-  @Input() label = 'Label';
+  @Input({ required: true }) items!: Array<FhiMultiselectItem>;
+  @Input() labelForId: string | undefined;
+  @Input() placeholder: string | undefined;
+  @Input() disableTags: boolean | undefined;
+  @Input() description: string | undefined;
+  @Input({ required: true }) label!: string;
   @Input() notFoundText = 'Ingen elementer funnet';
-  @Input() selectedItems: Array<any> = [];
+  @Input({ required: true }) selectedItems!: Array<any>;
 
   @Output() selectedItemsChange = new EventEmitter<Array<any>>();
 
@@ -33,7 +38,7 @@ export class FhiMultiselectComponent {
   }
 
   getSelectedName(selected: string) {
-    return this.items.find((x) => x.id === selected).name;
+    return this.items?.find((x) => x.id === selected)?.name;
   }
 
   onChange() {

diff --git a/projects/fhi-angular-components/src/lib/fhi-multiselect/fhi-multiselect.module.ts b/projects/fhi-angular-components/src/lib/fhi-multiselect/fhi-multiselect.module.ts
diff --git a/projects/fhi-angular-components/src/lib/fhi-popover-menu/fhi-popover-menu.component.ts b/projects/fhi-angular-components/src/lib/fhi-popover-menu/fhi-popover-menu.component.ts
@@ -14,7 +14,7 @@ import { FhiPopoverItem } from './fhi-popover-menu.model';
   templateUrl: './fhi-popover-menu.component.html',
 })
 export class FhiPopoverMenuComponent {
-  @Input() items: Array<FhiPopoverItem>;
+  @Input({ required: true }) items!: Array<FhiPopoverItem>;
   @Input() triggerIcon = 'three-dots-vertical';
   @Output() actionEvent = new EventEmitter<string>();
 

diff --git a/...ngular-components/src/lib/fhi-time/fhi-year-month-range/fhi-year-month-range.component.ts b/...ngular-components/src/lib/fhi-time/fhi-year-month-range/fhi-year-month-range.component.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { getYear } from 'date-fns';
 
-import { FhiAutosuggestModule } from '../../fhi-autosuggest/fhi-autosuggest.module';
+import { FhiAutosuggestComponent } from '../../fhi-autosuggest/fhi-autosuggest.component';
 import { FhiAutosuggestItem } from '../../fhi-autosuggest/fhi-autosuggest.model';
 import { FhiYearsComponent } from '../fhi-years/fhi-years.component';
 import { RangeContext } from '../shared/range-context.enum';
@@ -15,7 +15,7 @@ import { LocaleValues } from '../shared/i18n/locale-values.model';
 @Component({
   selector: 'fhi-year-month-range',
   standalone: true,
-  imports: [CommonModule, FhiAutosuggestModule, FhiYearsComponent],
+  imports: [CommonModule, FhiAutosuggestComponent, FhiYearsComponent],
   templateUrl: './fhi-year-month-range.component.html',
   providers: [I18nService],
 })

diff --git a/projects/fhi-angular-components/src/lib/fhi-time/fhi-year-month/fhi-year-month.component.ts b/projects/fhi-angular-components/src/lib/fhi-time/fhi-year-month/fhi-year-month.component.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { getYear } from 'date-fns';
 
-import { FhiAutosuggestModule } from '../../fhi-autosuggest/fhi-autosuggest.module';
+import { FhiAutosuggestComponent } from '../../fhi-autosuggest/fhi-autosuggest.component';
 import { FhiAutosuggestItem } from '../../fhi-autosuggest/fhi-autosuggest.model';
 import { FhiYearsComponent } from '../fhi-years/fhi-years.component';
 import { FhiMonth } from '../shared/models/fhi-month.model';
@@ -13,7 +13,7 @@ import { LocaleValues } from '../shared/i18n/locale-values.model';
 @Component({
   selector: 'fhi-year-month',
   standalone: true,
-  imports: [CommonModule, FhiAutosuggestModule, FhiYearsComponent],
+  imports: [CommonModule, FhiAutosuggestComponent, FhiYearsComponent],
   templateUrl: './fhi-year-month.component.html',
   providers: [I18nService],
 })

diff --git a/projects/fhi-angular-components/src/lib/fhi-time/fhi-years/fhi-years.component.ts b/projects/fhi-angular-components/src/lib/fhi-time/fhi-years/fhi-years.component.ts
@@ -9,7 +9,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 
-import { FhiAutosuggestModule } from '../../fhi-autosuggest/fhi-autosuggest.module';
+import { FhiAutosuggestComponent } from '../../fhi-autosuggest/fhi-autosuggest.component';
 import { FhiAutosuggestItem } from '../../fhi-autosuggest/fhi-autosuggest.model';
 
 import { TimeConstants } from '../shared/time.constants';
@@ -20,7 +20,7 @@ import { FhiTimeUtilityService } from '../shared/fhi-time-utility.service';
   templateUrl: './fhi-years.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [FhiAutosuggestModule],
+  imports: [FhiAutosuggestComponent],
   providers: [FhiTimeUtilityService],
 })
 export class FhiYearsComponent implements OnInit, OnChanges {

diff --git a/...angular-components/src/lib/fhi-tree-view-navigation/fhi-tree-view-navigation.component.ts b/...angular-components/src/lib/fhi-tree-view-navigation/fhi-tree-view-navigation.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -6,10 +7,13 @@ import {
   SimpleChanges,
   ViewEncapsulation,
 } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { FhiTreeViewNavigationItem as Item } from './fhi-tree-view-navigation-item.model';
 
 @Component({
+  standalone: true,
+  imports: [CommonModule, RouterModule],
   selector: 'fhi-tree-view-navigation',
   templateUrl: './fhi-tree-view-navigation.component.html',
   encapsulation: ViewEncapsulation.None,

diff --git a/...hi-angular-components/src/lib/fhi-tree-view-navigation/fhi-tree-view-navigation.module.ts b/...hi-angular-components/src/lib/fhi-tree-view-navigation/fhi-tree-view-navigation.module.ts
diff --git a/projects/fhi-angular-components/src/lib/fhi-tree-view-selection/README.md b/projects/fhi-angular-components/src/lib/fhi-tree-view-selection/README.md
@@ -4,14 +4,15 @@
 
 ### Input
 
-| Input             | Type                              | Default          | Required | Description                                                                   |
-|-------------------|-----------------------------------|------------------|----------|-------------------------------------------------------------------------------|
+| Input             | Type                              | Default          | Required | Description |
+|-------------------|-----------------------------------|------------------|----------|-------------|
 | `enableCheckAll`  | `boolean`                         | false            | no       | Trigger to select/deselect all siblings, only if `singleSelection === false`. |
-| `enableFilter`    | `boolean`                         | false            | no       | Enable a text input for filtering the selection tree.                         |
-| `filterLabel`     | `string`                          | `Filtrer listen` | no       | Enable a text input for filtering the selection tree.                         |
-| `items`           | `Array<FhiTreeViewSelectionItem>` | -                | yes      | Array of all items in selection tree.                                         |
-| `name`            | `string`                          | -                | no/yes   | Naming the radio button group. Required if `singleSelection === true`.        |
-| `singleSelection` | `boolean`                         | false            | no       | Radio buttons or checkboxes.                                                  |
+| `enableFilter`    | `boolean`                         | false            | no       | Enable a text input for filtering the selection tree. |
+| `filterLabel`     | `string`                          | -                | no       | Label for the checkbox tree filter. If `filterLabel` not set, label will be removed. |
+| `items`           | `Array<FhiTreeViewSelectionItem>` | -                | yes      | Array of all items in selection tree. |
+| `name`            | `string`                          | -                | no       | Naming the radio button group. |
+| `placeholder`     | `string`                          | `Søk`            | no       | Placeholder text for filter input. |
+| `singleSelection` | `boolean`                         | false            | no       | Radio buttons or checkboxes. |
 
 ### Output
 
@@ -24,7 +25,7 @@
 | Property                   | Type                         | Default | Required | Description |
 | -------------------------- | ---------------------------- | ------- | -------- | ----------- |
 | `children`                 | `FhiTreeViewSelectionItem[]` | -       | no       | Recursively add items to the tree. |
-| `id`                       | `number \| string`           | -       | no       | Custom id's. Id's are added automatically if not set in item. |
+| `id`                       | `number \| string`           | -       | no       | Optional item id, not used by the component (kept in the interface for backwards compatibility). |
 | `isChecked`                | `boolean`                    | -       | no       | Whether the item is checked or not. |
 | `isExpanded`               | `boolean`                    | -       | no       | Whether the item is expanded or not. |
 | `hasCheckedDescendant`     | `boolean`                    | -       | no       | Whether the item has checked descendant or not. |

diff --git a/...lar-components/src/lib/fhi-tree-view-selection/fhi-tree-view-checkbox/README.md b/...lar-components/src/lib/fhi-tree-view-selection/fhi-tree-view-checkbox/README.md
@@ -8,7 +8,7 @@
 |------------------|-----------------------------------|------------------|----------|-----------------------------------------------------------------------|
 | `enableCheckAll` | `boolean`                         | false            | no       | Enable a button with text "Velg alle" above each level of checkboxes. |
 | `enableFilter`   | `boolean`                         | false            | no       | Enable a text input for filtering the checkbox tree.                  |
-| `filterLabel`    | `string`                          | `Filtrer listen` | no       | Label for the checkbox tree filter.                                   |
+| `filterLabel`    | `string`                          | -                | no       | Label for the checkbox tree filter. If `filterLabel` not set, label will be removed. |
 | `items`          | `Array<FhiTreeViewSelectionItem>` | -                | yes      | Array of all items in checkbox tree.                                  |
 
 ### Output

diff --git a/...rc/lib/fhi-tree-view-selection/fhi-tree-view-checkbox/fhi-tree-view-checkbox.component.ts b/...rc/lib/fhi-tree-view-selection/fhi-tree-view-checkbox/fhi-tree-view-checkbox.component.ts
@@ -12,8 +12,8 @@ import { FhiTreeViewSelectionItem as Item } from '../fhi-tree-view-selection-ite
 export class FhiTreeViewCheckboxComponent {
   @Input() enableCheckAll = false;
   @Input() enableFilter: boolean = false;
-  @Input() filterLabel: string = 'Filtrer listen';
-  @Input() items: Item[];
+  @Input() filterLabel!: string;
+  @Input({ required: true }) items!: Item[];
 
   @Output() itemsChange = new EventEmitter<Item[]>();