@hestia-earth/ui-components 0.33.13 → 0.33.14

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

@@ -15,7 +15,7 @@ import * as i1$3 from 'angular-svg-icon';
 import { SvgIconComponent, AngularSvgIconModule } from 'angular-svg-icon';
 import merge from 'lodash.merge';
 import Chart, { Chart as Chart$1 } from 'chart.js';
-import { getPercentileValue, toPrecision, isEmpty, unique, monthsBefore, isNumber, isUndefined, toComma, keyToLabel, isEqual as isEqual$2, sum, toDashCase, diffInDays } from '@hestia-earth/utils';
+import { toPrecision, toComma, isUndefined, isNumber, getPercentileValue, isEmpty, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, sum, toDashCase, diffInDays } from '@hestia-earth/utils';
 import Gradient from 'javascript-color-gradient';
 import { ShadeGenerator } from 'shade-generator/dist/shadeGenerator';
 import { select, selectAll } from 'd3-selection';
@@ -767,6 +767,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'he-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
         }] });
 
+const parsePrecision = (value, precision) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
+const transform = (value, precision = 3, enableComma = true) => typeof value !== 'boolean' && !isUndefined(value) && isNumber(value)
+    ? `${(enableComma ? toComma : v => v)(parsePrecision(value, precision))}`.replace(/\.00$/, '')
+    : value;
+class PrecisionPipe {
+    transform(value, precision = 3, enableComma = true) {
+        return transform(value, precision, enableComma);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, isStandalone: true, name: "precision" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'precision',
+                    standalone: true
+                }]
+        }] });
+
 const colors = {
     darkBlue: 'rgba(25, 57, 87, 1)',
     lightBlue: 'rgba(132, 160, 220, 1)'
@@ -892,8 +911,8 @@ class DistributionChartComponent {
                                 userCallback: (label) => label
                                     .split(joinXLabel)
                                     .map(parseFloat)
-                                    .map(v => toPrecision(v, 2))
-                                    .map(v => v.toExponential())
+                                    .map(v => transform(v, 3, true))
+                                    // .map(v => v.toExponential())
                                     .join('-')
                             },
                             scaleLabel: {
@@ -2332,25 +2351,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'he-blank-node-state-notice', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (show()) {\n  <p class=\"is-size-7 is-italic\">\n    <span class=\"pl-1 notice-data-unchaged\">\u2020 Data uploaded by the user</span>\n    <span class=\"pl-1 notice-data-added\">* Data added by HESTIA</span>\n    <span class=\"pl-1 notice-data-updated\">** Data updated by HESTIA</span>\n    @if (showDeleted()) {\n      <span class=\"pl-1 notice-data-deleted\">**** Data deleted by HESTIA</span>\n    }\n  </p>\n}\n" }]
         }] });
 
