@hestia-earth/ui-components 0.13.1 → 0.13.2

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

@@ -15,12 +15,12 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faClone, faCircle, faIdBadge } from '@fortawesome/free-regular-svg-icons';
 import { faAngleDoubleLeft, faAngleDoubleRight, faAngleDown, faAngleLeft, faAngleRight, faBookOpen, faBuilding, faCalculator, faChartBar, faCheck, faCircle as faCircle$1, faClipboard, faClipboardList, faClone as faClone$1, faComments, faDownload, faDotCircle, faDrawPolygon, faEdit, faEllipsisV, faExclamationTriangle, faExternalLinkAlt, faFilter, faList, faListAlt, faLongArrowAltDown, faLongArrowAltUp, faLongArrowAltLeft, faLongArrowAltRight, faMap, faMapMarked, faMapMarkedAlt, faPlus, faPlusCircle, faSearch, faSeedling, faSortAmountUpAlt, faSpellCheck, faSpinner, faTable, faTimes, faUser } from '@fortawesome/free-solid-svg-icons';
 import get from 'lodash.get';
-import { SchemaType, isExpandable, TermTermType, EmissionMethodTier, NodeType, productTermTermType, nestedSearchableKeys, SCHEMA_VERSION, sortKeysByType, isTypeNode, CycleFunctionalUnit, SiteSiteType, isTypeValid, typeToSchemaType } from '@hestia-earth/schema';
+import { SchemaType, isExpandable, TermTermType, EmissionMethodTier, NodeType, productTermTermType, nestedSearchableKeys, SCHEMA_VERSION, sortKeysByType, isTypeNode, CycleFunctionalUnit, SiteSiteType, isTypeValid, typeToSchemaType, UploadLimit } from '@hestia-earth/schema';
 import { __awaiter, __rest } from 'tslib';
 import { ReplaySubject, of, zip, from } from 'rxjs';
 import * as i1$1 from '@angular/platform-browser';
 import { keyToLabel, toPrecision, isUndefined, isNumber, toComma, toDashCase, isBoolean, ConvertUnits, converters, convertValue, isEmpty, isEqual as isEqual$1, unique, diffInDays } from '@hestia-earth/utils';
-import { filenameWithoutExt, nodeTypeToParam, DataState, SupportedExtensions, fileToExt } from '@hestia-earth/api';
+import { filenameWithoutExt, nodeTypeToParam, DataState, SupportedExtensions, fileToExt, MAX_SIZE } from '@hestia-earth/api';
 import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/dist/term';
 import { getDefaultModelId } from '@hestia-earth/glossary';
 import { catchError, map, take, mergeAll, filter, toArray, mergeMap, shareReplay, debounceTime, distinctUntilChanged, tap, switchMap, reduce, distinct, groupBy } from 'rxjs/operators';
@@ -46,6 +46,7 @@ import moment from 'moment';
 import 'moment/locale/en-gb';
 import { v4 } from 'uuid';
 import MarkerClusterer from '@googlemaps/markerclustererplus';
+import { parse } from 'papaparse';
 import { linkHorizontal } from 'd3-shape';
 import 'd3-transition';
 import { hierarchy, tree } from 'd3-hierarchy';
