@hestia-earth/ui-components 0.19.1 → 0.19.2

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

@@ -1945,11 +1945,18 @@ const feature = Object.freeze({
 });
 const defaultFeature = () => ({ ...feature });
 const pointToCoordinates = (point) => [point.lng(), point.lat()];
-const coordinatesToPoint = (values) => Array.isArray(values[0])
-    ? values.map((v) => coordinatesToPoint(v))
-    : values?.some(isNaN)
-        ? null
-        : new google.maps.LatLng(values[1], values[0]);
+const coordinatesToPoint = (values) => {
+    try {
+        return Array.isArray(values[0])
+            ? values.map((v) => coordinatesToPoint(v))
+            : values?.some(isNaN)
+                ? null
+                : new google.maps.LatLng(values[1], values[0]);
+    }
+    catch (err) {
+        return null;
+    }
+};
 const polygonToCoordinates = (polygon) => polygon.getPaths().getArray().map(path => {
     const points = path.getArray();
     return [
@@ -7056,8 +7063,8 @@ const customErrorMessage = {
             ? pluralize(paths[paths.length - 1].path, params?.allowedValues?.length || 0)
             : 'values';
         return `Only the ${paths.length === 3 ? `${paths[1].label} with the ` : ''}following ${values} are permitted for ${paths[0].label}: ${params?.allowedValues.map(code).join(', ')}.
-      Please either change the ${paths.length >= 2 ? paths[1] : paths[0]} you are using and ensure it has one of the ${values} listed above,
-      or follow the schema to identify where this ${paths.length >= 2 ? paths[1] : paths[0]} can be added.`;
+      Please either change the ${paths.length >= 2 ? paths[1].label : paths[0].label} you are using and ensure it has one of the ${values} listed above,
+      or follow the schema to identify where this ${paths.length >= 2 ? paths[1].label : paths[0].label} can be added.`;
     },
     'should be equal to constant': ({ params }) => `Must be: ${code(params?.allowedValue)}`,
     'is not allowed for this characterisedIndicator': ({ params }, errorCount) => `${errorCount === 1 ?
@@ -7247,7 +7254,13 @@ const customErrorMessage = {
     Note that the field ${schemaLink('Cycle#commercialPracticeTreatment', 'commercialPracticeTreatment')} becomes required if treatment is specified.`,
     'should not specify both liveAnimal and animalProduct': () => `You have added both a ${glossaryTypeLink(TermTermType.liveAnimal)} and ${glossaryTypeLink(TermTermType.animalProduct)} term as Products.
     If these terms refer to the same animals, this will lead to double counting:
-    instead use a Property on the ${glossaryTypeLink(TermTermType.liveAnimal)} term to define the quantity of liveweight per head, carcass weight per head, etc.`
+    instead use a Property on the ${glossaryTypeLink(TermTermType.liveAnimal)} term to define the quantity of liveweight per head, carcass weight per head, etc.`,
+    'must add an excreta product with a liveAnimal product': () => `Animal production Cycles create excreta.
+    There must be at least one ${code(TermTermType.excreta)} product in this Cycle.
+    Please add an ${code(TermTermType.excreta)} Product to the Cycle.
+    You do not need to set a ${code('value')} for the Product, but adding a ${code('value')} is desirable.`,
+    'value should sum to 100 or less across water regime practices': () => `The total % area covered by the ${code(TermTermType.waterRegime)} practices you specified is not equal to ${code(100)}.
+    Make sure to add any missing practice if needed and/or adjust the values of the ${code(TermTermType.waterRegime)} practices you already recorded.`
 };
 const formatCustomErrorMessage = (message, error, allErrors = []) => {
     const formattedMessage = message && message in customErrorMessage ?
@@ -7497,7 +7510,7 @@ const propertyTypeValue = {
     integer: val => +(`${val}` || '0'),
     boolean: val => (`${val}` || '').toLowerCase() === 'true'
 };
-const propertyValue = (schema, value) => schema.type ? (Array.isArray(schema.type) ?
+const propertyValue = (schema, value) => schema.type ? (Array.isArray(schema.type) && typeof value in propertyTypeValue ?
     propertyTypeValue[typeof value](value, schema) :
     propertyTypeValue[schema.type](value, schema)) :
     safeJSONStringify(value);
@@ -8668,6 +8681,7 @@ var ErrorKeys;
     ErrorKeys["UploadsLimit"] = "upload-limit";
     ErrorKeys["NestedHeaders"] = "nested-headers";
     ErrorKeys["ReferenceExistingHeaders"] = "reference-existing-headers";
+    ErrorKeys["ObjectArrayInvalid"] = "object-array-invalid";
     ErrorKeys["MaxSize"] = "max-size";
     ErrorKeys["MaxRows"] = "max-rows";
 })(ErrorKeys || (ErrorKeys = {}));
@@ -8758,10 +8772,10 @@ class FilesUploadErrorsComponent {
     }
 }
 FilesUploadErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesUploadErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilesUploadErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FilesUploadErrorsComponent, selector: "he-files-upload-errors", inputs: { file: "file", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div *ngSwitchCase=\"ErrorKeys.InvalidJSON\">\n      <p>The uploaded content does not appear to contain valid JSON data:</p>\n\n      <div class=\"is-mt-2\">\n        <pre><code>{{error.error}}</code></pre>\n      </div>\n\n      <p>Please validate your JSON content before uploading it using an <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a> for example.</p>\n    </div>\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>\n        No Nodes could be found in your Upload.\n        Please verify the column headers match the Hestia schema.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>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\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>The following value in the column <i>{{error.key}}</i> is not in the correct format:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"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 number from the fractional part of the number.\n          </p>\n\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\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        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\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\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>If you are trying to set no data, we accept either <code>-</code> or an empty cell.</p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"schemaUrl\" target=\"_blank\">{{error.schema}}</a>\n        <span>schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">You must assign a unique <code>id</code> for every record in your data.</span>\n        <span *ngSwitchCase=\"'type'\">Every record in your data must contain a <code>type</code>.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is <code>internal</code> in the</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>You cannot upload <code>internal</code> fields to Hestia.</p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.SchemaNotFound\">\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      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\"><i>{{type}}</i></li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in a single file (<b>{{error.value}}</b> have been found).</span>\n      </div>\n\n      <p>\n        <span>Please re-upload these data in multiple files with a maximum of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in each file.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet.\n        Either try selecting a different sheet in the 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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row.\n        Please remove all empty rows at the begining of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\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          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{e}}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your upload contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <span class=\"pr-1\">You have multiple</span>\n      <code>{{error.schema | pluralize}}</code>\n      <span class=\"px-1\">with the same</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"px-1\">but different data. The</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"pl-1\">is:</span>\n      <br>\n      <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g., <code>source.id</code>, <code>source.bibliography.title</code>) and then create the link (e.g., <code>cycle.defaultSource.id</code>).\n        We do not allow nesting (e.g., <code>cycle.defaultSource.bibliography.title</code>).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>You have used the internal <code>@id</code> field to upload a new Node.</p>\n      <p>The <code>@id</code> field should only be used to reference existing Node or Terms. Example:</p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\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.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>Your file has {{error.value | number}} rows. This might be an error caused by adding some data at the bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngIf=\"hasGeoJSONError\">\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>Save the boundary in a valid <code>.geojson</code> file.</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>Export to <code>GeoJson</code> or <code>CSV</code>.</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    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{error.index}}</span>\n      <ng-container *ngIf=\"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          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{column.column}}</b>\n            <code>{{column.name}}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\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        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{suggestion}}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>Preview<sup>1</sup>:</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            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{error.index}}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\"\n                  >{{col | ellipsis:50}}</span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\"><i>1. The preview does not necessarily reflect the original Upload's order or content.</i></p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\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\">or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilesUploadErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FilesUploadErrorsComponent, selector: "he-files-upload-errors", inputs: { file: "file", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div *ngSwitchCase=\"ErrorKeys.InvalidJSON\">\n      <p>The uploaded content does not appear to contain valid JSON data:</p>\n\n      <div class=\"is-mt-2\">\n        <pre><code>{{error.error}}</code></pre>\n      </div>\n\n      <p>Please validate your JSON content before uploading it using an <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a> for example.</p>\n    </div>\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>\n        No Nodes could be found in your Upload.\n        Please verify the column headers match the Hestia schema.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>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\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>The following value in the column <i>{{error.key}}</i> is not in the correct format:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"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 number from the fractional part of the number.\n          </p>\n\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\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        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\n          <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>If you are trying to set no data, we accept either <code>-</code> or an empty cell.</p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"schemaUrl\" target=\"_blank\">{{error.schema}}</a>\n        <span>schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">You must assign a unique <code>id</code> for every record in your data.</span>\n        <span *ngSwitchCase=\"'type'\">Every record in your data must contain a <code>type</code>.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is <code>internal</code> in the</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>You cannot upload <code>internal</code> fields to Hestia.</p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.SchemaNotFound\">\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      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\"><i>{{type}}</i></li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in a single file (<b>{{error.value}}</b> have been found).</span>\n      </div>\n\n      <p>\n        <span>Please re-upload these data in multiple files with a maximum of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in each file.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet.\n        Either try selecting a different sheet in the 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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row.\n        Please remove all empty rows at the begining of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\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          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{e}}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your upload contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <span class=\"pr-1\">You have multiple</span>\n      <code>{{error.schema | pluralize}}</code>\n      <span class=\"px-1\">with the same</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"px-1\">but different data. The</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"pl-1\">is:</span>\n      <br>\n      <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g., <code>source.id</code>, <code>source.bibliography.title</code>) and then create the link (e.g., <code>cycle.defaultSource.id</code>).\n        We do not allow nesting (e.g., <code>cycle.defaultSource.bibliography.title</code>).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>You have used the internal <code>@id</code> field to upload a new Node.</p>\n      <p>The <code>@id</code> field should only be used to reference existing Node or Terms. Example:</p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\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.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ObjectArrayInvalid\">\n      <p>The values in the column {{error.key}} must be represented as arrays.</p>\n\n      <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n      <p>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    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>Your file has {{error.value | number}} rows. This might be an error caused by adding some data at the bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngIf=\"hasGeoJSONError\">\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>Save the boundary in a valid <code>.geojson</code> file.</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>Export to <code>GeoJson</code> or <code>CSV</code>.</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    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{error.index}}</span>\n      <ng-container *ngIf=\"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          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{column.column}}</b>\n            <code>{{column.name}}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\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        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{suggestion}}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>Preview<sup>1</sup>:</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            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{error.index}}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\"\n                  >{{col | ellipsis:50}}</span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\"><i>1. The preview does not necessarily reflect the original Upload's order or content.</i></p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\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\">or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.</span>\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesUploadErrorsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div *ngSwitchCase=\"ErrorKeys.InvalidJSON\">\n      <p>The uploaded content does not appear to contain valid JSON data:</p>\n\n      <div class=\"is-mt-2\">\n        <pre><code>{{error.error}}</code></pre>\n      </div>\n\n      <p>Please validate your JSON content before uploading it using an <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a> for example.</p>\n    </div>\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>\n        No Nodes could be found in your Upload.\n        Please verify the column headers match the Hestia schema.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>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\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>The following value in the column <i>{{error.key}}</i> is not in the correct format:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"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 number from the fractional part of the number.\n          </p>\n\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\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        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\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\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>If you are trying to set no data, we accept either <code>-</code> or an empty cell.</p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"schemaUrl\" target=\"_blank\">{{error.schema}}</a>\n        <span>schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">You must assign a unique <code>id</code> for every record in your data.</span>\n        <span *ngSwitchCase=\"'type'\">Every record in your data must contain a <code>type</code>.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is <code>internal</code> in the</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>You cannot upload <code>internal</code> fields to Hestia.</p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.SchemaNotFound\">\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      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\"><i>{{type}}</i></li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in a single file (<b>{{error.value}}</b> have been found).</span>\n      </div>\n\n      <p>\n        <span>Please re-upload these data in multiple files with a maximum of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in each file.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet.\n        Either try selecting a different sheet in the 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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row.\n        Please remove all empty rows at the begining of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\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          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{e}}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your upload contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <span class=\"pr-1\">You have multiple</span>\n      <code>{{error.schema | pluralize}}</code>\n      <span class=\"px-1\">with the same</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"px-1\">but different data. The</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"pl-1\">is:</span>\n      <br>\n      <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g., <code>source.id</code>, <code>source.bibliography.title</code>) and then create the link (e.g., <code>cycle.defaultSource.id</code>).\n        We do not allow nesting (e.g., <code>cycle.defaultSource.bibliography.title</code>).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>You have used the internal <code>@id</code> field to upload a new Node.</p>\n      <p>The <code>@id</code> field should only be used to reference existing Node or Terms. Example:</p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\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.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>Your file has {{error.value | number}} rows. This might be an error caused by adding some data at the bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngIf=\"hasGeoJSONError\">\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>Save the boundary in a valid <code>.geojson</code> file.</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>Export to <code>GeoJson</code> or <code>CSV</code>.</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    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{error.index}}</span>\n      <ng-container *ngIf=\"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          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{column.column}}</b>\n            <code>{{column.name}}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\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        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{suggestion}}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>Preview<sup>1</sup>:</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            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{error.index}}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\"\n                  >{{col | ellipsis:50}}</span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\"><i>1. The preview does not necessarily reflect the original Upload's order or content.</i></p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\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\">or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div *ngSwitchCase=\"ErrorKeys.InvalidJSON\">\n      <p>The uploaded content does not appear to contain valid JSON data:</p>\n\n      <div class=\"is-mt-2\">\n        <pre><code>{{error.error}}</code></pre>\n      </div>\n\n      <p>Please validate your JSON content before uploading it using an <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a> for example.</p>\n    </div>\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>\n        No Nodes could be found in your Upload.\n        Please verify the column headers match the Hestia schema.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>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\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>The following value in the column <i>{{error.key}}</i> is not in the correct format:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"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 number from the fractional part of the number.\n          </p>\n\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\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        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\n          <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>If you are trying to set no data, we accept either <code>-</code> or an empty cell.</p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"schemaUrl\" target=\"_blank\">{{error.schema}}</a>\n        <span>schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">You must assign a unique <code>id</code> for every record in your data.</span>\n        <span *ngSwitchCase=\"'type'\">Every record in your data must contain a <code>type</code>.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is <code>internal</code> in the</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>You cannot upload <code>internal</code> fields to Hestia.</p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.SchemaNotFound\">\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      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\"><i>{{type}}</i></li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in a single file (<b>{{error.value}}</b> have been found).</span>\n      </div>\n\n      <p>\n        <span>Please re-upload these data in multiple files with a maximum of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in each file.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet.\n        Either try selecting a different sheet in the 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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row.\n        Please remove all empty rows at the begining of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\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          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{e}}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your upload contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <span class=\"pr-1\">You have multiple</span>\n      <code>{{error.schema | pluralize}}</code>\n      <span class=\"px-1\">with the same</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"px-1\">but different data. The</span>\n      <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"pl-1\">is:</span>\n      <br>\n      <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g., <code>source.id</code>, <code>source.bibliography.title</code>) and then create the link (e.g., <code>cycle.defaultSource.id</code>).\n        We do not allow nesting (e.g., <code>cycle.defaultSource.bibliography.title</code>).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>You have used the internal <code>@id</code> field to upload a new Node.</p>\n      <p>The <code>@id</code> field should only be used to reference existing Node or Terms. Example:</p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\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.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ObjectArrayInvalid\">\n      <p>The values in the column {{error.key}} must be represented as arrays.</p>\n\n      <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n      <p>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    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\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    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>Your file has {{error.value | number}} rows. This might be an error caused by adding some data at the bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngIf=\"hasGeoJSONError\">\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>Save the boundary in a valid <code>.geojson</code> file.</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>Export to <code>GeoJson</code> or <code>CSV</code>.</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    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{error.index}}</span>\n      <ng-container *ngIf=\"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          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{column.column}}</b>\n            <code>{{column.name}}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\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        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{suggestion}}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>Preview<sup>1</sup>:</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            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{error.index}}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\"\n                  >{{col | ellipsis:50}}</span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\"><i>1. The preview does not necessarily reflect the original Upload's order or content.</i></p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\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\">or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.</span>\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"] }]
         }], propDecorators: { file: [{
                 type: Input
             }], error: [{