-const parsePrecision = (value, precision) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
-const transform = (value, precision = 3, enableComma = true) => typeof value !== 'boolean' && !isUndefined(value) && isNumber(value)
-    ? `${(enableComma ? toComma : v => v)(parsePrecision(value, precision))}`.replace(/\.00$/, '')
-    : value;
-class PrecisionPipe {
-    transform(value, precision = 3, enableComma = true) {
-        return transform(value, precision, enableComma);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, isStandalone: true, name: "precision" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'precision',
-                    standalone: true
-                }]
-        }] });
-
 class BlankNodeValueDeltaComponent {
     constructor() {
         this.value = input();
@@ -7436,7 +7436,7 @@ class NodeLogsModelsComponent {
         return subValues.every(v => v.configModels.some(vv => vv.status === LogStatus.success));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeLogsModelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: true, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\n    </div>\n  }\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            @if (enableFilterByTerm()) {\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    class=\"input search-input is-small\"\n                    [ngModel]=\"term()\"\n                    name=\"term\"\n                    placeholder=\"Select entry by name\"\n                    [ngbTypeahead]=\"suggestTerm\"\n                    [focusFirst]=\"true\"\n                    (focus)=\"typeaheadFocus($event)\"\n                    (selectItem)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n                <td class=\"width-auto has-border-right is-nowrap\">\n                  <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"selector\"\n              [ngModel]=\"onlyRequired\"\n              (change)=\"onlyRequired.set($event.target.checked)\"\n              [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    autoClose=\"outside\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #6c8093}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#6c809333;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: true, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\n    </div>\n  }\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            @if (enableFilterByTerm()) {\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    class=\"input search-input is-small\"\n                    [ngModel]=\"term()\"\n                    name=\"term\"\n                    placeholder=\"Select entry by name\"\n                    [ngbTypeahead]=\"suggestTerm\"\n                    [focusFirst]=\"true\"\n                    (focus)=\"typeaheadFocus($event)\"\n                    (selectItem)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n                <td class=\"width-auto has-border-right is-nowrap\">\n                  <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"selector\"\n              [ngModel]=\"onlyRequired\"\n              (change)=\"onlyRequired.set($event.target.checked)\"\n              [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    autoClose=\"outside\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
             type: Component$1,
@@ -7460,7 +7460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NodeLogsModelsLogsStatusComponent,
                         HESvgIconComponent,
                         GuideOverlayComponent
-                    ], template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\n    </div>\n  }\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            @if (enableFilterByTerm()) {\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    class=\"input search-input is-small\"\n                    [ngModel]=\"term()\"\n                    name=\"term\"\n                    placeholder=\"Select entry by name\"\n                    [ngbTypeahead]=\"suggestTerm\"\n                    [focusFirst]=\"true\"\n                    (focus)=\"typeaheadFocus($event)\"\n                    (selectItem)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n                <td class=\"width-auto has-border-right is-nowrap\">\n                  <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"selector\"\n              [ngModel]=\"onlyRequired\"\n              (change)=\"onlyRequired.set($event.target.checked)\"\n              [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    autoClose=\"outside\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #6c8093}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#6c809333;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
+                    ], template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\n    </div>\n  }\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            @if (enableFilterByTerm()) {\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    class=\"input search-input is-small\"\n                    [ngModel]=\"term()\"\n                    name=\"term\"\n                    placeholder=\"Select entry by name\"\n                    [ngbTypeahead]=\"suggestTerm\"\n                    [focusFirst]=\"true\"\n                    (focus)=\"typeaheadFocus($event)\"\n                    (selectItem)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n                <td class=\"width-auto has-border-right is-nowrap\">\n                  <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"selector\"\n              [ngModel]=\"onlyRequired\"\n              (change)=\"onlyRequired.set($event.target.checked)\"\n              [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    autoClose=\"outside\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
         }] });
 
 var View$3;
