@hestia-earth/ui-components 0.41.32 → 0.41.33

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

@@ -11128,6 +11128,9 @@ const customErrorMessage = {
         : ''}`,
     'invalid water salinity': ({ params }) => `The water type ${params?.current} is not consistent with the Water salinity you specified.
     Make sure the Water salinity value is correct and either fix it or update the water type accordingly.`,
+    'measurements for the same termType must be consistent': ({ params }) => `The information you have provided for ${code(params.termType)} Measurements is not consistent across all Measurements.
+    Please ensure that all your ${code(params.termType)} Measurements have a ${code('dates')} field if at least one ${code(params.termType)} Measurement has a ${code('dates')} field specified.
+    Please also ensure that all your ${code(params.termType)} Measurements have ${code('depthUpper')} and ${code('depthLower')} fields if at least one ${code(params.termType)} Measurement has ${code('depthUpper')} and ${code('depthLower')} fields specified.`,
     'must add substrate inputs': () => 'The substrate must be specified when a substrate-based protected cropping system has been added.',
     'should be equal to cycleDuration for crop': ({ params }) => `For temporary crop production Cycles, ${schemaLink('Cycle#siteDuration', 'siteDuration')} must represent the period from harvest of the previous crop to harvest of the current crop.
     Here, you have stated that ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} represents the period from
@@ -14347,6 +14350,10 @@ class FilterAccordionComponent extends ControlValueAccessor {
         this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.showGroupCount = input(true, ...(ngDevMode ? [{ debugName: "showGroupCount" }] : []));
+        /**
+         * Expand by default the first group in the data, if relevant.
+         */
+        this.expandFirstGroup = input(false, ...(ngDevMode ? [{ debugName: "expandFirstGroup" }] : []));
         this.selectionChanged = output();
         this.selectControl = new FormControl([]);
         this.panelStates = {};
@@ -14364,11 +14371,15 @@ class FilterAccordionComponent extends ControlValueAccessor {
         this.group = computed(() => ({ options: this.filterStore.filteredData() }), ...(ngDevMode ? [{ debugName: "group" }] : []));
         this.disabledValues = computed(() => disabledValues(this.data()), ...(ngDevMode ? [{ debugName: "disabledValues" }] : []));
         effect(() => this.data() && this.filterStore.setData(this.data()));
-        effect(() => (this.panelStates = Object.fromEntries(allGroups(this.data()).map(({ label }) => [
+        effect(() => (this.panelStates = Object.fromEntries(
+        /* eslint-disable-next-line complexity */
+        allGroups(this.data()).map(({ label, type }, index) => [
             label,
             {
                 id: label,
-                expanded: (this.maintainPanelStates() && this.panelStates[label]?.expanded) || false,
+                expanded: (type === 'group' && index === 0 && this.expandFirstGroup()) ||
+                    (this.maintainPanelStates() && this.panelStates[label]?.expanded) ||
+                    false,
                 searchTerm: (this.maintainPanelStates() && this.panelStates[label]?.searchTerm) || ''
             }
         ]))));
@@ -14451,7 +14462,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
         return this.disabled() || item.disabled || parentDisabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilterAccordionComponent, isStandalone: true, selector: "he-filter-accordion", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, preserveOptionsOnSelection: { classPropertyName: "preserveOptionsOnSelection", publicName: "preserveOptionsOnSelection", isSignal: true, isRequired: false, transformFunction: null }, maintainPanelStates: { classPropertyName: "maintainPanelStates", publicName: "maintainPanelStates", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChanged: "selectionChanged" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilterAccordionComponent, isStandalone: true, selector: "he-filter-accordion", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, preserveOptionsOnSelection: { classPropertyName: "preserveOptionsOnSelection", publicName: "preserveOptionsOnSelection", isSignal: true, isRequired: false, transformFunction: null }, maintainPanelStates: { classPropertyName: "maintainPanelStates", publicName: "maintainPanelStates", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, expandFirstGroup: { classPropertyName: "expandFirstGroup", publicName: "expandFirstGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChanged: "selectionChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FilterAccordionComponent),
@@ -14494,7 +14505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             transition(':leave', [animate('200ms ease-out', style({ maxHeight: '0', opacity: 0 }))])
                         ])
                     ], template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n  @if (showHeader()) {\n    <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n      @if (title()) {\n        <div class=\"is-flex is-align-items-center\">\n          <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n          @if (tooltip()) {\n            <he-svg-icon\n              name=\"info-circle\"\n              class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n              [ngbTooltip]=\"tooltip()\"\n              placement=\"right\"\n              triggers=\"hover\"\n              size=\"16\"\n              container=\"body\" />\n          }\n        </div>\n      }\n\n      <ng-content select=\"[header-content]\" />\n\n      @if (showClearAll()) {\n        <span\n          class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n          [class.is-clickable]=\"hasSelectedValues()\"\n          (click)=\"hasSelectedValues() && clearAll()\">\n          Clear all\n        </span>\n      }\n\n      @if (showGlobalSearch()) {\n        <div class=\"field is-mb-0 w-100\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              type=\"text\"\n              class=\"input is-secondary is-small search-input\"\n              [placeholder]=\"globalSearchPlaceholder()\"\n              [(ngModel)]=\"search\"\n              [disabled]=\"disabled()\"\n              (input)=\"onSearch($event.target.value, group())\" />\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n              <he-svg-icon name=\"search\" />\n            </a>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"has-border-top has-border-bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        itemsList;\n        context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n      \" />\n  </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          @if (groupState.expanded) {\n            <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right pl-5\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input pl-2\"\n                      placeholder=\"Search {{ item.label }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                    <a\n                      class=\"icon has-text-secondary is-small is-right\"\n                      [class.is-hidden]=\"!groupState.searchTerm\"\n                      (click)=\"groupState.searchTerm = ''\">\n                      <he-svg-icon name=\"xmark\" />\n                    </a>\n                    <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: {\n                      group: item,\n                      parentSearch: parentSearch || groupState.searchTerm,\n                      showNoResults: !showGlobalSearch()\n                    }\n                  \" />\n              </div>\n            </div>\n          }\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && showNoResults) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex is-gap-4 is-flex-wrap-wrap is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], showGlobalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGlobalSearch", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], preserveOptionsOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveOptionsOnSelection", required: false }] }], maintainPanelStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainPanelStates", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }] } });
+        }], ctorParameters: () => [], propDecorators: { showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], showGlobalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGlobalSearch", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], preserveOptionsOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveOptionsOnSelection", required: false }] }], maintainPanelStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainPanelStates", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], expandFirstGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirstGroup", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }] } });
 
 const termTypeName = (select) => [
     keyToLabel(select?.termType),