@hestia-earth/ui-components 0.32.12 → 0.32.13

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

@@ -9010,7 +9010,13 @@ const customErrorMessage = {
         name: 'Saplings, depreciated amount per Cycle'
     })}.
     This input should be present in each plantation Cycle in your upload, with the ${code('value')} being the total number of ${code('Saplings')} used divided by the number of possible Cycles in the plantation's lifespan.
-    See the ${externalLink(`${baseUrl()}/upload#oneTimeInputsForPermanentCrops`, 'special upload case')} for more details.`
+    See the ${externalLink(`${baseUrl()}/upload#oneTimeInputsForPermanentCrops`, 'special upload case')} for more details.`,
+    'must be linked to a verified country-level Impact Assessment': ({ params }) => [
+        'This Input must be linked to a country-level verified aggregation, but none could be found.',
+        params?.current ? 'Note: using a verified World aggregation is not valid.' : ''
+    ]
+        .filter(Boolean)
+        .join('\n')
 };
 const requiredPropertyError = (message, error) => {
     const field = message.split("'")[1].replace("'", '');
@@ -9759,7 +9765,7 @@ const focusFirstGroupError = (element) => {
         element.querySelectorAll('.is-group-error-warning')?.[0]);
     return groupError
         ? (() => {
-            groupError.click();
+            !groupError.classList.contains('is-open') && groupError.click();
             setTimeout(() => focusFirstError(groupError.parentElement));
         })()
         : null;
@@ -9803,7 +9809,7 @@ class FilesFormComponent {
         this.nodeUrl = computed(() => nodeLinkEnabled(this.node())
             ? `/${nodeLink({ '@type': this.schemaType(), '@id': this.nodeId() }, nodeDataState({ '@type': this.schemaType(), aggregated: this.node().aggregated }))}`
             : '');
-        this.filteredErrors = computed(() => this.errors().filter(filterError));
+        this.filteredErrors = computed(() => this.errors()?.filter(filterError) ?? []);
         this.nodeError = computed(() => propertyError(this.filteredErrors())(''));
         this.nodeProperty = computed(() => this.schema()
             ? {
@@ -9847,7 +9853,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 } }, 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    <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      <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n    </div>\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      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left\"\n      container=\"body\">\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    <span class=\"is-flex is-size-7 | property-value\">\n      {{ property.value }}\n    </span>\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=\"property-array-number ml-2\">\n                      <div class=\"is-flex is-justify-content-center is-align-items-center has-addons number-tags\">\n                        <span class=\"number-tag\">{{ prop2.key }}</span>\n                      </div>\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 (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}.property-array-number .number-tags{border:1px solid #249da5;border-radius:50%;width:20px;height:20px}.property-array-number .number-tags .number-tag{color:#249da5}.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:30vw}\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"] }], 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 } }, 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    <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      <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n    </div>\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      <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    <span class=\"is-flex is-size-7 | property-value\">\n      {{ property.value }}\n    </span>\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=\"property-array-number ml-2\">\n                      <div class=\"is-flex is-justify-content-center is-align-items-center has-addons number-tags\">\n                        <span class=\"number-tag\">{{ prop2.key }}</span>\n                      </div>\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 (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}.property-array-number .number-tags{border:1px solid #249da5;border-radius:50%;width:20px;height:20px}.property-array-number .number-tags .number-tag{color:#249da5}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
@@ -9861,7 +9867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         SitesMapsComponent,
                         HESvgIconComponent,
                         ClipboardComponent
