@hestia-earth/ui-components 0.41.26 → 0.41.27

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

@@ -5987,7 +5987,7 @@ const lollipopChartPlugin = settings => ({
         if (!chart.data.datasets?.length) {
             return;
         }
-        const { circleRadius, lineWidth, colorFn, isMouseInsideLollipopFn } = {
+        const { circleRadius, lineWidth, colorFn, isMouseInsideLollipopFn, valueFn } = {
             ...defaultLollipopSettings,
             ...(settings ?? {})
         };
@@ -6007,12 +6007,16 @@ const lollipopChartPlugin = settings => ({
                 const { base, x, y } = element;
                 const color = colorFn(element.options, index);
                 const data = dataset.data[index];
-                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x, y }, circleRadius));
-                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
-                circle(ctx, x, y, color, circleRadius);
-                if (Array.isArray(data)) {
-                    lineWidth && line(ctx, base, x, y, color, lineWidth);
-                    circle(ctx, base, y, color, circleRadius);
+                const overrideValue = valueFn?.(dataset, index, chart);
+                const xValue = isUndefined(overrideValue) ? x : chart.scales.x.getPixelForValue(overrideValue);
+                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: xValue, y }, circleRadius));
+                circle(ctx, xValue, y, color, circleRadius);
+                // draw the line between the 2 cricles if necessary
+                Array.isArray(data) && lineWidth && line(ctx, base, x, y, color, lineWidth);
+                // when drawing from the data, draw both ends if its an array
+                if (xValue === null) {
+                    clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
+                    Array.isArray(data) && circle(ctx, base, y, color, circleRadius);
                 }
             });
             ctx.restore();
@@ -10643,6 +10647,14 @@ const formatRule = (rule, path = '', negation = false) => rule?.enum?.length
 const patternErrorKey = (pattern) => `should match pattern "${pattern}"`;
 // set message as empty to not display it
 const customErrorMessage = {
+    'this field is required': ({ dataPath }, _errorCount, allErrors) => {
+        const parts = parseDataPath(dataPath);
+        const key = parts[parts.length - 1];
+        const type = parts[parts.length - 2];
+        return allErrors?.length
+            ? `You are missing the following required field: ${key.label} (for ${type.label}).`
+            : 'This field is required.';
+    },
     'should not be empty': ({ params }) => [
         `Empty ${params.type} are not allowed in HESTIA.`,
         params?.type === NodeType.ImpactAssessment
@@ -11242,7 +11254,7 @@ const formatError = (error, allErrors = []) => error
     : undefined;
 const errorHasError = (error) => error && (error.level === 'error' || !error.level);
 const errorHasWarning = (error) => error && error.level === 'warning';
-const isMissingPropertyError = ({ params }) => !!params && 'missingProperty' in params;
+const isMissingPropertyError = ({ params, message }) => !!params && 'missingProperty' in params;
 const isMissingOneOfError = ({ keyword, schemaPath }) => keyword === 'required' && (schemaPath || '').includes('oneOf');
 const isFailingKeywordError = ({ params }) => !!params && 'failingKeyword' in params;
 const filterError = (error) => [isFailingKeywordError].every(func => !func(error));
@@ -11595,6 +11607,29 @@ const missingPropertyErrors = (node, errors, parent = '') => {
             };
         });
 };
