@hestia-earth/ui-components 0.41.21 → 0.41.22

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

@@ -1876,11 +1876,11 @@ class CollapsibleBoxComponent {
         this.boxStyle = input(CollapsibleBoxStyle.primary, ...(ngDevMode ? [{ debugName: "boxStyle" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CollapsibleBoxComponent, isStandalone: true, selector: "he-collapsible-box", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, boxStyle: { classPropertyName: "boxStyle", publicName: "boxStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "<div\n  class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n  [class.box]=\"hasShadow()\"\n  [class.is-gap-24]=\"hasShadow()\"\n  [class.has-border]=\"hasBorder()\">\n  <div\n    class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n    [class.is-px-2]=\"!hasShadow()\">\n    <ng-content select=\"[box-title]\" />\n\n    <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n      <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" />\n    </a>\n  </div>\n\n  @if (open()) {\n    <div class=\"is-p-2 | collapsible-box--content\">\n      <ng-content select=\"[box-content]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CollapsibleBoxComponent, isStandalone: true, selector: "he-collapsible-box", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, boxStyle: { classPropertyName: "boxStyle", publicName: "boxStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "<div\n  class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n  [class.box]=\"hasShadow()\"\n  [class.is-gap-24]=\"hasShadow()\"\n  [class.has-border]=\"hasBorder()\">\n  <div\n    class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n    [class.is-px-2]=\"!hasShadow()\">\n    <ng-content select=\"[box-title]\" />\n\n    <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n      <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" size=\"24\" />\n    </a>\n  </div>\n\n  @if (open()) {\n    <div class=\"is-p-2 | collapsible-box--content\">\n      <ng-content select=\"[box-content]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBoxComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-collapsible-box', imports: [HESvgIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n  [class.box]=\"hasShadow()\"\n  [class.is-gap-24]=\"hasShadow()\"\n  [class.has-border]=\"hasBorder()\">\n  <div\n    class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n    [class.is-px-2]=\"!hasShadow()\">\n    <ng-content select=\"[box-title]\" />\n\n    <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n      <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" />\n    </a>\n  </div>\n\n  @if (open()) {\n    <div class=\"is-p-2 | collapsible-box--content\">\n      <ng-content select=\"[box-content]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"] }]
+            args: [{ selector: 'he-collapsible-box', imports: [HESvgIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"is-flex is-flex-direction-column | is-{{ boxStyle() }}\"\n  [class.box]=\"hasShadow()\"\n  [class.is-gap-24]=\"hasShadow()\"\n  [class.has-border]=\"hasBorder()\">\n  <div\n    class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-py-2 | collapsible-box--header\"\n    [class.is-px-2]=\"!hasShadow()\">\n    <ng-content select=\"[box-title]\" />\n\n    <a class=\"has-text-secondary\" [class.is-px-3]=\"hasShadow()\" (click)=\"open.set(!open())\">\n      <he-svg-icon [name]=\"open() ? 'chevron-up' : 'chevron-down'\" size=\"24\" />\n    </a>\n  </div>\n\n  @if (open()) {\n    <div class=\"is-p-2 | collapsible-box--content\">\n      <ng-content select=\"[box-content]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--collapsible-box-header-border-color: transparent;--collapsible-box-border-color: transparent}:host .collapsible-box--header{border-bottom:1px solid var(--collapsible-box-header-border-color)}:host .has-border .collapsible-box--header{border-radius:6px 6px 0 0;border:1px solid var(--collapsible-box-border-color)}:host .has-border .collapsible-box--content{border-radius:0 0 6px 6px;border:1px solid var(--collapsible-box-border-color);border-top:0}:host .is-primary{--collapsible-box-header-border-color: #ffc000}:host .is-primary.has-border{--collapsible-box-border-color: #ffc000}:host .is-secondary{--collapsible-box-header-border-color: #193957}:host .is-secondary.has-border{--collapsible-box-border-color: #193957}:host .is-secondary-accent{--collapsible-box-header-border-color: #dbe3ea}:host .is-secondary-accent.has-border{--collapsible-box-border-color: #dbe3ea}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], hasBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBorder", required: false }] }], boxStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxStyle", required: false }] }] } });
 
 class DataTableComponent {
@@ -6056,10 +6056,12 @@ class ChartTooltipComponent {
         this.tooltipX = signal(0, ...(ngDevMode ? [{ debugName: "tooltipX" }] : []));
         this.tooltipY = signal(0, ...(ngDevMode ? [{ debugName: "tooltipY" }] : []));
     }
-    show(data, x, y) {
+    show(data, x, y, options = { placement: 'bottom' }) {
         this.tooltipX.set(x);
         this.tooltipY.set(y);
         const text = this.tooltipFn()(data);
+        this.tooltip().container = options?.container;
+        this.tooltip().placement = options?.placement;
         text && setTimeout(() => this.tooltip().open({ data: text }));
     }
     hide() {
@@ -6978,7 +6980,9 @@ const nodeTypeIcon = {
     [NodeType.Organisation]: 'organisation',
     [NodeType.Site]: 'pin',
     [NodeType.Source]: 'source',
-    [NodeType.Term]: 'term'
+    [NodeType.Term]: 'term',
+    [SchemaType.Property]: 'magnifier',
+    [SchemaType.Transformation]: 'truck'
 };
 
 class NodeLinkComponent {
@@ -9370,6 +9374,7 @@ const icons = [
     'loading-circle-filled',
     'loading-circle-filled-withshadow',
     'log',
+    'magnifier',
     'mail',
     'map',
     'menu',
@@ -9432,6 +9437,7 @@ const icons = [
     'tool',
     'trash',
     'tree',
+    'truck',
     'turn-phone',
     'unit',
     'upload',
@@ -12372,11 +12378,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>\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        <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 }); }
 }
 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>\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        <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"] }]
         }], 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) => {