-                    ], 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    <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      <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n    </div>\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      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left\"\n      container=\"body\">\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    <span class=\"is-flex is-size-7 | property-value\">\n      {{ property.value }}\n    </span>\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=\"property-array-number ml-2\">\n                      <div class=\"is-flex is-justify-content-center is-align-items-center has-addons number-tags\">\n                        <span class=\"number-tag\">{{ prop2.key }}</span>\n                      </div>\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 (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}.property-array-number .number-tags{border:1px solid #249da5;border-radius:50%;width:20px;height:20px}.property-array-number .number-tags .number-tag{color:#249da5}.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:30vw}\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()\" />\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    <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      <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n    </div>\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      <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    <span class=\"is-flex is-size-7 | property-value\">\n      {{ property.value }}\n    </span>\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=\"property-array-number ml-2\">\n                      <div class=\"is-flex is-justify-content-center is-align-items-center has-addons number-tags\">\n                        <span class=\"number-tag\">{{ prop2.key }}</span>\n                      </div>\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 (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}.property-array-number .number-tags{border:1px solid #249da5;border-radius:50%;width:20px;height:20px}.property-array-number .number-tags .number-tag{color:#249da5}.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"] }]
         }] });
 
 class SchemaInfoComponent {
@@ -9943,7 +9949,7 @@ class FilesFormEditableComponent {
         this.SchemaType = SchemaType;
         this.formatPropertyError = formatPropertyError;
         this.typeaheadFocus = typeaheadFocus;
-        this.filteredErrors = computed(() => this.errors().filter(filterError));
+        this.filteredErrors = computed(() => this.errors()?.filter(filterError) ?? []);
         this.nodeError = computed(() => propertyError(this.filteredErrors())(''));
         this.nodeProperty = computed(() => this.schema()
             ? {
@@ -10286,6 +10292,7 @@ var ErrorKeys;
     ErrorKeys["PropertyInternal"] = "property-internal";
     ErrorKeys["UploadsLimit"] = "upload-limit";
     ErrorKeys["NestedHeaders"] = "nested-headers";
+    ErrorKeys["NestedNodes"] = "nested-nodes";
     ErrorKeys["ReferenceExistingHeaders"] = "reference-existing-headers";
     ErrorKeys["MaxSize"] = "max-size";
     ErrorKeys["MaxRows"] = "max-rows";
@@ -10351,6 +10358,21 @@ class FilesUploadErrorsComponent {
         this.columns = signal([]);
         this.headers = signal([]);
         this.rows = signal([]);
+        this.sampleLinkedNodes = [
+            {
+                type: NodeType.Source,
+                id: 'source',
+                bibliography: { type: SchemaType.Bibliography, title: 'The title' }
+            },
+            {
+                type: NodeType.Cycle,
+                id: 'cycle',
+                defaultSource: {
+                    type: NodeType.Source,
+                    id: 'source'
+                }
+            }
+        ];
         effect(() => {
             this.columns.set((this.error()?.headers || []).map(header => ({
                 ...header,
@@ -10373,11 +10395,11 @@ class FilesUploadErrorsComponent {
         return value !== firstVal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesUploadErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesUploadErrorsComponent, isStandalone: true, selector: "he-files-upload-errors", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n  <div class=\"has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <div>\n          <span>\n            Uploading data with\n            <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n            is not allowed.\n          </span>\n          <span class=\"is-pl-1\">\n            Please try uploading with\n            <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n            instead.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <div>\n          <p>The uploaded content does not appear to contain valid JSON data:</p>\n          <div class=\"is-mt-2\">\n            <pre><code>{{error().error}}</code></pre>\n          </div>\n          <p>\n            Please validate your JSON content before uploading it using an\n            <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n            for example.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NoData) {\n        <div class=\"is-mb-2\">\n          <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"is-mb-2\">\n          <div class=\"notification is-danger\" role=\"alert\">\n            <p>\n              <he-svg-icon name=\"exclamation-triangle\" />\n              <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n              <span class=\"px-1\">Please refer to the</span>\n              <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n              <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n            </p>\n            <ng-container *ngTemplateOutlet=\"defaultError\" />\n          </div>\n          <div class=\"is-mb-2\">\n            <pre><code>{{error().key}}</code></pre>\n          </div>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span>\n              The following value in the column\n              <i>{{ error().key }}</i>\n              is not in the correct format:\n            </span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n          </div>\n          @switch (hasNumberWithCommasError()) {\n            @case (true) {\n              <p class=\"is-mt-2\">\n                Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n                number from the fractional part of the number.\n              </p>\n              <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n              <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n              <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n              <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n            }\n            @case (false) {\n              <ng-container *ngTemplateOutlet=\"schemaError\" />\n              <p>The error could either be a value in the column, or an error with the column header.</p>\n              <p>\n                If you are trying to set no data, we accept either\n                <code>-</code>\n                or an empty cell.\n              </p>\n            }\n          }\n        </div>\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The following field is required in the</span>\n            @if (error().schema) {\n              <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n            }\n            <span>schema:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n          </div>\n          <p>\n            @switch (error().property) {\n              @case ('id') {\n                <span>\n                  You must assign a unique\n                  <code>id</code>\n                  for every record in your data.\n                </span>\n              }\n              @case ('type') {\n                <span>\n                  Every record in your data must contain a\n                  <code>type</code>\n                  .\n                </span>\n              }\n            }\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">\n              The following field is\n              <code>internal</code>\n              in the\n            </span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n            <span>:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n          </div>\n          <p>\n            You cannot upload\n            <code>internal</code>\n            fields to HESTIA.\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        <div class=\"is-mb-2\">\n          @if (error().key) {\n            <div class=\"is-mb-2\">\n              <span>The following Node does not exist in the schema:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n            </div>\n          } @else if (error().schema) {\n            <div class=\"is-mb-2\">\n              <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n            </div>\n          }\n          <p>\n            <span>The list of accepted values is:</span>\n          </p>\n          <div class=\"content\">\n            <ul>\n              @for (type of nodeTypes; track type) {\n                <li>\n                  <i>{{ type }}</i>\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <div class=\"is-mb-2\">\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div class=\"is-mb-2\">\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </div>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n            begining of the file and try uploading again.\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The Excel sheet</span>\n            <code>{{ error().value }}</code>\n            <span class=\"pl-1\">does not exist.</span>\n            <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n            <ul class=\"mt-1 content is-list-style-disc pl-5\">\n              @for (e of error().error.split(';'); track e) {\n                <li>\n                  <code>{{ e }}</code>\n                </li>\n              }\n            </ul>\n          </div>\n          <p>\n            <span>Please re-upload selecting one of the sheets above.</span>\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <div class=\"is-mb-2\">\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div class=\"is-mb-2\">\n          <div>\n            <span class=\"is-pr-1\">You have multiple</span>\n            <code>{{ error().schema | pluralize }}</code>\n            <span class=\"is-px-1\">with the same</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-px-1\">but different data. The</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">is:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n          </div>\n          <p class=\"is-mt-2 is-italic\">\n            <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">unique.</span>\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <div class=\"is-mb-2\">\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </div>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            To link nodes together, you first need to define the node (e.g.,\n            <code>source.id</code>\n            ,\n            <code>source.bibliography.title</code>\n            ) and then create the link (e.g.,\n            <code>cycle.defaultSource.id</code>\n            ). We do not allow nesting (e.g.,\n            <code>cycle.defaultSource.bibliography.title</code>\n            ).\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            You have used the internal\n            <code>&#64;id</code>\n            field to upload a new Node.\n          </p>\n          <p>\n            The\n            <code>&#64;id</code>\n            field should only be used to reference existing Node or Terms. Example:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div class=\"is-mb-2\">\n          <p>The column header {{ error().key }} must use the array format. Examples:</p>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n          <ng-container *ngTemplateOutlet=\"schemaError\" />\n        </div>\n      }\n      @case (ErrorKeys.MaxSize) {\n        <div class=\"is-mb-2\">\n          <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n          <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n        </div>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <div class=\"is-mb-2\">\n          <span>\n            Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n            bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <div class=\"is-mb-2\">\n          <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @case (ErrorKeys.Timeout) {\n        <div class=\"is-mb-2\">\n          <p>Time exceeded for current step.</p>\n\n          @if (debug()) {\n            <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @default {\n        <div class=\"is-mb-2\">\n          <p>{{ message() }}</p>\n\n          @if (debug()) {\n            <pre><code>{{ error() | json }}</code></pre>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div class=\"is-mb-2\">\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div class=\"my-3\">\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div class=\"my-3\">\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div class=\"is-my-2\">\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <div class=\"is-my-2\">\n        <b>Preview:</b>\n        <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p class=\"is-mt-2\">\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesUploadErrorsComponent, isStandalone: true, selector: "he-files-upload-errors", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n  <div class=\"has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <div>\n          <span>\n            Uploading data with\n            <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n            is not allowed.\n          </span>\n          <span class=\"is-pl-1\">\n            Please try uploading with\n            <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n            instead.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <div>\n          <p>The uploaded content does not appear to contain valid JSON data:</p>\n          <div class=\"is-mt-2\">\n            <pre><code>{{error().error}}</code></pre>\n          </div>\n          <p>\n            Please validate your JSON content before uploading it using an\n            <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n            for example.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NoData) {\n        <div class=\"is-mb-2\">\n          <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"is-mb-2\">\n          <div class=\"notification is-danger\" role=\"alert\">\n            <p>\n              <he-svg-icon name=\"exclamation-triangle\" />\n              <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n              <span class=\"px-1\">Please refer to the</span>\n              <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n              <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n            </p>\n            <ng-container *ngTemplateOutlet=\"defaultError\" />\n          </div>\n          <div class=\"is-mb-2\">\n            <pre><code>{{error().key}}</code></pre>\n          </div>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span>\n              The following value in the column\n              <i>{{ error().key }}</i>\n              is not in the correct format:\n            </span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n          </div>\n          @switch (hasNumberWithCommasError()) {\n            @case (true) {\n              <p class=\"is-mt-2\">\n                Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n                number from the fractional part of the number.\n              </p>\n              <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n              <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n              <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n              <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n            }\n            @case (false) {\n              <ng-container *ngTemplateOutlet=\"schemaError\" />\n              <p>The error could either be a value in the column, or an error with the column header.</p>\n              <p>\n                If you are trying to set no data, we accept either\n                <code>-</code>\n                or an empty cell.\n              </p>\n            }\n          }\n        </div>\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The following field is required in the</span>\n            @if (error().schema) {\n              <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n            }\n            <span>schema:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n          </div>\n          <p>\n            @switch (error().property) {\n              @case ('id') {\n                <span>\n                  You must assign a unique\n                  <code>id</code>\n                  for every record in your data.\n                </span>\n              }\n              @case ('type') {\n                <span>\n                  Every record in your data must contain a\n                  <code>type</code>\n                  .\n                </span>\n              }\n            }\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">\n              The following field is\n              <code>internal</code>\n              in the\n            </span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n            <span>:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n          </div>\n          <p>\n            You cannot upload\n            <code>internal</code>\n            fields to HESTIA.\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        <div class=\"is-mb-2\">\n          @if (error().key) {\n            <div class=\"is-mb-2\">\n              <span>The following Node does not exist in the schema:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n            </div>\n          } @else if (error().schema) {\n            <div class=\"is-mb-2\">\n              <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n            </div>\n          }\n          <p>\n            <span>The list of accepted values is:</span>\n          </p>\n          <div class=\"content\">\n            <ul>\n              @for (type of nodeTypes; track type) {\n                <li>\n                  <i>{{ type }}</i>\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <div class=\"is-mb-2\">\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div class=\"is-mb-2\">\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </div>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n            begining of the file and try uploading again.\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The Excel sheet</span>\n            <code>{{ error().value }}</code>\n            <span class=\"pl-1\">does not exist.</span>\n            <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n            <ul class=\"mt-1 content is-list-style-disc pl-5\">\n              @for (e of error().error.split(';'); track e) {\n                <li>\n                  <code>{{ e }}</code>\n                </li>\n              }\n            </ul>\n          </div>\n          <p>\n            <span>Please re-upload selecting one of the sheets above.</span>\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <div class=\"is-mb-2\">\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div class=\"is-mb-2\">\n          <div>\n            <span class=\"is-pr-1\">You have multiple</span>\n            <code>{{ error().schema | pluralize }}</code>\n            <span class=\"is-px-1\">with the same</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-px-1\">but different data. The</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">is:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n          </div>\n          <p class=\"is-mt-2 is-italic\">\n            <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">unique.</span>\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <div class=\"is-mb-2\">\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </div>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            To link nodes together, you first need to define the node (e.g.,\n            <code>source.id</code>\n            ,\n            <code>source.bibliography.title</code>\n            ) and then create the link (e.g.,\n            <code>cycle.defaultSource.id</code>\n            ). We do not allow nesting (e.g.,\n            <code>cycle.defaultSource.bibliography.title</code>\n            ).\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NestedNodes) {\n        <div class=\"is-mb-2\">\n          <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n          <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            You have used the internal\n            <code>&#64;id</code>\n            field to upload a new Node.\n          </p>\n          <p>\n            The\n            <code>&#64;id</code>\n            field should only be used to reference existing Node or Terms. Example:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div class=\"is-mb-2\">\n          <p>The column header {{ error().key }} must use the array format. Examples:</p>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n          <ng-container *ngTemplateOutlet=\"schemaError\" />\n        </div>\n      }\n      @case (ErrorKeys.MaxSize) {\n        <div class=\"is-mb-2\">\n          <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n          <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n        </div>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <div class=\"is-mb-2\">\n          <span>\n            Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n            bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <div class=\"is-mb-2\">\n          <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @case (ErrorKeys.Timeout) {\n        <div class=\"is-mb-2\">\n          <p>Time exceeded for current step.</p>\n\n          @if (debug()) {\n            <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @default {\n        <div class=\"is-mb-2\">\n          <p>{{ message() }}</p>\n\n          @if (debug()) {\n            <pre><code>{{ error() | json }}</code></pre>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div class=\"is-mb-2\">\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div class=\"my-3\">\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div class=\"my-3\">\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div class=\"is-my-2\">\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <div class=\"is-my-2\">\n        <b>Preview:</b>\n        <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p class=\"is-mt-2\">\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesUploadErrorsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent, DecimalPipe, JsonPipe, EllipsisPipe, PluralizePipe], template: "@if (error()) {\n  <div class=\"has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <div>\n          <span>\n            Uploading data with\n            <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n            is not allowed.\n          </span>\n          <span class=\"is-pl-1\">\n            Please try uploading with\n            <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n            instead.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <div>\n          <p>The uploaded content does not appear to contain valid JSON data:</p>\n          <div class=\"is-mt-2\">\n            <pre><code>{{error().error}}</code></pre>\n          </div>\n          <p>\n            Please validate your JSON content before uploading it using an\n            <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n            for example.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NoData) {\n        <div class=\"is-mb-2\">\n          <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"is-mb-2\">\n          <div class=\"notification is-danger\" role=\"alert\">\n            <p>\n              <he-svg-icon name=\"exclamation-triangle\" />\n              <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n              <span class=\"px-1\">Please refer to the</span>\n              <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n              <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n            </p>\n            <ng-container *ngTemplateOutlet=\"defaultError\" />\n          </div>\n          <div class=\"is-mb-2\">\n            <pre><code>{{error().key}}</code></pre>\n          </div>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span>\n              The following value in the column\n              <i>{{ error().key }}</i>\n              is not in the correct format:\n            </span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n          </div>\n          @switch (hasNumberWithCommasError()) {\n            @case (true) {\n              <p class=\"is-mt-2\">\n                Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n                number from the fractional part of the number.\n              </p>\n              <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n              <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n              <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n              <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n            }\n            @case (false) {\n              <ng-container *ngTemplateOutlet=\"schemaError\" />\n              <p>The error could either be a value in the column, or an error with the column header.</p>\n              <p>\n                If you are trying to set no data, we accept either\n                <code>-</code>\n                or an empty cell.\n              </p>\n            }\n          }\n        </div>\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The following field is required in the</span>\n            @if (error().schema) {\n              <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n            }\n            <span>schema:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n          </div>\n          <p>\n            @switch (error().property) {\n              @case ('id') {\n                <span>\n                  You must assign a unique\n                  <code>id</code>\n                  for every record in your data.\n                </span>\n              }\n              @case ('type') {\n                <span>\n                  Every record in your data must contain a\n                  <code>type</code>\n                  .\n                </span>\n              }\n            }\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">\n              The following field is\n              <code>internal</code>\n              in the\n            </span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n            <span>:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n          </div>\n          <p>\n            You cannot upload\n            <code>internal</code>\n            fields to HESTIA.\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        <div class=\"is-mb-2\">\n          @if (error().key) {\n            <div class=\"is-mb-2\">\n              <span>The following Node does not exist in the schema:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n            </div>\n          } @else if (error().schema) {\n            <div class=\"is-mb-2\">\n              <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n            </div>\n          }\n          <p>\n            <span>The list of accepted values is:</span>\n          </p>\n          <div class=\"content\">\n            <ul>\n              @for (type of nodeTypes; track type) {\n                <li>\n                  <i>{{ type }}</i>\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <div class=\"is-mb-2\">\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div class=\"is-mb-2\">\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </div>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n            begining of the file and try uploading again.\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The Excel sheet</span>\n            <code>{{ error().value }}</code>\n            <span class=\"pl-1\">does not exist.</span>\n            <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n            <ul class=\"mt-1 content is-list-style-disc pl-5\">\n              @for (e of error().error.split(';'); track e) {\n                <li>\n                  <code>{{ e }}</code>\n                </li>\n              }\n            </ul>\n          </div>\n          <p>\n            <span>Please re-upload selecting one of the sheets above.</span>\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <div class=\"is-mb-2\">\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div class=\"is-mb-2\">\n          <div>\n            <span class=\"is-pr-1\">You have multiple</span>\n            <code>{{ error().schema | pluralize }}</code>\n            <span class=\"is-px-1\">with the same</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-px-1\">but different data. The</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">is:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n          </div>\n          <p class=\"is-mt-2 is-italic\">\n            <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">unique.</span>\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <div class=\"is-mb-2\">\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </div>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            To link nodes together, you first need to define the node (e.g.,\n            <code>source.id</code>\n            ,\n            <code>source.bibliography.title</code>\n            ) and then create the link (e.g.,\n            <code>cycle.defaultSource.id</code>\n            ). We do not allow nesting (e.g.,\n            <code>cycle.defaultSource.bibliography.title</code>\n            ).\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            You have used the internal\n            <code>&#64;id</code>\n            field to upload a new Node.\n          </p>\n          <p>\n            The\n            <code>&#64;id</code>\n            field should only be used to reference existing Node or Terms. Example:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div class=\"is-mb-2\">\n          <p>The column header {{ error().key }} must use the array format. Examples:</p>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n          <ng-container *ngTemplateOutlet=\"schemaError\" />\n        </div>\n      }\n      @case (ErrorKeys.MaxSize) {\n        <div class=\"is-mb-2\">\n          <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n          <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n        </div>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <div class=\"is-mb-2\">\n          <span>\n            Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n            bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <div class=\"is-mb-2\">\n          <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @case (ErrorKeys.Timeout) {\n        <div class=\"is-mb-2\">\n          <p>Time exceeded for current step.</p>\n\n          @if (debug()) {\n            <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @default {\n        <div class=\"is-mb-2\">\n          <p>{{ message() }}</p>\n\n          @if (debug()) {\n            <pre><code>{{ error() | json }}</code></pre>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div class=\"is-mb-2\">\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div class=\"my-3\">\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div class=\"my-3\">\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div class=\"is-my-2\">\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <div class=\"is-my-2\">\n        <b>Preview:</b>\n        <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p class=\"is-mt-2\">\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent, DecimalPipe, JsonPipe, EllipsisPipe, PluralizePipe], template: "@if (error()) {\n  <div class=\"has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <div>\n          <span>\n            Uploading data with\n            <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n            is not allowed.\n          </span>\n          <span class=\"is-pl-1\">\n            Please try uploading with\n            <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n            instead.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <div>\n          <p>The uploaded content does not appear to contain valid JSON data:</p>\n          <div class=\"is-mt-2\">\n            <pre><code>{{error().error}}</code></pre>\n          </div>\n          <p>\n            Please validate your JSON content before uploading it using an\n            <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n            for example.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NoData) {\n        <div class=\"is-mb-2\">\n          <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"is-mb-2\">\n          <div class=\"notification is-danger\" role=\"alert\">\n            <p>\n              <he-svg-icon name=\"exclamation-triangle\" />\n              <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n              <span class=\"px-1\">Please refer to the</span>\n              <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n              <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n            </p>\n            <ng-container *ngTemplateOutlet=\"defaultError\" />\n          </div>\n          <div class=\"is-mb-2\">\n            <pre><code>{{error().key}}</code></pre>\n          </div>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span>\n              The following value in the column\n              <i>{{ error().key }}</i>\n              is not in the correct format:\n            </span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n          </div>\n          @switch (hasNumberWithCommasError()) {\n            @case (true) {\n              <p class=\"is-mt-2\">\n                Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n                number from the fractional part of the number.\n              </p>\n              <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n              <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n              <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n              <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n            }\n            @case (false) {\n              <ng-container *ngTemplateOutlet=\"schemaError\" />\n              <p>The error could either be a value in the column, or an error with the column header.</p>\n              <p>\n                If you are trying to set no data, we accept either\n                <code>-</code>\n                or an empty cell.\n              </p>\n            }\n          }\n        </div>\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The following field is required in the</span>\n            @if (error().schema) {\n              <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n            }\n            <span>schema:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n          </div>\n          <p>\n            @switch (error().property) {\n              @case ('id') {\n                <span>\n                  You must assign a unique\n                  <code>id</code>\n                  for every record in your data.\n                </span>\n              }\n              @case ('type') {\n                <span>\n                  Every record in your data must contain a\n                  <code>type</code>\n                  .\n                </span>\n              }\n            }\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">\n              The following field is\n              <code>internal</code>\n              in the\n            </span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n            <span>:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n          </div>\n          <p>\n            You cannot upload\n            <code>internal</code>\n            fields to HESTIA.\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        <div class=\"is-mb-2\">\n          @if (error().key) {\n            <div class=\"is-mb-2\">\n              <span>The following Node does not exist in the schema:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n            </div>\n          } @else if (error().schema) {\n            <div class=\"is-mb-2\">\n              <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n            </div>\n          }\n          <p>\n            <span>The list of accepted values is:</span>\n          </p>\n          <div class=\"content\">\n            <ul>\n              @for (type of nodeTypes; track type) {\n                <li>\n                  <i>{{ type }}</i>\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <div class=\"is-mb-2\">\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div class=\"is-mb-2\">\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </div>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n            begining of the file and try uploading again.\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <div class=\"is-mb-2\">\n          <div class=\"is-mb-2\">\n            <span class=\"pr-1\">The Excel sheet</span>\n            <code>{{ error().value }}</code>\n            <span class=\"pl-1\">does not exist.</span>\n            <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n            <ul class=\"mt-1 content is-list-style-disc pl-5\">\n              @for (e of error().error.split(';'); track e) {\n                <li>\n                  <code>{{ e }}</code>\n                </li>\n              }\n            </ul>\n          </div>\n          <p>\n            <span>Please re-upload selecting one of the sheets above.</span>\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <div class=\"is-mb-2\">\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div class=\"is-mb-2\">\n          <div>\n            <span class=\"is-pr-1\">You have multiple</span>\n            <code>{{ error().schema | pluralize }}</code>\n            <span class=\"is-px-1\">with the same</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-px-1\">but different data. The</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">is:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n          </div>\n          <p class=\"is-mt-2 is-italic\">\n            <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">unique.</span>\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <div class=\"is-mb-2\">\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </div>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            To link nodes together, you first need to define the node (e.g.,\n            <code>source.id</code>\n            ,\n            <code>source.bibliography.title</code>\n            ) and then create the link (e.g.,\n            <code>cycle.defaultSource.id</code>\n            ). We do not allow nesting (e.g.,\n            <code>cycle.defaultSource.bibliography.title</code>\n            ).\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NestedNodes) {\n        <div class=\"is-mb-2\">\n          <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n          <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <div class=\"is-mb-2\">\n          <p>\n            You have used the internal\n            <code>&#64;id</code>\n            field to upload a new Node.\n          </p>\n          <p>\n            The\n            <code>&#64;id</code>\n            field should only be used to reference existing Node or Terms. Example:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div class=\"is-mb-2\">\n          <p>The column header {{ error().key }} must use the array format. Examples:</p>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n          <ng-container *ngTemplateOutlet=\"schemaError\" />\n        </div>\n      }\n      @case (ErrorKeys.MaxSize) {\n        <div class=\"is-mb-2\">\n          <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n          <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n        </div>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <div class=\"is-mb-2\">\n          <span>\n            Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n            bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <div class=\"is-mb-2\">\n          <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @case (ErrorKeys.Timeout) {\n        <div class=\"is-mb-2\">\n          <p>Time exceeded for current step.</p>\n\n          @if (debug()) {\n            <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @default {\n        <div class=\"is-mb-2\">\n          <p>{{ message() }}</p>\n\n          @if (debug()) {\n            <pre><code>{{ error() | json }}</code></pre>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div class=\"is-mb-2\">\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div class=\"my-3\">\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div class=\"my-3\">\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div class=\"is-my-2\">\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <div class=\"is-my-2\">\n        <b>Preview:</b>\n        <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p class=\"is-mt-2\">\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
 const nodeTerm = (node, key) => {