@hestia-earth/ui-components 0.41.23 → 0.41.25

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

@@ -43,7 +43,7 @@ import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/s
 import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
 import set from 'lodash.set';
 import uniqBy from 'lodash.uniqby';
-import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { ScrollStrategyOptions, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ResizableDirective, ResizeHandleDirective } from 'angular-resizable-element';
 import * as semver from 'semver';
 import { parse } from 'papaparse';
@@ -6983,8 +6983,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 {
@@ -7632,7 +7632,7 @@ const dataWithConfigModelLogs = (logs, termId) => (data) => {
     const termsLog = termId in log && data.key === 'input'
         ? log[termId].models.reduce((p, c) => {
             // extend requirements if none found
-            p[c].requirements = p[c].requirements || log[c]?.requirements;
+            p[c].requirements = p[c]?.requirements || log[c]?.requirements;
             return p;
         }, log[termId])
         : log;
@@ -8001,6 +8001,7 @@ class GuideOverlayComponent {
         this.domSanitizer = inject(DomSanitizer);
         this.localStorage = inject(LocalStorageService);
         this.guideEnabled = inject(GUIDE_ENABLED);
+        this.scrollStrategy = inject(ScrollStrategyOptions);
         this.responsiveService = inject(ResponsiveService);
         this.service = inject(GuideOverlayService);
         this.pageId = input('', ...(ngDevMode ? [{ debugName: "pageId" }] : []));
@@ -8032,6 +8033,14 @@ class GuideOverlayComponent {
                 offsetX: 24
             }
         ], ...(ngDevMode ? [{ debugName: "positions" }] : []));
+        this.mobilePosition = {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'top'
+        };
+        this.blockStrategy = this.scrollStrategy.block();
+        this.repositiontrategy = this.scrollStrategy.reposition();
         this.url = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl([baseUrl(false), 'guide', 'overlay', this.pageId()].filter(Boolean).join('/')), ...(ngDevMode ? [{ debugName: "url" }] : []));
         this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
         effect(() => {
@@ -8052,7 +8061,7 @@ class GuideOverlayComponent {
         this.localStorage.store(storageKey$1, JSON.stringify({ width, height }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  [cdkConnectedOverlayPositions]=\"responsiveService.isMobile() ? undefined : positions()\"\n  [cdkConnectedOverlayScrollStrategy]=\"responsiveService.isMobile() ? blockStrategy : repositiontrategy\"\n  [cdkConnectedOverlayPanelClass]=\"responsiveService.isMobile() ? 'fullscreen-overlay' : undefined\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"responsiveService.isMobile() ? '100%' : width() + 'px'\"\n    [style.height]=\"responsiveService.isMobile() ? '100%' : height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    @if (!responsiveService.isMobile()) {\n      <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n      <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    }\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}::ng-deep .fullscreen-overlay{width:100vw!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important;max-width:100vw!important}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayComponent, decorators: [{
             type: Component$1,
@@ -8063,7 +8072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ResizableDirective,
                         ResizeHandleDirective,
                         HESvgIconComponent
-                    ], template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"] }]
+                    ], template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  [cdkConnectedOverlayPositions]=\"responsiveService.isMobile() ? undefined : positions()\"\n  [cdkConnectedOverlayScrollStrategy]=\"responsiveService.isMobile() ? blockStrategy : repositiontrategy\"\n  [cdkConnectedOverlayPanelClass]=\"responsiveService.isMobile() ? 'fullscreen-overlay' : undefined\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"responsiveService.isMobile() ? '100%' : width() + 'px'\"\n    [style.height]=\"responsiveService.isMobile() ? '100%' : height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    @if (!responsiveService.isMobile()) {\n      <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n      <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    }\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}::ng-deep .fullscreen-overlay{width:100vw!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important;max-width:100vw!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageId", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], hidden: [{
                 type: HostBinding,
                 args: ['class.is-none']
@@ -9376,7 +9385,6 @@ const icons = [
     'loading-circle-filled',
     'loading-circle-filled-withshadow',
     'log',
-    'magnifier',
     'mail',
     'map',
     'menu',
@@ -9411,6 +9419,7 @@ const icons = [
     'save',
     'schema',
     'search',
+    'search-with-exclamation',
     'search-with-minus',
     'search-with-plus',
     'settings',
@@ -9431,15 +9440,16 @@ const icons = [
     'sort-caret-up-filled',
     'source',
     'star',
+    'star-filled',
     'table',
     'tag-filled',
     'target',
     'term',
     'textform-list',
     'tool',
+    'transport',
     'trash',
     'tree',
-    'truck',
     'turn-phone',
     'unit',
     'upload',
@@ -10927,6 +10937,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.`,
@@ -10945,7 +10958,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("'", '');