@@ -7003,7 +7004,7 @@ const customErrorMessage = {
     'pastureGrass key units must be \'ha\'': ({ params }) => `The Term ${code(params === null || params === void 0 ? void 0 : params.term.name)} can't be used as a key for Pasture grass.
     Please use the Term describing the plant with the units ${code(params.expected)} instead.
     This will help us gap-fill the amount of grass consumed by the herd.`,
-    'is outside confidence interval': ({ params }) => `${params === null || params === void 0 ? void 0 : params.outliers.map(value => `The product value ${code(value)} is ${value > (params === null || params === void 0 ? void 0 : params.min) ? 'above' : 'below'} ${code(`${((params === null || params === void 0 ? void 0 : params.threshold) + ((1 - (params === null || params === void 0 ? void 0 : params.threshold)) / 2)) * 100}%`)} of all ${code(params === null || params === void 0 ? void 0 : params.term.name)} data in ${code(params === null || params === void 0 ? void 0 : params.country.name)} on the Hestia platform.`)}
+    'is outside confidence interval': ({ dataPath, params }) => `${params === null || params === void 0 ? void 0 : params.outliers.map(value => `The ${dataPath.includes('product') ? 'product' : 'value'} value ${code(value)} is ${value > (params === null || params === void 0 ? void 0 : params.min) ? 'above' : 'below'} ${code(`${((params === null || params === void 0 ? void 0 : params.threshold) + ((1 - (params === null || params === void 0 ? void 0 : params.threshold)) / 2)) * 100}%`)} of all ${params.group ? code(params.group) : code(params === null || params === void 0 ? void 0 : params.term.name)} data in ${code(params === null || params === void 0 ? void 0 : params.country.name)} on the Hestia platform.`)}
     Please double-check ${(params === null || params === void 0 ? void 0 : params.outliers.length) > 1 ? 'these values' : 'this value'} before submitting.`,
     'should be equal to boundary': ({ params }) => `The calculated area from ${code('boundary')} is ${code(params.expected)}.
     This may be an error if the boundary represents the area under cultivation.`,
@@ -7032,7 +7033,9 @@ const customErrorMessage = {
         return `To link to a ${((_a = params === null || params === void 0 ? void 0 : params.defaultSource) === null || _a === void 0 ? void 0 : _a.dataPrivate) ? 'private' : 'public'} Source,
     this Node needs to be ${((_b = params === null || params === void 0 ? void 0 : params.defaultSource) === null || _b === void 0 ? void 0 : _b.dataPrivate) ? 'private' : 'public'} as well.
     Please set ${code('dataPrivate')}=${code(`${(_c = params === null || params === void 0 ? void 0 : params.defaultSource) === null || _c === void 0 ? void 0 : _c.dataPrivate}`)}.`;
-    }
+    },
+    'should not use not relevant model': () => `All emissions should generally have a method tier, which states how the data were modelled or how the data were collected.
+    Please see the ${schemaLink('Emission#methodTier', 'schema')} for the options available and definitions of the options.`
 };
 const formatCustomErrorMessage = (message, error, errorCount = 1) => {
     const formattedMessage = message && message in customErrorMessage ?
@@ -8398,10 +8401,10 @@ class FilesFormComponent {
     }
 }
 FilesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesFormComponent, deps: [{ token: i0.ElementRef }, { token: HeSearchService }, { token: HeUsersService }], target: i0.ɵɵFactoryTarget.Component });
-FilesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChanged: "nodeChanged", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"mb-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n\n  <ng-content></ng-content>\n</div>\n\n<he-maps-drawing-confirm *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\" [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"\n></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"\n></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <ng-template #description>\n    <span class=\"is-pre-line\">{{property.schema?.description}}</span>\n  </ng-template>\n\n  <span\n    class=\"trigger-popover\"\n    [ngbPopover]=\"description\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow is-narrow-width\"\n    triggers=\"hover\" placement=\"right\" container=\"body\"\n  >\n    <span>{{property.key}}</span>\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{property.key}}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  <ng-container *ngIf=\"(isOpen || property.closedVisible) && !property.isHidden\">\n    <div class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\"\n      [ngSwitch]=\"!!property.properties.length\"\n    >\n      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <ng-container *bindOnce=\"property\">\n          <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n            <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\">\n              <ng-container\n                *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n              </ng-container>\n            </label>\n          </div>\n        </ng-container>\n\n        <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n          <div class=\"field\">\n            <ng-container *ngTemplateOutlet=\"inputForm; context: {$implicit: property}\"></ng-container>\n\n            <ng-container *ngIf=\"(editable || errorsEditable) && (property.hasError || property.hasWarning)\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: false}\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"panel\" *ngSwitchCase=\"true\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\"\n      >\n        <div class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\" pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\"\n        >\n          <div class=\"columns is-mobile is-vcentered\">\n            <span class=\"column is-narrow py-1 my-0\">\n              <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!property.isOpen\"></fa-icon>\n              <fa-icon icon=\"angle-right\" [class.is-hidden]=\"property.isOpen\"></fa-icon>\n            </span>\n            <span class=\"column py-1 my-0\">\n              <span class=\"is-size-6\">{{property.key}}</span>\n            </span>\n            <span *ngIf=\"property.schemaType\" class=\"column is-narrow py-1 my-0\">\n              <span class=\"tags mb-0 has-addons\">\n                <span class=\"tag mb-0 is-light\">Type</span>\n                <span class=\"tag mb-0 is-white\">\n                  <he-schema-version-link linkClass=\"is-small\" [node]=\"{'@type': property.schemaType}\">\n                    <span>{{property.schemaType}}</span>\n                  </he-schema-version-link>\n                </span>\n              </span>\n            </span>\n            <he-popover-confirm class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\" placement=\"top\"\n              [message]=\"'<p>This will remove the group completely.</p>' + (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') + '<p>Do you confirm?</p>'\"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\"\n            >\n              <fa-icon icon=\"times\" size=\"sm\"></fa-icon>\n            </he-popover-confirm>\n          </div>\n        </div>\n        <div class=\"panel-block is-block p-0\" *ngIf=\"property.isOpen\">\n          <ng-container [ngSwitch]=\"property.isArray\">\n            <div class=\"px-3 pt-4\" *ngIf=\"property.error\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: true}\"></ng-container>\n            </div>\n\n            <div class=\"mt-3\" *ngSwitchCase=\"false\">\n              <p class=\"help py-1 px-2\" *ngIf=\"editable && !property.editable\">\n                To change the {{property.key}}, please delete it first, then add the field again\n              </p>\n              <ng-container *ngIf=\"editable && property.editable\">\n                <ng-container [ngSwitch]=\"property.schema?.title\">\n                  <p class=\"help py-1 px-2\" *ngSwitchCase=\"'Bibliography'\">\n                    Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                  </p>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: property}\"></ng-container>\n\n              <div class=\"px-3 mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <div class=\"property-group py-2 px-3 mt-2\">\n                <div class=\"columns is-multiline mb-0\">\n                  <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                    <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop2}\"></ng-container>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"py-2 px-3 mt-2\" *ngSwitchCase=\"true\">\n              <div class=\"mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                <div class=\"card p-0 my-4\" *ngIf=\"prop2.key\"\n                  [id]=\"prop2.fullKey + '_' + prop2.id\"\n                >\n                  <div class=\"property-array-number\">\n                    <div class=\"tags has-addons\">\n                      <span class=\"tag is-dark\">{{prop2.key}}</span>\n                      <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                        <span class=\"tag is-info\" pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"('Duplicate ' + property.key) | pluralize:1\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm class=\"tag is-delete\"\n                          [ngbTooltip]=\"('Remove ' + property.key) | pluralize:1\" placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\" position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"\n                        ></he-popover-confirm>\n                      </ng-container>\n                    </div>\n                  </div>\n\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: prop2}\"></ng-container>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"errorsEditable\">\n                    <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: prop2}\"></ng-container>\n                  </div>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"prop2.error\">\n                    <ng-container *ngTemplateOutlet=\"propertyError; context: {property: prop2, edit: true}\"></ng-container>\n                  </div>\n\n                  <div class=\"property-group card-content p-3\">\n                    <div class=\"columns is-multiline my-0\">\n                      <ng-container *ngFor=\"let prop3 of prop2.properties; trackBy: trackByProperty\">\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop3}\"></ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n\n              <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                <button class=\"button is-info is-small\" type=\"button\"\n                  (click)=\"addArrayGroup(property)\"\n                  >\n                  <fa-icon icon=\"plus-circle\"></fa-icon>\n                  <span class=\"pl-2\">Add</span>\n                  <span class=\"pl-1\">{{property.key | pluralize:1}}</span>\n                </button>\n\n                <he-node-recommendations buttonClass=\"is-small\"\n                  [node]=\"node\" [nodeField]=\"property.key\"\n                  (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputForm let-property>\n  <ng-container *ngIf=\"property.key\">\n    <ng-container [ngSwitch]=\"property.suggestions?.type\">\n      <ng-container *ngSwitchCase=\"'select'\">\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"inputInput; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\"\n      [class.has-icons-right]=\"property.loading\"\n    >\n      <input class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n\n        [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!editable || !property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{enabled: editable && property.editable && property.schema?.type === 'array', items: property.schema?.items, delimiter: ';', allowDuplicates: true, placeholder: property.placeholder}\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n\n        [ngbTypeahead]=\"property | applyPure:propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\"\n      >\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n      >\n        <select\n          [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!editable || !property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\"\n        >\n          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">{{value}}</option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a class=\"button is-small\" title=\"Remove field\"\n      [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n      [class.is-danger]=\"!property.changed && property.hasError\"\n      [class.is-warning]=\"!property.changed && property.hasWarning\"\n      (click)=\"$event.stopPropagation(); propertyChanged(null, property)\"\n    >\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <ng-container *bindOnce=\"property\">\n    <he-popover-confirm class=\"control\"\n      *ngIf=\"enableAddError(property)\"\n      position=\"left\"\n      [content]=\"popupErrorForm\"\n      (confirmed)=\"addError(property, $event)\"\n    >\n      <span class=\"button is-small\">\n        <fa-icon icon=\"comments\"></fa-icon>\n      </span>\n    </he-popover-confirm>\n\n    <ng-container *ngIf=\"editable && property.editable\">\n      <ng-container [ngSwitch]=\"property.schemaType\">\n        <ng-container *ngSwitchCase=\"SchemaType.Actor\">\n          <ng-container *ngTemplateOutlet=\"actorAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SchemaType.Cycle\">\n          <ng-container *ngTemplateOutlet=\"cycleAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\"\n          (click)=\"mapDrawingProperty = property\"\n        >\n          <fa-icon icon=\"map-marked-alt\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"bibliographiesSearchKey(property)\">\n        <button class=\"button is-small\" title=\"Advanced Search\"\n          (click)=\"bibliographiesSearchProperty = property\"\n        >\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n    </ng-container>\n\n    <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n      <a class=\"button is-small is-danger\" title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\"\n      >\n        <fa-icon icon=\"plus-circle\"></fa-icon>\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n    <div class=\"control\" *ngIf=\"isRequired(property)\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\"\n        ngbTooltip=\"This field is required\" placement=\"top\"\n      >\n        <fa-icon icon=\"exclamation-triangle\"></fa-icon>\n      </label>\n    </div>\n    <ng-container *ngIf=\"property.externalUrl?.url\">\n      <div class=\"control\">\n        <a class=\"button is-small\"\n          [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n          target=\"_blank\"\n          [title]=\"property.externalUrl.title\"\n          [ngClass]=\"{'is-info': property.key === 'type'}\"\n          [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\"\n        >\n          <fa-icon [icon]=\"property.externalUrl.icon || 'external-link-alt'\"></fa-icon>\n        </a>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"unitConverterEnabled(property)\">\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Open calculator\"\n          [ngbPopover]=\"convertUnits\" autoClose=\"outside\"\n          triggers=\"manual\" #p=\"ngbPopover\" placement=\"bottom\" container=\"body\"\n          (click)=\"openUnitConverter(p, property)\"\n        >\n          <fa-icon icon=\"calculator\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #actorAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === '@id'\">\n    <button class=\"button is-small\" title=\"Add myself as Actor\"\n      (click)=\"setUserActorId(property)\"\n    >\n      <fa-icon [icon]=\"['far', 'id-badge']\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === 'cycleDuration'\">\n    <button class=\"button is-small\" title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button class=\"button is-small\" title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header class=\"card-header\" *ngIf=\"editable && property.editable && (property.addPropertyEnabled || deepEditable); else padder\">\n    <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-small\" *bindOnce=\"property\">\n          <label class=\"label\" [for]=\"property.id + '_new'\">\n            <span>Add new field</span>\n          </label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field has-addons\">\n            <div class=\"control is-expanded\">\n              <input class=\"input is-small\"\n                [(ngModel)]=\"property.newProperty\"\n                [id]=\"property.id + '_new'\"\n                name=\"randomname\"\n                placeholder=\"Search and select field from results\"\n\n                [ngbTypeahead]=\"property | applyPure:suggestNewProperty\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatNewProperty\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\"\n              >\n            </div>\n            <div class=\"control\">\n              <button class=\"button is-small\" type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\"\n              >\n                <fa-icon icon=\"plus\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </header>\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-edit=\"edit\">\n  <p class=\"help\"\n    [class.is-danger]=\"property.hasError\"\n    [class.is-warning]=\"property.hasWarning\"\n    *ngIf=\"property.error\"\n  >\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\"\n      *ngIf=\"edit && errorsEditable && property.error.index >= 0\"\n      (click)=\"editError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"check\"></fa-icon>\n      <span>Resolved</span>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  <div class=\"panel is-default\" *ngIf=\"showMap\">\n    <div class=\"open-group panel-heading py-0\"\n      (click)=\"mapVisible = !mapVisible\" pointer\n      [class.is-open]=\"mapVisible\"\n    >\n      <div class=\"columns is-mobile is-vcentered mb-0\">\n        <span class=\"column is-narrow py-1 my-0\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!mapVisible\"></fa-icon>\n          <fa-icon icon=\"angle-right\" [class.is-hidden]=\"mapVisible\"></fa-icon>\n        </span>\n        <span class=\"column py-1 my-0\">\n          <span class=\"is-size-6\">View on Map</span>\n        </span>\n      </div>\n    </div>\n    <div class=\"panel-block is-block p-0\" [class.is-hidden]=\"!mapVisible\">\n      <he-sites-maps [sites]=\"[node]\" [showNotice]=\"false\"></he-sites-maps>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #nodeErrorForm let-property>\n  <ng-container *ngIf=\"property.newError && property.editable\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select [(ngModel)]=\"property.newError.level\">\n            <option [value]=\"undefined\">Select Level</option>\n            <option value=\"error\">Error</option>\n            <option value=\"warning\">Warning</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control is-expanded\">\n        <textarea class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"\n        ></textarea>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\"\n        >\n          <fa-icon icon=\"plus-circle\"></fa-icon>\n          <span class=\"pl-2\">Add</span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #popupErrorForm let-data=\"data\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <div class=\"select\">\n        <select [(ngModel)]=\"data.level\">\n          <option [value]=\"undefined\">Select Level</option>\n          <option value=\"error\">Error</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"control\">\n      <input class=\"input\"\n        [(ngModel)]=\"data.message\"\n        placeholder=\"Enter your message here\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\"\n  ></ngb-highlight>\n</ng-template>\n\n<ng-template #padder>\n  <div class=\"pt-1\"></div>\n</ng-template>\n\n<ng-template #convertUnits let-value=\"value\" let-term=\"term\" let-units=\"units\">\n  <he-unit-converter [value]=\"value\" [term]=\"term\" [toUnits]=\"units\"></he-unit-converter>\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#ededed;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 768px){.card-toggle{position:relative}}.card-toggle>fa-icon{display:inline-block;width:10px}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { kind: "component", type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "nodes", "center", "zoom", "showNotice"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }] });
+FilesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChanged: "nodeChanged", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"py-4 pl-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n\n  <ng-content></ng-content>\n</div>\n\n<he-maps-drawing-confirm *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\" [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"\n></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"\n></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <ng-template #description>\n    <span class=\"is-pre-line\">{{property.schema?.description}}</span>\n  </ng-template>\n\n  <span\n    class=\"trigger-popover\"\n    [ngbPopover]=\"description\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow is-narrow-width\"\n    triggers=\"hover\" placement=\"right\" container=\"body\"\n  >\n    <span>{{property.key}}</span>\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{property.key}}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  <ng-container *ngIf=\"(isOpen || property.closedVisible) && !property.isHidden\">\n    <div class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\"\n      [ngSwitch]=\"!!property.properties.length\"\n    >\n      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <ng-container *bindOnce=\"property\">\n          <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n            <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\">\n              <ng-container\n                *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n              </ng-container>\n            </label>\n          </div>\n        </ng-container>\n\n        <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n          <div class=\"field\">\n            <ng-container *ngTemplateOutlet=\"inputForm; context: {$implicit: property}\"></ng-container>\n\n            <ng-container *ngIf=\"(editable || errorsEditable) && (property.hasError || property.hasWarning)\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: false}\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"panel\" *ngSwitchCase=\"true\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\"\n      >\n        <div class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\" pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\"\n        >\n          <div class=\"columns is-mobile is-vcentered\">\n            <span class=\"column is-narrow py-1 my-0\">\n              <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!property.isOpen\"></fa-icon>\n              <fa-icon icon=\"angle-right\" [class.is-hidden]=\"property.isOpen\"></fa-icon>\n            </span>\n            <span class=\"column py-1 my-0\">\n              <span class=\"is-size-6\">{{property.key}}</span>\n            </span>\n            <span *ngIf=\"property.schemaType\" class=\"column is-narrow py-1 my-0\">\n              <span class=\"tags mb-0 has-addons\">\n                <span class=\"tag mb-0 is-light\">Type</span>\n                <span class=\"tag mb-0 is-white\">\n                  <he-schema-version-link linkClass=\"is-small\" [node]=\"{'@type': property.schemaType}\">\n                    <span>{{property.schemaType}}</span>\n                  </he-schema-version-link>\n                </span>\n              </span>\n            </span>\n            <he-popover-confirm class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\" placement=\"top\"\n              [message]=\"'<p>This will remove the group completely.</p>' + (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') + '<p>Do you confirm?</p>'\"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\"\n            >\n              <fa-icon icon=\"times\" size=\"sm\"></fa-icon>\n            </he-popover-confirm>\n          </div>\n        </div>\n        <div class=\"panel-block is-block p-0\" *ngIf=\"property.isOpen\">\n          <ng-container [ngSwitch]=\"property.isArray\">\n            <div class=\"px-3 pt-4\" *ngIf=\"property.error\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: true}\"></ng-container>\n            </div>\n\n            <div class=\"mt-3\" *ngSwitchCase=\"false\">\n              <p class=\"help py-1 px-2\" *ngIf=\"editable && !property.editable\">\n                To change the {{property.key}}, please delete it first, then add the field again\n              </p>\n              <ng-container *ngIf=\"editable && property.editable\">\n                <ng-container [ngSwitch]=\"property.schema?.title\">\n                  <p class=\"help py-1 px-2\" *ngSwitchCase=\"'Bibliography'\">\n                    Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                  </p>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: property}\"></ng-container>\n\n              <div class=\"px-3 mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <div class=\"property-group py-2 px-3 mt-2\">\n                <div class=\"columns is-multiline mb-0\">\n                  <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                    <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop2}\"></ng-container>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"py-2 px-3 mt-2\" *ngSwitchCase=\"true\">\n              <div class=\"mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                <div class=\"card p-0 my-4\" *ngIf=\"prop2.key\"\n                  [id]=\"prop2.fullKey + '_' + prop2.id\"\n                >\n                  <div class=\"property-array-number\">\n                    <div class=\"tags has-addons\">\n                      <span class=\"tag is-dark\">{{prop2.key}}</span>\n                      <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                        <span class=\"tag is-info\" pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"('Duplicate ' + property.key) | pluralize:1\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm class=\"tag is-delete\"\n                          [ngbTooltip]=\"('Remove ' + property.key) | pluralize:1\" placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\" position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"\n                        ></he-popover-confirm>\n                      </ng-container>\n                    </div>\n                  </div>\n\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: prop2}\"></ng-container>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"errorsEditable\">\n                    <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: prop2}\"></ng-container>\n                  </div>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"prop2.error\">\n                    <ng-container *ngTemplateOutlet=\"propertyError; context: {property: prop2, edit: true}\"></ng-container>\n                  </div>\n\n                  <div class=\"property-group card-content p-3\">\n                    <div class=\"columns is-multiline my-0\">\n                      <ng-container *ngFor=\"let prop3 of prop2.properties; trackBy: trackByProperty\">\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop3}\"></ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n\n              <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                <button class=\"button is-info is-small\" type=\"button\"\n                  (click)=\"addArrayGroup(property)\"\n                  >\n                  <fa-icon icon=\"plus-circle\"></fa-icon>\n                  <span class=\"pl-2\">Add</span>\n                  <span class=\"pl-1\">{{property.key | pluralize:1}}</span>\n                </button>\n\n                <he-node-recommendations buttonClass=\"is-small\"\n                  [node]=\"node\" [nodeField]=\"property.key\"\n                  (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputForm let-property>\n  <ng-container *ngIf=\"property.key\">\n    <ng-container [ngSwitch]=\"property.suggestions?.type\">\n      <ng-container *ngSwitchCase=\"'select'\">\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"inputInput; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\"\n      [class.has-icons-right]=\"property.loading\"\n    >\n      <input class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n\n        [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!editable || !property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{enabled: editable && property.editable && property.schema?.type === 'array', items: property.schema?.items, delimiter: ';', allowDuplicates: true, placeholder: property.placeholder}\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n\n        [ngbTypeahead]=\"property | applyPure:propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\"\n      >\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n      >\n        <select\n          [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!editable || !property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\"\n        >\n          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">{{value}}</option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a class=\"button is-small\" title=\"Remove field\"\n      [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n      [class.is-danger]=\"!property.changed && property.hasError\"\n      [class.is-warning]=\"!property.changed && property.hasWarning\"\n      (click)=\"$event.stopPropagation(); propertyChanged(null, property)\"\n    >\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <ng-container *bindOnce=\"property\">\n    <he-popover-confirm class=\"control\"\n      *ngIf=\"enableAddError(property)\"\n      position=\"left\"\n      [content]=\"popupErrorForm\"\n      (confirmed)=\"addError(property, $event)\"\n    >\n      <span class=\"button is-small\">\n        <fa-icon icon=\"comments\"></fa-icon>\n      </span>\n    </he-popover-confirm>\n\n    <ng-container *ngIf=\"editable && property.editable\">\n      <ng-container [ngSwitch]=\"property.schemaType\">\n        <ng-container *ngSwitchCase=\"SchemaType.Actor\">\n          <ng-container *ngTemplateOutlet=\"actorAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SchemaType.Cycle\">\n          <ng-container *ngTemplateOutlet=\"cycleAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\"\n          (click)=\"mapDrawingProperty = property\"\n        >\n          <fa-icon icon=\"map-marked-alt\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"bibliographiesSearchKey(property)\">\n        <button class=\"button is-small\" title=\"Advanced Search\"\n          (click)=\"bibliographiesSearchProperty = property\"\n        >\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n    </ng-container>\n\n    <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n      <a class=\"button is-small is-danger\" title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\"\n      >\n        <fa-icon icon=\"plus-circle\"></fa-icon>\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n    <div class=\"control\" *ngIf=\"isRequired(property)\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\"\n        ngbTooltip=\"This field is required\" placement=\"top\"\n      >\n        <fa-icon icon=\"exclamation-triangle\"></fa-icon>\n      </label>\n    </div>\n    <ng-container *ngIf=\"property.externalUrl?.url\">\n      <div class=\"control\">\n        <a class=\"button is-small\"\n          [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n          target=\"_blank\"\n          [title]=\"property.externalUrl.title\"\n          [ngClass]=\"{'is-info': property.key === 'type'}\"\n          [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\"\n        >\n          <fa-icon [icon]=\"property.externalUrl.icon || 'external-link-alt'\"></fa-icon>\n        </a>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"unitConverterEnabled(property)\">\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Open calculator\"\n          [ngbPopover]=\"convertUnits\" autoClose=\"outside\"\n          triggers=\"manual\" #p=\"ngbPopover\" placement=\"bottom\" container=\"body\"\n          (click)=\"openUnitConverter(p, property)\"\n        >\n          <fa-icon icon=\"calculator\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #actorAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === '@id'\">\n    <button class=\"button is-small\" title=\"Add myself as Actor\"\n      (click)=\"setUserActorId(property)\"\n    >\n      <fa-icon [icon]=\"['far', 'id-badge']\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === 'cycleDuration'\">\n    <button class=\"button is-small\" title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button class=\"button is-small\" title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header class=\"card-header\" *ngIf=\"editable && property.editable && (property.addPropertyEnabled || deepEditable); else padder\">\n    <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-small\" *bindOnce=\"property\">\n          <label class=\"label\" [for]=\"property.id + '_new'\">\n            <span>Add new field</span>\n          </label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field has-addons\">\n            <div class=\"control is-expanded\">\n              <input class=\"input is-small\"\n                [(ngModel)]=\"property.newProperty\"\n                [id]=\"property.id + '_new'\"\n                name=\"randomname\"\n                placeholder=\"Search and select field from results\"\n\n                [ngbTypeahead]=\"property | applyPure:suggestNewProperty\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatNewProperty\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\"\n              >\n            </div>\n            <div class=\"control\">\n              <button class=\"button is-small\" type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\"\n              >\n                <fa-icon icon=\"plus\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </header>\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-edit=\"edit\">\n  <p class=\"help\"\n    [class.is-danger]=\"property.hasError\"\n    [class.is-warning]=\"property.hasWarning\"\n    *ngIf=\"property.error\"\n  >\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\"\n      *ngIf=\"edit && errorsEditable && property.error.index >= 0\"\n      (click)=\"editError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"check\"></fa-icon>\n      <span>Resolved</span>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  <div class=\"panel is-default\" *ngIf=\"showMap\">\n    <div class=\"open-group panel-heading py-0\"\n      (click)=\"mapVisible = !mapVisible\" pointer\n      [class.is-open]=\"mapVisible\"\n    >\n      <div class=\"columns is-mobile is-vcentered mb-0\">\n        <span class=\"column is-narrow py-1 my-0\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!mapVisible\"></fa-icon>\n          <fa-icon icon=\"angle-right\" [class.is-hidden]=\"mapVisible\"></fa-icon>\n        </span>\n        <span class=\"column py-1 my-0\">\n          <span class=\"is-size-6\">View on Map</span>\n        </span>\n      </div>\n    </div>\n    <div class=\"panel-block is-block p-0\" [class.is-hidden]=\"!mapVisible\">\n      <he-sites-maps [sites]=\"[node]\" [showNotice]=\"false\"></he-sites-maps>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #nodeErrorForm let-property>\n  <ng-container *ngIf=\"property.newError && property.editable\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select [(ngModel)]=\"property.newError.level\">\n            <option [value]=\"undefined\">Select Level</option>\n            <option value=\"error\">Error</option>\n            <option value=\"warning\">Warning</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control is-expanded\">\n        <textarea class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"\n        ></textarea>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\"\n        >\n          <fa-icon icon=\"plus-circle\"></fa-icon>\n          <span class=\"pl-2\">Add</span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #popupErrorForm let-data=\"data\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <div class=\"select\">\n        <select [(ngModel)]=\"data.level\">\n          <option [value]=\"undefined\">Select Level</option>\n          <option value=\"error\">Error</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"control\">\n      <input class=\"input\"\n        [(ngModel)]=\"data.message\"\n        placeholder=\"Enter your message here\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\"\n  ></ngb-highlight>\n</ng-template>\n\n<ng-template #padder>\n  <div class=\"pt-1\"></div>\n</ng-template>\n\n<ng-template #convertUnits let-value=\"value\" let-term=\"term\" let-units=\"units\">\n  <he-unit-converter [value]=\"value\" [term]=\"term\" [toUnits]=\"units\"></he-unit-converter>\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#ededed;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 768px){.card-toggle{position:relative}}.card-toggle>fa-icon{display:inline-block;width:10px}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { kind: "component", type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "nodes", "center", "zoom", "showNotice"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-files-form', template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"mb-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n\n  <ng-content></ng-content>\n</div>\n\n<he-maps-drawing-confirm *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\" [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"\n></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"\n></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <ng-template #description>\n    <span class=\"is-pre-line\">{{property.schema?.description}}</span>\n  </ng-template>\n\n  <span\n    class=\"trigger-popover\"\n    [ngbPopover]=\"description\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow is-narrow-width\"\n    triggers=\"hover\" placement=\"right\" container=\"body\"\n  >\n    <span>{{property.key}}</span>\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{property.key}}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  <ng-container *ngIf=\"(isOpen || property.closedVisible) && !property.isHidden\">\n    <div class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\"\n      [ngSwitch]=\"!!property.properties.length\"\n    >\n      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <ng-container *bindOnce=\"property\">\n          <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n            <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\">\n              <ng-container\n                *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n              </ng-container>\n            </label>\n          </div>\n        </ng-container>\n\n        <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n          <div class=\"field\">\n            <ng-container *ngTemplateOutlet=\"inputForm; context: {$implicit: property}\"></ng-container>\n\n            <ng-container *ngIf=\"(editable || errorsEditable) && (property.hasError || property.hasWarning)\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: false}\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"panel\" *ngSwitchCase=\"true\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\"\n      >\n        <div class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\" pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\"\n        >\n          <div class=\"columns is-mobile is-vcentered\">\n            <span class=\"column is-narrow py-1 my-0\">\n              <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!property.isOpen\"></fa-icon>\n              <fa-icon icon=\"angle-right\" [class.is-hidden]=\"property.isOpen\"></fa-icon>\n            </span>\n            <span class=\"column py-1 my-0\">\n              <span class=\"is-size-6\">{{property.key}}</span>\n            </span>\n            <span *ngIf=\"property.schemaType\" class=\"column is-narrow py-1 my-0\">\n              <span class=\"tags mb-0 has-addons\">\n                <span class=\"tag mb-0 is-light\">Type</span>\n                <span class=\"tag mb-0 is-white\">\n                  <he-schema-version-link linkClass=\"is-small\" [node]=\"{'@type': property.schemaType}\">\n                    <span>{{property.schemaType}}</span>\n                  </he-schema-version-link>\n                </span>\n              </span>\n            </span>\n            <he-popover-confirm class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\" placement=\"top\"\n              [message]=\"'<p>This will remove the group completely.</p>' + (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') + '<p>Do you confirm?</p>'\"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\"\n            >\n              <fa-icon icon=\"times\" size=\"sm\"></fa-icon>\n            </he-popover-confirm>\n          </div>\n        </div>\n        <div class=\"panel-block is-block p-0\" *ngIf=\"property.isOpen\">\n          <ng-container [ngSwitch]=\"property.isArray\">\n            <div class=\"px-3 pt-4\" *ngIf=\"property.error\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: true}\"></ng-container>\n            </div>\n\n            <div class=\"mt-3\" *ngSwitchCase=\"false\">\n              <p class=\"help py-1 px-2\" *ngIf=\"editable && !property.editable\">\n                To change the {{property.key}}, please delete it first, then add the field again\n              </p>\n              <ng-container *ngIf=\"editable && property.editable\">\n                <ng-container [ngSwitch]=\"property.schema?.title\">\n                  <p class=\"help py-1 px-2\" *ngSwitchCase=\"'Bibliography'\">\n                    Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                  </p>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: property}\"></ng-container>\n\n              <div class=\"px-3 mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <div class=\"property-group py-2 px-3 mt-2\">\n                <div class=\"columns is-multiline mb-0\">\n                  <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                    <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop2}\"></ng-container>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"py-2 px-3 mt-2\" *ngSwitchCase=\"true\">\n              <div class=\"mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                <div class=\"card p-0 my-4\" *ngIf=\"prop2.key\"\n                  [id]=\"prop2.fullKey + '_' + prop2.id\"\n                >\n                  <div class=\"property-array-number\">\n                    <div class=\"tags has-addons\">\n                      <span class=\"tag is-dark\">{{prop2.key}}</span>\n                      <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                        <span class=\"tag is-info\" pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"('Duplicate ' + property.key) | pluralize:1\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm class=\"tag is-delete\"\n                          [ngbTooltip]=\"('Remove ' + property.key) | pluralize:1\" placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\" position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"\n                        ></he-popover-confirm>\n                      </ng-container>\n                    </div>\n                  </div>\n\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: prop2}\"></ng-container>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"errorsEditable\">\n                    <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: prop2}\"></ng-container>\n                  </div>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"prop2.error\">\n                    <ng-container *ngTemplateOutlet=\"propertyError; context: {property: prop2, edit: true}\"></ng-container>\n                  </div>\n\n                  <div class=\"property-group card-content p-3\">\n                    <div class=\"columns is-multiline my-0\">\n                      <ng-container *ngFor=\"let prop3 of prop2.properties; trackBy: trackByProperty\">\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop3}\"></ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n\n              <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                <button class=\"button is-info is-small\" type=\"button\"\n                  (click)=\"addArrayGroup(property)\"\n                  >\n                  <fa-icon icon=\"plus-circle\"></fa-icon>\n                  <span class=\"pl-2\">Add</span>\n                  <span class=\"pl-1\">{{property.key | pluralize:1}}</span>\n                </button>\n\n                <he-node-recommendations buttonClass=\"is-small\"\n                  [node]=\"node\" [nodeField]=\"property.key\"\n                  (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputForm let-property>\n  <ng-container *ngIf=\"property.key\">\n    <ng-container [ngSwitch]=\"property.suggestions?.type\">\n      <ng-container *ngSwitchCase=\"'select'\">\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"inputInput; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\"\n      [class.has-icons-right]=\"property.loading\"\n    >\n      <input class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n\n        [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!editable || !property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{enabled: editable && property.editable && property.schema?.type === 'array', items: property.schema?.items, delimiter: ';', allowDuplicates: true, placeholder: property.placeholder}\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n\n        [ngbTypeahead]=\"property | applyPure:propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\"\n      >\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n      >\n        <select\n          [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!editable || !property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\"\n        >\n          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">{{value}}</option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a class=\"button is-small\" title=\"Remove field\"\n      [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n      [class.is-danger]=\"!property.changed && property.hasError\"\n      [class.is-warning]=\"!property.changed && property.hasWarning\"\n      (click)=\"$event.stopPropagation(); propertyChanged(null, property)\"\n    >\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <ng-container *bindOnce=\"property\">\n    <he-popover-confirm class=\"control\"\n      *ngIf=\"enableAddError(property)\"\n      position=\"left\"\n      [content]=\"popupErrorForm\"\n      (confirmed)=\"addError(property, $event)\"\n    >\n      <span class=\"button is-small\">\n        <fa-icon icon=\"comments\"></fa-icon>\n      </span>\n    </he-popover-confirm>\n\n    <ng-container *ngIf=\"editable && property.editable\">\n      <ng-container [ngSwitch]=\"property.schemaType\">\n        <ng-container *ngSwitchCase=\"SchemaType.Actor\">\n          <ng-container *ngTemplateOutlet=\"actorAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SchemaType.Cycle\">\n          <ng-container *ngTemplateOutlet=\"cycleAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\"\n          (click)=\"mapDrawingProperty = property\"\n        >\n          <fa-icon icon=\"map-marked-alt\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"bibliographiesSearchKey(property)\">\n        <button class=\"button is-small\" title=\"Advanced Search\"\n          (click)=\"bibliographiesSearchProperty = property\"\n        >\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n    </ng-container>\n\n    <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n      <a class=\"button is-small is-danger\" title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\"\n      >\n        <fa-icon icon=\"plus-circle\"></fa-icon>\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n    <div class=\"control\" *ngIf=\"isRequired(property)\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\"\n        ngbTooltip=\"This field is required\" placement=\"top\"\n      >\n        <fa-icon icon=\"exclamation-triangle\"></fa-icon>\n      </label>\n    </div>\n    <ng-container *ngIf=\"property.externalUrl?.url\">\n      <div class=\"control\">\n        <a class=\"button is-small\"\n          [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n          target=\"_blank\"\n          [title]=\"property.externalUrl.title\"\n          [ngClass]=\"{'is-info': property.key === 'type'}\"\n          [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\"\n        >\n          <fa-icon [icon]=\"property.externalUrl.icon || 'external-link-alt'\"></fa-icon>\n        </a>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"unitConverterEnabled(property)\">\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Open calculator\"\n          [ngbPopover]=\"convertUnits\" autoClose=\"outside\"\n          triggers=\"manual\" #p=\"ngbPopover\" placement=\"bottom\" container=\"body\"\n          (click)=\"openUnitConverter(p, property)\"\n        >\n          <fa-icon icon=\"calculator\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #actorAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === '@id'\">\n    <button class=\"button is-small\" title=\"Add myself as Actor\"\n      (click)=\"setUserActorId(property)\"\n    >\n      <fa-icon [icon]=\"['far', 'id-badge']\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === 'cycleDuration'\">\n    <button class=\"button is-small\" title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button class=\"button is-small\" title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header class=\"card-header\" *ngIf=\"editable && property.editable && (property.addPropertyEnabled || deepEditable); else padder\">\n    <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-small\" *bindOnce=\"property\">\n          <label class=\"label\" [for]=\"property.id + '_new'\">\n            <span>Add new field</span>\n          </label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field has-addons\">\n            <div class=\"control is-expanded\">\n              <input class=\"input is-small\"\n                [(ngModel)]=\"property.newProperty\"\n                [id]=\"property.id + '_new'\"\n                name=\"randomname\"\n                placeholder=\"Search and select field from results\"\n\n                [ngbTypeahead]=\"property | applyPure:suggestNewProperty\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatNewProperty\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\"\n              >\n            </div>\n            <div class=\"control\">\n              <button class=\"button is-small\" type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\"\n              >\n                <fa-icon icon=\"plus\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </header>\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-edit=\"edit\">\n  <p class=\"help\"\n    [class.is-danger]=\"property.hasError\"\n    [class.is-warning]=\"property.hasWarning\"\n    *ngIf=\"property.error\"\n  >\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\"\n      *ngIf=\"edit && errorsEditable && property.error.index >= 0\"\n      (click)=\"editError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"check\"></fa-icon>\n      <span>Resolved</span>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  <div class=\"panel is-default\" *ngIf=\"showMap\">\n    <div class=\"open-group panel-heading py-0\"\n      (click)=\"mapVisible = !mapVisible\" pointer\n      [class.is-open]=\"mapVisible\"\n    >\n      <div class=\"columns is-mobile is-vcentered mb-0\">\n        <span class=\"column is-narrow py-1 my-0\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!mapVisible\"></fa-icon>\n          <fa-icon icon=\"angle-right\" [class.is-hidden]=\"mapVisible\"></fa-icon>\n        </span>\n        <span class=\"column py-1 my-0\">\n          <span class=\"is-size-6\">View on Map</span>\n        </span>\n      </div>\n    </div>\n    <div class=\"panel-block is-block p-0\" [class.is-hidden]=\"!mapVisible\">\n      <he-sites-maps [sites]=\"[node]\" [showNotice]=\"false\"></he-sites-maps>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #nodeErrorForm let-property>\n  <ng-container *ngIf=\"property.newError && property.editable\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select [(ngModel)]=\"property.newError.level\">\n            <option [value]=\"undefined\">Select Level</option>\n            <option value=\"error\">Error</option>\n            <option value=\"warning\">Warning</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control is-expanded\">\n        <textarea class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"\n        ></textarea>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\"\n        >\n          <fa-icon icon=\"plus-circle\"></fa-icon>\n          <span class=\"pl-2\">Add</span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #popupErrorForm let-data=\"data\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <div class=\"select\">\n        <select [(ngModel)]=\"data.level\">\n          <option [value]=\"undefined\">Select Level</option>\n          <option value=\"error\">Error</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"control\">\n      <input class=\"input\"\n        [(ngModel)]=\"data.message\"\n        placeholder=\"Enter your message here\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\"\n  ></ngb-highlight>\n</ng-template>\n\n<ng-template #padder>\n  <div class=\"pt-1\"></div>\n</ng-template>\n\n<ng-template #convertUnits let-value=\"value\" let-term=\"term\" let-units=\"units\">\n  <he-unit-converter [value]=\"value\" [term]=\"term\" [toUnits]=\"units\"></he-unit-converter>\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#ededed;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 768px){.card-toggle{position:relative}}.card-toggle>fa-icon{display:inline-block;width:10px}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"] }]
+            args: [{ selector: 'he-files-form', template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"py-4 pl-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n\n  <ng-content></ng-content>\n</div>\n\n<he-maps-drawing-confirm *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\" [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"\n></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"\n></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <ng-template #description>\n    <span class=\"is-pre-line\">{{property.schema?.description}}</span>\n  </ng-template>\n\n  <span\n    class=\"trigger-popover\"\n    [ngbPopover]=\"description\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow is-narrow-width\"\n    triggers=\"hover\" placement=\"right\" container=\"body\"\n  >\n    <span>{{property.key}}</span>\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{property.key}}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  <ng-container *ngIf=\"(isOpen || property.closedVisible) && !property.isHidden\">\n    <div class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\"\n      [ngSwitch]=\"!!property.properties.length\"\n    >\n      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <ng-container *bindOnce=\"property\">\n          <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n            <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\">\n              <ng-container\n                *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n              </ng-container>\n            </label>\n          </div>\n        </ng-container>\n\n        <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n          <div class=\"field\">\n            <ng-container *ngTemplateOutlet=\"inputForm; context: {$implicit: property}\"></ng-container>\n\n            <ng-container *ngIf=\"(editable || errorsEditable) && (property.hasError || property.hasWarning)\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: false}\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"panel\" *ngSwitchCase=\"true\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\"\n      >\n        <div class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\" pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\"\n        >\n          <div class=\"columns is-mobile is-vcentered\">\n            <span class=\"column is-narrow py-1 my-0\">\n              <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!property.isOpen\"></fa-icon>\n              <fa-icon icon=\"angle-right\" [class.is-hidden]=\"property.isOpen\"></fa-icon>\n            </span>\n            <span class=\"column py-1 my-0\">\n              <span class=\"is-size-6\">{{property.key}}</span>\n            </span>\n            <span *ngIf=\"property.schemaType\" class=\"column is-narrow py-1 my-0\">\n              <span class=\"tags mb-0 has-addons\">\n                <span class=\"tag mb-0 is-light\">Type</span>\n                <span class=\"tag mb-0 is-white\">\n                  <he-schema-version-link linkClass=\"is-small\" [node]=\"{'@type': property.schemaType}\">\n                    <span>{{property.schemaType}}</span>\n                  </he-schema-version-link>\n                </span>\n              </span>\n            </span>\n            <he-popover-confirm class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\" placement=\"top\"\n              [message]=\"'<p>This will remove the group completely.</p>' + (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') + '<p>Do you confirm?</p>'\"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\"\n            >\n              <fa-icon icon=\"times\" size=\"sm\"></fa-icon>\n            </he-popover-confirm>\n          </div>\n        </div>\n        <div class=\"panel-block is-block p-0\" *ngIf=\"property.isOpen\">\n          <ng-container [ngSwitch]=\"property.isArray\">\n            <div class=\"px-3 pt-4\" *ngIf=\"property.error\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: true}\"></ng-container>\n            </div>\n\n            <div class=\"mt-3\" *ngSwitchCase=\"false\">\n              <p class=\"help py-1 px-2\" *ngIf=\"editable && !property.editable\">\n                To change the {{property.key}}, please delete it first, then add the field again\n              </p>\n              <ng-container *ngIf=\"editable && property.editable\">\n                <ng-container [ngSwitch]=\"property.schema?.title\">\n                  <p class=\"help py-1 px-2\" *ngSwitchCase=\"'Bibliography'\">\n                    Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                  </p>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: property}\"></ng-container>\n\n              <div class=\"px-3 mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <div class=\"property-group py-2 px-3 mt-2\">\n                <div class=\"columns is-multiline mb-0\">\n                  <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                    <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop2}\"></ng-container>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"py-2 px-3 mt-2\" *ngSwitchCase=\"true\">\n              <div class=\"mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                <div class=\"card p-0 my-4\" *ngIf=\"prop2.key\"\n                  [id]=\"prop2.fullKey + '_' + prop2.id\"\n                >\n                  <div class=\"property-array-number\">\n                    <div class=\"tags has-addons\">\n                      <span class=\"tag is-dark\">{{prop2.key}}</span>\n                      <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                        <span class=\"tag is-info\" pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"('Duplicate ' + property.key) | pluralize:1\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm class=\"tag is-delete\"\n                          [ngbTooltip]=\"('Remove ' + property.key) | pluralize:1\" placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\" position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"\n                        ></he-popover-confirm>\n                      </ng-container>\n                    </div>\n                  </div>\n\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: prop2}\"></ng-container>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"errorsEditable\">\n                    <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: prop2}\"></ng-container>\n                  </div>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"prop2.error\">\n                    <ng-container *ngTemplateOutlet=\"propertyError; context: {property: prop2, edit: true}\"></ng-container>\n                  </div>\n\n                  <div class=\"property-group card-content p-3\">\n                    <div class=\"columns is-multiline my-0\">\n                      <ng-container *ngFor=\"let prop3 of prop2.properties; trackBy: trackByProperty\">\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop3}\"></ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n\n              <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                <button class=\"button is-info is-small\" type=\"button\"\n                  (click)=\"addArrayGroup(property)\"\n                  >\n                  <fa-icon icon=\"plus-circle\"></fa-icon>\n                  <span class=\"pl-2\">Add</span>\n                  <span class=\"pl-1\">{{property.key | pluralize:1}}</span>\n                </button>\n\n                <he-node-recommendations buttonClass=\"is-small\"\n                  [node]=\"node\" [nodeField]=\"property.key\"\n                  (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputForm let-property>\n  <ng-container *ngIf=\"property.key\">\n    <ng-container [ngSwitch]=\"property.suggestions?.type\">\n      <ng-container *ngSwitchCase=\"'select'\">\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"inputInput; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\"\n      [class.has-icons-right]=\"property.loading\"\n    >\n      <input class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n\n        [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!editable || !property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{enabled: editable && property.editable && property.schema?.type === 'array', items: property.schema?.items, delimiter: ';', allowDuplicates: true, placeholder: property.placeholder}\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n\n        [ngbTypeahead]=\"property | applyPure:propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\"\n      >\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n      >\n        <select\n          [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!editable || !property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\"\n        >\n          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">{{value}}</option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a class=\"button is-small\" title=\"Remove field\"\n      [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n      [class.is-danger]=\"!property.changed && property.hasError\"\n      [class.is-warning]=\"!property.changed && property.hasWarning\"\n      (click)=\"$event.stopPropagation(); propertyChanged(null, property)\"\n    >\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <ng-container *bindOnce=\"property\">\n    <he-popover-confirm class=\"control\"\n      *ngIf=\"enableAddError(property)\"\n      position=\"left\"\n      [content]=\"popupErrorForm\"\n      (confirmed)=\"addError(property, $event)\"\n    >\n      <span class=\"button is-small\">\n        <fa-icon icon=\"comments\"></fa-icon>\n      </span>\n    </he-popover-confirm>\n\n    <ng-container *ngIf=\"editable && property.editable\">\n      <ng-container [ngSwitch]=\"property.schemaType\">\n        <ng-container *ngSwitchCase=\"SchemaType.Actor\">\n          <ng-container *ngTemplateOutlet=\"actorAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SchemaType.Cycle\">\n          <ng-container *ngTemplateOutlet=\"cycleAddons; context: {$implicit: property}\"></ng-container>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\"\n          (click)=\"mapDrawingProperty = property\"\n        >\n          <fa-icon icon=\"map-marked-alt\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"bibliographiesSearchKey(property)\">\n        <button class=\"button is-small\" title=\"Advanced Search\"\n          (click)=\"bibliographiesSearchProperty = property\"\n        >\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n    </ng-container>\n\n    <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n      <a class=\"button is-small is-danger\" title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\"\n      >\n        <fa-icon icon=\"plus-circle\"></fa-icon>\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n    <div class=\"control\" *ngIf=\"isRequired(property)\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\"\n        ngbTooltip=\"This field is required\" placement=\"top\"\n      >\n        <fa-icon icon=\"exclamation-triangle\"></fa-icon>\n      </label>\n    </div>\n    <ng-container *ngIf=\"property.externalUrl?.url\">\n      <div class=\"control\">\n        <a class=\"button is-small\"\n          [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n          target=\"_blank\"\n          [title]=\"property.externalUrl.title\"\n          [ngClass]=\"{'is-info': property.key === 'type'}\"\n          [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\"\n        >\n          <fa-icon [icon]=\"property.externalUrl.icon || 'external-link-alt'\"></fa-icon>\n        </a>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"unitConverterEnabled(property)\">\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Open calculator\"\n          [ngbPopover]=\"convertUnits\" autoClose=\"outside\"\n          triggers=\"manual\" #p=\"ngbPopover\" placement=\"bottom\" container=\"body\"\n          (click)=\"openUnitConverter(p, property)\"\n        >\n          <fa-icon icon=\"calculator\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #actorAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === '@id'\">\n    <button class=\"button is-small\" title=\"Add myself as Actor\"\n      (click)=\"setUserActorId(property)\"\n    >\n      <fa-icon [icon]=\"['far', 'id-badge']\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === 'cycleDuration'\">\n    <button class=\"button is-small\" title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button class=\"button is-small\" title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header class=\"card-header\" *ngIf=\"editable && property.editable && (property.addPropertyEnabled || deepEditable); else padder\">\n    <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-small\" *bindOnce=\"property\">\n          <label class=\"label\" [for]=\"property.id + '_new'\">\n            <span>Add new field</span>\n          </label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field has-addons\">\n            <div class=\"control is-expanded\">\n              <input class=\"input is-small\"\n                [(ngModel)]=\"property.newProperty\"\n                [id]=\"property.id + '_new'\"\n                name=\"randomname\"\n                placeholder=\"Search and select field from results\"\n\n                [ngbTypeahead]=\"property | applyPure:suggestNewProperty\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatNewProperty\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\"\n              >\n            </div>\n            <div class=\"control\">\n              <button class=\"button is-small\" type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\"\n              >\n                <fa-icon icon=\"plus\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </header>\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-edit=\"edit\">\n  <p class=\"help\"\n    [class.is-danger]=\"property.hasError\"\n    [class.is-warning]=\"property.hasWarning\"\n    *ngIf=\"property.error\"\n  >\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\"\n      *ngIf=\"edit && errorsEditable && property.error.index >= 0\"\n      (click)=\"editError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"check\"></fa-icon>\n      <span>Resolved</span>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  <div class=\"panel is-default\" *ngIf=\"showMap\">\n    <div class=\"open-group panel-heading py-0\"\n      (click)=\"mapVisible = !mapVisible\" pointer\n      [class.is-open]=\"mapVisible\"\n    >\n      <div class=\"columns is-mobile is-vcentered mb-0\">\n        <span class=\"column is-narrow py-1 my-0\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!mapVisible\"></fa-icon>\n          <fa-icon icon=\"angle-right\" [class.is-hidden]=\"mapVisible\"></fa-icon>\n        </span>\n        <span class=\"column py-1 my-0\">\n          <span class=\"is-size-6\">View on Map</span>\n        </span>\n      </div>\n    </div>\n    <div class=\"panel-block is-block p-0\" [class.is-hidden]=\"!mapVisible\">\n      <he-sites-maps [sites]=\"[node]\" [showNotice]=\"false\"></he-sites-maps>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #nodeErrorForm let-property>\n  <ng-container *ngIf=\"property.newError && property.editable\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select [(ngModel)]=\"property.newError.level\">\n            <option [value]=\"undefined\">Select Level</option>\n            <option value=\"error\">Error</option>\n            <option value=\"warning\">Warning</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control is-expanded\">\n        <textarea class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"\n        ></textarea>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\"\n        >\n          <fa-icon icon=\"plus-circle\"></fa-icon>\n          <span class=\"pl-2\">Add</span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #popupErrorForm let-data=\"data\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <div class=\"select\">\n        <select [(ngModel)]=\"data.level\">\n          <option [value]=\"undefined\">Select Level</option>\n          <option value=\"error\">Error</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"control\">\n      <input class=\"input\"\n        [(ngModel)]=\"data.message\"\n        placeholder=\"Enter your message here\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\"\n  ></ngb-highlight>\n</ng-template>\n\n<ng-template #padder>\n  <div class=\"pt-1\"></div>\n</ng-template>\n\n<ng-template #convertUnits let-value=\"value\" let-term=\"term\" let-units=\"units\">\n  <he-unit-converter [value]=\"value\" [term]=\"term\" [toUnits]=\"units\"></he-unit-converter>\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#ededed;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 768px){.card-toggle{position:relative}}.card-toggle>fa-icon{display:inline-block;width:10px}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: HeSearchService }, { type: HeUsersService }]; }, propDecorators: { schemas: [{
                 type: Input
             }], errors: [{
@@ -8428,17 +8431,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Output
             }] } });
 
+const nodeTypeToString = (type) => `${type.charAt(0).toLowerCase()}${type.substring(1)}`;
+const acceptedTypes = Object.values(NodeType).filter(val => val !== NodeType.Term).map(nodeTypeToString);
+var ErrorKeys;
+(function (ErrorKeys) {
+    ErrorKeys["NoData"] = "no-data";
+    ErrorKeys["NoHeaders"] = "no-headers";
+    ErrorKeys["InvalidSheetName"] = "invalid-sheet-name";
+    ErrorKeys["InvalidFirstColumn"] = "invalid-first-column";
+    ErrorKeys["DuplicatedHeaders"] = "duplicated-headers";
+    ErrorKeys["DuplicatedIds"] = "duplicated-ids";
+    ErrorKeys["PropertyInvalidFormat"] = "property-invalid-format";
+    ErrorKeys["PropertyNotFound"] = "property-not-found";
+    ErrorKeys["PropertyRequired"] = "property-required";
+    ErrorKeys["PropertyInternal"] = "property-internal";
+    ErrorKeys["SchemaNotFound"] = "schema-not-found";
+    ErrorKeys["UploadsLimit"] = "upload-limit";
+    ErrorKeys["NestedHeaders"] = "nested-headers";
+    ErrorKeys["ReferenceExistingHeaders"] = "reference-existing-headers";
+    ErrorKeys["MaxSize"] = "max-size";
+    ErrorKeys["MaxRows"] = "max-rows";
+})(ErrorKeys || (ErrorKeys = {}));
+const valueToNodes = (value, type) => Array.isArray(value) ? (isExpandable(value) ? value.map(val => (Object.assign({ type }, val))) : null) : (typeof value === 'object' ? [Object.assign({ type }, value)] : null);
+const nodesFromError = (error, type) => error ? (valueToNodes(error.node, type) || valueToNodes(error.value, error.schema) || []) : [];
+const errorCsv = (nodes) => {
+    try {
+        return toCsv$2(nodes, true);
+    }
+    catch (_err) {
+        return '';
+    }
+};
+const numberToCol = (num) => {
+    let total = num + 1; // starts at 0
+    let str = '';
+    while (total > 0) {
+        const q = (total - 1) / 26;
+        const r = (total - 1) % 26;
+        total = Math.floor(q);
+        str = `${String.fromCharCode(65 + r)}${str}`;
+    }
+    return str;
+};
+class FilesUploadErrorsComponent {
+    constructor() {
+        this.baseUrl = baseUrl();
+        this.nodeTypes = acceptedTypes;
+        this.ErrorKeys = ErrorKeys;
+        this.UploadLimit = UploadLimit;
+        this.MAX_SIZE = MAX_SIZE;
+        this.columns = [];
+        this.headers = [];
+        this.rows = [];
+    }
+    ngOnInit() {
+        var _a, _b, _c;
+        this.columns = (((_a = this.error) === null || _a === void 0 ? void 0 : _a.headers) || []).map(header => (Object.assign(Object.assign({}, header), { column: numberToCol(header.index) })));
+        const schemaType = ((_b = this.error) === null || _b === void 0 ? void 0 : _b.key) ? typeToSchemaType(this.error.key.split('.')[0]) : null;
+        const nodeType = Object.values(SchemaType).includes(schemaType) ? schemaType : (_c = this.error) === null || _c === void 0 ? void 0 : _c.schema;
+        const nodes = nodesFromError(this.error, nodeType);
+        const csv = errorCsv(nodes).trim();
+        const { data: [headers, ...rows] } = csv ? parse(csv) : { data: [[]] };
+        this.headers = headers;
+        this.rows = rows;
+    }
+    get isJSONFile() {
+        var _a, _b;
+        return (_b = (_a = this.file) === null || _a === void 0 ? void 0 : _a.filename) === null || _b === void 0 ? void 0 : _b.endsWith(SupportedExtensions.json);
+    }
+    stringify(value) {
+        return JSON.stringify(value, null, 2);
+    }
+    hasDuplicatedError(value, colIndex) {
+        const firstVal = this.rows[0][colIndex];
+        return value !== firstVal;
+    }
+    get hasNumberWithCommasError() {
+        var _a, _b;
+        return ((_a = this.error) === null || _a === void 0 ? void 0 : _a.error) === 'failed to parse number' && (`${(_b = this.error) === null || _b === void 0 ? void 0 : _b.value}` || '').includes(',');
+    }
+    get isSchemaError() {
+        var _a;
+        return [
+            ErrorKeys.PropertyNotFound,
+            ErrorKeys.SchemaNotFound
+        ].includes((_a = this.error) === null || _a === void 0 ? void 0 : _a.message);
+    }
+    get showCsvPreview() {
+        var _a, _b;
+        return ((_a = this.headers) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.rows) === null || _b === void 0 ? void 0 : _b.length) && !this.isSchemaError && !this.isJSONFile;
+    }
+    get showJsonPreview() {
+        var _a;
+        return ((_a = this.error) === null || _a === void 0 ? void 0 : _a.node) && this.isJSONFile;
+    }
+}
+FilesUploadErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesUploadErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilesUploadErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FilesUploadErrorsComponent, selector: "he-files-upload-errors", inputs: { file: "file", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>\n        No Nodes could be found in your Submission.\n        Please verify the column headers match the Hestia schema.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>You have column headers that do not match the Hestia schema.</span>\n          <span class=\"px-1\">Please refer to the</span>\n          <a [href]=\"baseUrl + '/schema/' + error.schema\" target=\"_blank\">schema</a>\n          <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n        </p>\n\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>The following value in the column <i>{{error.key}}</i> is not in the correct format:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"true\">\n          <p class=\"is-mt-2\">\n            Please format your numbers to remove commas and use a decimal point to separate the whole part of the number from the fractional part of the number.\n          </p>\n\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\n          <p>\n            <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n            <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + (error.schemaKey || error.key)\" target=\"_blank\">here</a>\n            <span>.</span>\n          </p>\n\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>If you are trying to set no data, we accept either <code>-</code> or an empty cell.</p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"baseUrl + '/schema/' + error.schema\" target=\"_blank\">{{error.schema}}</a>\n        <span>schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">You must assign a unique <code>id</code> for every record in your data.</span>\n        <span *ngSwitchCase=\"'type'\">Every record in your data must contain a <code>type</code>.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is <code>internal</code> in the</span>\n        <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + (error.schemaKey || error.key)\" target=\"_blank\">{{error.schema}} schema</a>\n        <span>:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.schemaKey || error.key}}</code></pre>\n      </div>\n      <p>You cannot upload <code>internal</code> fields to Hestia.</p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.SchemaNotFound\">\n      <div class=\"is-mb-2\">\n        <span>The following Node does not exist in the schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.key}}</code></pre>\n      </div>\n      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\"><i>{{type}}</i></li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in a single submission (<b>{{error.value}}</b> have been found).</span>\n      </div>\n\n      <p>\n        <span>Please re-upload the data in multiple submissions with a maximum of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in each submission.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet.\n        Either try selecting a different sheet in the upload screen, or check the sheet to ensure the headers follow the schema - see examples\n      </span>\n      <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row.\n        Please remove all empty rows at the begining of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The Excel sheet</span>\n        <code>{{error.value}}</code>\n        <span class=\"pl-1\">does not exist.</span>\n        <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{e}}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your submission contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <span class=\"pr-1\">You have multiple</span>\n      <code>{{error.schema | pluralize}}</code>\n      <span class=\"px-1\">with the same</span>\n      <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + error.schemaKey\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"px-1\">but different data. The</span>\n      <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + error.schemaKey\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"pl-1\">is:</span>\n      <br>\n      <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g., <code>source.id</code>, <code>source.bibliography.title</code>) and then create the link (e.g., <code>cycle.defaultSource.id</code>).\n        We do not allow nesting (e.g., <code>cycle.defaultSource.bibliography.title</code>).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>You have used the internal <code>@id</code> field to upload a new Node.</p>\n      <p>The <code>@id</code> field should only be used to reference existing Node or Terms. Example:</p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\n      <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n      <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\n      <span>The maximum file size limit is {{MAX_SIZE}}Mb (current file size: {{error.value}}Mb).</span>\n      <span class=\"pl-1\">Please re-upload the data in multiple submissions.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>Your file has {{error.value | number}} rows. This might be an error caused by adding some data at the bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.</span>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{error.index}}</span>\n      <ng-container *ngIf=\"columns.length\">\n        <span class=\"pl-1\">in {{'column' | pluralize:columns.length}}:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{column.column}}</b>\n            <code>{{column.name}}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\n      <b>Suggestions:</b>\n      <span class=\"pl-1\">did you mean instead:</span>\n      <ul class=\"mt-1 content is-list-style-disc pl-5\">\n        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{suggestion}}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>Preview<sup>1</sup>:</b>\n      <div class=\"table-container is-mt-2\">\n        <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n          <thead>\n            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{error.index}}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\"\n                  >{{col | ellipsis:50}}</span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\"><i>1. The preview does not necessarily reflect the original Submission's order or content.</i></p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example submissions and videos</a>\n    <span class=\"is-px-1\">or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesUploadErrorsComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-files-upload-errors', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>\n        No Nodes could be found in your Submission.\n        Please verify the column headers match the Hestia schema.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>You have column headers that do not match the Hestia schema.</span>\n          <span class=\"px-1\">Please refer to the</span>\n          <a [href]=\"baseUrl + '/schema/' + error.schema\" target=\"_blank\">schema</a>\n          <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n        </p>\n\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>The following value in the column <i>{{error.key}}</i> is not in the correct format:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"true\">\n          <p class=\"is-mt-2\">\n            Please format your numbers to remove commas and use a decimal point to separate the whole part of the number from the fractional part of the number.\n          </p>\n\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\n          <p>\n            <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n            <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + (error.schemaKey || error.key)\" target=\"_blank\">here</a>\n            <span>.</span>\n          </p>\n\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>If you are trying to set no data, we accept either <code>-</code> or an empty cell.</p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"baseUrl + '/schema/' + error.schema\" target=\"_blank\">{{error.schema}}</a>\n        <span>schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">You must assign a unique <code>id</code> for every record in your data.</span>\n        <span *ngSwitchCase=\"'type'\">Every record in your data must contain a <code>type</code>.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is <code>internal</code> in the</span>\n        <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + (error.schemaKey || error.key)\" target=\"_blank\">{{error.schema}} schema</a>\n        <span>:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.schemaKey || error.key}}</code></pre>\n      </div>\n      <p>You cannot upload <code>internal</code> fields to Hestia.</p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.SchemaNotFound\">\n      <div class=\"is-mb-2\">\n        <span>The following Node does not exist in the schema:</span>\n        <br>\n        <pre class=\"is-mt-2\"><code>{{error.key}}</code></pre>\n      </div>\n      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\"><i>{{type}}</i></li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in a single submission (<b>{{error.value}}</b> have been found).</span>\n      </div>\n\n      <p>\n        <span>Please re-upload the data in multiple submissions with a maximum of</span>\n        <code class=\"mx-1\">{{UploadLimit[error.schema]}}</code>\n        <span>{{error.schema}} in each submission.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet.\n        Either try selecting a different sheet in the upload screen, or check the sheet to ensure the headers follow the schema - see examples\n      </span>\n      <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row.\n        Please remove all empty rows at the begining of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The Excel sheet</span>\n        <code>{{error.value}}</code>\n        <span class=\"pl-1\">does not exist.</span>\n        <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{e}}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your submission contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <span class=\"pr-1\">You have multiple</span>\n      <code>{{error.schema | pluralize}}</code>\n      <span class=\"px-1\">with the same</span>\n      <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + error.schemaKey\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"px-1\">but different data. The</span>\n      <a [href]=\"baseUrl + '/schema/' + error.schema + '#' + error.schemaKey\" target=\"_blank\">{{error.schemaKey}}</a>\n      <span class=\"pl-1\">is:</span>\n      <br>\n      <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g., <code>source.id</code>, <code>source.bibliography.title</code>) and then create the link (e.g., <code>cycle.defaultSource.id</code>).\n        We do not allow nesting (e.g., <code>cycle.defaultSource.bibliography.title</code>).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>You have used the internal <code>@id</code> field to upload a new Node.</p>\n      <p>The <code>@id</code> field should only be used to reference existing Node or Terms. Example:</p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\n      <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n      <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\n      <span>The maximum file size limit is {{MAX_SIZE}}Mb (current file size: {{error.value}}Mb).</span>\n      <span class=\"pl-1\">Please re-upload the data in multiple submissions.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>Your file has {{error.value | number}} rows. This might be an error caused by adding some data at the bottom of a spreadsheet by accident: delete any unused rows and resubmit the file.</span>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{error.index}}</span>\n      <ng-container *ngIf=\"columns.length\">\n        <span class=\"pl-1\">in {{'column' | pluralize:columns.length}}:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{column.column}}</b>\n            <code>{{column.name}}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\n      <b>Suggestions:</b>\n      <span class=\"pl-1\">did you mean instead:</span>\n      <ul class=\"mt-1 content is-list-style-disc pl-5\">\n        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{suggestion}}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>Preview<sup>1</sup>:</b>\n      <div class=\"table-container is-mt-2\">\n        <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n          <thead>\n            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{error.index}}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\"\n                  >{{col | ellipsis:50}}</span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\"><i>1. The preview does not necessarily reflect the original Submission's order or content.</i></p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example submissions and videos</a>\n    <span class=\"is-px-1\">or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { file: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }] } });
+
 const components$1 = [
-    FilesFormComponent
+    FilesFormComponent,
+    FilesUploadErrorsComponent
 ];
 class HeFilesModule {
 }
 HeFilesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HeFilesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HeFilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: HeFilesModule, declarations: [FilesFormComponent], imports: [CommonModule, FormsModule,
+HeFilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: HeFilesModule, declarations: [FilesFormComponent,
+        FilesUploadErrorsComponent], imports: [CommonModule, FormsModule,
         HeCommonModule,
         HeNodeModule,
         HeBibliographiesModule,
-        HeSitesModule], exports: [FilesFormComponent] });
+        HeSitesModule], exports: [FilesFormComponent,
+        FilesUploadErrorsComponent] });
 HeFilesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HeFilesModule, imports: [CommonModule, FormsModule,
         HeCommonModule,
         HeNodeModule,
@@ -9612,7 +9724,8 @@ class ImpactAssessmentsProductsComponent {
     updateImpacts() {
         // TODO: when there are no indicators for the default model, the table appears empty
         // should default back to the first model in this case
-        const indicatorPerImpactAssessment = groupNodesByTerm(this.impactAssessments, this.key, this.originalValues, this.enableFilterMethodModel ? isMethodModelAllowed(this.selectedMethodModel) : undefined);
+        const filterMethodModel = this.enableFilterMethodModel && this.dataState !== DataState.original;
+        const indicatorPerImpactAssessment = groupNodesByTerm(this.impactAssessments, this.key, this.originalValues, filterMethodModel ? isMethodModelAllowed(this.selectedMethodModel) : undefined);
         this.indicators = orderBy(grouppedKeys(indicatorPerImpactAssessment), ['value.methodTierOrder', 'key'], ['asc', 'asc'])
             .filter(({ value }) => this.termAllowed(value === null || value === void 0 ? void 0 : value.term));
     }
@@ -9756,5 +9869,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BibliographiesSearchConfirmComponent, BindOnceDirective, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, ClickOutsideDirective, ClipboardComponent, ColorPalette, CompoundDirective, CompoundPipe, CyclesActivityComponent, CyclesActivityLogsComponent, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesEmissionsComponent, CyclesEmissionsLogsComponent, CyclesFunctionalUnitMeasureComponent, CyclesPracticesComponent, CyclesPracticesLogsComponent, CyclesPracticesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DiffsDisplayType, EllipsisPipe, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FilesFormComponent, GetPipe, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_ORCHESTRATOR_BASE_URL, HeAggregationEngineService, HeAuthService, HeBibliographiesModule, HeCommonLightModule, HeCommonModule, HeCommonService, HeCyclesModule, HeEngineModule, HeEngineService, HeFilesModule, HeFontawesomeModule, HeImpactAssessmentsModule, HeMendeleyService, HeNodeCsvService, HeNodeModule, HeNodeService, HeSchemaService, HeSearchModule, HeSearchService, HeSitesModule, HeToastService, HeUsersService, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, ImpactAssessmentsProductsLogsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, KeysPipe, Level, LinkKeyValueComponent, LogStatus, MAX_RESULTS, MapsDrawingConfirmComponent, MendeleySearchResult, NavigationMenuComponent, NavigationMenuService, NoExtPipe, NodeCsvExportConfirmComponent, NodeCsvSelectHeadersComponent, NodeDiffsComponent, NodeIconComponent, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeMissingLookupFactorsComponent, NodeRecommendationsComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, Repository, SchemaVersionLinkComponent, SitesMapsComponent, SitesMeasurementsComponent, SitesMeasurementsLogsComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, TagsInputDirective, Template, TimesPipe, ToastComponent, UnitConverterComponent, addPolygonToFeature, allCountriesQuery, arrayValue, availableProperties, baseUrl, bottom, buildSummary, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, clustererImage, code, compoundToHtml, computeTerms, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, fillColor, fillStyle, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findProperty, findPropertyById, formatCustomErrorMessage, formatError, formatPropertyError, formatter, getColor, gitBranch, gitHome, gitRawBaseUrl, groupChanged, groupLogsByModel, groupLogsByTerm, handleAPIError, hasError, hasWarning, isAddPropertyEnabled, isChrome, isEqual, isExternal, isMissingOneOfError, isMissingPropertyError, isSchemaIri, isScrolledBelow, keyToDataPath, levels, linkTypeEnabled, listColor, listColorContinuous, locationQuery, logValueArray, logsKey, lookupUrl, lookups, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, missingNodeErrorMessage, missingNodeErrors, modelCount, modelKeyParams, modelParams, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeLink, nodeLogsUrl, nodeUrl, numberGte, parentKey, parentProperty, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pathToApiDocsPath, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonsFromFeature, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, safeJSONParse, safeJSONStringify, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchableTypes, siblingProperty, singleProperty, siteTooBig, sortProperties, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, termLocation, termLocationName, termProperties, termTypeLabel, toCsv$1 as toCsv, typeToNewProperty, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BibliographiesSearchConfirmComponent, BindOnceDirective, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, ClickOutsideDirective, ClipboardComponent, ColorPalette, CompoundDirective, CompoundPipe, CyclesActivityComponent, CyclesActivityLogsComponent, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesEmissionsComponent, CyclesEmissionsLogsComponent, CyclesFunctionalUnitMeasureComponent, CyclesPracticesComponent, CyclesPracticesLogsComponent, CyclesPracticesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DiffsDisplayType, EllipsisPipe, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FilesFormComponent, FilesUploadErrorsComponent, GetPipe, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_ORCHESTRATOR_BASE_URL, HeAggregationEngineService, HeAuthService, HeBibliographiesModule, HeCommonLightModule, HeCommonModule, HeCommonService, HeCyclesModule, HeEngineModule, HeEngineService, HeFilesModule, HeFontawesomeModule, HeImpactAssessmentsModule, HeMendeleyService, HeNodeCsvService, HeNodeModule, HeNodeService, HeSchemaService, HeSearchModule, HeSearchService, HeSitesModule, HeToastService, HeUsersService, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, ImpactAssessmentsProductsLogsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, KeysPipe, Level, LinkKeyValueComponent, LogStatus, MAX_RESULTS, MapsDrawingConfirmComponent, MendeleySearchResult, NavigationMenuComponent, NavigationMenuService, NoExtPipe, NodeCsvExportConfirmComponent, NodeCsvSelectHeadersComponent, NodeDiffsComponent, NodeIconComponent, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeMissingLookupFactorsComponent, NodeRecommendationsComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, Repository, SchemaVersionLinkComponent, SitesMapsComponent, SitesMeasurementsComponent, SitesMeasurementsLogsComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, TagsInputDirective, Template, TimesPipe, ToastComponent, UnitConverterComponent, addPolygonToFeature, allCountriesQuery, arrayValue, availableProperties, baseUrl, bottom, buildSummary, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, clustererImage, code, compoundToHtml, computeTerms, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, fillColor, fillStyle, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findProperty, findPropertyById, formatCustomErrorMessage, formatError, formatPropertyError, formatter, getColor, gitBranch, gitHome, gitRawBaseUrl, groupChanged, groupLogsByModel, groupLogsByTerm, handleAPIError, hasError, hasWarning, isAddPropertyEnabled, isChrome, isEqual, isExternal, isMissingOneOfError, isMissingPropertyError, isSchemaIri, isScrolledBelow, keyToDataPath, levels, linkTypeEnabled, listColor, listColorContinuous, locationQuery, logValueArray, logsKey, lookupUrl, lookups, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, missingNodeErrorMessage, missingNodeErrors, modelCount, modelKeyParams, modelParams, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeLink, nodeLogsUrl, nodeUrl, numberGte, parentKey, parentProperty, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pathToApiDocsPath, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonsFromFeature, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, safeJSONParse, safeJSONStringify, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchableTypes, siblingProperty, singleProperty, siteTooBig, sortProperties, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, termLocation, termLocationName, termProperties, termTypeLabel, toCsv$1 as toCsv, typeToNewProperty, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map