@@ -10491,7 +10491,7 @@ class FilesFormComponent {
         return focusFirstError(this.ref.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-my-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-items-center is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{\n        classes\n      }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning\" />\n      }\n      <div [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#f14668}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#f14668}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#e13939!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-my-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n      <div class=\"is-flex is-flex-grow-1\" [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
@@ -10507,7 +10507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         ClipboardComponent,
                         GuideOverlayComponent,
                         EllipsisPipe
-                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-my-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-items-center is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{\n        classes\n      }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning\" />\n      }\n      <div [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#f14668}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#f14668}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#e13939!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
+                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-my-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n      <div class=\"is-flex is-flex-grow-1\" [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
         }] });
 
 class SchemaInfoComponent {
@@ -10876,7 +10876,7 @@ class FilesFormEditableComponent {
         return this.propertyChanged(value, array);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormEditableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormEditableComponent, isStandalone: true, selector: "he-files-form-editable", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, nodeMap: { classPropertyName: "nodeMap", publicName: "nodeMap", isSignal: true, isRequired: false, transformFunction: null }, showSuggestedDefaultProperties: { classPropertyName: "showSuggestedDefaultProperties", publicName: "showSuggestedDefaultProperties", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeChanged: "nodeChanged" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{ property.key }}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    <div\n      class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\">\n      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\n              <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    property.schema?.description && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\n          [class.is-danger]=\"!property.changed && property.hasError\"\n          [class.is-warning]=\"!property.changed && property.hasWarning\"\n          [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n          <div\n            class=\"open-group panel-heading py-0\"\n            (click)=\"property.isOpen = !property.isOpen\"\n            pointer\n            [class.is-open]=\"property.isOpen\"\n            [class.has-text-white]=\"property.hasError || property.hasWarning\">\n            <div class=\"columns is-mobile is-vcentered is-multiline\">\n              <span class=\"column is-narrow py-1 my-0\">\n                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span class=\"column is-narrow py-1 my-0\">\n                  <span class=\"tags mb-0 has-addons\">\n                    <span class=\"tag mb-0 is-light\">Type</span>\n                    <span class=\"tag mb-0 is-white\">\n                      <he-schema-version-link linkClass=\"is-small\" [node]=\"{ '@type': property.schemaType }\">\n                        <span>{{ property.schemaType }}</span>\n                      </he-schema-version-link>\n                    </span>\n                  </span>\n                </span>\n              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\n                ngbTooltip=\"Remove group\"\n                placement=\"top\"\n                [message]=\"\n                  '<p>This will remove the group completely.</p>' +\n                  (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                  '<p>Do you confirm?</p>'\n                \"\n                popoverClass=\"px-3\"\n                (confirmed)=\"propertyChanged(null, property)\">\n                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                        <div class=\"property-array-number\">\n                          <div class=\"tags has-addons\">\n                            <span class=\"tag is-dark\">{{ prop2.key }}</span>\n                            @if (property.editable) {\n                              <span\n                                class=\"tag is-info\"\n                                pointer\n                                (click)=\"duplicateArrayGroup(property, prop2)\"\n                                [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                                placement=\"top\">\n                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\n                              <he-popover-confirm\n                                class=\"tag is-delete\"\n                                [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                                placement=\"top\"\n                                message=\"This will remove the group completely. Do you confirm?\"\n                                position=\"right\"\n                                (confirmed)=\"removeArrayGroup(property, prop2)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div\n        class=\"select is-small is-fullwidth\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        title=\"Remove field\"\n        [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        (click)=\"$event.stopPropagation(); propertyChanged(null, property)\">\n        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (property.externalUrl?.url) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\n                  class=\"input is-small\"\n                  [(ngModel)]=\"property.newProperty\"\n                  [id]=\"property.id + '_new'\"\n                  name=\"randomname\"\n                  placeholder=\"Search and select field from results\"\n                  [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                  [resultTemplate]=\"suggestion\"\n                  [inputFormatter]=\"formatNewProperty\"\n                  [focusFirst]=\"false\"\n                  [editable]=\"false\"\n                  (focus)=\"typeaheadFocus($event)\" />\n              </div>\n              <div class=\"control\">\n                <button\n                  class=\"button is-small\"\n                  type=\"submit\"\n                  [disabled]=\"!property.newProperty || !property.newProperty.name\">\n                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#c91e1e}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["searchChange", "searchSourcesChange", "searchBibliographiesChange", "searchByChange", "closed"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormEditableComponent, isStandalone: true, selector: "he-files-form-editable", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, nodeMap: { classPropertyName: "nodeMap", publicName: "nodeMap", isSignal: true, isRequired: false, transformFunction: null }, showSuggestedDefaultProperties: { classPropertyName: "showSuggestedDefaultProperties", publicName: "showSuggestedDefaultProperties", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeChanged: "nodeChanged" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{ property.key }}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    <div\n      class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\">\n      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\n              <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    property.schema?.description && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\n          [class.is-danger]=\"!property.changed && property.hasError\"\n          [class.is-warning]=\"!property.changed && property.hasWarning\"\n          [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n          <div\n            class=\"open-group panel-heading py-0\"\n            (click)=\"property.isOpen = !property.isOpen\"\n            pointer\n            [class.is-open]=\"property.isOpen\"\n            [class.has-text-white]=\"property.hasError || property.hasWarning\">\n            <div class=\"columns is-mobile is-vcentered is-multiline\">\n              <span class=\"column is-narrow py-1 my-0\">\n                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span class=\"column is-narrow py-1 my-0\">\n                  <span class=\"tags mb-0 has-addons\">\n                    <span class=\"tag mb-0 is-light\">Type</span>\n                    <span class=\"tag mb-0 is-white\">\n                      <he-schema-version-link linkClass=\"is-small\" [node]=\"{ '@type': property.schemaType }\">\n                        <span>{{ property.schemaType }}</span>\n                      </he-schema-version-link>\n                    </span>\n                  </span>\n                </span>\n              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\n                ngbTooltip=\"Remove group\"\n                placement=\"top\"\n                [message]=\"\n                  '<p>This will remove the group completely.</p>' +\n                  (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                  '<p>Do you confirm?</p>'\n                \"\n                popoverClass=\"px-3\"\n                (confirmed)=\"propertyChanged(null, property)\">\n                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                        <div class=\"property-array-number\">\n                          <div class=\"tags has-addons\">\n                            <span class=\"tag is-dark\">{{ prop2.key }}</span>\n                            @if (property.editable) {\n                              <span\n                                class=\"tag is-info\"\n                                pointer\n                                (click)=\"duplicateArrayGroup(property, prop2)\"\n                                [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                                placement=\"top\">\n                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\n                              <he-popover-confirm\n                                class=\"tag is-delete\"\n                                [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                                placement=\"top\"\n                                message=\"This will remove the group completely. Do you confirm?\"\n                                position=\"right\"\n                                (confirmed)=\"removeArrayGroup(property, prop2)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div\n        class=\"select is-small is-fullwidth\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        title=\"Remove field\"\n        [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        (click)=\"$event.stopPropagation(); propertyChanged(null, property)\">\n        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (property.externalUrl?.url) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\n                  class=\"input is-small\"\n                  [(ngModel)]=\"property.newProperty\"\n                  [id]=\"property.id + '_new'\"\n                  name=\"randomname\"\n                  placeholder=\"Search and select field from results\"\n                  [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                  [resultTemplate]=\"suggestion\"\n                  [inputFormatter]=\"formatNewProperty\"\n                  [focusFirst]=\"false\"\n                  [editable]=\"false\"\n                  (focus)=\"typeaheadFocus($event)\" />\n              </div>\n              <div class=\"control\">\n                <button\n                  class=\"button is-small\"\n                  type=\"submit\"\n                  [disabled]=\"!property.newProperty || !property.newProperty.name\">\n                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#ff0514}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["searchChange", "searchSourcesChange", "searchBibliographiesChange", "searchByChange", "closed"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormEditableComponent, decorators: [{
             type: Component$1,
@@ -10898,7 +10898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TagsInputDirective,
                         HESvgIconComponent,
                         GuideOverlayComponent
-                    ], template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{ property.key }}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    <div\n      class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\">\n      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\n              <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    property.schema?.description && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\n          [class.is-danger]=\"!property.changed && property.hasError\"\n          [class.is-warning]=\"!property.changed && property.hasWarning\"\n          [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n          <div\n            class=\"open-group panel-heading py-0\"\n            (click)=\"property.isOpen = !property.isOpen\"\n            pointer\n            [class.is-open]=\"property.isOpen\"\n            [class.has-text-white]=\"property.hasError || property.hasWarning\">\n            <div class=\"columns is-mobile is-vcentered is-multiline\">\n              <span class=\"column is-narrow py-1 my-0\">\n                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span class=\"column is-narrow py-1 my-0\">\n                  <span class=\"tags mb-0 has-addons\">\n                    <span class=\"tag mb-0 is-light\">Type</span>\n                    <span class=\"tag mb-0 is-white\">\n                      <he-schema-version-link linkClass=\"is-small\" [node]=\"{ '@type': property.schemaType }\">\n                        <span>{{ property.schemaType }}</span>\n                      </he-schema-version-link>\n                    </span>\n                  </span>\n                </span>\n              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\n                ngbTooltip=\"Remove group\"\n                placement=\"top\"\n                [message]=\"\n                  '<p>This will remove the group completely.</p>' +\n                  (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                  '<p>Do you confirm?</p>'\n                \"\n                popoverClass=\"px-3\"\n                (confirmed)=\"propertyChanged(null, property)\">\n                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                        <div class=\"property-array-number\">\n                          <div class=\"tags has-addons\">\n                            <span class=\"tag is-dark\">{{ prop2.key }}</span>\n                            @if (property.editable) {\n                              <span\n                                class=\"tag is-info\"\n                                pointer\n                                (click)=\"duplicateArrayGroup(property, prop2)\"\n                                [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                                placement=\"top\">\n                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\n                              <he-popover-confirm\n                                class=\"tag is-delete\"\n                                [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                                placement=\"top\"\n                                message=\"This will remove the group completely. Do you confirm?\"\n                                position=\"right\"\n                                (confirmed)=\"removeArrayGroup(property, prop2)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div\n        class=\"select is-small is-fullwidth\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        title=\"Remove field\"\n        [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        (click)=\"$event.stopPropagation(); propertyChanged(null, property)\">\n        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (property.externalUrl?.url) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\n                  class=\"input is-small\"\n                  [(ngModel)]=\"property.newProperty\"\n                  [id]=\"property.id + '_new'\"\n                  name=\"randomname\"\n                  placeholder=\"Search and select field from results\"\n                  [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                  [resultTemplate]=\"suggestion\"\n                  [inputFormatter]=\"formatNewProperty\"\n                  [focusFirst]=\"false\"\n                  [editable]=\"false\"\n                  (focus)=\"typeaheadFocus($event)\" />\n              </div>\n              <div class=\"control\">\n                <button\n                  class=\"button is-small\"\n                  type=\"submit\"\n                  [disabled]=\"!property.newProperty || !property.newProperty.name\">\n                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#c91e1e}he-sites-maps{height:200px}\n"] }]
+                    ], template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{ property.key }}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    <div\n      class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\">\n      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\n              <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    property.schema?.description && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\n          [class.is-danger]=\"!property.changed && property.hasError\"\n          [class.is-warning]=\"!property.changed && property.hasWarning\"\n          [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n          <div\n            class=\"open-group panel-heading py-0\"\n            (click)=\"property.isOpen = !property.isOpen\"\n            pointer\n            [class.is-open]=\"property.isOpen\"\n            [class.has-text-white]=\"property.hasError || property.hasWarning\">\n            <div class=\"columns is-mobile is-vcentered is-multiline\">\n              <span class=\"column is-narrow py-1 my-0\">\n                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span class=\"column is-narrow py-1 my-0\">\n                  <span class=\"tags mb-0 has-addons\">\n                    <span class=\"tag mb-0 is-light\">Type</span>\n                    <span class=\"tag mb-0 is-white\">\n                      <he-schema-version-link linkClass=\"is-small\" [node]=\"{ '@type': property.schemaType }\">\n                        <span>{{ property.schemaType }}</span>\n                      </he-schema-version-link>\n                    </span>\n                  </span>\n                </span>\n              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\n                ngbTooltip=\"Remove group\"\n                placement=\"top\"\n                [message]=\"\n                  '<p>This will remove the group completely.</p>' +\n                  (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                  '<p>Do you confirm?</p>'\n                \"\n                popoverClass=\"px-3\"\n                (confirmed)=\"propertyChanged(null, property)\">\n                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                        <div class=\"property-array-number\">\n                          <div class=\"tags has-addons\">\n                            <span class=\"tag is-dark\">{{ prop2.key }}</span>\n                            @if (property.editable) {\n                              <span\n                                class=\"tag is-info\"\n                                pointer\n                                (click)=\"duplicateArrayGroup(property, prop2)\"\n                                [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                                placement=\"top\">\n                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\n                              <he-popover-confirm\n                                class=\"tag is-delete\"\n                                [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                                placement=\"top\"\n                                message=\"This will remove the group completely. Do you confirm?\"\n                                position=\"right\"\n                                (confirmed)=\"removeArrayGroup(property, prop2)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div\n        class=\"select is-small is-fullwidth\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        title=\"Remove field\"\n        [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        (click)=\"$event.stopPropagation(); propertyChanged(null, property)\">\n        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (property.externalUrl?.url) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\n                  class=\"input is-small\"\n                  [(ngModel)]=\"property.newProperty\"\n                  [id]=\"property.id + '_new'\"\n                  name=\"randomname\"\n                  placeholder=\"Search and select field from results\"\n                  [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                  [resultTemplate]=\"suggestion\"\n                  [inputFormatter]=\"formatNewProperty\"\n                  [focusFirst]=\"false\"\n                  [editable]=\"false\"\n                  (focus)=\"typeaheadFocus($event)\" />\n              </div>\n              <div class=\"control\">\n                <button\n                  class=\"button is-small\"\n                  type=\"submit\"\n                  [disabled]=\"!property.newProperty || !property.newProperty.name\">\n                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#ff0514}he-sites-maps{height:200px}\n"] }]
         }] });
 
 const nodeTypeToString = (type) => `${type.charAt(0).toLowerCase()}${type.substring(1)}`;
