@hestia-earth/ui-components 0.32.47 → 0.32.48

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

@@ -576,11 +576,11 @@ class BibliographiesSearchConfirmComponent {
         this.activeModal?.close(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BibliographiesSearchConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: BibliographiesSearchConfirmComponent, isStandalone: true, selector: "he-bibliographies-search-confirm", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchSources: { classPropertyName: "searchSources", publicName: "searchSources", isSignal: true, isRequired: false, transformFunction: null }, searchBibliographies: { classPropertyName: "searchBibliographies", publicName: "searchBibliographies", isSignal: true, isRequired: false, transformFunction: null }, searchBy: { classPropertyName: "searchBy", publicName: "searchBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", searchSources: "searchSourcesChange", searchBibliographies: "searchBibliographiesChange", searchBy: "searchByChange", closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-large 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\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy()\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading()\" (click)=\"resetSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading()\">\n              <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-mt-2\">\n        <span [class.is-hidden]=\"loading() || !searchControl?.value || hasResults()\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          @for (result of results(); track result) {\n            <li>\n              <a\n                class=\"is-block p-1 search-result\"\n                (click)=\"selectedResult.set(result)\"\n                [class.is-active]=\"selectedResult() === result\">\n                <ngb-highlight [result]=\"result.bibliography?.title ?? result.title\" [term]=\"searchControl?.value\" />\n                <span class=\"px-1\">-</span>\n                <span class=\"px-1\">\n                  <i>{{ result.name }}</i>\n                </span>\n                @if (result.bibliography?.documentDOI || result.documentDOI) {\n                  <span class=\"px-1\">\n                    -\n                    <b>documentDOI:</b>\n                  </span>\n                }\n                <ngb-highlight\n                  [result]=\"result.bibliography?.documentDOI ?? result.documentDOI\"\n                  [term]=\"searchControl?.value\" />\n                @if (result.bibliography?.scopus || result.scopus) {\n                  <span class=\"px-1\">\n                    -\n                    <b>scopus:</b>\n                  </span>\n                }\n                <ngb-highlight [result]=\"result.bibliography?.scopus ?? result.scopus\" [term]=\"searchControl?.value\" />\n                <span>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      mendeleyLink;\n                      context: { $implicit: result.bibliography?.mendeleyID ?? result.mendeleyID }\n                    \" />\n                </span>\n              </a>\n            </li>\n          }\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  @if (id) {\n    <a [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: BibliographiesSearchConfirmComponent, isStandalone: true, selector: "he-bibliographies-search-confirm", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchSources: { classPropertyName: "searchSources", publicName: "searchSources", isSignal: true, isRequired: false, transformFunction: null }, searchBibliographies: { classPropertyName: "searchBibliographies", publicName: "searchBibliographies", isSignal: true, isRequired: false, transformFunction: null }, searchBy: { classPropertyName: "searchBy", publicName: "searchBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", searchSources: "searchSourcesChange", searchBibliographies: "searchBibliographiesChange", searchBy: "searchByChange", closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-large 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\">Search Bibliographies</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy()\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading()\" (click)=\"resetSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading()\">\n              <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-mt-2\">\n        <span [class.is-hidden]=\"loading() || !searchControl?.value || hasResults()\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          @for (result of results(); track result) {\n            <li>\n              <a\n                class=\"is-block p-1 search-result\"\n                (click)=\"selectedResult.set(result)\"\n                [class.is-active]=\"selectedResult() === result\">\n                <ngb-highlight [result]=\"result.bibliography?.title ?? result.title\" [term]=\"searchControl?.value\" />\n                <span class=\"px-1\">-</span>\n                <span class=\"px-1\">\n                  <i>{{ result.name }}</i>\n                </span>\n                @if (result.bibliography?.documentDOI || result.documentDOI) {\n                  <span class=\"px-1\">\n                    -\n                    <b>documentDOI:</b>\n                  </span>\n                }\n                <ngb-highlight\n                  [result]=\"result.bibliography?.documentDOI ?? result.documentDOI\"\n                  [term]=\"searchControl?.value\" />\n                @if (result.bibliography?.scopus || result.scopus) {\n                  <span class=\"px-1\">\n                    -\n                    <b>scopus:</b>\n                  </span>\n                }\n                <ngb-highlight [result]=\"result.bibliography?.scopus ?? result.scopus\" [term]=\"searchControl?.value\" />\n                <span>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      mendeleyLink;\n                      context: { $implicit: result.bibliography?.mendeleyID ?? result.mendeleyID }\n                    \" />\n                </span>\n              </a>\n            </li>\n          }\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  @if (id) {\n    <a [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BibliographiesSearchConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-bibliographies-search-confirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgbHighlight, NgTemplateOutlet, HESvgIconComponent], template: "<div class=\"modal is-large 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\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy()\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading()\" (click)=\"resetSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading()\">\n              <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-mt-2\">\n        <span [class.is-hidden]=\"loading() || !searchControl?.value || hasResults()\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          @for (result of results(); track result) {\n            <li>\n              <a\n                class=\"is-block p-1 search-result\"\n                (click)=\"selectedResult.set(result)\"\n                [class.is-active]=\"selectedResult() === result\">\n                <ngb-highlight [result]=\"result.bibliography?.title ?? result.title\" [term]=\"searchControl?.value\" />\n                <span class=\"px-1\">-</span>\n                <span class=\"px-1\">\n                  <i>{{ result.name }}</i>\n                </span>\n                @if (result.bibliography?.documentDOI || result.documentDOI) {\n                  <span class=\"px-1\">\n                    -\n                    <b>documentDOI:</b>\n                  </span>\n                }\n                <ngb-highlight\n                  [result]=\"result.bibliography?.documentDOI ?? result.documentDOI\"\n                  [term]=\"searchControl?.value\" />\n                @if (result.bibliography?.scopus || result.scopus) {\n                  <span class=\"px-1\">\n                    -\n                    <b>scopus:</b>\n                  </span>\n                }\n                <ngb-highlight [result]=\"result.bibliography?.scopus ?? result.scopus\" [term]=\"searchControl?.value\" />\n                <span>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      mendeleyLink;\n                      context: { $implicit: result.bibliography?.mendeleyID ?? result.mendeleyID }\n                    \" />\n                </span>\n              </a>\n            </li>\n          }\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  @if (id) {\n    <a [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"] }]
