@hestia-earth/ui-components 0.35.4 → 0.35.6

package/fesm2022/hestia-earth-ui-components.mjs

@@ -3,7 +3,7 @@ import { Injectable, InjectionToken, inject, input, computed, HostBinding, Compo
 import { toSignal, toObservable, outputFromObservable, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgTemplateOutlet, NgClass, DecimalPipe, KeyValuePipe, DatePipe, DOCUMENT, NgStyle, UpperCasePipe, JsonPipe, AsyncPipe } from '@angular/common';
+import { NgTemplateOutlet, NgClass, DecimalPipe, KeyValuePipe, DatePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, AsyncPipe } from '@angular/common';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbActiveModal, NgbHighlight, NgbTooltip, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbModal, NgbTooltipModule, NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { catchError, map, debounceTime, distinctUntilChanged, tap, switchMap, mergeMap, shareReplay, delay, take, first, filter, startWith, skip, throttleTime, skipUntil, toArray, reduce, mergeAll, distinct, groupBy } from 'rxjs/operators';
@@ -488,13 +488,13 @@ class HESvgIconComponent {
         return `${this.size()}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: HESvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: HESvgIconComponent, isStandalone: true, selector: "he-svg-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-size": "size()", "style.width": "this._width", "style.height": "this._height" } }, ngImport: i0, template: "<svg [attr.animation]=\"animation()\">\n  <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]>svg{animation:spinner 2s linear infinite}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: HESvgIconComponent, isStandalone: true, selector: "he-svg-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-size": "size()", "style.width": "this._width", "style.height": "this._height" } }, ngImport: i0, template: "<svg [attr.animation]=\"animation()\">\n  <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]{animation:spinner 2s linear infinite}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: HESvgIconComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-svg-icon', imports: [], host: {
                         '[attr.icon-size]': 'size()'
-                    }, template: "<svg [attr.animation]=\"animation()\">\n  <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]>svg{animation:spinner 2s linear infinite}\n"] }]
+                    }, template: "<svg [attr.animation]=\"animation()\">\n  <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]{animation:spinner 2s linear infinite}\n"] }]
         }], propDecorators: { _width: [{
                 type: HostBinding,
                 args: ['style.width']
@@ -2326,11 +2326,11 @@ class ClipboardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ClipboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: ClipboardComponent, isStandalone: true, selector: "he-clipboard", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideText: { classPropertyName: "hideText", publicName: "hideText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clipboardClass: { classPropertyName: "clipboardClass", publicName: "clipboardClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:copy": "onCopy($event)" } }, viewQueries: [{ propertyName: "valueNode", first: true, predicate: ["valueNode"], descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<span #valueNode [class.is-hidden]=\"hideText()\">{{ value() }}</span>\n\n<span\n  [class]=\"clipboardClass()\"\n  pointer\n  (click)=\"!disabled() && onClick($event)\"\n  ngbTooltip=\"Copied!\"\n  triggers=\"manual\"\n  placement=\"bottom\"\n  container=\"body\"\n  #t=\"ngbTooltip\">\n  <he-svg-icon [name]=\"icon()\" [size]=\"size()\" />\n</span>\n", styles: [".is-small he-svg-icon{height:16px!important;width:auto!important}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: ClipboardComponent, isStandalone: true, selector: "he-clipboard", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideText: { classPropertyName: "hideText", publicName: "hideText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clipboardClass: { classPropertyName: "clipboardClass", publicName: "clipboardClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:copy": "onCopy($event)" } }, viewQueries: [{ propertyName: "valueNode", first: true, predicate: ["valueNode"], descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<span #valueNode [class.is-hidden]=\"hideText()\">{{ value() }}</span>\n\n<span\n  [class]=\"clipboardClass()\"\n  pointer\n  (click)=\"!disabled() && onClick($event)\"\n  ngbTooltip=\"Copied!\"\n  triggers=\"manual\"\n  placement=\"bottom\"\n  container=\"body\"\n  #t=\"ngbTooltip\">\n  <he-svg-icon [name]=\"icon()\" [size]=\"size()\" />\n</span>\n", styles: [".is-small he-svg-icon{height:16px!important;width:16px!important}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ClipboardComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-clipboard', imports: [NgbTooltip, HESvgIconComponent], template: "<span #valueNode [class.is-hidden]=\"hideText()\">{{ value() }}</span>\n\n<span\n  [class]=\"clipboardClass()\"\n  pointer\n  (click)=\"!disabled() && onClick($event)\"\n  ngbTooltip=\"Copied!\"\n  triggers=\"manual\"\n  placement=\"bottom\"\n  container=\"body\"\n  #t=\"ngbTooltip\">\n  <he-svg-icon [name]=\"icon()\" [size]=\"size()\" />\n</span>\n", styles: [".is-small he-svg-icon{height:16px!important;width:auto!important}\n"] }]
+            args: [{ selector: 'he-clipboard', imports: [NgbTooltip, HESvgIconComponent], template: "<span #valueNode [class.is-hidden]=\"hideText()\">{{ value() }}</span>\n\n<span\n  [class]=\"clipboardClass()\"\n  pointer\n  (click)=\"!disabled() && onClick($event)\"\n  ngbTooltip=\"Copied!\"\n  triggers=\"manual\"\n  placement=\"bottom\"\n  container=\"body\"\n  #t=\"ngbTooltip\">\n  <he-svg-icon [name]=\"icon()\" [size]=\"size()\" />\n</span>\n", styles: [".is-small he-svg-icon{height:16px!important;width:16px!important}\n"] }]
         }], propDecorators: { onCopy: [{
                 type: HostListener,
                 args: ['window:copy', ['$event']]
@@ -5849,15 +5849,11 @@ const updateGroupSelected = (group) => {
 };
 class NodeCsvSelectHeadersComponent {
     constructor() {
-        this.destroyRef = inject(DestroyRef);
         this.schemaService = inject(HeSchemaService);
         this.csv = input.required();
-        this.csv$ = toObservable(this.csv);
         this.keys = input([]);
-        this.keys$ = toObservable(this.keys);
         this.includeDefaultCSV = input(false);
         this.headersChanged = output();
-        this.loading = signal(true);
         this.termFields = termFields;
         this.selectedTermFields = signal(['@id']);
         this.showNonIncluded = signal(false);
@@ -5866,22 +5862,22 @@ class NodeCsvSelectHeadersComponent {
             .flatMap(({ headers }) => headers)
             .filter(({ selected, included }) => selected && (included || this.showNonIncluded()))
             .map(({ key }) => key));
-        this.schemas$ = this.schemaService.schemas$.pipe(takeUntilDestroyed(this.destroyRef));
-        this.csvHeaders = signal([]);
+        this.schemas = toSignal(this.schemaService.schemas$);
+        this.headersResource = rxResource({
+            request: () => ({ csv: this.csv() }),
+            loader: ({ request: { csv } }) => this.schemaService.parseHeaders$(csv)
+        });
+        this.loading = this.headersResource.isLoading;
+        this.csvHeaders = computed(() => this.headersResource.value() ?? []);
         this.headers = signal({});
         this.groups = computed(() => Object.values(this.headers()));
-        combineLatest([this.csv$, this.keys$, this.schemas$])
-            .pipe(filter(([csv, _keys, schemas]) => [!isUndefined(csv), !isUndefined(schemas)].every(Boolean)), tap(() => this.loading.set(true)), mergeMap(([csv, keys, schemas]) => forkJoin({
-            headers: this.schemaService.parseHeaders$(csv),
-            keys: of(keys),
-            schemas: of(schemas)
-        })), tap(() => this.loading.set(false)))
-            .subscribe(({ headers, keys, schemas }) => {
-            this.csvHeaders.set(headers);
-            const isIncluded = isCSVIncluded(schemas);
-            const isDefaultSelected = this.includeDefaultCSV() ? () => true : isDefaultCSVSelected(schemas);
-            const isSelected = (key) => (!keys.length || keys.some(v => key.startsWith(v))) && isDefaultSelected(key);
-            this.headers.set(headers.reduce((prev, headerKey) => {
+        effect(() => {
+            const isIncluded = isCSVIncluded(this.schemas());
+            const isSelected = this.includeDefaultCSV() ? () => true : isDefaultCSVSelected(this.schemas());
+            const csvHeaders = this.keys().length
+                ? this.csvHeaders().filter(v => v.split('.').length <= 1 || this.keys().some(k => v.startsWith(k)))
+                : this.csvHeaders();
+            this.headers.set(csvHeaders.reduce((prev, headerKey) => {
                 const groupKey = headerGroup(headerKey);
                 prev[groupKey] = prev[groupKey] || {
                     key: groupKey,
@@ -6081,11 +6077,11 @@ class NodeCsvExportConfirmComponent {
         this.activeModal?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeCsvExportConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeCsvExportConfirmComponent, isStandalone: true, selector: "he-node-csv-export-confirm", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, headerKeys: { classPropertyName: "headerKeys", publicName: "headerKeys", isSignal: true, isRequired: false, transformFunction: null }, extension: { classPropertyName: "extension", publicName: "extension", isSignal: true, isRequired: false, transformFunction: null }, isUpload: { classPropertyName: "isUpload", publicName: "isUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", filename: "filenameChange", headerKeys: "headerKeysChange", extension: "extensionChange", isUpload: "isUploadChange", closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      @if (isUpload()) {\n        <div class=\"notification is-info\" role=\"alert\">\n          <span>After Download, you can edit and</span>\n          <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n          <span>to submit your content on the HESTIA platform, and your draft will remain unchanged.</span>\n          <p>\n            <span>\n              Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and\n              selecting the exported file.\n            </span>\n          </p>\n        </div>\n      } @else if (includedNodes().length > 1) {\n        <p class=\"mb-2\">\n          <b>{{ includedNodes().length }}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes.set(!showIncludeNodes())\">\n            @if (showIncludeNodes()) {\n              Hide list\n            } @else {\n              Show list\n            }\n          </a>\n        </p>\n        @if (showIncludeNodes()) {\n          <he-data-table maxHeight=\"400\">\n            <table class=\"table is-fullwidth is-striped is-mb-0\">\n              <thead>\n                <tr>\n                  <th class=\"width-auto has-border-right\">\n                    <span>Type</span>\n                  </th>\n                  <th>\n                    <span>Name</span>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (node of includedNodes(); track node) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\">\n                      {{ node.node['@type'] }}\n                    </td>\n                    <td>\n                      <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                        <span>{{ node.node.name }}</span>\n                      </he-node-link>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n        }\n      }\n\n      <he-node-csv-select-headers\n        [class.is-hidden]=\"isUpload()\"\n        [csv]=\"csvData()\"\n        [keys]=\"headerKeys()\"\n        [includeDefaultCSV]=\"isUpload()\"\n        (headersChanged)=\"headers.set($event)\" />\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a\n        class=\"button is-primary\"\n        target=\"_blank\"\n        [attr.disabled]=\"csvContent() ? null : true\"\n        [href]=\"csvContent()\"\n        [attr.download]=\"csvContent() ? downloadFilename() : null\"\n        (click)=\"close()\">\n        <he-svg-icon name=\"download\" />\n        <span class=\"is-ml-2\">Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeCsvExportConfirmComponent, isStandalone: true, selector: "he-node-csv-export-confirm", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, headerKeys: { classPropertyName: "headerKeys", publicName: "headerKeys", isSignal: true, isRequired: false, transformFunction: null }, extension: { classPropertyName: "extension", publicName: "extension", isSignal: true, isRequired: false, transformFunction: null }, isUpload: { classPropertyName: "isUpload", publicName: "isUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", filename: "filenameChange", headerKeys: "headerKeysChange", extension: "extensionChange", isUpload: "isUploadChange", closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      @if (isUpload()) {\n        <div class=\"notification is-info\" role=\"alert\">\n          <span>After Download, you can edit and</span>\n          <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n          <span>to submit your content on the HESTIA platform, and your draft will remain unchanged.</span>\n          <p>\n            <span>\n              Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and\n              selecting the exported file.\n            </span>\n          </p>\n        </div>\n      } @else if (includedNodes().length > 1) {\n        <p class=\"mb-2\">\n          <b>{{ includedNodes().length }}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes.set(!showIncludeNodes())\">\n            @if (showIncludeNodes()) {\n              Hide list\n            } @else {\n              Show list\n            }\n          </a>\n        </p>\n        @if (showIncludeNodes()) {\n          <he-data-table maxHeight=\"400\">\n            <table class=\"table is-fullwidth is-striped is-mb-0\">\n              <thead>\n                <tr>\n                  <th class=\"width-auto has-border-right\">\n                    <span>Type</span>\n                  </th>\n                  <th>\n                    <span>Name</span>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (node of includedNodes(); track node) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\">\n                      {{ node.node['@type'] }}\n                    </td>\n                    <td>\n                      <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                        <span>{{ node.node.name }}</span>\n                      </he-node-link>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n        }\n      }\n\n      @if (!isUpload()) {\n        <he-node-csv-select-headers\n          [csv]=\"csvData()\"\n          [keys]=\"headerKeys()\"\n          [includeDefaultCSV]=\"isUpload()\"\n          (headersChanged)=\"headers.set($event)\" />\n      }\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a\n        class=\"button is-primary\"\n        target=\"_blank\"\n        [attr.disabled]=\"csvContent() ? null : true\"\n        [href]=\"csvContent()\"\n        [attr.download]=\"csvContent() ? downloadFilename() : null\"\n        (click)=\"close()\">\n        <he-svg-icon name=\"download\" />\n        <span class=\"is-ml-2\">Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeCsvExportConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-csv-export-confirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, DataTableComponent, NodeLinkComponent, NodeCsvSelectHeadersComponent, HESvgIconComponent], template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      @if (isUpload()) {\n        <div class=\"notification is-info\" role=\"alert\">\n          <span>After Download, you can edit and</span>\n          <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n          <span>to submit your content on the HESTIA platform, and your draft will remain unchanged.</span>\n          <p>\n            <span>\n              Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and\n              selecting the exported file.\n            </span>\n          </p>\n        </div>\n      } @else if (includedNodes().length > 1) {\n        <p class=\"mb-2\">\n          <b>{{ includedNodes().length }}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes.set(!showIncludeNodes())\">\n            @if (showIncludeNodes()) {\n              Hide list\n            } @else {\n              Show list\n            }\n          </a>\n        </p>\n        @if (showIncludeNodes()) {\n          <he-data-table maxHeight=\"400\">\n            <table class=\"table is-fullwidth is-striped is-mb-0\">\n              <thead>\n                <tr>\n                  <th class=\"width-auto has-border-right\">\n                    <span>Type</span>\n                  </th>\n                  <th>\n                    <span>Name</span>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (node of includedNodes(); track node) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\">\n                      {{ node.node['@type'] }}\n                    </td>\n                    <td>\n                      <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                        <span>{{ node.node.name }}</span>\n                      </he-node-link>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n        }\n      }\n\n      <he-node-csv-select-headers\n        [class.is-hidden]=\"isUpload()\"\n        [csv]=\"csvData()\"\n        [keys]=\"headerKeys()\"\n        [includeDefaultCSV]=\"isUpload()\"\n        (headersChanged)=\"headers.set($event)\" />\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a\n        class=\"button is-primary\"\n        target=\"_blank\"\n        [attr.disabled]=\"csvContent() ? null : true\"\n        [href]=\"csvContent()\"\n        [attr.download]=\"csvContent() ? downloadFilename() : null\"\n        (click)=\"close()\">\n        <he-svg-icon name=\"download\" />\n        <span class=\"is-ml-2\">Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'he-node-csv-export-confirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, DataTableComponent, NodeLinkComponent, NodeCsvSelectHeadersComponent, HESvgIconComponent], template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      @if (isUpload()) {\n        <div class=\"notification is-info\" role=\"alert\">\n          <span>After Download, you can edit and</span>\n          <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n          <span>to submit your content on the HESTIA platform, and your draft will remain unchanged.</span>\n          <p>\n            <span>\n              Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and\n              selecting the exported file.\n            </span>\n          </p>\n        </div>\n      } @else if (includedNodes().length > 1) {\n        <p class=\"mb-2\">\n          <b>{{ includedNodes().length }}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes.set(!showIncludeNodes())\">\n            @if (showIncludeNodes()) {\n              Hide list\n            } @else {\n              Show list\n            }\n          </a>\n        </p>\n        @if (showIncludeNodes()) {\n          <he-data-table maxHeight=\"400\">\n            <table class=\"table is-fullwidth is-striped is-mb-0\">\n              <thead>\n                <tr>\n                  <th class=\"width-auto has-border-right\">\n                    <span>Type</span>\n                  </th>\n                  <th>\n                    <span>Name</span>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (node of includedNodes(); track node) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\">\n                      {{ node.node['@type'] }}\n                    </td>\n                    <td>\n                      <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                        <span>{{ node.node.name }}</span>\n                      </he-node-link>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n        }\n      }\n\n      @if (!isUpload()) {\n        <he-node-csv-select-headers\n          [csv]=\"csvData()\"\n          [keys]=\"headerKeys()\"\n          [includeDefaultCSV]=\"isUpload()\"\n          (headersChanged)=\"headers.set($event)\" />\n      }\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a\n        class=\"button is-primary\"\n        target=\"_blank\"\n        [attr.disabled]=\"csvContent() ? null : true\"\n        [href]=\"csvContent()\"\n        [attr.download]=\"csvContent() ? downloadFilename() : null\"\n        (click)=\"close()\">\n        <he-svg-icon name=\"download\" />\n        <span class=\"is-ml-2\">Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n" }]
         }] });
 
 /* eslint-disable complexity */
@@ -7033,11 +7029,11 @@ class GuideOverlayComponent {
         this.localStorage.store(storageKey$1, JSON.stringify({ width, height }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GuideOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  ngbTooltip=\"Click to open the Guide\"\n  container=\"body\"\n  [disableTooltip]=\"responsiveService.isTouch()\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: ResizableModule }, { kind: "directive", type: i1$1.ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: i1$1.ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: ResizableModule }, { kind: "directive", type: i1$1.ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: i1$1.ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GuideOverlayComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-guide-overlay', imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgbTooltip, HESvgIconComponent, ResizableModule], template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  ngbTooltip=\"Click to open the Guide\"\n  container=\"body\"\n  [disableTooltip]=\"responsiveService.isTouch()\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"] }]
+            args: [{ selector: 'he-guide-overlay', imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgbTooltip, HESvgIconComponent, ResizableModule], template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hidden: [{
                 type: HostBinding,
                 args: ['class.is-none']
@@ -8110,7 +8106,6 @@ const iconSizes = [
     '16',
     '20',
     '24',
-    '32',
     '40',
     '48'
 ];
@@ -8216,7 +8211,6 @@ const icons = [
     'loading-bar',
     'loading-circle-filled',
     'loading-circle-filled-withshadow',
-    'loading-filled-withshadow',
     'log',
     'mail',
     'map',
@@ -8288,13 +8282,13 @@ const icons = [
     'zip'
 ];
 
-const svgIconPath = '/assets/svg-icons';
-const svgSpritePath = `${svgIconPath}/icons-sprite.svg`;
 const loadSvgSprite = () => {
     const http = inject(HttpClient);
     const document = inject(DOCUMENT);
+    const platformLocation = inject(PlatformLocation);
+    const baseUrl = platformLocation.getBaseHrefFromDOM();
     return http
-        .get(svgSpritePath, { responseType: 'text' })
+        .get(`${baseUrl}assets/svg-icons/icons-sprite.svg`, { responseType: 'text' })
         .pipe(tap(svgContent => {
         const div = document.createElement('div');
         div.innerHTML = svgContent;
@@ -9048,7 +9042,7 @@ class EngineOrchestratorEditComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EngineOrchestratorEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: EngineOrchestratorEditComponent, isStandalone: true, selector: "he-engine-orchestrator-edit", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p>\n  <i>\n    The configuration below is a preview of the\n    <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a>\n    used for the orchestration of the HESTIA's calculations.\n  </i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          ngbTooltip=\"Options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\n            <div class=\"dropdown-item\">\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    type=\"text\"\n                    class=\"input search-input is-secondary is-small\"\n                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    [(ngModel)]=\"search\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"showAdvanced\"\n                  id=\"showAdvanced\" />\n                <label class=\"is-size-7\" for=\"showAdvanced\">\n                  <span>Show advanced data</span>\n                </label>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"onlyGapFilled\"\n                  id=\"onlyGapFilled\" />\n                <label class=\"is-size-7\" for=\"onlyGapFilled\">\n                  <span>Show only gap-filled data</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"display-menu\"\n          ngbTooltip=\"Display options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!isArray(data)) {\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{ data.key | keyToLabel }}</span>\n        :\n        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{ modelKeyName(link.modelKey) }}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\">\n    <code>{{ strategy }}</code>\n  </span>\n\n  <a\n    class=\"is-size-7\"\n    [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\"\n    target=\"_blank\">\n    <span>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: EngineOrchestratorEditComponent, isStandalone: true, selector: "he-engine-orchestrator-edit", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p>\n  <i>\n    The configuration below is a preview of the\n    <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a>\n    used for the orchestration of the HESTIA's calculations.\n  </i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          [ngbTooltip]=\"optionDd.isOpen() ? null : 'Options'\"\n          [disableTooltip]=\"optionDd.isOpen()\"\n          placement=\"bottom\"\n          container=\"body\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\n            <div class=\"dropdown-item\">\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    type=\"text\"\n                    class=\"input search-input is-secondary is-small\"\n                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    [(ngModel)]=\"search\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"showAdvanced\"\n                  id=\"showAdvanced\" />\n                <label class=\"is-size-7\" for=\"showAdvanced\">\n                  <span>Show advanced data</span>\n                </label>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"onlyGapFilled\"\n                  id=\"onlyGapFilled\" />\n                <label class=\"is-size-7\" for=\"onlyGapFilled\">\n                  <span>Show only gap-filled data</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"display-menu\"\n          [ngbTooltip]=\"optionDd.isOpen() ? null : 'Display options'\"\n          [disableTooltip]=\"optionDd.isOpen()\"\n          placement=\"bottom\"\n          container=\"body\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!isArray(data)) {\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{ data.key | keyToLabel }}</span>\n        :\n        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{ modelKeyName(link.modelKey) }}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\">\n    <code>{{ strategy }}</code>\n  </span>\n\n  <a\n    class=\"is-size-7\"\n    [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\"\n    target=\"_blank\">\n    <span>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EngineOrchestratorEditComponent, decorators: [{
             type: Component$1,
@@ -9062,7 +9056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NodeLinkComponent,
                         KeyToLabelPipe,
                         HESvgIconComponent
-                    ], template: "<p>\n  <i>\n    The configuration below is a preview of the\n    <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a>\n    used for the orchestration of the HESTIA's calculations.\n  </i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          ngbTooltip=\"Options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\n            <div class=\"dropdown-item\">\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    type=\"text\"\n                    class=\"input search-input is-secondary is-small\"\n                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    [(ngModel)]=\"search\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"showAdvanced\"\n                  id=\"showAdvanced\" />\n                <label class=\"is-size-7\" for=\"showAdvanced\">\n                  <span>Show advanced data</span>\n                </label>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"onlyGapFilled\"\n                  id=\"onlyGapFilled\" />\n                <label class=\"is-size-7\" for=\"onlyGapFilled\">\n                  <span>Show only gap-filled data</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"display-menu\"\n          ngbTooltip=\"Display options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!isArray(data)) {\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{ data.key | keyToLabel }}</span>\n        :\n        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{ modelKeyName(link.modelKey) }}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\">\n    <code>{{ strategy }}</code>\n  </span>\n\n  <a\n    class=\"is-size-7\"\n    [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\"\n    target=\"_blank\">\n    <span>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"] }]
+                    ], template: "<p>\n  <i>\n    The configuration below is a preview of the\n    <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a>\n    used for the orchestration of the HESTIA's calculations.\n  </i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          [ngbTooltip]=\"optionDd.isOpen() ? null : 'Options'\"\n          [disableTooltip]=\"optionDd.isOpen()\"\n          placement=\"bottom\"\n          container=\"body\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\n            <div class=\"dropdown-item\">\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    type=\"text\"\n                    class=\"input search-input is-secondary is-small\"\n                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    [(ngModel)]=\"search\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"showAdvanced\"\n                  id=\"showAdvanced\" />\n                <label class=\"is-size-7\" for=\"showAdvanced\">\n                  <span>Show advanced data</span>\n                </label>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"onlyGapFilled\"\n                  id=\"onlyGapFilled\" />\n                <label class=\"is-size-7\" for=\"onlyGapFilled\">\n                  <span>Show only gap-filled data</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"display-menu\"\n          [ngbTooltip]=\"optionDd.isOpen() ? null : 'Display options'\"\n          [disableTooltip]=\"optionDd.isOpen()\"\n          placement=\"bottom\"\n          container=\"body\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!isArray(data)) {\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{ data.key | keyToLabel }}</span>\n        :\n        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{ modelKeyName(link.modelKey) }}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\">\n    <code>{{ strategy }}</code>\n  </span>\n\n  <a\n    class=\"is-size-7\"\n    [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\"\n    target=\"_blank\">\n    <span>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"] }]
         }], ctorParameters: () => [] });
 
 class EngineRequirementsFormComponent {
@@ -12655,14 +12649,15 @@ const disabledValues = (values) => values
 const getDirectOptionsCount = (group) => group.options.filter(item => item.type === 'option').length;
 const isItemMatch = (item, searchTerm) => item.label.toLowerCase().includes(searchTerm.toLowerCase());
 const hasMatchingNestedOption = (group, searchTerm) => group.options.some(item => item.type === 'option' ? isItemMatch(item, searchTerm) : hasMatchingNestedOption(item, searchTerm));
-const countDirectChildren = (group) => allOptions(group).length;
 const getFilteredDirectChildren = ({ options }, searchTerm) => (searchTerm?.trim()
     ? options.filter(item => isItemMatch(item, searchTerm) ||
         // For groups, also include whe any nested option matches
         (item.type !== 'option' && hasMatchingNestedOption(item, searchTerm)))
     : options).map(option => ({
     ...option,
-    ...(option.type === 'group' ? { count: countDirectChildren(option) } : {})
+    ...(option.type === 'group'
+        ? { count: allOptions(option).filter(item => isItemMatch(item, searchTerm)).length }
+        : {})
 }));
 class FilterAccordionGroupPipe {
     constructor() {
@@ -12689,7 +12684,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
         /**
          * Component title.
          */
-        this.title = input('Filter available data by');
+        this.title = input();
         /**
          * Component title tooltip.
          */
@@ -12814,7 +12809,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
                 multi: true
             },
             FilterStore
-        ], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"right\"\n          triggers=\"hover\"\n          size=\"16\"\n          container=\"body\" />\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span\n        class=\"is-size-7 mb-1 has-text-weight-normal is-italic | clear-button\"\n        [class.is-clickable]=\"hasSelectedValues()\"\n        (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"filter-accordion__search\">\n                  <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                    <div class=\"control is-expanded has-icons-right pl-5\">\n                      <input\n                        type=\"text\"\n                        class=\"input is-secondary is-small search-input pl-2\"\n                        placeholder=\"Search {{ item.label }}\"\n                        [value]=\"groupState.searchTerm || ''\"\n                        [disabled]=\"isItemEffectivelyDisabled(item)\"\n                        (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                      <a\n                        class=\"icon has-text-secondary is-small is-right\"\n                        [class.is-hidden]=\"!groupState.searchTerm\"\n                        (click)=\"groupState.searchTerm = ''\">\n                        <he-svg-icon name=\"xmark\" />\n                      </a>\n                      <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                        <he-svg-icon name=\"search\" />\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-ml-1\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FilterAccordionGroupPipe, name: "filterAccordionGroup" }, { kind: "directive", type: InputIndeterminateDirective, selector: "input[indeterminate]", inputs: ["indeterminate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    @if (title()) {\n      <div class=\"is-flex is-align-items-center\">\n        <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n        @if (tooltip()) {\n          <he-svg-icon\n            name=\"info-circle\"\n            class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n            [ngbTooltip]=\"tooltip()\"\n            placement=\"right\"\n            triggers=\"hover\"\n            size=\"16\"\n            container=\"body\" />\n        }\n      </div>\n    }\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span\n        class=\"is-size-7 mb-1 has-text-weight-normal is-italic | clear-button\"\n        [class.is-clickable]=\"hasSelectedValues()\"\n        (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"filter-accordion__search\">\n                  <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                    <div class=\"control is-expanded has-icons-right pl-5\">\n                      <input\n                        type=\"text\"\n                        class=\"input is-secondary is-small search-input pl-2\"\n                        placeholder=\"Search {{ item.label }}\"\n                        [value]=\"groupState.searchTerm || ''\"\n                        [disabled]=\"isItemEffectivelyDisabled(item)\"\n                        (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                      <a\n                        class=\"icon has-text-secondary is-small is-right\"\n                        [class.is-hidden]=\"!groupState.searchTerm\"\n                        (click)=\"groupState.searchTerm = ''\">\n                        <he-svg-icon name=\"xmark\" />\n                      </a>\n                      <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                        <he-svg-icon name=\"search\" />\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && (!showGlobalSearch() || parentSearch === search())) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-ml-1\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FilterAccordionGroupPipe, name: "filterAccordionGroup" }, { kind: "directive", type: InputIndeterminateDirective, selector: "input[indeterminate]", inputs: ["indeterminate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
             type: Component$1,
@@ -12833,7 +12828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NgTemplateOutlet,
                         FilterAccordionGroupPipe,
                         InputIndeterminateDirective
-                    ], template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"right\"\n          triggers=\"hover\"\n          size=\"16\"\n          container=\"body\" />\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span\n        class=\"is-size-7 mb-1 has-text-weight-normal is-italic | clear-button\"\n        [class.is-clickable]=\"hasSelectedValues()\"\n        (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"filter-accordion__search\">\n                  <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                    <div class=\"control is-expanded has-icons-right pl-5\">\n                      <input\n                        type=\"text\"\n                        class=\"input is-secondary is-small search-input pl-2\"\n                        placeholder=\"Search {{ item.label }}\"\n                        [value]=\"groupState.searchTerm || ''\"\n                        [disabled]=\"isItemEffectivelyDisabled(item)\"\n                        (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                      <a\n                        class=\"icon has-text-secondary is-small is-right\"\n                        [class.is-hidden]=\"!groupState.searchTerm\"\n                        (click)=\"groupState.searchTerm = ''\">\n                        <he-svg-icon name=\"xmark\" />\n                      </a>\n                      <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                        <he-svg-icon name=\"search\" />\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-ml-1\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
+                    ], template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    @if (title()) {\n      <div class=\"is-flex is-align-items-center\">\n        <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n        @if (tooltip()) {\n          <he-svg-icon\n            name=\"info-circle\"\n            class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n            [ngbTooltip]=\"tooltip()\"\n            placement=\"right\"\n            triggers=\"hover\"\n            size=\"16\"\n            container=\"body\" />\n        }\n      </div>\n    }\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span\n        class=\"is-size-7 mb-1 has-text-weight-normal is-italic | clear-button\"\n        [class.is-clickable]=\"hasSelectedValues()\"\n        (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"filter-accordion__search\">\n                  <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                    <div class=\"control is-expanded has-icons-right pl-5\">\n                      <input\n                        type=\"text\"\n                        class=\"input is-secondary is-small search-input pl-2\"\n                        placeholder=\"Search {{ item.label }}\"\n                        [value]=\"groupState.searchTerm || ''\"\n                        [disabled]=\"isItemEffectivelyDisabled(item)\"\n                        (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                      <a\n                        class=\"icon has-text-secondary is-small is-right\"\n                        [class.is-hidden]=\"!groupState.searchTerm\"\n                        (click)=\"groupState.searchTerm = ''\">\n                        <he-svg-icon name=\"xmark\" />\n                      </a>\n                      <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                        <he-svg-icon name=\"search\" />\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && (!showGlobalSearch() || parentSearch === search())) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-ml-1\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 const sortedPoints = (values) => Object.entries(values)