@@ -11115,11 +11115,11 @@ class FilesErrorSummaryItemComponent {
         this.maxLength.set(Math.max(minimumMaxLength, width / 3));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesErrorSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesErrorSummaryItemComponent, isStandalone: true, selector: "he-files-error-summary-item", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: true, transformFunction: null }, resolved: { classPropertyName: "resolved", publicName: "resolved", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resolved: "resolvedChange" }, ngImport: i0, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#f14668}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "directive", type: ResizedDirective, selector: "[resized]", outputs: ["resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesErrorSummaryItemComponent, isStandalone: true, selector: "he-files-error-summary-item", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: true, transformFunction: null }, resolved: { classPropertyName: "resolved", publicName: "resolved", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resolved: "resolvedChange" }, ngImport: i0, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#ff3844}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "directive", type: ResizedDirective, selector: "[resized]", outputs: ["resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesErrorSummaryItemComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-files-error-summary-item', imports: [HESvgIconComponent, EllipsisPipe, PluralizePipe, ResizedDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#f14668}\n"] }]
+            args: [{ selector: 'he-files-error-summary-item', imports: [HESvgIconComponent, EllipsisPipe, PluralizePipe, ResizedDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#ff3844}\n"] }]
         }] });
 
 const filterErrors = (showErrorsOnAutogenerated, nodes = [], errors = []) => errors.filter(({ index }) => showErrorsOnAutogenerated || !nodes?.[index]?.autoGenerated);