+            args: [{ selector: 'he-bibliographies-search-confirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgbHighlight, NgTemplateOutlet, HESvgIconComponent], template: "<div class=\"modal is-large 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\">Search Bibliographies</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy()\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading()\" (click)=\"resetSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading()\">\n              <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-mt-2\">\n        <span [class.is-hidden]=\"loading() || !searchControl?.value || hasResults()\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          @for (result of results(); track result) {\n            <li>\n              <a\n                class=\"is-block p-1 search-result\"\n                (click)=\"selectedResult.set(result)\"\n                [class.is-active]=\"selectedResult() === result\">\n                <ngb-highlight [result]=\"result.bibliography?.title ?? result.title\" [term]=\"searchControl?.value\" />\n                <span class=\"px-1\">-</span>\n                <span class=\"px-1\">\n                  <i>{{ result.name }}</i>\n                </span>\n                @if (result.bibliography?.documentDOI || result.documentDOI) {\n                  <span class=\"px-1\">\n                    -\n                    <b>documentDOI:</b>\n                  </span>\n                }\n                <ngb-highlight\n                  [result]=\"result.bibliography?.documentDOI ?? result.documentDOI\"\n                  [term]=\"searchControl?.value\" />\n                @if (result.bibliography?.scopus || result.scopus) {\n                  <span class=\"px-1\">\n                    -\n                    <b>scopus:</b>\n                  </span>\n                }\n                <ngb-highlight [result]=\"result.bibliography?.scopus ?? result.scopus\" [term]=\"searchControl?.value\" />\n                <span>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      mendeleyLink;\n                      context: { $implicit: result.bibliography?.mendeleyID ?? result.mendeleyID }\n                    \" />\n                </span>\n              </a>\n            </li>\n          }\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  @if (id) {\n    <a [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 class ChartConfigurationDirective {
@@ -2941,11 +2941,11 @@ class IssueConfirmComponent {
         this.activeModal?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IssueConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IssueConfirmComponent, isStandalone: true, selector: "he-issue-confirm", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, repository: { classPropertyName: "repository", publicName: "repository", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isCommunity: { classPropertyName: "isCommunity", publicName: "isCommunity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", repository: "repositoryChange", template: "templateChange", isCommunity: "isCommunityChange", 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\">{{ title() }}</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <p class=\"mb-2\">Please select the type of issue from the list below to start:</p>\n\n      <div class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"repository\">Category</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select\n                  [ngModel]=\"repository()\"\n                  (change)=\"repository.set($event.target.value)\"\n                  name=\"repository\"\n                  required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div class=\"field is-horizontal my-3\">\n          <div class=\"field-label is-normal\">\n            <label class=\"label\" for=\"template\">Issue</label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field\">\n              <div class=\"control is-expanded\">\n                <div class=\"select is-multiple is-fullwidth\">\n                  <select [ngModel]=\"template()\" (change)=\"template.set($event.target.value)\" name=\"template\" required>\n                    <option [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\n          <span>Please report the issue on Gitlab using</span>\n          <a class=\"pl-1\" [href]=\"issueUrl()\" target=\"_blank\">this link</a>\n          .\n        </p>\n      }\n    </section>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IssueConfirmComponent, isStandalone: true, selector: "he-issue-confirm", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, repository: { classPropertyName: "repository", publicName: "repository", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isCommunity: { classPropertyName: "isCommunity", publicName: "isCommunity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", repository: "repositoryChange", template: "templateChange", isCommunity: "isCommunityChange", 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\">{{ title() }}</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <p class=\"mb-2\">Please select the type of issue from the list below to start:</p>\n\n      <div class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"repository\">Category</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select\n                  [ngModel]=\"repository()\"\n                  (change)=\"repository.set($event.target.value)\"\n                  name=\"repository\"\n                  required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div class=\"field is-horizontal my-3\">\n          <div class=\"field-label is-normal\">\n            <label class=\"label\" for=\"template\">Issue</label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field\">\n              <div class=\"control is-expanded\">\n                <div class=\"select is-multiple is-fullwidth\">\n                  <select [ngModel]=\"template()\" (change)=\"template.set($event.target.value)\" name=\"template\" required>\n                    <option [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\n          <span>Please report the issue on Gitlab using</span>\n          <a class=\"pl-1\" [href]=\"issueUrl()\" target=\"_blank\">this link</a>\n          .\n        </p>\n      }\n    </section>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IssueConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-issue-confirm', imports: [FormsModule, KeyValuePipe], 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\">{{ title() }}</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <p class=\"mb-2\">Please select the type of issue from the list below to start:</p>\n\n      <div class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"repository\">Category</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select\n                  [ngModel]=\"repository()\"\n                  (change)=\"repository.set($event.target.value)\"\n                  name=\"repository\"\n                  required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div class=\"field is-horizontal my-3\">\n          <div class=\"field-label is-normal\">\n            <label class=\"label\" for=\"template\">Issue</label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field\">\n              <div class=\"control is-expanded\">\n                <div class=\"select is-multiple is-fullwidth\">\n                  <select [ngModel]=\"template()\" (change)=\"template.set($event.target.value)\" name=\"template\" required>\n                    <option [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\n          <span>Please report the issue on Gitlab using</span>\n          <a class=\"pl-1\" [href]=\"issueUrl()\" target=\"_blank\">this link</a>\n          .\n        </p>\n      }\n    </section>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'he-issue-confirm', imports: [FormsModule, KeyValuePipe], 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\">{{ title() }}</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <p class=\"mb-2\">Please select the type of issue from the list below to start:</p>\n\n      <div class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"repository\">Category</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select\n                  [ngModel]=\"repository()\"\n                  (change)=\"repository.set($event.target.value)\"\n                  name=\"repository\"\n                  required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div class=\"field is-horizontal my-3\">\n          <div class=\"field-label is-normal\">\n            <label class=\"label\" for=\"template\">Issue</label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field\">\n              <div class=\"control is-expanded\">\n                <div class=\"select is-multiple is-fullwidth\">\n                  <select [ngModel]=\"template()\" (change)=\"template.set($event.target.value)\" name=\"template\" required>\n                    <option [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\n          <span>Please report the issue on Gitlab using</span>\n          <a class=\"pl-1\" [href]=\"issueUrl()\" target=\"_blank\">this link</a>\n          .\n        </p>\n      }\n    </section>\n  </div>\n</div>\n" }]
         }] });
 
 const valueLink = (value) => isExpandable(value) && value['@id'] ? [baseUrl(), value['@type'].toLowerCase(), value['@id']].join('/') : null;