+const requiredPropertyErrors = (node, errors, parent = '') => {
+    const allErrors = errors.filter(error => parentKey(error.dataPath) === parent && error.message === 'this field is required');
+    return allErrors.map(error => {
+        const fullKey = error.dataPath;
+        const missingOneOf = isMissingOneOfError(error);
+        return {
+            id: propertyId(),
+            schemaType: node.type,
+            suggestions: { type: defaultSuggestionType },
+            key: error.dataPath.split('.').pop(),
+            fullKey,
+            value: '',
+            editable: false,
+            error: formatError(error),
+            errorGuidePageId: guidePageId(node.type, error?.message),
+            hasError: missingOneOf ? false : errorHasError(error),
+            hasWarning: missingOneOf || errorHasWarning(error),
+            properties: [],
+            addPropertyEnabled: true,
+            formatter: formatter('')
+        };
+    });
+};
 const propertyFromNode = (schemas, errors, nodeSchema, deepEditable, parent = '', node, parentNode) => (key) => {
     const value = node[key];
     const expandable = isExpandable(value);
@@ -11681,6 +11716,7 @@ const recursiveProperties = (schemas, errors, nodeSchema, deepEditable, parent =
     .filter(key => !ignoreKeys.includes(key))
     .map(propertyFromNode(schemas, errors, nodeSchema, deepEditable, parent, node, parentNode || node))
     .concat(...missingPropertyErrors(node, errors, parent))
+    .concat(...requiredPropertyErrors(node, errors, parent))
     .sort(sortProperties);
 const fullKeyParts = (fullKey) => fullKey.split('.').flatMap(val => {
     if (val.endsWith(']')) {
@@ -12551,6 +12587,7 @@ var FileUploadErrorKeys;
     FileUploadErrorKeys["MaxSize"] = "max-size";
     FileUploadErrorKeys["InvalidBlankNodeHeaders"] = "invalid-blank-node-headers";
     FileUploadErrorKeys["MultipleNodeTypeCase"] = "multiple-nodeType-case";
+    FileUploadErrorKeys["InvalidListIndex"] = "invalid-list-index";
     FileUploadErrorKeys["MaxRows"] = "max-rows";
     FileUploadErrorKeys["Mendeley"] = "'content-type'";
     FileUploadErrorKeys["Timeout"] = "TimeoutError: Timeout has occurred";
@@ -12652,11 +12689,11 @@ class FilesUploadErrorsComponent {
         return value !== firstVal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesUploadErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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=\"is-flex is-flex-direction-column is-gap-8 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-my-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>\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 (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </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>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\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>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div>\n          <div>\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>\n          <div>\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>\n          <div>\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>\n          @if (error().key) {\n            <div>\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>\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>\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\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div>\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>\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>\n          <div>\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>\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div>\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>\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>\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>\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>\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 (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <div>\n          <p>You are using a combination of mixed cases in your headers:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n          <p>\n            Please make sure to always use either\n            <code>impactAssessment</code>\n            or\n            <code>impactassessment</code>\n            , but not both.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <div>\n          <p>\n            You are using both\n            <code>&#64;id</code>\n            (or\n            <code>id</code>\n            ) and\n            <code>name</code>\n            fields to upload an existing Node (e.g., a Term).\n          </p>\n          <p>\n            Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n            Instead, you should only use one of them:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div>\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>\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>\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>\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>\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>\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>\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>\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>\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>\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>\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 + '/guide/guide-file-upload-prepare-file'\" 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"] }, { 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: "21.0.6", 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=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <p>\n          Uploading data with\n          <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n          is not allowed.\n        </p>\n        <p>\n          Please try uploading with\n          <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n          instead.\n        </p>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <p>The uploaded content does not appear to contain valid JSON data:</p>\n        <pre><code>{{error().error}}</code></pre>\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      }\n      @case (ErrorKeys.NoData) {\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      }\n      @case (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </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\n        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" 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        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <p>\n          The following value in the column\n          <i>{{ error().key }}</i>\n          is not in the correct format:\n        </p>\n        <pre><code>{{stringify(error().value)}}</code></pre>\n\n        @switch (hasNumberWithCommasError()) {\n          @case (true) {\n            <p>\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><code>3,510.1</code></pre>\n            <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n            <pre><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      }\n      @case (ErrorKeys.PropertyRequired) {\n        <p>\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        </p>\n        <pre><code>{{error().property}}</code></pre>\n\n        @switch (error().property) {\n          @case ('id') {\n            <p>\n              You must assign a unique\n              <code>id</code>\n              for every record in your data.\n            </p>\n          }\n          @case ('type') {\n            <p>\n              Every record in your data must contain a\n              <code>type</code>\n              .\n            </p>\n          }\n        }\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <p>\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        </p>\n        <pre><code>{{error().schemaKey || error().key}}</code></pre>\n\n        <p>\n          You cannot upload\n          <code>internal</code>\n          fields to HESTIA.\n        </p>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        @if (error().key) {\n          <p>The following Node does not exist in the schema:</p>\n          <pre><code>{{error().key}}</code></pre>\n        } @else if (error().schema) {\n          <p>The following Node Type does not exist in the schema or can not be uploaded directly:</p>\n          <br />\n          <pre><code>{{error().schema}}</code></pre>\n        }\n\n        <p>\n          <span>The list of accepted values is:</span>\n        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (type of nodeTypes; track type) {\n              <li>\n                <i>{{ type }}</i>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <p>\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\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </p>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <p>\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        </p>\n      }\n      @case (ErrorKeys.NoHeaders) {\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      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <p>\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        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (e of error().error.split(';'); track e) {\n              <li>\n                <code>{{ e }}</code>\n              </li>\n            }\n          </ul>\n        </div>\n        <p>Please re-upload selecting one of the sheets above.</p>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <p>Your upload contains duplicated column headers.</p>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <p>\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        </p>\n        <pre><code>{{error().value}}</code></pre>\n\n        <p class=\"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      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <p>\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        </p>\n      }\n      @case (ErrorKeys.NestedHeaders) {\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      }\n      @case (ErrorKeys.NestedNodes) {\n        <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n        <pre><code>{{ sampleLinkedNodes | json }}</code></pre>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\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=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n      }\n      @case (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <p>You are using a combination of mixed cases in your headers:</p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>impactAssessment.id,impactAssessment.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>impactAssessment.id,impactassessment.name</code></pre>\n\n        <p>\n          Please make sure to always use either\n          <code>impactAssessment</code>\n          or\n          <code>impactassessment</code>\n          , but not both.\n        </p>\n      }\n      @case (ErrorKeys.InvalidListIndex) {\n        <p>You have used incorrect indexes for the list of blank nodes:</p>\n        <p class=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.100.term.name</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.1.term.name</code></pre>\n\n        <p>Please make sure to number correctly the list of Blank Nodes in a consecutive order, without gaps.</p>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <p>\n          You are using both\n          <code>&#64;id</code>\n          (or\n          <code>id</code>\n          ) and\n          <code>name</code>\n          fields to upload an existing Node (e.g., a Term).\n        </p>\n        <p>\n          Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n          Instead, you should only use one of them:\n        </p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id</code></pre>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <p>The column header {{ error().key }} must use the array format. Examples:</p>\n        <pre><code>{{ error().key + '.0.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.0.value' }}</code></pre>\n        <pre><code>{{ error().key + '.1.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.1.value' }}</code></pre>\n        <ng-container *ngTemplateOutlet=\"schemaError\" />\n      }\n      @case (ErrorKeys.MaxSize) {\n        <p>\n          The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb). Please\n          re-upload these data in multiple files.\n        </p>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <p>\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        </p>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @case (ErrorKeys.Timeout) {\n        <p>Time exceeded for current step.</p>\n        @if (debug()) {\n          <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @default {\n        <p>{{ message() }}</p>\n        @if (debug()) {\n          <pre><code>{{ error() | json }}</code></pre>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div>\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>\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>\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>\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      <b>Preview:</b>\n      <pre><code>{{stringify(error().node)}}</code></pre>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p>\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" 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>\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"] }, { 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: "21.0.6", 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=\"is-flex is-flex-direction-column is-gap-8 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-my-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>\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 (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </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>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\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>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div>\n          <div>\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>\n          <div>\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>\n          <div>\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>\n          @if (error().key) {\n            <div>\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>\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>\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\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div>\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>\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>\n          <div>\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>\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div>\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>\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>\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>\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>\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 (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <div>\n          <p>You are using a combination of mixed cases in your headers:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n          <p>\n            Please make sure to always use either\n            <code>impactAssessment</code>\n            or\n            <code>impactassessment</code>\n            , but not both.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <div>\n          <p>\n            You are using both\n            <code>&#64;id</code>\n            (or\n            <code>id</code>\n            ) and\n            <code>name</code>\n            fields to upload an existing Node (e.g., a Term).\n          </p>\n          <p>\n            Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n            Instead, you should only use one of them:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div>\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>\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>\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>\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>\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>\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>\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>\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>\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>\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>\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 + '/guide/guide-file-upload-prepare-file'\" 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=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <p>\n          Uploading data with\n          <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n          is not allowed.\n        </p>\n        <p>\n          Please try uploading with\n          <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n          instead.\n        </p>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <p>The uploaded content does not appear to contain valid JSON data:</p>\n        <pre><code>{{error().error}}</code></pre>\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      }\n      @case (ErrorKeys.NoData) {\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      }\n      @case (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </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\n        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" 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        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <p>\n          The following value in the column\n          <i>{{ error().key }}</i>\n          is not in the correct format:\n        </p>\n        <pre><code>{{stringify(error().value)}}</code></pre>\n\n        @switch (hasNumberWithCommasError()) {\n          @case (true) {\n            <p>\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><code>3,510.1</code></pre>\n            <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n            <pre><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      }\n      @case (ErrorKeys.PropertyRequired) {\n        <p>\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        </p>\n        <pre><code>{{error().property}}</code></pre>\n\n        @switch (error().property) {\n          @case ('id') {\n            <p>\n              You must assign a unique\n              <code>id</code>\n              for every record in your data.\n            </p>\n          }\n          @case ('type') {\n            <p>\n              Every record in your data must contain a\n              <code>type</code>\n              .\n            </p>\n          }\n        }\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <p>\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        </p>\n        <pre><code>{{error().schemaKey || error().key}}</code></pre>\n\n        <p>\n          You cannot upload\n          <code>internal</code>\n          fields to HESTIA.\n        </p>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        @if (error().key) {\n          <p>The following Node does not exist in the schema:</p>\n          <pre><code>{{error().key}}</code></pre>\n        } @else if (error().schema) {\n          <p>The following Node Type does not exist in the schema or can not be uploaded directly:</p>\n          <br />\n          <pre><code>{{error().schema}}</code></pre>\n        }\n\n        <p>\n          <span>The list of accepted values is:</span>\n        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (type of nodeTypes; track type) {\n              <li>\n                <i>{{ type }}</i>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <p>\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\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </p>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <p>\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        </p>\n      }\n      @case (ErrorKeys.NoHeaders) {\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      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <p>\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        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (e of error().error.split(';'); track e) {\n              <li>\n                <code>{{ e }}</code>\n              </li>\n            }\n          </ul>\n        </div>\n        <p>Please re-upload selecting one of the sheets above.</p>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <p>Your upload contains duplicated column headers.</p>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <p>\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        </p>\n        <pre><code>{{error().value}}</code></pre>\n\n        <p class=\"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      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <p>\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        </p>\n      }\n      @case (ErrorKeys.NestedHeaders) {\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      }\n      @case (ErrorKeys.NestedNodes) {\n        <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n        <pre><code>{{ sampleLinkedNodes | json }}</code></pre>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\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=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n      }\n      @case (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <p>You are using a combination of mixed cases in your headers:</p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>impactAssessment.id,impactAssessment.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>impactAssessment.id,impactassessment.name</code></pre>\n\n        <p>\n          Please make sure to always use either\n          <code>impactAssessment</code>\n          or\n          <code>impactassessment</code>\n          , but not both.\n        </p>\n      }\n      @case (ErrorKeys.InvalidListIndex) {\n        <p>You have used incorrect indexes for the list of blank nodes:</p>\n        <p class=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.100.term.name</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.1.term.name</code></pre>\n\n        <p>Please make sure to number correctly the list of Blank Nodes in a consecutive order, without gaps.</p>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <p>\n          You are using both\n          <code>&#64;id</code>\n          (or\n          <code>id</code>\n          ) and\n          <code>name</code>\n          fields to upload an existing Node (e.g., a Term).\n        </p>\n        <p>\n          Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n          Instead, you should only use one of them:\n        </p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id</code></pre>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <p>The column header {{ error().key }} must use the array format. Examples:</p>\n        <pre><code>{{ error().key + '.0.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.0.value' }}</code></pre>\n        <pre><code>{{ error().key + '.1.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.1.value' }}</code></pre>\n        <ng-container *ngTemplateOutlet=\"schemaError\" />\n      }\n      @case (ErrorKeys.MaxSize) {\n        <p>\n          The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb). Please\n          re-upload these data in multiple files.\n        </p>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <p>\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        </p>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @case (ErrorKeys.Timeout) {\n        <p>Time exceeded for current step.</p>\n        @if (debug()) {\n          <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @default {\n        <p>{{ message() }}</p>\n        @if (debug()) {\n          <pre><code>{{ error() | json }}</code></pre>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div>\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>\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>\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>\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      <b>Preview:</b>\n      <pre><code>{{stringify(error().node)}}</code></pre>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p>\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" 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>\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: () => [], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
 const nodeTerm = (node, key) => {