@hestia-earth/ui-components 0.41.25 → 0.41.27

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

@@ -6,7 +6,7 @@ import { FormsModule, NG_VALUE_ACCESSOR, UntypedFormBuilder, Validators, Reactiv
 import { NgClass, DecimalPipe, NgTemplateOutlet, KeyValuePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe, formatDate as formatDate$1 } from '@angular/common';
 import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltip, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbActiveModal, NgbHighlight, NgbModal, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbTooltipModule, NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import { ReplaySubject, of, mergeMap, shareReplay, delay, map, catchError, distinctUntilChanged, timer, take, first, Subject, combineLatest, filter, tap, pipe, fromEvent, startWith, merge, skip, switchMap, EMPTY, throttleTime, animationFrameScheduler, debounceTime, skipUntil, zip, lastValueFrom, forkJoin, from, reduce, firstValueFrom, mergeAll, toArray, distinct, groupBy } from 'rxjs';
+import { ReplaySubject, of, mergeMap, shareReplay, delay, map, catchError, distinctUntilChanged, timer, take, first, Subject, combineLatest, filter, tap, pipe, fromEvent, startWith, merge, skip, switchMap, EMPTY, throttleTime, animationFrameScheduler, debounceTime, lastValueFrom, skipUntil, zip, forkJoin, from, reduce, firstValueFrom, mergeAll, toArray, distinct, groupBy } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import get from 'lodash.get';
 import { SCHEMA_VERSION, SchemaType, NodeType, TermTermType, productTermTermType, nestedSearchableKeys, SiteSiteType, EmissionMethodTier, isExpandable, sortKeysByType, isTypeNode, BlankNodesKey, impactAssessmentTermTermType, measurementTermTermType, emissionTermTermType, inputTermTermType, CycleFunctionalUnit, NonBlankNodesKey, jsonldPath, isTypeValid, isTypeBlankNode, typeToSchemaType, infrastructureTermTermType, managementTermTermType } from '@hestia-earth/schema';
@@ -2743,6 +2743,467 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-mobile-shell', imports: [NgTemplateOutlet, HESvgIconComponent], template: "<div class=\"is-overflow-auto | shell-content\">\n  <div [class.menu-expanded]=\"expanded()\" class=\"shell__content--body | h-100\">\n    <ng-content />\n  </div>\n</div>\n\n<aside class=\"shell-footer | is-flex is-justify-content-space-between\">\n  @for (button of buttons(); track button.id || button.label) {\n    <button\n      (click)=\"onMenuButtonClick(button)\"\n      class=\"button is-secondary is-flex is-flex-direction-column is-align-items-center | menu-button\"\n      [disabled]=\"button.disabled\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          iconTemplate() ?? defaultIconTemplate;\n          context: { $implicit: button, isActive: button.isActive }\n        \" />\n      @if (button.isActive && button.label) {\n        <span class=\"is-size-8 | menu-button-label\">{{ button.label }}</span>\n      }\n    </button>\n  }\n</aside>\n\n<div [class.expanded]=\"expanded()\" class=\"shell-menu | is-absolute w-100 h-100\">\n  <ng-template [ngTemplateOutlet]=\"menuRef()\" />\n</div>\n\n<ng-template #defaultIconTemplate let-button>\n  <he-svg-icon [name]=\"button.icon\" />\n</ng-template>\n", styles: [":host{position:relative;display:grid;grid-template-rows:1fr auto;width:100%;height:100%;overflow:hidden;--menu-height: 2.875em}.shell-footer{background:#193957;z-index:10}.shell-menu{bottom:0;left:0;background:#fefaef;transform:translateY(100%);transition:transform .1s ease-out;padding-bottom:var(--menu-height)}.shell-menu.expanded{transform:translateY(0)}.menu-button-label{line-height:normal;letter-spacing:-.01rem}.menu-button{box-shadow:none;height:3.5em;width:2em}.menu-button:hover{background-color:initial}\n"] }]
         }], propDecorators: { iconTemplate: [{ type: i0.ContentChild, args: ['iconTemplate', { isSignal: true }] }], menuButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButtons", required: false }] }], defaultActiveButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultActiveButtonId", required: false }] }], menuShown: [{ type: i0.Output, args: ["menuShown"] }] } });
 