@@ -3102,11 +3102,11 @@ class MapsDrawingConfirmComponent {
         this.activeModal?.close(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MapsDrawingConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: MapsDrawingConfirmComponent, isStandalone: true, selector: "he-maps-drawing-confirm", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, modes: { classPropertyName: "modes", publicName: "modes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "map", first: true, predicate: MapsDrawingComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal is-large 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\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <he-maps-drawing #map [value]=\"value()\" [modes]=\"modes()\" />\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"map.clear()\">\n        <he-svg-icon name=\"xmark\" class=\"mr-2\" />\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MapsDrawingComponent, selector: "he-maps-drawing", inputs: ["value", "modes", "center", "zoom"], outputs: ["updated"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: MapsDrawingConfirmComponent, isStandalone: true, selector: "he-maps-drawing-confirm", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, modes: { classPropertyName: "modes", publicName: "modes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "map", first: true, predicate: MapsDrawingComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal is-large 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\">Draw on Map</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <he-maps-drawing #map [value]=\"value()\" [modes]=\"modes()\" />\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"map.clear()\">\n        <he-svg-icon name=\"xmark\" class=\"mr-2\" />\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MapsDrawingComponent, selector: "he-maps-drawing", inputs: ["value", "modes", "center", "zoom"], outputs: ["updated"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MapsDrawingConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-maps-drawing-confirm', imports: [MapsDrawingComponent, HESvgIconComponent], template: "<div class=\"modal is-large 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\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <he-maps-drawing #map [value]=\"value()\" [modes]=\"modes()\" />\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"map.clear()\">\n        <he-svg-icon name=\"xmark\" class=\"mr-2\" />\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'he-maps-drawing-confirm', imports: [MapsDrawingComponent, HESvgIconComponent], template: "<div class=\"modal is-large 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\">Draw on Map</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <he-maps-drawing #map [value]=\"value()\" [modes]=\"modes()\" />\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"close()\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"map.clear()\">\n        <he-svg-icon name=\"xmark\" class=\"mr-2\" />\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n" }]
         }] });
 
 class MobileShellComponent {
@@ -3460,11 +3460,11 @@ class ToastComponent {
         this.toasts.splice(this.toasts.findIndex(val => val.id === toast.id), 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ToastComponent, isStandalone: true, selector: "he-toast", ngImport: i0, template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  @for (toast of toasts; track toast) {\n    <div class=\"notification is-{{ toast.color }}\" role=\"alert\">\n      <button class=\"delete\" aria-label=\"delete\" (click)=\"dismiss(toast)\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n      <strong>\n        @switch (toast.color) {\n          @case ('danger') {\n            @switch (toast.message) {\n              @case ('Unauthorized') {\n                <span>You are not allowed to perform this action.</span>\n              }\n              @case ('form-invalid') {\n                <span>Please fix all the errors on this page.</span>\n              }\n              @case ('users-email-already-taken') {\n                <span>Email already taken.</span>\n              }\n              @case ('users-auth-already-taken') {\n                <span>Account already connected.</span>\n              }\n              @default {\n                <span>\n                  @if (toast.showRawMessage) {\n                    <span>{{ toast.message }}</span>\n                  }\n                  <span [class.is-hidden]=\"toast.showRawMessage\">\n                    An unknown error occurred. Please try again later.\n                  </span>\n                </span>\n              }\n            }\n          }\n          @default {\n            @if (toast.showRawMessage) {\n              <span>{{ toast.message }}</span>\n            }\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          }\n        }\n      </strong>\n    </div>\n  }\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ToastComponent, isStandalone: true, selector: "he-toast", ngImport: i0, template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  @for (toast of toasts; track toast) {\n    <div class=\"notification is-{{ toast.color }}\" role=\"alert\">\n      <button class=\"delete\" (click)=\"dismiss(toast)\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n      <strong>\n        @switch (toast.color) {\n          @case ('danger') {\n            @switch (toast.message) {\n              @case ('Unauthorized') {\n                <span>You are not allowed to perform this action.</span>\n              }\n              @case ('form-invalid') {\n                <span>Please fix all the errors on this page.</span>\n              }\n              @case ('users-email-already-taken') {\n                <span>Email already taken.</span>\n              }\n              @case ('users-auth-already-taken') {\n                <span>Account already connected.</span>\n              }\n              @default {\n                <span>\n                  @if (toast.showRawMessage) {\n                    <span>{{ toast.message }}</span>\n                  }\n                  <span [class.is-hidden]=\"toast.showRawMessage\">\n                    An unknown error occurred. Please try again later.\n                  </span>\n                </span>\n              }\n            }\n          }\n          @default {\n            @if (toast.showRawMessage) {\n              <span>{{ toast.message }}</span>\n            }\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          }\n        }\n      </strong>\n    </div>\n  }\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-toast', standalone: true, template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  @for (toast of toasts; track toast) {\n    <div class=\"notification is-{{ toast.color }}\" role=\"alert\">\n      <button class=\"delete\" aria-label=\"delete\" (click)=\"dismiss(toast)\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n      <strong>\n        @switch (toast.color) {\n          @case ('danger') {\n            @switch (toast.message) {\n              @case ('Unauthorized') {\n                <span>You are not allowed to perform this action.</span>\n              }\n              @case ('form-invalid') {\n                <span>Please fix all the errors on this page.</span>\n              }\n              @case ('users-email-already-taken') {\n                <span>Email already taken.</span>\n              }\n              @case ('users-auth-already-taken') {\n                <span>Account already connected.</span>\n              }\n              @default {\n                <span>\n                  @if (toast.showRawMessage) {\n                    <span>{{ toast.message }}</span>\n                  }\n                  <span [class.is-hidden]=\"toast.showRawMessage\">\n                    An unknown error occurred. Please try again later.\n                  </span>\n                </span>\n              }\n            }\n          }\n          @default {\n            @if (toast.showRawMessage) {\n              <span>{{ toast.message }}</span>\n            }\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          }\n        }\n      </strong>\n    </div>\n  }\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"] }]
+            args: [{ selector: 'he-toast', standalone: true, template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  @for (toast of toasts; track toast) {\n    <div class=\"notification is-{{ toast.color }}\" role=\"alert\">\n      <button class=\"delete\" (click)=\"dismiss(toast)\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n      <strong>\n        @switch (toast.color) {\n          @case ('danger') {\n            @switch (toast.message) {\n              @case ('Unauthorized') {\n                <span>You are not allowed to perform this action.</span>\n              }\n              @case ('form-invalid') {\n                <span>Please fix all the errors on this page.</span>\n              }\n              @case ('users-email-already-taken') {\n                <span>Email already taken.</span>\n              }\n              @case ('users-auth-already-taken') {\n                <span>Account already connected.</span>\n              }\n              @default {\n                <span>\n                  @if (toast.showRawMessage) {\n                    <span>{{ toast.message }}</span>\n                  }\n                  <span [class.is-hidden]=\"toast.showRawMessage\">\n                    An unknown error occurred. Please try again later.\n                  </span>\n                </span>\n              }\n            }\n          }\n          @default {\n            @if (toast.showRawMessage) {\n              <span>{{ toast.message }}</span>\n            }\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          }\n        }\n      </strong>\n    </div>\n  }\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable prefer-spread */
@@ -5570,6 +5570,9 @@ class HeNodeService {
             .toPromise()
             .catch(() => (node.dataState && defaultForState ? node : {}));
     }
+    head$(node) {
+        return this.http.head(this.nodeUrl(node));
+    }
     getRelated$(node, relatedType, limit = 100, offset = 0, relationship) {
         return this.http
             .get(`${this.nodeUrl(node)}/${nodeTypeToParam(relatedType)}`, {
@@ -5655,7 +5658,7 @@ const sortNodes = (values) => values?.length
     ? orderBy(values.filter(Boolean), ['original.aggregated', 'original.site.@id', 'original.cycle.@id', 'original.@id'], ['asc', 'asc', 'asc', 'asc'])
     : [];
 const isAggregated = (id = '') => !!id?.match(/^[a-zA-Z]+[-][a-zA-Z]+[-][\d]{4,}[-][\d]{4,}/g);
-const pickHeaderKeys = ['stage', 'maxstage', 'error'];
+const pickHeaderKeys = ['stage', 'maxstage', 'error', 'last-modified'];
 const mergeDataWithHeaders = (data, headers) => ({
     ...data,
     ...Object.fromEntries(pickHeaderKeys.map(key => [key, headers?.get(key)]).filter(([_key, value]) => !isEmpty(value)))
@@ -6155,11 +6158,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\" aria-label=\"close\" (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", "svgClass"] }], 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      <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", "svgClass"] }], 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\" aria-label=\"close\" (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      <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" }]
         }] });
 
 /* eslint-disable complexity */
