@hestia-earth/ui-components 0.41.24 → 0.41.26

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" }] : []));
@@ -6983,8 +7444,8 @@ const nodeTypeIcon = {
     [NodeType.Site]: 'pin',
     [NodeType.Source]: 'source',
     [NodeType.Term]: 'term',
-    [SchemaType.Property]: 'magnifier',
-    [SchemaType.Transport]: 'truck'
+    [SchemaType.Property]: 'search-with-exclamation',
+    [SchemaType.Transport]: 'transport'
 };
 
 class NodeLinkComponent {
@@ -9275,207 +9736,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',
-    'magnifier',
-    '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-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',
-    'table',
-    'tag-filled',
-    'target',
-    'term',
-    'textform-list',
-    'tool',
-    'trash',
-    'tree',
-    'truck',
-    '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" }] : []));
@@ -10936,6 +11196,9 @@ const customErrorMessage = {
     'the property value type is incorrect': ({ params: { expected } }) => `The value must be a ${expected}.`,
     'the node value type is incorrect': ({ params: { expected } }) => `The value must be a ${expected}.`,
     'can not be linked to the same type': ({ params: { current } }) => `Cannot be linked to the same ${current}.`,
+    'must be lower or equal to siteArea': () => `The value of ${code('harvestedArea')} cannot be greater than ${code('siteArea')}.
+    This is because ${code('harvestedArea')} corresponds to the extent of the overall ${code('siteArea')} that is actually harvested.
+    Please amend the value of ${code('harvestedArea')} accordingly.`,
     'must be above the minimum': ({ params: { min } }) => `Must be above ${min}.`,
     'must be below the maximum': ({ params: { max } }) => `Must be below ${max}.`,
     'must be linked to waste input': () => `The term ${code('ionisingCompoundsToAirInputsProduction')} can only have 1 entry of ${code('termType')}: ${glossaryTypeLink(TermTermType.waste)}, so that the ${code('value')} field can represent the amount of units of that waste term.`,
@@ -10954,7 +11217,7 @@ const customErrorMessage = {
         .filter(Boolean)
         .join('\n'),
     'should set the depth': ({ params }) => `The value of Emission ${code(params.term['@id'])} can change significantly based on the soil depth taken into account.
-    Please consider adding a ${schemaLink('Emission#depth', 'depth')} field to the Emission.`
+    Please consider adding ${schemaLink('Emission#depthUpper', 'depthUpper')} and ${schemaLink('Emission#depthLower', 'depthLower')} fields to the Emission.`
 };
 const requiredPropertyError = (message, error) => {
     const field = message.split("'")[1].replace("'", '');
@@ -14529,5 +14792,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