+var StepStatus;
+(function (StepStatus) {
+    StepStatus[StepStatus["previous"] = 0] = "previous";
+    StepStatus[StepStatus["current"] = 1] = "current";
+    StepStatus[StepStatus["next"] = 2] = "next";
+    StepStatus[StepStatus["error"] = 3] = "error";
+})(StepStatus || (StepStatus = {}));
+const getStepStatus = (index, statusIndex, success, processing) => index < statusIndex
+    ? StepStatus.previous
+    : index === statusIndex
+        ? success
+            ? processing
+                ? StepStatus.current
+                : StepStatus.next
+            : StepStatus.error
+        : StepStatus.next;
+const getStageStatus = (statuses) => statuses.every(status => status === StepStatus.previous)
+    ? 'success'
+    : statuses.every(status => status === StepStatus.next)
+        ? 'none'
+        : statuses.some(status => status === StepStatus.error)
+            ? 'error'
+            : 'pending';
+
+class CompletedStagesPipe {
+    transform(statuses) {
+        return statuses.filter(status => status.stepStatus === StepStatus.previous || status.stepStatus === StepStatus.error).length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompletedStagesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: CompletedStagesPipe, isStandalone: true, name: "completedStages" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompletedStagesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'completedStages'
+                }]
+        }] });
+
+// auto-generated content using "node scripts/generate-icons.js"
+const iconSizes = [
+    '16',
+    '20',
+    '24',
+    '40',
+    '48'
+];
+const icons = [
+    'aggregation',
+    'api',
+    'api-circle',
+    'archive',
+    'arrow-down',
+    'arrow-down-right',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'autogenerate',
+    'autogenerate-circle',
+    'aws',
+    'ban',
+    'bell',
+    'bell-with-badge',
+    'book',
+    'breakdown',
+    'bug',
+    'buoy',
+    'calculation-toolkit',
+    'calculator',
+    'caret-down',
+    'caret-left',
+    'caret-right',
+    'caret-up',
+    'certificate',
+    'chart',
+    'checkmark',
+    'checkmark-circle',
+    'checkmark-circle-filled',
+    'checkmark-circle-filled-with-shadow',
+    'chevron-double-left',
+    'chevron-double-right',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'circle',
+    'citation',
+    'citation-square',
+    'clock',
+    'cloud',
+    'collapse',
+    'collapse-panel',
+    'commit',
+    'community',
+    'community-edition',
+    'compare',
+    'copy',
+    'corner-drag',
+    'csv-file',
+    'cycle',
+    'dashboard',
+    'data-format',
+    'database-wheat',
+    'dot-circle',
+    'dot-filled',
+    'download',
+    'drag',
+    'edit',
+    'edit-withfield',
+    'embed',
+    'exclamation',
+    'exclamation-triangle',
+    'exclamation-triangle-filled',
+    'export',
+    'external-link',
+    'feedback',
+    'fence',
+    'film',
+    'filter-funnel',
+    'filter-slider',
+    'flash',
+    'folder',
+    'folder-open',
+    'foodprocessor',
+    'globe-continents',
+    'globe-lines',
+    'glossary',
+    'greenhouse',
+    'guide',
+    'guide-overlay',
+    'help',
+    'help-circle',
+    'history',
+    'home',
+    'husk',
+    'image',
+    'incognito',
+    'indexed',
+    'info',
+    'info-circle',
+    'lake',
+    'link',
+    'list-indented',
+    'livestock',
+    'loading',
+    'loading-bar',
+    'loading-circle-filled',
+    'loading-circle-filled-withshadow',
+    'log',
+    'mail',
+    'map',
+    'menu',
+    'messages',
+    'messages-with-badge',
+    'metrics',
+    'migration',
+    'minus',
+    'model-docs',
+    'news',
+    'node',
+    'notepad',
+    'ocean',
+    'organisation',
+    'overflow-menu',
+    'pin',
+    'plus',
+    'pond',
+    'private-eye',
+    'private-eye-crossed',
+    'private-lock',
+    'profile-checkmark',
+    'profile-circle',
+    'profile-gear',
+    'progress',
+    'python',
+    'refresh',
+    'rename',
+    'retailer',
+    'review',
+    'river',
+    'save',
+    'schema',
+    'search',
+    'search-with-exclamation',
+    'search-with-minus',
+    'search-with-plus',
+    'settings',
+    'share',
+    'share-socials',
+    'shrub',
+    'sign-out',
+    'slack',
+    'socials-gitlab',
+    'socials-google',
+    'socials-linkedin',
+    'socials-linkedin-circle',
+    'socials-orcid',
+    'socials-orcid-circle',
+    'sort-ascending',
+    'sort-caret-down-filled',
+    'sort-caret-stacked-filled-stacked',
+    'sort-caret-up-filled',
+    'source',
+    'star',
+    'star-filled',
+    'table',
+    'tag-filled',
+    'target',
+    'term',
+    'textform-list',
+    'tool',
+    'transport',
+    'trash',
+    'tree',
+    'turn-phone',
+    'unit',
+    'upload',
+    'video',
+    'xmark',
+    'xmark-circle',
+    'xmark-circle-filled',
+    'xmark-circle-filled-with-shadow',
+    'zip'
+];
+
+const loadSvgSprite = () => {
+    const http = inject(HttpClient);
+    const document = inject(DOCUMENT);
+    const platformLocation = inject(PlatformLocation);
+    const baseUrl = platformLocation.getBaseHrefFromDOM();
+    return lastValueFrom(http.get(`${baseUrl}assets/svg-icons/icons-sprite.svg`, { responseType: 'text' }).pipe(tap(svgContent => {
+        const div = document.createElement('div');
+        div.innerHTML = svgContent;
+        const svg = div.querySelector('svg');
+        if (svg) {
+            svg.style.display = 'none';
+            document.body.insertBefore(svg, document.body.firstChild);
+        }
+    })));
+};
+
+const timelineItemIconMap = {
+    success: 'checkmark',
+    pending: 'loading',
+    none: '',
+    error: 'xmark'
+};
+class PipelineProgressStatusComponent {
+    constructor() {
+        this.status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.iconStatus = computed(() => timelineItemIconMap[this.status()], ...(ngDevMode ? [{ debugName: "iconStatus" }] : []));
+        this.iconSize = computed(() => (this.size() === 'small' ? '18px' : '22.5px'), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+        this.iconAnimation = computed(() => (this.status() === 'pending' ? 'spin' : ''), ...(ngDevMode ? [{ debugName: "iconAnimation" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineProgressStatusComponent, isStandalone: true, selector: "he-pipeline-progress-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.indicator-status": "status()", "style.--icon-size": "iconSize()" } }, ngImport: i0, template: "<div class=\"is-flex is-justify-content-center is-align-items-center | icon-circle\">\n  @if (iconStatus()) {\n    <he-svg-icon\n      class=\"has-text-white is-flex is-align-items-center\"\n      [name]=\"iconStatus()\"\n      [animation]=\"iconAnimation()\" />\n  }\n</div>\n", styles: [":host{--icon-circle-background-color: #dbdbdb;--icon-size: 22.5px}:host[indicator-status=success]{--icon-circle-background-color: hsl(153, 53%, 53%)}:host[indicator-status=error]{--icon-circle-background-color: #ff3844}:host[indicator-status=pending]{--icon-circle-background-color: #4c7194}.icon-circle{width:var(--icon-size);height:var(--icon-size);background-color:var(--icon-circle-background-color);border-radius:50%}\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: PipelineProgressStatusComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-pipeline-progress-status', imports: [HESvgIconComponent], host: {
+                        '[attr.indicator-status]': 'status()',
+                        '[style.--icon-size]': 'iconSize()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-flex is-justify-content-center is-align-items-center | icon-circle\">\n  @if (iconStatus()) {\n    <he-svg-icon\n      class=\"has-text-white is-flex is-align-items-center\"\n      [name]=\"iconStatus()\"\n      [animation]=\"iconAnimation()\" />\n  }\n</div>\n", styles: [":host{--icon-circle-background-color: #dbdbdb;--icon-size: 22.5px}:host[indicator-status=success]{--icon-circle-background-color: hsl(153, 53%, 53%)}:host[indicator-status=error]{--icon-circle-background-color: #ff3844}:host[indicator-status=pending]{--icon-circle-background-color: #4c7194}.icon-circle{width:var(--icon-size);height:var(--icon-size);background-color:var(--icon-circle-background-color);border-radius:50%}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class PipelineProgressStageComponent {
+    constructor() {
+        this.group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
+        this.processing = input(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressStageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineProgressStageComponent, isStandalone: true, selector: "he-pipeline-progress-stage", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, processing: { classPropertyName: "processing", publicName: "processing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.stage-status": "group().groupStatus" }, classAttribute: "p-2 is-flex is-justify-content-flex-start is-clickable" }, ngImport: i0, template: "@if (group(); as group) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"group.groupStatus\" />\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-start\">\n    <header class=\"is-size-6 has-text-left\">{{ group.group }}</header>\n    <span class=\"is-size-8 | stages-number\">\n      {{ group.statuses | completedStages }}/{{ group.statuses.length }} Stages complete\n    </span>\n  </div>\n}\n", styles: [":root{--pipeline-stages-border-color: unset;--pipeline-stages-background: unset;--pipeline-stages-stagesCountColor: unset}:host{display:block;max-width:unset;border-radius:6px;border:2px solid;min-width:164px;background:var(--pipeline-stages-background);border-color:var(--pipeline-stages-border-color)}:host header{line-height:1.1}:host .stages-number{color:var(--pipeline-stages-stagesCountColor)}\n"], dependencies: [{ kind: "component", type: PipelineProgressStatusComponent, selector: "he-pipeline-progress-status", inputs: ["status", "size"] }, { kind: "pipe", type: CompletedStagesPipe, name: "completedStages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressStageComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-pipeline-progress-stage', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CompletedStagesPipe, PipelineProgressStatusComponent], host: {
+                        class: 'p-2 is-flex is-justify-content-flex-start is-clickable',
+                        '[attr.stage-status]': 'group().groupStatus'
+                    }, template: "@if (group(); as group) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"group.groupStatus\" />\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-start\">\n    <header class=\"is-size-6 has-text-left\">{{ group.group }}</header>\n    <span class=\"is-size-8 | stages-number\">\n      {{ group.statuses | completedStages }}/{{ group.statuses.length }} Stages complete\n    </span>\n  </div>\n}\n", styles: [":root{--pipeline-stages-border-color: unset;--pipeline-stages-background: unset;--pipeline-stages-stagesCountColor: unset}:host{display:block;max-width:unset;border-radius:6px;border:2px solid;min-width:164px;background:var(--pipeline-stages-background);border-color:var(--pipeline-stages-border-color)}:host header{line-height:1.1}:host .stages-number{color:var(--pipeline-stages-stagesCountColor)}\n"] }]
+        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], processing: [{ type: i0.Input, args: [{ isSignal: true, alias: "processing", required: false }] }] } });
+
+class PipelineDurationPipe {
+    transform(duration) {
+        const time = Math.floor(duration / (60 * 1000));
+        return pluralize(`${time === 0 ? '<' : '~'}${time || 1}min`, time || 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: PipelineDurationPipe, isStandalone: true, name: "pipelineDuration" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineDurationPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'pipelineDuration'
+                }]
+        }] });
+
+const timelineItemStatusMap = {
+    [StepStatus.previous]: 'success',
+    [StepStatus.current]: 'pending',
+    [StepStatus.next]: 'none',
+    [StepStatus.error]: 'error'
+};
+class PipelineProgressItemComponent {
+    constructor() {
+        this.status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
+        this.showStatus = input(...(ngDevMode ? [undefined, { debugName: "showStatus" }] : []));
+        this.position = input('between', ...(ngDevMode ? [{ debugName: "position" }] : []));
+        this.statusToLabelMap = input.required(...(ngDevMode ? [{ debugName: "statusToLabelMap" }] : []));
+        this.timelineStatus = computed(() => timelineItemStatusMap[this.status().stepStatus], ...(ngDevMode ? [{ debugName: "timelineStatus" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineProgressItemComponent, isStandalone: true, selector: "he-pipeline-progress-item", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, statusToLabelMap: { classPropertyName: "statusToLabelMap", publicName: "statusToLabelMap", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.timeline-status": "timelineStatus()", "attr.timeline-position": "position()" }, classAttribute: "is-flex is-align-items-center timeline-item" }, ngImport: i0, template: "@if (status(); as stat) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"timelineStatus()\" size=\"small\" />\n\n  <div class=\"is-size-7\" [style.opacity]=\"showStatus() ? 1 : 0\">\n    <p class=\"status-label\">\n      {{ statusToLabelMap()[stat.status] }}\n    </p>\n\n    <p class=\"has-text-grey-lighter\">\n      @if (stat.duration > 0) {\n        {{ stat.duration | pipelineDuration }}\n      }\n    </p>\n  </div>\n}\n", styles: [":root{--pipeline-progress-item-background: #249da5;--pipeline-progress-item-border-color: #e1eded}:host{position:relative;line-height:1.1;z-index:1}:host:before{content:\"\";position:absolute;top:0;left:2px;width:14px;height:100%;border:0 solid;border-left-width:6px!important;border-right-width:6px!important;z-index:-1;background-color:var(--pipeline-progress-item-background);border-color:var(--pipeline-progress-item-border-color)}:host[timeline-position=top]:before{bottom:0;top:auto;height:50%}:host[timeline-position=bottom]:before{height:50%}:host[timeline-status=error] .status-label{color:#ff3844}:host[timeline-status=pending] .status-label{color:#b5b5b5}:host[timeline-status=none] .status-label{color:#b5b5b5}:host>*{transition:opacity .3s}\n"], dependencies: [{ kind: "component", type: PipelineProgressStatusComponent, selector: "he-pipeline-progress-status", inputs: ["status", "size"] }, { kind: "pipe", type: PipelineDurationPipe, name: "pipelineDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressItemComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-pipeline-progress-item', imports: [PipelineProgressStatusComponent, PipelineDurationPipe], host: {
+                        class: 'is-flex is-align-items-center timeline-item',
+                        '[attr.timeline-status]': 'timelineStatus()',
+                        '[attr.timeline-position]': 'position()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (status(); as stat) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"timelineStatus()\" size=\"small\" />\n\n  <div class=\"is-size-7\" [style.opacity]=\"showStatus() ? 1 : 0\">\n    <p class=\"status-label\">\n      {{ statusToLabelMap()[stat.status] }}\n    </p>\n\n    <p class=\"has-text-grey-lighter\">\n      @if (stat.duration > 0) {\n        {{ stat.duration | pipelineDuration }}\n      }\n    </p>\n  </div>\n}\n", styles: [":root{--pipeline-progress-item-background: #249da5;--pipeline-progress-item-border-color: #e1eded}:host{position:relative;line-height:1.1;z-index:1}:host:before{content:\"\";position:absolute;top:0;left:2px;width:14px;height:100%;border:0 solid;border-left-width:6px!important;border-right-width:6px!important;z-index:-1;background-color:var(--pipeline-progress-item-background);border-color:var(--pipeline-progress-item-border-color)}:host[timeline-position=top]:before{bottom:0;top:auto;height:50%}:host[timeline-position=bottom]:before{height:50%}:host[timeline-status=error] .status-label{color:#ff3844}:host[timeline-status=pending] .status-label{color:#b5b5b5}:host[timeline-status=none] .status-label{color:#b5b5b5}:host>*{transition:opacity .3s}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], statusToLabelMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToLabelMap", required: true }] }] } });
+
+const PIPELINE_PROGRESS_ITEM_HEIGHT = 50;
+const PIPELINE_PROGRESS_GROUP_ANIMATION_DURATION = 300;
+function getPipelineProgressGroupHeight(visible, statusesCount, leftover) {
+    return `${visible ? statusesCount * PIPELINE_PROGRESS_ITEM_HEIGHT : leftover}px`;
+}
+const pipelineProgressGroupTransition = `height ${PIPELINE_PROGRESS_GROUP_ANIMATION_DURATION}ms ease`;
+
+class PipelineProgressGroupComponent {
+    constructor() {
+        this.transition = pipelineProgressGroupTransition;
+        this.visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+        this.isFirstStage = input(false, ...(ngDevMode ? [{ debugName: "isFirstStage" }] : []));
+        this.isLastStage = input(false, ...(ngDevMode ? [{ debugName: "isLastStage" }] : []));
+        this.stepStatus = input(...(ngDevMode ? [undefined, { debugName: "stepStatus" }] : []));
+        this.statuses = input(...(ngDevMode ? [undefined, { debugName: "statuses" }] : []));
+        this.direction = input.required(...(ngDevMode ? [{ debugName: "direction" }] : []));
+        this.statusToLabelMap = input.required(...(ngDevMode ? [{ debugName: "statusToLabelMap" }] : []));
+        this.steps = computed(() => this.statuses().map((s, index) => ({
+            ...s,
+            position: this._isTopElement(index) ? 'top' : this._isBottomElement(index) ? 'bottom' : 'between'
+        })), ...(ngDevMode ? [{ debugName: "steps" }] : []));
+        this.height = computed(() => getPipelineProgressGroupHeight(this.visible(), this.statuses()?.length ?? 0, this._leftover()), ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this._leftover = computed(() => (this.isFirstStage() && this.direction() === 'up') || (this.isLastStage() && this.direction() === 'down') ? 0 : 10, ...(ngDevMode ? [{ debugName: "_leftover" }] : []));
+    }
+    _isTopElement(index) {
+        return index === 0 && this.isFirstStage() && this.direction() === 'up';
+    }
+    _isBottomElement(index) {
+        return index === this.statuses().length - 1 && this.isLastStage() && this.direction() === 'down';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineProgressGroupComponent, isStandalone: true, selector: "he-pipeline-progress-group", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, isFirstStage: { classPropertyName: "isFirstStage", publicName: "isFirstStage", isSignal: true, isRequired: false, transformFunction: null }, isLastStage: { classPropertyName: "isLastStage", publicName: "isLastStage", isSignal: true, isRequired: false, transformFunction: null }, stepStatus: { classPropertyName: "stepStatus", publicName: "stepStatus", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: true, transformFunction: null }, statusToLabelMap: { classPropertyName: "statusToLabelMap", publicName: "statusToLabelMap", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.height": "height()", "style.transition": "transition" }, classAttribute: "is-flex is-flex-direction-column" }, ngImport: i0, template: "@for (stat of steps(); track stat.status) {\n  <he-pipeline-progress-item\n    [showStatus]=\"visible()\"\n    [status]=\"stat\"\n    [statusToLabelMap]=\"statusToLabelMap()\"\n    [position]=\"stat.position\" />\n}\n", styles: [":host{overflow:hidden}he-pipeline-progress-item{left:-78px;margin-left:auto;width:50%;height:50px;min-height:50px}\n"], dependencies: [{ kind: "component", type: PipelineProgressItemComponent, selector: "he-pipeline-progress-item", inputs: ["status", "showStatus", "position", "statusToLabelMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressGroupComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-pipeline-progress-group', imports: [PipelineProgressItemComponent], host: {
+                        class: 'is-flex is-flex-direction-column',
+                        '[style.height]': 'height()',
+                        '[style.transition]': 'transition'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (stat of steps(); track stat.status) {\n  <he-pipeline-progress-item\n    [showStatus]=\"visible()\"\n    [status]=\"stat\"\n    [statusToLabelMap]=\"statusToLabelMap()\"\n    [position]=\"stat.position\" />\n}\n", styles: [":host{overflow:hidden}he-pipeline-progress-item{left:-78px;margin-left:auto;width:50%;height:50px;min-height:50px}\n"] }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], isFirstStage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFirstStage", required: false }] }], isLastStage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLastStage", required: false }] }], stepStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepStatus", required: false }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: true }] }], statusToLabelMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToLabelMap", required: true }] }] } });
+
+const cleanStatus = (status) => (status || '').replace('Done', '').replace('Error', '');
+class PipelineStagesProgressComponent {
+    constructor() {
+        /**
+         * The current status.
+         */
+        this.status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
+        /**
+         * Is the current status in progress?
+         */
+        this.processing = input(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
+        /**
+         * List of statuses, without the `Done` or `Error` suffix.
+         */
+        this.statuses = input.required(...(ngDevMode ? [{ debugName: "statuses" }] : []));
+        /**
+         * Assign a group to each status.
+         */
+        this.statusToGroupMap = input.required(...(ngDevMode ? [{ debugName: "statusToGroupMap" }] : []));
+        /**
+         * Label for each status.
+         */
+        this.statusToLabelMap = input.required(...(ngDevMode ? [{ debugName: "statusToLabelMap" }] : []));
+        /**
+         * Assign colors to each group. The statuses under the same group will use the same colors.
+         */
+        this.statusGroupColorFn = input.required(...(ngDevMode ? [{ debugName: "statusGroupColorFn" }] : []));
+        /**
+         * Duration per status, in milliseconds.
+         */
+        this.statusDurationMap = input(...(ngDevMode ? [undefined, { debugName: "statusDurationMap" }] : []));
+        this.openedStage = signal(null, ...(ngDevMode ? [{ debugName: "openedStage" }] : []));
+        this.slideDirection = signal('up', ...(ngDevMode ? [{ debugName: "slideDirection" }] : []));
+        this.successes = computed(() => this.statuses().map(status => `${status}Done`), ...(ngDevMode ? [{ debugName: "successes" }] : []));
+        this.errors = computed(() => this.statuses().map(status => `${status}Error`), ...(ngDevMode ? [{ debugName: "errors" }] : []));
+        this.success = computed(() => this.successes().includes(this.status()), ...(ngDevMode ? [{ debugName: "success" }] : []));
+        this.statusGroups = computed(() => unique(Object.values(this.statusToGroupMap() ?? {})), ...(ngDevMode ? [{ debugName: "statusGroups" }] : []));
+        this.statusIndex = computed(() => {
+            const indexSuccess = this.successes().indexOf(this.status());
+            const indexError = this.errors().indexOf(this.status());
+            return indexError >= 0 ? indexError : indexSuccess + (this.success() ? 1 : 0);
+        }, ...(ngDevMode ? [{ debugName: "statusIndex" }] : []));
+        this.statusesWithStepStatus = computed(() => this.statuses().map((status, index) => ({
+            status,
+            group: this.statusToGroupMap()[status],
+            stepStatus: getStepStatus(index, this.statusIndex(), this.success(), this.processing()),
+            duration: this.statusDurationMap()?.[status]
+        })), ...(ngDevMode ? [{ debugName: "statusesWithStepStatus" }] : []));
+        this.groups = computed(() => {
+            const statusesWithStepStatus = this.statusesWithStepStatus();
+            return this.statusGroups().map(group => {
+                const statuses = statusesWithStepStatus.filter(status => status.group === group);
+                return {
+                    group,
+                    statuses,
+                    valid: statuses.some(({ stepStatus }) => stepStatus === StepStatus.error),
+                    palette: this._getGroupColorPalette(group),
+                    groupStatus: getStageStatus(statuses.map(({ stepStatus }) => stepStatus))
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+        effect(() => {
+            // open the status group or the first group
+            if (this.status()) {
+                // when processing, we need to open the group of the next status
+                const statusIndex = this.statuses().indexOf(cleanStatus(this.status()));
+                const status = this.statuses()[this.processing() ? statusIndex + 1 : statusIndex];
+                this.openStatusGroup(status);
+            }
+        });
+    }
+    openStatusGroup(status) {
+        const group = this.statusesWithStepStatus().find(group => group.status == cleanStatus(status))?.group;
+        const index = this.groups().findIndex(value => value.group === group);
+        this.openedStage.set(Math.max(0, Math.min(index, this.groups().length - 1)));
+    }
+    _getGroupColorPalette(group) {
+        const { background, border, text } = this.statusGroupColorFn()(group);
+        return {
+            '--pipeline-progress-item-background': border,
+            '--pipeline-progress-item-border-color': background,
+            '--pipeline-stages-border-color': border,
+            '--pipeline-stages-background': background,
+            '--pipeline-stages-stagesCountColor': text
+        };
+    }
+    toggleOpenedStage(index) {
+        this.openedStage.set(this.openedStage() === index ? null : index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineStagesProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineStagesProgressComponent, isStandalone: true, selector: "he-pipeline-stages-progress", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, processing: { classPropertyName: "processing", publicName: "processing", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null }, statusToGroupMap: { classPropertyName: "statusToGroupMap", publicName: "statusToGroupMap", isSignal: true, isRequired: true, transformFunction: null }, statusToLabelMap: { classPropertyName: "statusToLabelMap", publicName: "statusToLabelMap", isSignal: true, isRequired: true, transformFunction: null }, statusGroupColorFn: { classPropertyName: "statusGroupColorFn", publicName: "statusGroupColorFn", isSignal: true, isRequired: true, transformFunction: null }, statusDurationMap: { classPropertyName: "statusDurationMap", publicName: "statusDurationMap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (group of groups(); track group.group; let index = $index, first = $first, last = $last) {\n  <div class=\"pipeline-stage-container is-centered\" [ngStyle]=\"group.palette\">\n    <div>&nbsp;</div>\n    <he-pipeline-progress-stage (click)=\"toggleOpenedStage(index)\" [processing]=\"processing()\" [group]=\"group\" />\n    <div>&nbsp;</div>\n    <he-pipeline-progress-group\n      [style.order]=\"slideDirection() === 'up' ? -99 : 99\"\n      [direction]=\"slideDirection()\"\n      [statuses]=\"group.statuses\"\n      [statusToLabelMap]=\"statusToLabelMap()\"\n      [isFirstStage]=\"first\"\n      [isLastStage]=\"last\"\n      [visible]=\"openedStage() === index\" />\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr auto auto 1fr}:host .pipeline-stage-container{grid-column:span 4;position:relative;overflow:hidden;display:grid;grid-template-columns:subgrid}he-pipeline-progress-stage{grid-column:span 2}he-pipeline-progress-group{grid-column:span 4}\n"], dependencies: [{ kind: "component", type: PipelineProgressStageComponent, selector: "he-pipeline-progress-stage", inputs: ["group", "processing"] }, { kind: "component", type: PipelineProgressGroupComponent, selector: "he-pipeline-progress-group", inputs: ["visible", "isFirstStage", "isLastStage", "stepStatus", "statuses", "direction", "statusToLabelMap"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineStagesProgressComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-pipeline-stages-progress', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PipelineProgressStageComponent, PipelineProgressGroupComponent, NgStyle], template: "@for (group of groups(); track group.group; let index = $index, first = $first, last = $last) {\n  <div class=\"pipeline-stage-container is-centered\" [ngStyle]=\"group.palette\">\n    <div>&nbsp;</div>\n    <he-pipeline-progress-stage (click)=\"toggleOpenedStage(index)\" [processing]=\"processing()\" [group]=\"group\" />\n    <div>&nbsp;</div>\n    <he-pipeline-progress-group\n      [style.order]=\"slideDirection() === 'up' ? -99 : 99\"\n      [direction]=\"slideDirection()\"\n      [statuses]=\"group.statuses\"\n      [statusToLabelMap]=\"statusToLabelMap()\"\n      [isFirstStage]=\"first\"\n      [isLastStage]=\"last\"\n      [visible]=\"openedStage() === index\" />\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr auto auto 1fr}:host .pipeline-stage-container{grid-column:span 4;position:relative;overflow:hidden;display:grid;grid-template-columns:subgrid}he-pipeline-progress-stage{grid-column:span 2}he-pipeline-progress-group{grid-column:span 4}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], processing: [{ type: i0.Input, args: [{ isSignal: true, alias: "processing", required: false }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: true }] }], statusToGroupMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToGroupMap", required: true }] }], statusToLabelMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToLabelMap", required: true }] }], statusGroupColorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusGroupColorFn", required: true }] }], statusDurationMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusDurationMap", required: false }] }] } });
+
 class PopoverComponent {
     constructor() {
         this.message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
@@ -5526,7 +5987,7 @@ const lollipopChartPlugin = settings => ({
         if (!chart.data.datasets?.length) {
             return;
         }
-        const { circleRadius, lineWidth, colorFn, isMouseInsideLollipopFn } = {
+        const { circleRadius, lineWidth, colorFn, isMouseInsideLollipopFn, valueFn } = {
             ...defaultLollipopSettings,
             ...(settings ?? {})
         };
@@ -5546,12 +6007,16 @@ const lollipopChartPlugin = settings => ({
                 const { base, x, y } = element;
                 const color = colorFn(element.options, index);
                 const data = dataset.data[index];
-                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x, y }, circleRadius));
-                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
-                circle(ctx, x, y, color, circleRadius);
-                if (Array.isArray(data)) {
-                    lineWidth && line(ctx, base, x, y, color, lineWidth);
-                    circle(ctx, base, y, color, circleRadius);
+                const overrideValue = valueFn?.(dataset, index, chart);
+                const xValue = isUndefined(overrideValue) ? x : chart.scales.x.getPixelForValue(overrideValue);
+                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: xValue, y }, circleRadius));
+                circle(ctx, xValue, y, color, circleRadius);
+                // draw the line between the 2 cricles if necessary
+                Array.isArray(data) && lineWidth && line(ctx, base, x, y, color, lineWidth);
+                // when drawing from the data, draw both ends if its an array
+                if (xValue === null) {
+                    clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
+                    Array.isArray(data) && circle(ctx, base, y, color, circleRadius);
                 }
             });
             ctx.restore();
@@ -9275,208 +9740,6 @@ const nodeVersion = (node) => {
     return versions?.length ? desc(versions)[0] : null;
 };
 
-// auto-generated content using "node scripts/generate-icons.js"
-const iconSizes = [
-    '16',
-    '20',
-    '24',
-    '40',
-    '48'
-];
-const icons = [
-    'aggregation',
-    'api',
-    'api-circle',
-    'archive',
-    'arrow-down',
-    'arrow-down-right',
-    'arrow-left',
-    'arrow-right',
-    'arrow-up',
-    'autogenerate',
-    'autogenerate-circle',
-    'aws',
-    'ban',
-    'bell',
-    'bell-with-badge',
-    'book',
-    'breakdown',
-    'bug',
-    'buoy',
-    'calculation-toolkit',
-    'calculator',
-    'caret-down',
-    'caret-left',
-    'caret-right',
-    'caret-up',
-    'certificate',
-    'chart',
-    'checkmark',
-    'checkmark-circle',
-    'checkmark-circle-filled',
-    'checkmark-circle-filled-with-shadow',
-    'chevron-double-left',
-    'chevron-double-right',
-    'chevron-down',
-    'chevron-left',
-    'chevron-right',
-    'chevron-up',
-    'circle',
-    'citation',
-    'citation-square',
-    'clock',
-    'cloud',
-    'collapse',
-    'collapse-panel',
-    'commit',
-    'community',
-    'community-edition',
-    'compare',
-    'copy',
-    'corner-drag',
-    'csv-file',
-    'cycle',
-    'dashboard',
-    'data-format',
-    'database-wheat',
-    'dot-circle',
-    'dot-filled',
-    'download',
-    'drag',
-    'edit',
-    'edit-withfield',
-    'embed',
-    'exclamation',
-    'exclamation-triangle',
-    'exclamation-triangle-filled',
-    'export',
-    'external-link',
-    'feedback',
-    'fence',
-    'film',
-    'filter-funnel',
-    'filter-slider',
-    'flash',
-    'folder',
-    'folder-open',
-    'foodprocessor',
-    'globe-continents',
-    'globe-lines',
-    'glossary',
-    'greenhouse',
-    'guide',
-    'guide-overlay',
-    'help',
-    'help-circle',
-    'history',
-    'home',
-    'husk',
-    'image',
-    'incognito',
-    'indexed',
-    'info',
-    'info-circle',
-    'lake',
-    'link',
-    'list-indented',
-    'livestock',
-    'loading',
-    'loading-bar',
-    'loading-circle-filled',
-    'loading-circle-filled-withshadow',
-    'log',
-    'mail',
-    'map',
-    'menu',
-    'messages',
-    'messages-with-badge',
-    'metrics',
-    'migration',
-    'minus',
-    'model-docs',
-    'news',
-    'node',
-    'notepad',
-    'ocean',
-    'organisation',
-    'overflow-menu',
-    'pin',
-    'plus',
-    'pond',
-    'private-eye',
-    'private-eye-crossed',
-    'private-lock',
-    'profile-checkmark',
-    'profile-circle',
-    'profile-gear',
-    'progress',
-    'python',
-    'refresh',
-    'rename',
-    'retailer',
-    'review',
-    'river',
-    'save',
-    'schema',
-    'search',
-    'search-with-exclamation',
-    'search-with-minus',
-    'search-with-plus',
-    'settings',
-    'share',
-    'share-socials',
-    'shrub',
-    'sign-out',
-    'slack',
-    'socials-gitlab',
-    'socials-google',
-    'socials-linkedin',
-    'socials-linkedin-circle',
-    'socials-orcid',
-    'socials-orcid-circle',
-    'sort-ascending',
-    'sort-caret-down-filled',
-    'sort-caret-stacked-filled-stacked',
-    'sort-caret-up-filled',
-    'source',
-    'star',
-    'star-filled',
-    'table',
-    'tag-filled',
-    'target',
-    'term',
-    'textform-list',
-    'tool',
-    'transport',
-    'trash',
-    'tree',
-    'turn-phone',
-    'unit',
-    'upload',
-    'video',
-    'xmark',
-    'xmark-circle',
-    'xmark-circle-filled',
-    'xmark-circle-filled-with-shadow',
-    'zip'
-];
-
-const loadSvgSprite = () => {
-    const http = inject(HttpClient);
-    const document = inject(DOCUMENT);
-    const platformLocation = inject(PlatformLocation);
-    const baseUrl = platformLocation.getBaseHrefFromDOM();
-    return lastValueFrom(http.get(`${baseUrl}assets/svg-icons/icons-sprite.svg`, { responseType: 'text' }).pipe(tap(svgContent => {
-        const div = document.createElement('div');
-        div.innerHTML = svgContent;
-        const svg = div.querySelector('svg');
-        if (svg) {
-            svg.style.display = 'none';
-            document.body.insertBefore(svg, document.body.firstChild);
-        }
-    })));
-};
-
 class NodeAggregatedInfoComponent {
     constructor() {
         this.icon = input('info-circle', ...(ngDevMode ? [{ debugName: "icon" }] : []));
@@ -10384,6 +10647,14 @@ const formatRule = (rule, path = '', negation = false) => rule?.enum?.length
 const patternErrorKey = (pattern) => `should match pattern "${pattern}"`;
 // set message as empty to not display it
 const customErrorMessage = {
+    'this field is required': ({ dataPath }, _errorCount, allErrors) => {
+        const parts = parseDataPath(dataPath);
+        const key = parts[parts.length - 1];
+        const type = parts[parts.length - 2];
+        return allErrors?.length
+            ? `You are missing the following required field: ${key.label} (for ${type.label}).`
+            : 'This field is required.';
+    },
     'should not be empty': ({ params }) => [
         `Empty ${params.type} are not allowed in HESTIA.`,
         params?.type === NodeType.ImpactAssessment
@@ -10983,7 +11254,7 @@ const formatError = (error, allErrors = []) => error
     : undefined;
 const errorHasError = (error) => error && (error.level === 'error' || !error.level);
 const errorHasWarning = (error) => error && error.level === 'warning';
-const isMissingPropertyError = ({ params }) => !!params && 'missingProperty' in params;
+const isMissingPropertyError = ({ params, message }) => !!params && 'missingProperty' in params;
 const isMissingOneOfError = ({ keyword, schemaPath }) => keyword === 'required' && (schemaPath || '').includes('oneOf');
 const isFailingKeywordError = ({ params }) => !!params && 'failingKeyword' in params;
 const filterError = (error) => [isFailingKeywordError].every(func => !func(error));
@@ -11336,6 +11607,29 @@ const missingPropertyErrors = (node, errors, parent = '') => {
             };
         });
 };
+const requiredPropertyErrors = (node, errors, parent = '') => {
+    const allErrors = errors.filter(error => parentKey(error.dataPath) === parent && error.message === 'this field is required');
+    return allErrors.map(error => {
+        const fullKey = error.dataPath;
+        const missingOneOf = isMissingOneOfError(error);
+        return {
+            id: propertyId(),
+            schemaType: node.type,
+            suggestions: { type: defaultSuggestionType },
+            key: error.dataPath.split('.').pop(),
+            fullKey,
+            value: '',
+            editable: false,
+            error: formatError(error),
+            errorGuidePageId: guidePageId(node.type, error?.message),
+            hasError: missingOneOf ? false : errorHasError(error),
+            hasWarning: missingOneOf || errorHasWarning(error),
+            properties: [],
+            addPropertyEnabled: true,
+            formatter: formatter('')
+        };
+    });
+};
 const propertyFromNode = (schemas, errors, nodeSchema, deepEditable, parent = '', node, parentNode) => (key) => {
     const value = node[key];
     const expandable = isExpandable(value);
@@ -11422,6 +11716,7 @@ const recursiveProperties = (schemas, errors, nodeSchema, deepEditable, parent =
     .filter(key => !ignoreKeys.includes(key))
     .map(propertyFromNode(schemas, errors, nodeSchema, deepEditable, parent, node, parentNode || node))
     .concat(...missingPropertyErrors(node, errors, parent))
+    .concat(...requiredPropertyErrors(node, errors, parent))
     .sort(sortProperties);
 const fullKeyParts = (fullKey) => fullKey.split('.').flatMap(val => {
     if (val.endsWith(']')) {
@@ -12292,6 +12587,7 @@ var FileUploadErrorKeys;
     FileUploadErrorKeys["MaxSize"] = "max-size";
     FileUploadErrorKeys["InvalidBlankNodeHeaders"] = "invalid-blank-node-headers";
     FileUploadErrorKeys["MultipleNodeTypeCase"] = "multiple-nodeType-case";
+    FileUploadErrorKeys["InvalidListIndex"] = "invalid-list-index";
     FileUploadErrorKeys["MaxRows"] = "max-rows";
     FileUploadErrorKeys["Mendeley"] = "'content-type'";
     FileUploadErrorKeys["Timeout"] = "TimeoutError: Timeout has occurred";
@@ -12393,11 +12689,11 @@ class FilesUploadErrorsComponent {
         return value !== firstVal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesUploadErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesUploadErrorsComponent, isStandalone: true, selector: "he-files-upload-errors", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n  <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <div>\n          <span>\n            Uploading data with\n            <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n            is not allowed.\n          </span>\n          <span class=\"is-pl-1\">\n            Please try uploading with\n            <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n            instead.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <div>\n          <p>The uploaded content does not appear to contain valid JSON data:</p>\n          <div class=\"is-my-2\">\n            <pre><code>{{error().error}}</code></pre>\n          </div>\n          <p>\n            Please validate your JSON content before uploading it using an\n            <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n            for example.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NoData) {\n        <div>\n          <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n        <div>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"notification is-danger\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n        <div>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div>\n          <div>\n            <span>\n              The following value in the column\n              <i>{{ error().key }}</i>\n              is not in the correct format:\n            </span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n          </div>\n          @switch (hasNumberWithCommasError()) {\n            @case (true) {\n              <p class=\"is-mt-2\">\n                Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n                number from the fractional part of the number.\n              </p>\n              <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n              <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n              <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n              <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n            }\n            @case (false) {\n              <ng-container *ngTemplateOutlet=\"schemaError\" />\n              <p>The error could either be a value in the column, or an error with the column header.</p>\n              <p>\n                If you are trying to set no data, we accept either\n                <code>-</code>\n                or an empty cell.\n              </p>\n            }\n          }\n        </div>\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <div>\n          <div>\n            <span class=\"pr-1\">The following field is required in the</span>\n            @if (error().schema) {\n              <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n            }\n            <span>schema:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n          </div>\n          <p>\n            @switch (error().property) {\n              @case ('id') {\n                <span>\n                  You must assign a unique\n                  <code>id</code>\n                  for every record in your data.\n                </span>\n              }\n              @case ('type') {\n                <span>\n                  Every record in your data must contain a\n                  <code>type</code>\n                  .\n                </span>\n              }\n            }\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <div>\n          <div>\n            <span class=\"pr-1\">\n              The following field is\n              <code>internal</code>\n              in the\n            </span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n            <span>:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n          </div>\n          <p>\n            You cannot upload\n            <code>internal</code>\n            fields to HESTIA.\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        <div>\n          @if (error().key) {\n            <div>\n              <span>The following Node does not exist in the schema:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n            </div>\n          } @else if (error().schema) {\n            <div>\n              <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n            </div>\n          }\n          <p>\n            <span>The list of accepted values is:</span>\n          </p>\n          <div class=\"content\">\n            <ul>\n              @for (type of nodeTypes; track type) {\n                <li>\n                  <i>{{ type }}</i>\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <div>\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div>\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </div>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <div>\n          <p>\n            No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n            begining of the file and try uploading again.\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <div>\n          <div>\n            <span class=\"pr-1\">The Excel sheet</span>\n            <code>{{ error().value }}</code>\n            <span class=\"pl-1\">does not exist.</span>\n            <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n            <ul class=\"mt-1 content is-list-style-disc pl-5\">\n              @for (e of error().error.split(';'); track e) {\n                <li>\n                  <code>{{ e }}</code>\n                </li>\n              }\n            </ul>\n          </div>\n          <p>\n            <span>Please re-upload selecting one of the sheets above.</span>\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <div>\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div>\n          <div>\n            <span class=\"is-pr-1\">You have multiple</span>\n            <code>{{ error().schema | pluralize }}</code>\n            <span class=\"is-px-1\">with the same</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-px-1\">but different data. The</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">is:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n          </div>\n          <p class=\"is-mt-2 is-italic\">\n            <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">unique.</span>\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <div>\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </div>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <div>\n          <p>\n            To link nodes together, you first need to define the node (e.g.,\n            <code>source.id</code>\n            ,\n            <code>source.bibliography.title</code>\n            ) and then create the link (e.g.,\n            <code>cycle.defaultSource.id</code>\n            ). We do not allow nesting (e.g.,\n            <code>cycle.defaultSource.bibliography.title</code>\n            ).\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NestedNodes) {\n        <div>\n          <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n          <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <div>\n          <p>\n            You have used the internal\n            <code>&#64;id</code>\n            field to upload a new Node.\n          </p>\n          <p>\n            The\n            <code>&#64;id</code>\n            field should only be used to reference existing Node or Terms. Example:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <div>\n          <p>You are using a combination of mixed cases in your headers:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n          <p>\n            Please make sure to always use either\n            <code>impactAssessment</code>\n            or\n            <code>impactassessment</code>\n            , but not both.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <div>\n          <p>\n            You are using both\n            <code>&#64;id</code>\n            (or\n            <code>id</code>\n            ) and\n            <code>name</code>\n            fields to upload an existing Node (e.g., a Term).\n          </p>\n          <p>\n            Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n            Instead, you should only use one of them:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div>\n          <p>The column header {{ error().key }} must use the array format. Examples:</p>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n          <ng-container *ngTemplateOutlet=\"schemaError\" />\n        </div>\n      }\n      @case (ErrorKeys.MaxSize) {\n        <div>\n          <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n          <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n        </div>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <div>\n          <span>\n            Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n            bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <div>\n          <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @case (ErrorKeys.Timeout) {\n        <div>\n          <p>Time exceeded for current step.</p>\n\n          @if (debug()) {\n            <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @default {\n        <div>\n          <p>{{ message() }}</p>\n\n          @if (debug()) {\n            <pre><code>{{ error() | json }}</code></pre>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div>\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div>\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div>\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div>\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <div>\n        <b>Preview:</b>\n        <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p class=\"is-mt-2\">\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesUploadErrorsComponent, isStandalone: true, selector: "he-files-upload-errors", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n  <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <p>\n          Uploading data with\n          <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n          is not allowed.\n        </p>\n        <p>\n          Please try uploading with\n          <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n          instead.\n        </p>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <p>The uploaded content does not appear to contain valid JSON data:</p>\n        <pre><code>{{error().error}}</code></pre>\n        <p>\n          Please validate your JSON content before uploading it using an\n          <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n          for example.\n        </p>\n      }\n      @case (ErrorKeys.NoData) {\n        <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n        <ng-container *ngTemplateOutlet=\"defaultError\" />\n      }\n      @case (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n\n        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <p>\n          The following value in the column\n          <i>{{ error().key }}</i>\n          is not in the correct format:\n        </p>\n        <pre><code>{{stringify(error().value)}}</code></pre>\n\n        @switch (hasNumberWithCommasError()) {\n          @case (true) {\n            <p>\n              Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n              number from the fractional part of the number.\n            </p>\n            <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n            <pre><code>3,510.1</code></pre>\n            <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n            <pre><code>3510.1</code></pre>\n          }\n          @case (false) {\n            <ng-container *ngTemplateOutlet=\"schemaError\" />\n            <p>The error could either be a value in the column, or an error with the column header.</p>\n            <p>\n              If you are trying to set no data, we accept either\n              <code>-</code>\n              or an empty cell.\n            </p>\n          }\n        }\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <p>\n          <span class=\"pr-1\">The following field is required in the</span>\n          @if (error().schema) {\n            <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n          }\n          <span>schema:</span>\n        </p>\n        <pre><code>{{error().property}}</code></pre>\n\n        @switch (error().property) {\n          @case ('id') {\n            <p>\n              You must assign a unique\n              <code>id</code>\n              for every record in your data.\n            </p>\n          }\n          @case ('type') {\n            <p>\n              Every record in your data must contain a\n              <code>type</code>\n              .\n            </p>\n          }\n        }\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <p>\n          <span class=\"pr-1\">\n            The following field is\n            <code>internal</code>\n            in the\n          </span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n          <span>:</span>\n        </p>\n        <pre><code>{{error().schemaKey || error().key}}</code></pre>\n\n        <p>\n          You cannot upload\n          <code>internal</code>\n          fields to HESTIA.\n        </p>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        @if (error().key) {\n          <p>The following Node does not exist in the schema:</p>\n          <pre><code>{{error().key}}</code></pre>\n        } @else if (error().schema) {\n          <p>The following Node Type does not exist in the schema or can not be uploaded directly:</p>\n          <br />\n          <pre><code>{{error().schema}}</code></pre>\n        }\n\n        <p>\n          <span>The list of accepted values is:</span>\n        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (type of nodeTypes; track type) {\n              <li>\n                <i>{{ type }}</i>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <p>\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </p>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <p>\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </p>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <p>\n          No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n          begining of the file and try uploading again.\n        </p>\n        <ng-container *ngTemplateOutlet=\"defaultError\" />\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <p>\n          <span class=\"pr-1\">The Excel sheet</span>\n          <code>{{ error().value }}</code>\n          <span class=\"pl-1\">does not exist.</span>\n          <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (e of error().error.split(';'); track e) {\n              <li>\n                <code>{{ e }}</code>\n              </li>\n            }\n          </ul>\n        </div>\n        <p>Please re-upload selecting one of the sheets above.</p>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <p>Your upload contains duplicated column headers.</p>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <p>\n          <span class=\"is-pr-1\">You have multiple</span>\n          <code>{{ error().schema | pluralize }}</code>\n          <span class=\"is-px-1\">with the same</span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n          <span class=\"is-px-1\">but different data. The</span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n          <span class=\"is-pl-1\">is:</span>\n        </p>\n        <pre><code>{{error().value}}</code></pre>\n\n        <p class=\"is-italic\">\n          <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n          <span class=\"is-pl-1\">unique.</span>\n        </p>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <p>\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </p>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <p>\n          To link nodes together, you first need to define the node (e.g.,\n          <code>source.id</code>\n          ,\n          <code>source.bibliography.title</code>\n          ) and then create the link (e.g.,\n          <code>cycle.defaultSource.id</code>\n          ). We do not allow nesting (e.g.,\n          <code>cycle.defaultSource.bibliography.title</code>\n          ).\n        </p>\n      }\n      @case (ErrorKeys.NestedNodes) {\n        <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n        <pre><code>{{ sampleLinkedNodes | json }}</code></pre>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <p>\n          You have used the internal\n          <code>&#64;id</code>\n          field to upload a new Node.\n        </p>\n        <p>\n          The\n          <code>&#64;id</code>\n          field should only be used to reference existing Node or Terms. Example:\n        </p>\n        <p class=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n      }\n      @case (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <p>You are using a combination of mixed cases in your headers:</p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>impactAssessment.id,impactAssessment.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>impactAssessment.id,impactassessment.name</code></pre>\n\n        <p>\n          Please make sure to always use either\n          <code>impactAssessment</code>\n          or\n          <code>impactassessment</code>\n          , but not both.\n        </p>\n      }\n      @case (ErrorKeys.InvalidListIndex) {\n        <p>You have used incorrect indexes for the list of blank nodes:</p>\n        <p class=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.100.term.name</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.1.term.name</code></pre>\n\n        <p>Please make sure to number correctly the list of Blank Nodes in a consecutive order, without gaps.</p>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <p>\n          You are using both\n          <code>&#64;id</code>\n          (or\n          <code>id</code>\n          ) and\n          <code>name</code>\n          fields to upload an existing Node (e.g., a Term).\n        </p>\n        <p>\n          Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n          Instead, you should only use one of them:\n        </p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id</code></pre>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <p>The column header {{ error().key }} must use the array format. Examples:</p>\n        <pre><code>{{ error().key + '.0.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.0.value' }}</code></pre>\n        <pre><code>{{ error().key + '.1.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.1.value' }}</code></pre>\n        <ng-container *ngTemplateOutlet=\"schemaError\" />\n      }\n      @case (ErrorKeys.MaxSize) {\n        <p>\n          The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb). Please\n          re-upload these data in multiple files.\n        </p>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <p>\n          Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n          bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n        </p>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @case (ErrorKeys.Timeout) {\n        <p>Time exceeded for current step.</p>\n        @if (debug()) {\n          <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @default {\n        <p>{{ message() }}</p>\n        @if (debug()) {\n          <pre><code>{{ error() | json }}</code></pre>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div>\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div>\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div>\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div>\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <b>Preview:</b>\n      <pre><code>{{stringify(error().node)}}</code></pre>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p>\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p>\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesUploadErrorsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent, DecimalPipe, JsonPipe, EllipsisPipe, PluralizePipe], template: "@if (error()) {\n  <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <div>\n          <span>\n            Uploading data with\n            <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n            is not allowed.\n          </span>\n          <span class=\"is-pl-1\">\n            Please try uploading with\n            <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n            instead.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <div>\n          <p>The uploaded content does not appear to contain valid JSON data:</p>\n          <div class=\"is-my-2\">\n            <pre><code>{{error().error}}</code></pre>\n          </div>\n          <p>\n            Please validate your JSON content before uploading it using an\n            <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n            for example.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NoData) {\n        <div>\n          <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n        <div>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"notification is-danger\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n        <div>\n          <pre><code>{{error().key}}</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <div>\n          <div>\n            <span>\n              The following value in the column\n              <i>{{ error().key }}</i>\n              is not in the correct format:\n            </span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{stringify(error().value)}}</code></pre>\n          </div>\n          @switch (hasNumberWithCommasError()) {\n            @case (true) {\n              <p class=\"is-mt-2\">\n                Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n                number from the fractional part of the number.\n              </p>\n              <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n              <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n              <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n              <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n            }\n            @case (false) {\n              <ng-container *ngTemplateOutlet=\"schemaError\" />\n              <p>The error could either be a value in the column, or an error with the column header.</p>\n              <p>\n                If you are trying to set no data, we accept either\n                <code>-</code>\n                or an empty cell.\n              </p>\n            }\n          }\n        </div>\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <div>\n          <div>\n            <span class=\"pr-1\">The following field is required in the</span>\n            @if (error().schema) {\n              <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n            }\n            <span>schema:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().property}}</code></pre>\n          </div>\n          <p>\n            @switch (error().property) {\n              @case ('id') {\n                <span>\n                  You must assign a unique\n                  <code>id</code>\n                  for every record in your data.\n                </span>\n              }\n              @case ('type') {\n                <span>\n                  Every record in your data must contain a\n                  <code>type</code>\n                  .\n                </span>\n              }\n            }\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <div>\n          <div>\n            <span class=\"pr-1\">\n              The following field is\n              <code>internal</code>\n              in the\n            </span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n            <span>:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().schemaKey || error().key}}</code></pre>\n          </div>\n          <p>\n            You cannot upload\n            <code>internal</code>\n            fields to HESTIA.\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        <div>\n          @if (error().key) {\n            <div>\n              <span>The following Node does not exist in the schema:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().key}}</code></pre>\n            </div>\n          } @else if (error().schema) {\n            <div>\n              <span>The following Node Type does not exist in the schema or can not be uploaded directly:</span>\n              <br />\n              <pre class=\"is-mt-2\"><code>{{error().schema}}</code></pre>\n            </div>\n          }\n          <p>\n            <span>The list of accepted values is:</span>\n          </p>\n          <div class=\"content\">\n            <ul>\n              @for (type of nodeTypes; track type) {\n                <li>\n                  <i>{{ type }}</i>\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <div>\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </div>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <div>\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </div>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <div>\n          <p>\n            No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n            begining of the file and try uploading again.\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <div>\n          <div>\n            <span class=\"pr-1\">The Excel sheet</span>\n            <code>{{ error().value }}</code>\n            <span class=\"pl-1\">does not exist.</span>\n            <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n            <ul class=\"mt-1 content is-list-style-disc pl-5\">\n              @for (e of error().error.split(';'); track e) {\n                <li>\n                  <code>{{ e }}</code>\n                </li>\n              }\n            </ul>\n          </div>\n          <p>\n            <span>Please re-upload selecting one of the sheets above.</span>\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <div>\n          <span>Your upload contains duplicated column headers.</span>\n        </div>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <div>\n          <div>\n            <span class=\"is-pr-1\">You have multiple</span>\n            <code>{{ error().schema | pluralize }}</code>\n            <span class=\"is-px-1\">with the same</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-px-1\">but different data. The</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">is:</span>\n            <br />\n            <pre class=\"is-mt-2\"><code>{{error().value}}</code></pre>\n          </div>\n          <p class=\"is-mt-2 is-italic\">\n            <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n            <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n            <span class=\"is-pl-1\">unique.</span>\n          </p>\n        </div>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <div>\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </div>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <div>\n          <p>\n            To link nodes together, you first need to define the node (e.g.,\n            <code>source.id</code>\n            ,\n            <code>source.bibliography.title</code>\n            ) and then create the link (e.g.,\n            <code>cycle.defaultSource.id</code>\n            ). We do not allow nesting (e.g.,\n            <code>cycle.defaultSource.bibliography.title</code>\n            ).\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.NestedNodes) {\n        <div>\n          <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n          <pre class=\"is-mt-2\"><code>{{ sampleLinkedNodes | json }}</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <div>\n          <p>\n            You have used the internal\n            <code>&#64;id</code>\n            field to upload a new Node.\n          </p>\n          <p>\n            The\n            <code>&#64;id</code>\n            field should only be used to reference existing Node or Terms. Example:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <div>\n          <p>You are using a combination of mixed cases in your headers:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactAssessment.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>impactAssessment.id,impactassessment.name</code></pre>\n\n          <p>\n            Please make sure to always use either\n            <code>impactAssessment</code>\n            or\n            <code>impactassessment</code>\n            , but not both.\n          </p>\n        </div>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <div>\n          <p>\n            You are using both\n            <code>&#64;id</code>\n            (or\n            <code>id</code>\n            ) and\n            <code>name</code>\n            fields to upload an existing Node (e.g., a Term).\n          </p>\n          <p>\n            Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n            Instead, you should only use one of them:\n          </p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>cycle.inputs.0.term.&#64;id</code></pre>\n        </div>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <div>\n          <p>The column header {{ error().key }} must use the array format. Examples:</p>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.0.value' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.term.name' }}</code></pre>\n          <pre class=\"is-mt-2\"><code>{{ error().key + '.1.value' }}</code></pre>\n          <ng-container *ngTemplateOutlet=\"schemaError\" />\n        </div>\n      }\n      @case (ErrorKeys.MaxSize) {\n        <div>\n          <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb).</span>\n          <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n        </div>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <div>\n          <span>\n            Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n            bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n          </span>\n        </div>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <div>\n          <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @case (ErrorKeys.Timeout) {\n        <div>\n          <p>Time exceeded for current step.</p>\n\n          @if (debug()) {\n            <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n      @default {\n        <div>\n          <p>{{ message() }}</p>\n\n          @if (debug()) {\n            <pre><code>{{ error() | json }}</code></pre>\n          }\n\n          <ng-container *ngTemplateOutlet=\"reportError\" />\n        </div>\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div>\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div>\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div>\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div>\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <div>\n        <b>Preview:</b>\n        <pre class=\"is-mt-2\"><code>{{stringify(error().node)}}</code></pre>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p class=\"is-mt-2\">\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, HESvgIconComponent, DecimalPipe, JsonPipe, EllipsisPipe, PluralizePipe], template: "@if (error()) {\n  <div class=\"is-flex is-flex-direction-column is-gap-8 has-text-danger\">\n    @switch (message()) {\n      @case (ErrorKeys.PrivacyNotAllowed) {\n        <p>\n          Uploading data with\n          <code class=\"is-px-1\">dataPrivate={{ error().value }}</code>\n          is not allowed.\n        </p>\n        <p>\n          Please try uploading with\n          <code class=\"is-px-1\">dataPrivate={{ !error().value }}</code>\n          instead.\n        </p>\n      }\n      @case (ErrorKeys.InvalidJSON) {\n        <p>The uploaded content does not appear to contain valid JSON data:</p>\n        <pre><code>{{error().error}}</code></pre>\n        <p>\n          Please validate your JSON content before uploading it using an\n          <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n          for example.\n        </p>\n      }\n      @case (ErrorKeys.NoData) {\n        <p>No Nodes could be found in your Upload. Please verify the column headers match the HESTIA schema.</p>\n        <ng-container *ngTemplateOutlet=\"defaultError\" />\n      }\n      @case (ErrorKeys.SetValueError) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-3\">\n              We could not convert the data in your Upload. This can be due to setting 2 different formats in the same\n              field.\n            </span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n\n        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyNotFound) {\n        <div class=\"notification is-danger is-flex is-flex-direction-column is-gap-8\" role=\"alert\">\n          <p>\n            <he-svg-icon name=\"exclamation-triangle\" />\n            <span class=\"is-pl-2\">You have column headers that do not match the HESTIA schema.</span>\n            <span class=\"px-1\">Please refer to the</span>\n            <a [href]=\"schemaUrl()\" target=\"_blank\">schema</a>\n            <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n          </p>\n          <ng-container *ngTemplateOutlet=\"defaultError\" />\n        </div>\n        <pre><code>{{error().key}}</code></pre>\n      }\n      @case (SchemaErrorKeys.PropertyInvalidFormat) {\n        <p>\n          The following value in the column\n          <i>{{ error().key }}</i>\n          is not in the correct format:\n        </p>\n        <pre><code>{{stringify(error().value)}}</code></pre>\n\n        @switch (hasNumberWithCommasError()) {\n          @case (true) {\n            <p>\n              Please format your numbers to remove commas and use a decimal point to separate the whole part of the\n              number from the fractional part of the number.\n            </p>\n            <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n            <pre><code>3,510.1</code></pre>\n            <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n            <pre><code>3510.1</code></pre>\n          }\n          @case (false) {\n            <ng-container *ngTemplateOutlet=\"schemaError\" />\n            <p>The error could either be a value in the column, or an error with the column header.</p>\n            <p>\n              If you are trying to set no data, we accept either\n              <code>-</code>\n              or an empty cell.\n            </p>\n          }\n        }\n      }\n      @case (ErrorKeys.PropertyRequired) {\n        <p>\n          <span class=\"pr-1\">The following field is required in the</span>\n          @if (error().schema) {\n            <a class=\"pr-1\" [href]=\"schemaUrl()\" target=\"_blank\">{{ error().schema }}</a>\n          }\n          <span>schema:</span>\n        </p>\n        <pre><code>{{error().property}}</code></pre>\n\n        @switch (error().property) {\n          @case ('id') {\n            <p>\n              You must assign a unique\n              <code>id</code>\n              for every record in your data.\n            </p>\n          }\n          @case ('type') {\n            <p>\n              Every record in your data must contain a\n              <code>type</code>\n              .\n            </p>\n          }\n        }\n      }\n      @case (ErrorKeys.PropertyInternal) {\n        <p>\n          <span class=\"pr-1\">\n            The following field is\n            <code>internal</code>\n            in the\n          </span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schema }} schema</a>\n          <span>:</span>\n        </p>\n        <pre><code>{{error().schemaKey || error().key}}</code></pre>\n\n        <p>\n          You cannot upload\n          <code>internal</code>\n          fields to HESTIA.\n        </p>\n      }\n      @case (SchemaErrorKeys.SchemaNotFound) {\n        @if (error().key) {\n          <p>The following Node does not exist in the schema:</p>\n          <pre><code>{{error().key}}</code></pre>\n        } @else if (error().schema) {\n          <p>The following Node Type does not exist in the schema or can not be uploaded directly:</p>\n          <br />\n          <pre><code>{{error().schema}}</code></pre>\n        }\n\n        <p>\n          <span>The list of accepted values is:</span>\n        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (type of nodeTypes; track type) {\n              <li>\n                <i>{{ type }}</i>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @case (ErrorKeys.InvalidFirstColumn) {\n        <p>\n          <span>\n            No data in the HESTIA format was detected on the first sheet. Either try selecting a different sheet in the\n            upload screen, or check the sheet to ensure the headers follow the schema - see examples\n          </span>\n          <a class=\"pl-1\" href=\"/guide/guide-file-upload-examples\" target=\"_blank\">here</a>\n        </p>\n      }\n      @case (ErrorKeys.InvalidExcelFile) {\n        <p>\n          This file has been uploaded with a\n          <code>{{ fileExt() }}</code>\n          extension, but does not appear to be a valid Excel file.\n        </p>\n      }\n      @case (ErrorKeys.NoHeaders) {\n        <p>\n          No headers matching the HESTIA schema were found on the first row. Please remove all empty rows at the\n          begining of the file and try uploading again.\n        </p>\n        <ng-container *ngTemplateOutlet=\"defaultError\" />\n      }\n      @case (ErrorKeys.InvalidSheetName) {\n        <p>\n          <span class=\"pr-1\">The Excel sheet</span>\n          <code>{{ error().value }}</code>\n          <span class=\"pl-1\">does not exist.</span>\n          <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n        </p>\n        <div class=\"content\">\n          <ul class=\"is-list-style-disc\">\n            @for (e of error().error.split(';'); track e) {\n              <li>\n                <code>{{ e }}</code>\n              </li>\n            }\n          </ul>\n        </div>\n        <p>Please re-upload selecting one of the sheets above.</p>\n      }\n      @case (ErrorKeys.DuplicatedHeaders) {\n        <p>Your upload contains duplicated column headers.</p>\n      }\n      @case (ErrorKeys.DuplicatedIds) {\n        <p>\n          <span class=\"is-pr-1\">You have multiple</span>\n          <code>{{ error().schema | pluralize }}</code>\n          <span class=\"is-px-1\">with the same</span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n          <span class=\"is-px-1\">but different data. The</span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n          <span class=\"is-pl-1\">is:</span>\n        </p>\n        <pre><code>{{error().value}}</code></pre>\n\n        <p class=\"is-italic\">\n          <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n          <a [href]=\"schemaKeyUrl()\" target=\"_blank\">{{ error().schemaKey }}</a>\n          <span class=\"is-pl-1\">unique.</span>\n        </p>\n      }\n      @case (SchemaErrorKeys.DuplicatedIdFields) {\n        <p>\n          <span class=\"is-pr-1\">You have used both the</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">fields in the same data. Please use</span>\n          <code>&#64;id</code>\n          <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n          <code>id</code>\n          <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n          <code>id</code>\n          <span class=\"is-px-1\">field.</span>\n        </p>\n      }\n      @case (ErrorKeys.NestedHeaders) {\n        <p>\n          To link nodes together, you first need to define the node (e.g.,\n          <code>source.id</code>\n          ,\n          <code>source.bibliography.title</code>\n          ) and then create the link (e.g.,\n          <code>cycle.defaultSource.id</code>\n          ). We do not allow nesting (e.g.,\n          <code>cycle.defaultSource.bibliography.title</code>\n          ).\n        </p>\n      }\n      @case (ErrorKeys.NestedNodes) {\n        <p>To link nodes together, you need to upload each node separately, as we do not allow nesting:</p>\n        <pre><code>{{ sampleLinkedNodes | json }}</code></pre>\n      }\n      @case (ErrorKeys.ReferenceExistingHeaders) {\n        <p>\n          You have used the internal\n          <code>&#64;id</code>\n          field to upload a new Node.\n        </p>\n        <p>\n          The\n          <code>&#64;id</code>\n          field should only be used to reference existing Node or Terms. Example:\n        </p>\n        <p class=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.&#64;id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.id,cycle.inputs.0.term.&#64;id,source.id</code></pre>\n      }\n      @case (ErrorKeys.InvalidBlankNodeHeaders) {\n        <div>\n          <p>Evry blank node must be followed by a number, e.g.:</p>\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre><code>cycle.inputs.term.name</code></pre>\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre><code>cycle.inputs.0.term.name</code></pre>\n        </div>\n      }\n      @case (ErrorKeys.MultipleNodeTypeCase) {\n        <p>You are using a combination of mixed cases in your headers:</p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>impactAssessment.id,impactAssessment.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>impactAssessment.id,impactassessment.name</code></pre>\n\n        <p>\n          Please make sure to always use either\n          <code>impactAssessment</code>\n          or\n          <code>impactassessment</code>\n          , but not both.\n        </p>\n      }\n      @case (ErrorKeys.InvalidListIndex) {\n        <p>You have used incorrect indexes for the list of blank nodes:</p>\n        <p class=\"has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.100.term.name</code></pre>\n        <p class=\"has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.name,cycle.inputs.1.term.name</code></pre>\n\n        <p>Please make sure to number correctly the list of Blank Nodes in a consecutive order, without gaps.</p>\n      }\n      @case (ErrorKeys.MultipleTermHeaders) {\n        <p>\n          You are using both\n          <code>&#64;id</code>\n          (or\n          <code>id</code>\n          ) and\n          <code>name</code>\n          fields to upload an existing Node (e.g., a Term).\n        </p>\n        <p>\n          Using both fields can lead to inconsistencies, if you are not uploading the correct value in either one.\n          Instead, you should only use one of them:\n        </p>\n        <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id,cycle.inputs.0.term.name</code></pre>\n        <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n        <pre><code>cycle.inputs.0.term.&#64;id</code></pre>\n      }\n      @case (SchemaErrorKeys.ObjectArrayInvalid) {\n        <p>The column header {{ error().key }} must use the array format. Examples:</p>\n        <pre><code>{{ error().key + '.0.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.0.value' }}</code></pre>\n        <pre><code>{{ error().key + '.1.term.name' }}</code></pre>\n        <pre><code>{{ error().key + '.1.value' }}</code></pre>\n        <ng-container *ngTemplateOutlet=\"schemaError\" />\n      }\n      @case (ErrorKeys.MaxSize) {\n        <p>\n          The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error().value }}Mb). Please\n          re-upload these data in multiple files.\n        </p>\n      }\n      @case (ErrorKeys.MaxRows) {\n        <p>\n          Your file has {{ error().value | number }} rows. This might be an error caused by adding some data at the\n          bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.\n        </p>\n      }\n      @case (ErrorKeys.Mendeley) {\n        <p>An error occured while fetching the bibliographic information. Please try re-uploading the file.</p>\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @case (ErrorKeys.Timeout) {\n        <p>Time exceeded for current step.</p>\n        @if (debug()) {\n          <span>You can try to \"Re-index\" or \"Re-upload\" if it still does not work.</span>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n      @default {\n        <p>{{ message() }}</p>\n        @if (debug()) {\n          <pre><code>{{ error() | json }}</code></pre>\n        }\n        <ng-container *ngTemplateOutlet=\"reportError\" />\n      }\n    }\n\n    @if (hasGeoJSONError()) {\n      <div>\n        <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n        <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n          <li>\n            <span class=\"is-pr-1\">Go to</span>\n            <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n          </li>\n          <li>\n            <span>\n              Save the boundary in a valid\n              <code>.geojson</code>\n              file.\n            </span>\n          </li>\n          <li>\n            <span>Import it on mapshaper.</span>\n          </li>\n          <li>\n            <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n          </li>\n          <li>\n            <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n          </li>\n          <li>\n            <span>\n              Export to\n              <code>GeoJson</code>\n              or\n              <code>CSV</code>\n              .\n            </span>\n          </li>\n          <li>\n            <span>Copy the resulting content into your upload file.</span>\n          </li>\n        </ul>\n        <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n      </div>\n    }\n\n    @if (columns().length || (error().index && !isSchemaError())) {\n      <div>\n        <b>Hint:</b>\n        <span class=\"pl-1\">the error might be located</span>\n        @if (error().index && !isSchemaError()) {\n          <span class=\"pl-1\">on row {{ error().index }}</span>\n        }\n        @if (columns().length) {\n          <span class=\"pl-1\">in {{ 'column' | pluralize: columns().length }}:</span>\n          <ul class=\"mt-1 content is-list-style-disc pl-5\">\n            @for (column of columns(); track column) {\n              <li>\n                <b class=\"pr-2\">{{ column.column }}</b>\n                <code>{{ column.name }}</code>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n\n    @if (error().suggestions?.length) {\n      <div>\n        <b>Suggestions:</b>\n        <span class=\"pl-1\">did you mean instead:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          @for (suggestion of error().suggestions; track suggestion) {\n            <li>\n              <code>{{ suggestion }}</code>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    @if (showCsvPreview()) {\n      <div>\n        <b>\n          Preview\n          <sup>1</sup>\n          :\n        </b>\n        <div class=\"table-container is-mt-2\">\n          <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n            <thead>\n              @if (error().index) {\n                <th></th>\n              }\n              @for (header of headers(); track header) {\n                <th>{{ header }}</th>\n              }\n            </thead>\n            <tbody>\n              @for (row of rows(); track row) {\n                <tr>\n                  @if (error().index) {\n                    <td class=\"has-text-danger\">\n                      <span class=\"is-nowrap\">Row {{ error().index }}</span>\n                    </td>\n                  }\n                  @for (col of row; track col; let colIndex = $index) {\n                    <td>\n                      <span\n                        [class.has-text-danger]=\"\n                          message() === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                        \">\n                        {{ col | ellipsis: 50 }}\n                      </span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n        <p class=\"is-size-7\">\n          <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n        </p>\n      </div>\n    }\n\n    @if (showJsonPreview()) {\n      <b>Preview:</b>\n      <pre><code>{{stringify(error().node)}}</code></pre>\n    }\n  </div>\n}\n\n<ng-template #defaultError>\n  <p>\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/guide/guide-file-upload-prepare-file'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #reportError>\n  <p>\n    To report this error, please\n    <a class=\"is-pl-1\" [href]=\"reportErrorUrl()\" target=\"_blank\">click here</a>\n    .\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl()\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
 const nodeTerm = (node, key) => {
@@ -14533,5 +14829,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, availableProperties, axisHoverPlugin, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, defaultTicksFont, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeDataStates, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseLogMessage, parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PipelineStagesProgressComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, availableProperties, axisHoverPlugin, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, defaultTicksFont, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeDataStates, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseLogMessage, parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map