@@ -7560,6 +7563,7 @@ const additionalKeys = [
     'methodDescription',
     'description',
     'primary',
+    'primaryPercent',
     'emissionDuration',
     'observations',
     'statsDefinition',
@@ -8648,15 +8652,13 @@ class EngineModelsStageComponent {
         this.defaultMaxStage = computed(() => getMaxStage(this.node()['@type']));
         this.headersResource = rxResource({
             request: () => ({ node: this.node() }),
-            loader: ({ request: { node } }) => this.nodeService
-                .getWithHeaders$({
+            loader: ({ request: { node } }) => this.nodeService.head$({
                 ...node,
                 dataState: DataState.recalculated
             })
-                .pipe(map(({ headers }) => headers))
         });
-        this.stage = computed(() => +this.headersResource.value()?.get('stage'));
-        this.maxStage = computed(() => +this.headersResource.value()?.get('maxstage') || this.defaultMaxStage());
+        this.stage = computed(() => +this.headersResource.value()?.stage);
+        this.maxStage = computed(() => +this.headersResource.value()?.maxstage || this.defaultMaxStage());
         this.inProgress = computed(() => this.stage() && this.stage() !== this.maxStage());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EngineModelsStageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8722,7 +8724,7 @@ class EngineModelsStageDeepComponent {
         this.id = computed(() => this.node()?.['@id']);
         this.type = computed(() => this.node()?.['@type']);
         this.nodeColour = computed(() => nodeColours$1[this.type()]);
-        this.recalculatedAt = computed(() => this.node()?.updatedAt || this.node()?.createdAt);
+        this.recalculatedAt = computed(() => this.node()?.['last-modified'] || this.node()?.updatedAt || this.node()?.createdAt);
         this.relatedNodesResource = rxResource({
             request: () => ({
                 node: this.node()
@@ -8772,7 +8774,7 @@ class EngineModelsStageDeepComponent {
         this.service.focusedNode.set(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EngineModelsStageDeepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: EngineModelsStageDeepComponent, isStandalone: true, selector: "he-engine-models-stage-deep", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandedNode: { classPropertyName: "expandedNode", publicName: "expandedNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div\n  class=\"is-flex is-flex-direction-column is-gap-8 is-py-2 is-pl-2 | engine-models-stage--container is-type-{{ type }}\"\n  [style.border-color]=\"nodeColour()\">\n  <div class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8\">\n    @if (canExpand()) {\n      <div (click)=\"expanded.set(!expanded())\" pointer>\n        <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <div\n      class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8 is-flex-wrap-wrap is-flex-grow-1\">\n      <he-node-link class=\"is-flex-grow-1\" [node]=\"node()\" [showExternalLink]=\"true\">\n        <span>{{ type() }} {{ id() }}</span>\n      </he-node-link>\n\n      <div class=\"is-flex is-flex-direction-column is-gap-4 | engine-models-stage--calculations\">\n        <div class=\"is-flex is-gap-4 is-pr-2\">\n          <span class=\"has-text-secondary has-text-weight-bold\">Calculations:</span>\n\n          @if (inProgress()) {\n            <span [class.has-text-danger]=\"stage() === 0\" [class.has-text-warning]=\"stage() > 0\">\n              stage {{ stage() }} / {{ maxStage() }}\n            </span>\n          } @else {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span class=\"has-text-success\">complete</span>\n            </span>\n          }\n\n          @if (hasError()) {\n            <a\n              class=\"has-text-danger\"\n              ngbTooltip=\"Errors validating recalculation. Click to open\"\n              (click)=\"openError(node())\">\n              <he-svg-icon name=\"exclamation-triangle\" />\n            </a>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n      <div class=\"related-node\">\n        <he-engine-models-stage-deep\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      </div>\n    }\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: 'mediumDate' }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:3px}he-engine-models-stage-deep ::ng-deep .engine-models-stage--container{border-right:0px;border-top-right-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "component", type: EngineModelsStageDeepComponent, selector: "he-engine-models-stage-deep", inputs: ["node", "expanded", "expandedNode"], outputs: ["expandedChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "directive", type: i1$2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$2.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: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: ["node"] }, { kind: "component", type: SkeletonTextComponent, selector: "he-skeleton-text", inputs: ["animated", "width", "height"] }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: EngineModelsStageDeepComponent, isStandalone: true, selector: "he-engine-models-stage-deep", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandedNode: { classPropertyName: "expandedNode", publicName: "expandedNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div\n  class=\"is-flex is-flex-direction-column is-gap-8 is-py-2 is-pl-2 | engine-models-stage--container is-type-{{ type }}\"\n  [style.border-color]=\"nodeColour()\">\n  <div class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8\">\n    @if (canExpand()) {\n      <div (click)=\"expanded.set(!expanded())\" pointer>\n        <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <div\n      class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8 is-flex-wrap-wrap is-flex-grow-1\">\n      <he-node-link class=\"is-flex-grow-1\" [node]=\"node()\" [showExternalLink]=\"true\">\n        <span>{{ type() }} {{ id() }}</span>\n      </he-node-link>\n\n      <div class=\"is-flex is-flex-direction-column is-gap-4 | engine-models-stage--calculations\">\n        <div class=\"is-flex is-gap-4 is-pr-2\">\n          <span class=\"has-text-secondary has-text-weight-bold\">Calculations:</span>\n\n          @if (inProgress()) {\n            <span [class.has-text-danger]=\"stage() === 0\" [class.has-text-warning]=\"stage() > 0\">\n              stage {{ stage() }} / {{ maxStage() }}\n            </span>\n          } @else {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span class=\"has-text-success\">complete</span>\n            </span>\n          }\n\n          @if (hasError()) {\n            <a\n              class=\"has-text-danger\"\n              ngbTooltip=\"Errors validating recalculation. Click to open\"\n              (click)=\"openError(node())\">\n              <he-svg-icon name=\"exclamation-triangle\" />\n            </a>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n      <div class=\"related-node\">\n        <he-engine-models-stage-deep\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      </div>\n    }\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:3px}he-engine-models-stage-deep ::ng-deep .engine-models-stage--container{border-right:0px;border-top-right-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "component", type: EngineModelsStageDeepComponent, selector: "he-engine-models-stage-deep", inputs: ["node", "expanded", "expandedNode"], outputs: ["expandedChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "directive", type: i1$2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$2.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: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: ["node"] }, { kind: "component", type: SkeletonTextComponent, selector: "he-skeleton-text", inputs: ["animated", "width", "height"] }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EngineModelsStageDeepComponent, decorators: [{
             type: Component$1,
@@ -8785,7 +8787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         SkeletonTextComponent,
                         TimesPipe,
                         NodeLinkComponent
-                    ], template: "<div\n  class=\"is-flex is-flex-direction-column is-gap-8 is-py-2 is-pl-2 | engine-models-stage--container is-type-{{ type }}\"\n  [style.border-color]=\"nodeColour()\">\n  <div class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8\">\n    @if (canExpand()) {\n      <div (click)=\"expanded.set(!expanded())\" pointer>\n        <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <div\n      class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8 is-flex-wrap-wrap is-flex-grow-1\">\n      <he-node-link class=\"is-flex-grow-1\" [node]=\"node()\" [showExternalLink]=\"true\">\n        <span>{{ type() }} {{ id() }}</span>\n      </he-node-link>\n\n      <div class=\"is-flex is-flex-direction-column is-gap-4 | engine-models-stage--calculations\">\n        <div class=\"is-flex is-gap-4 is-pr-2\">\n          <span class=\"has-text-secondary has-text-weight-bold\">Calculations:</span>\n\n          @if (inProgress()) {\n            <span [class.has-text-danger]=\"stage() === 0\" [class.has-text-warning]=\"stage() > 0\">\n              stage {{ stage() }} / {{ maxStage() }}\n            </span>\n          } @else {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span class=\"has-text-success\">complete</span>\n            </span>\n          }\n\n          @if (hasError()) {\n            <a\n              class=\"has-text-danger\"\n              ngbTooltip=\"Errors validating recalculation. Click to open\"\n              (click)=\"openError(node())\">\n              <he-svg-icon name=\"exclamation-triangle\" />\n            </a>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n      <div class=\"related-node\">\n        <he-engine-models-stage-deep\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      </div>\n    }\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: 'mediumDate' }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:3px}he-engine-models-stage-deep ::ng-deep .engine-models-stage--container{border-right:0px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
+                    ], template: "<div\n  class=\"is-flex is-flex-direction-column is-gap-8 is-py-2 is-pl-2 | engine-models-stage--container is-type-{{ type }}\"\n  [style.border-color]=\"nodeColour()\">\n  <div class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8\">\n    @if (canExpand()) {\n      <div (click)=\"expanded.set(!expanded())\" pointer>\n        <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <div\n      class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-8 is-flex-wrap-wrap is-flex-grow-1\">\n      <he-node-link class=\"is-flex-grow-1\" [node]=\"node()\" [showExternalLink]=\"true\">\n        <span>{{ type() }} {{ id() }}</span>\n      </he-node-link>\n\n      <div class=\"is-flex is-flex-direction-column is-gap-4 | engine-models-stage--calculations\">\n        <div class=\"is-flex is-gap-4 is-pr-2\">\n          <span class=\"has-text-secondary has-text-weight-bold\">Calculations:</span>\n\n          @if (inProgress()) {\n            <span [class.has-text-danger]=\"stage() === 0\" [class.has-text-warning]=\"stage() > 0\">\n              stage {{ stage() }} / {{ maxStage() }}\n            </span>\n          } @else {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span class=\"has-text-success\">complete</span>\n            </span>\n          }\n\n          @if (hasError()) {\n            <a\n              class=\"has-text-danger\"\n              ngbTooltip=\"Errors validating recalculation. Click to open\"\n              (click)=\"openError(node())\">\n              <he-svg-icon name=\"exclamation-triangle\" />\n            </a>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n      <div class=\"related-node\">\n        <he-engine-models-stage-deep\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      </div>\n    }\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:3px}he-engine-models-stage-deep ::ng-deep .engine-models-stage--container{border-right:0px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
         }] });
 
 const gitUrl = `${gitHome}/${Repository.orchestrator}/-/blob/${gitBranch()}`;
@@ -13318,7 +13320,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
                 multi: true
             },
             FilterStore
-        ], usesInheritance: true, ngImport: i0, template: "<div>\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      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [style.max-height]=\"groupState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\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 is-italic pl-2\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $any($event.target).value\" />\n                    <a\n                      class=\"icon 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              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-secondary transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [style.max-height]=\"\n                              childState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\n                            \"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\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 is-size-7 search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                    (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      optionLabel;\n                                      context: {\n                                        item: nestedOption,\n                                        parentDisabled: isItemEffectivelyDisabled(\n                                          child,\n                                          isItemEffectivelyDisabled(item)\n                                        )\n                                      }\n                                    \" />\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionLabel;\n                          context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                        \" />\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3\" />\n\n    <span class=\"is-flex-grow-1\">\n      {{ removeCountFromLabel(item.label) }}\n    </span>\n\n    @let count = getOptionCountFn()(value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;box-shadow:none!important}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}input[type=checkbox]{height:14px;width:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div>\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      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [style.max-height]=\"groupState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\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 is-italic pl-2\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $any($event.target).value\" />\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              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-secondary transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [style.max-height]=\"\n                              childState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\n                            \"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\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 is-size-7 search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                    (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      optionLabel;\n                                      context: {\n                                        item: nestedOption,\n                                        parentDisabled: isItemEffectivelyDisabled(\n                                          child,\n                                          isItemEffectivelyDisabled(item)\n                                        )\n                                      }\n                                    \" />\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionLabel;\n                          context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                        \" />\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3\" />\n\n    <span class=\"is-flex-grow-1\">\n      {{ removeCountFromLabel(item.label) }}\n    </span>\n\n    @let count = getOptionCountFn()(value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;box-shadow:none!important}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}input[type=checkbox]{height:14px;width:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
             type: Component$1,
@@ -13329,7 +13331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             multi: true
                         },
                         FilterStore
-                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "<div>\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      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [style.max-height]=\"groupState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\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 is-italic pl-2\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $any($event.target).value\" />\n                    <a\n                      class=\"icon 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              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-secondary transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [style.max-height]=\"\n                              childState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\n                            \"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\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 is-size-7 search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                    (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      optionLabel;\n                                      context: {\n                                        item: nestedOption,\n                                        parentDisabled: isItemEffectivelyDisabled(\n                                          child,\n                                          isItemEffectivelyDisabled(item)\n                                        )\n                                      }\n                                    \" />\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionLabel;\n                          context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                        \" />\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3\" />\n\n    <span class=\"is-flex-grow-1\">\n      {{ removeCountFromLabel(item.label) }}\n    </span>\n\n    @let count = getOptionCountFn()(value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;box-shadow:none!important}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}input[type=checkbox]{height:14px;width:14px}\n"] }]
+                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "<div>\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      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-secondary transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [style.max-height]=\"groupState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\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 is-italic pl-2\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $any($event.target).value\" />\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              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-secondary transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [style.max-height]=\"\n                              childState.expanded ? (groupMaxHeight() ? groupMaxHeight() + 'px' : '100%') : '0'\n                            \"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\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 is-size-7 search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                                    (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      optionLabel;\n                                      context: {\n                                        item: nestedOption,\n                                        parentDisabled: isItemEffectivelyDisabled(\n                                          child,\n                                          isItemEffectivelyDisabled(item)\n                                        )\n                                      }\n                                    \" />\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionLabel;\n                          context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n                        \" />\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\"\n      class=\"mr-3\" />\n\n    <span class=\"is-flex-grow-1\">\n      {{ removeCountFromLabel(item.label) }}\n    </span>\n\n    @let count = getOptionCountFn()(value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;box-shadow:none!important}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}input[type=checkbox]{height:14px;width:14px}\n"] }]
         }], ctorParameters: () => [] });
 
 const sortedPoints = (values) => Object.entries(values)