@hestia-earth/ui-components 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/hestia-earth-ui-components.umd.js +2 -3
- package/bundles/hestia-earth-ui-components.umd.js.map +1 -1
- package/esm2015/files/files-form/files-form.component.js +4 -5
- package/fesm2015/hestia-earth-ui-components.js +2 -3
- package/fesm2015/hestia-earth-ui-components.js.map +1 -1
- package/package.json +1 -1
|
@@ -8654,14 +8654,13 @@
|
|
|
8654
8654
|
return FilesFormComponent;
|
|
8655
8655
|
}());
|
|
8656
8656
|
FilesFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilesFormComponent, deps: [{ token: i0__namespace.ElementRef }, { token: HeSearchService }, { token: HeUsersService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
8657
|
-
FilesFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0__namespace, 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 <span\n class=\"trigger-popover\"\n [ngbPopover]=\"property.schema?.description\" [autoClose]=\"'outside'\"\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 <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n <label class=\"label has-text-right-tablet has-text-ellipsis\"\n *bindOnce=\"property\"\n [for]=\"property.id\"\n >\n <ng-container\n *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n </ng-container>\n </label>\n </div>\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-link]=\"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 ' + pluralize(property.key, 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 ' + pluralize(property.key, 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\">\n <button class=\"button is-dark is-outlined 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-link]=\"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]=\"propertySuggest(property.fullKey, property.suggestions?.type)\"\n [resultTemplate]=\"suggestion\"\n [inputFormatter]=\"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-link]=\"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</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 <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 <ng-container *bindOnce=\"property\">\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 </ng-container>\n\n <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n </ng-container>\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-dark is-outlined': 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-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\">\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]=\"suggestNewProperty(property.fullKey)\"\n [resultTemplate]=\"suggestion\"\n [inputFormatter]=\"formatter\"\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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "selected", "nodes", "center", "zoom", "showNotice"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }, { type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i11__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { type: i1__namespace$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "pluralize": PluralizePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
8657
|
+
FilesFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0__namespace, 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 <span\n class=\"trigger-popover\"\n [ngbPopover]=\"property.schema?.description\" [autoClose]=\"'outside'\"\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 <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n <label class=\"label has-text-right-tablet has-text-ellipsis\"\n *bindOnce=\"property\"\n [for]=\"property.id\"\n >\n <ng-container\n *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n </ng-container>\n </label>\n </div>\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-link]=\"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 ' + pluralize(property.key, 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 ' + pluralize(property.key, 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\">\n <button class=\"button is-dark is-outlined 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-link]=\"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]=\"propertySuggest(property.fullKey, property.suggestions?.type)\"\n [resultTemplate]=\"suggestion\"\n [inputFormatter]=\"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-link]=\"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</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 <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 <ng-container *bindOnce=\"property\">\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 </ng-container>\n\n <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n </ng-container>\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-dark is-outlined': 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-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\">\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]=\"suggestNewProperty(property.fullKey)\"\n [resultTemplate]=\"suggestion\"\n [inputFormatter]=\"formatter\"\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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "selected", "nodes", "center", "zoom", "showNotice"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }, { type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i11__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { type: i1__namespace$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "pluralize": PluralizePipe } });
|
|
8658
8658
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilesFormComponent, decorators: [{
|
|
8659
8659
|
type: i0.Component,
|
|
8660
8660
|
args: [{
|
|
8661
8661
|
selector: 'he-files-form',
|
|
8662
8662
|
templateUrl: './files-form.component.html',
|
|
8663
|
-
styleUrls: ['./files-form.component.scss']
|
|
8664
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
8663
|
+
styleUrls: ['./files-form.component.scss']
|
|
8665
8664
|
}]
|
|
8666
8665
|
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: HeSearchService }, { type: HeUsersService }]; }, propDecorators: { schemas: [{
|
|
8667
8666
|
type: i0.Input
|