@entryscape/rdforms 10.6.0 → 10.7.0

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.6.0",
+  "version": "10.7.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -19,15 +19,18 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@entryscape/rdfjson": "^2.5.4",
+    "@fortawesome/fontawesome-free": "^5.8.1",
     "@mui/icons-material": "^5.0.3",
     "@mui/lab": "^5.0.0-alpha.51",
     "@mui/material": "^5.0.3",
     "@mui/styles": "^5.0.1",
+    "@selectize/selectize": "^0.13.5",
     "arrive": "^2.4.1",
     "bootstrap": "^4.3.1",
     "bootstrap-datepicker": "^1.9.0",
     "bootstrap-material-datetimepicker": "https://bitbucket.org/metasolutions/bootstrap-material-datetimepicker.git#webpack",
     "bootstrap-material-design": "^4.1.1",
+    "circular-dependency-plugin": "^5.2.2",
     "core-js": "^3.1.4",
     "ifdef-loader": "^2.1.1",
     "jquery": "^3.3.1",
@@ -42,7 +45,6 @@
     "react-hooks-lib": "^0.1.5",
     "regenerator-runtime": "^0.13.2",
     "select2": "4.0.7",
-    "selectize": "^0.12.6",
     "selectize-bootstrap4-theme": "^2.0.2",
     "sizzle": "^2.3.3",
     "terser-webpack-plugin": "^1.3.0",

package/src/model/CODES.js

@@ -0,0 +1,17 @@
+export default {
+  UNKNOWN: 'unknown', // Used as a marker initially, to not mark everything red initially
+  OK: 'correct',
+  TOO_FEW_VALUES: 'few', // deprecated
+  TOO_FEW_VALUES_MIN: 'min',
+  TOO_FEW_VALUES_PREF: 'pref',
+  TOO_MANY_VALUES: 'many',
+  AT_MOST_ONE_CHILD: 'atmostonechild',
+  AT_LEAST_ONE_CHILD: 'atleastonechild',
+  EXACTLY_ONE_CHILD: 'exactlyonechild',
+  WRONG_VALUE: 'value',
+  WRONG_PATTERN: 'pattern',
+  WRONG_NODETYPE: 'nodetype',
+  WRONG_DATATYPE: 'datatype',
+  MISSING_LANGUAGE: 'language',
+  MISSING_CONSTRAINTS: 'constraints',
+};

package/src/model/CardinalityTracker.js

@@ -1,4 +1,5 @@
-import { CODES } from './engine';
+import CODES from './CODES';
+
 export default class CardinalityTracker {
   /**
    * A counter paired with a item with cardinality restrictions.

package/src/model/ChoiceBinding.js

@@ -1,5 +1,5 @@
 import ValueBinding from './ValueBinding';
-import {CODES} from './engine';
+import CODES from './CODES';
 
 const label = 'http://www.w3.org/2000/01/rdf-schema#label';
 const seeAlso = 'http://www.w3.org/2000/01/rdf-schema#seeAlso';

package/src/model/engine.js

@@ -11,6 +11,7 @@ import ValueBinding from './ValueBinding';
 import ChoiceBinding from './ChoiceBinding';
 import GroupURIBinding from './GroupURIBinding';
 import utils from '../utils';
+import CODES from './CODES';
 
 // See public API at the bottom of this file.
 
@@ -871,27 +872,8 @@ export { levelProfile };
  */
 export { detectLevel };
 
-const CODES = {
-  UNKNOWN: 'unknown', // Used as a marker initially, to not mark everything red initially
-  OK: 'correct',
-  TOO_FEW_VALUES: 'few', // deprecated
-  TOO_FEW_VALUES_MIN: 'min',
-  TOO_FEW_VALUES_PREF: 'pref',
-  TOO_MANY_VALUES: 'many',
-  AT_MOST_ONE_CHILD: 'atmostonechild',
-  AT_LEAST_ONE_CHILD: 'atleastonechild',
-  EXACTLY_ONE_CHILD: 'exactlyonechild',
-  WRONG_VALUE: 'value',
-  WRONG_PATTERN: 'pattern',
-  WRONG_NODETYPE: 'nodetype',
-  WRONG_DATATYPE: 'datatype',
-  MISSING_LANGUAGE: 'language',
-  MISSING_CONSTRAINTS: 'constraints',
-};
-
 export { CODES };
 
-
 export default { // TODO @valentino anti-pattern. This is done because engine is used in EntryScape. It shouldn't really...
   detectLevel,
   levelProfile,

package/src/model/validate.js

@@ -1,8 +1,9 @@
 import { namespaces as ns } from '@entryscape/rdfjson';
-import * as engine from './engine';
+import { fuzzyMatch, findBindingRelativeToParentBinding, matchPathBelowBinding } from './engine';
+import CODES from './CODES';
 
 const _clearMatchingCodes = (binding) => {
-  binding.setMatchingCode(engine.CODES.OK);
+  binding.setMatchingCode(CODES.OK);
   if (binding.getItem().getType() === 'group') {
     binding.getChildBindings().forEach(childBinding => _clearMatchingCodes(childBinding));
   }
@@ -66,8 +67,8 @@ const doNotProceedFurther = (groupBinding, childItem) => {
   // Don't check further if the binding is hidden due to missing dependencies
   const childPath = childItem.getDeps();
   if (childPath) {
-    const fromBinding = engine.findBindingRelativeToParentBinding(groupBinding, childPath);
-    if (!engine.matchPathBelowBinding(fromBinding, childPath)) {
+    const fromBinding = findBindingRelativeToParentBinding(groupBinding, childPath);
+    if (!matchPathBelowBinding(fromBinding, childPath)) {
       return true;
     }
   }
@@ -75,7 +76,7 @@ const doNotProceedFurther = (groupBinding, childItem) => {
 };
 
 const _createReport = (groupbinding, report, firstLevel) => {
-  if (groupbinding.getMatchingCode() !== engine.CODES.OK) {
+  if (groupbinding.getMatchingCode() !== CODES.OK) {
     return undefined;
   }
   const groupitem = groupbinding.getItem();
@@ -84,8 +85,8 @@ const _createReport = (groupbinding, report, firstLevel) => {
   // Check disabled since it is done for each child before recursive call
  /* const path = groupitem.getDeps();
   if (path && groupbinding.getParent() != null) {
-    const fromBinding = engine.findBindingRelativeToParentBinding(groupbinding.getParent(), path);
-    if (!engine.matchPathBelowBinding(fromBinding, path)) {
+    const fromBinding = findBindingRelativeToParentBinding(groupbinding.getParent(), path);
+    if (!matchPathBelowBinding(fromBinding, path)) {
       return undefined;
     }
   } */
@@ -101,11 +102,11 @@ const _createReport = (groupbinding, report, firstLevel) => {
       const nrOfValid = _countValidBindings(bindings);
       let code;
       if (nrOfValid > 1 && (groupitem.hasStyle('disjoint') || groupitem.hasStyle('atMostOneChild'))) {
-        code = engine.CODES.AT_MOST_ONE_CHILD;
+        code = CODES.AT_MOST_ONE_CHILD;
       } else if (nrOfValid !== 1 && groupitem.hasStyle('exactlyOneChild')) {
-        code = engine.CODES.EXACTLY_ONE_CHILD;
+        code = CODES.EXACTLY_ONE_CHILD;
       } else if (nrOfValid === 0 && groupitem.hasStyle('atLeastOneChild')) {
-        code = engine.CODES.AT_LEAST_ONE_CHILD;
+        code = CODES.AT_LEAST_ONE_CHILD;
       }
       if (code) {
         updateViaCardinalityTracker([groupbinding], code);
@@ -129,15 +130,15 @@ const _createReport = (groupbinding, report, firstLevel) => {
             report.errors.push({
               parentBinding: groupbinding,
               item: childItem,
-              code: engine.CODES.TOO_FEW_VALUES_MIN,
+              code: CODES.TOO_FEW_VALUES_MIN,
             });
-            updateViaCardinalityTracker(bindings, engine.CODES.TOO_FEW_VALUES_MIN);
+            updateViaCardinalityTracker(bindings, CODES.TOO_FEW_VALUES_MIN);
 /*            let counter = 0;
             bindings.forEach((binding) => {
               if (!binding.isValid()) {
                 if (counter < card.min) {
                   counter += 1;
-                  binding.setMatchingCode(engine.CODES.TOO_FEW_VALUES_MIN);
+                  binding.setMatchingCode(CODES.TOO_FEW_VALUES_MIN);
                 }
               }
             }); */
@@ -145,23 +146,23 @@ const _createReport = (groupbinding, report, firstLevel) => {
             report.warnings.push({
               parentBinding: groupbinding,
               item: childItem,
-              code: engine.CODES.TOO_FEW_VALUES_PREF,
+              code: CODES.TOO_FEW_VALUES_PREF,
             });
-//            updateViaCardinalityTracker(bindings, engine.CODES.TOO_FEW_VALUES_PREF);
+//            updateViaCardinalityTracker(bindings, CODES.TOO_FEW_VALUES_PREF);
           }
           if (card.max != null && card.max < nrOfValid) {
             report.errors.push({
               parentBinding: groupbinding,
               item: childItem,
-              code: engine.CODES.TOO_MANY_VALUES,
+              code: CODES.TOO_MANY_VALUES,
             });
-            updateViaCardinalityTracker(bindings, engine.CODES.TOO_MANY_VALUES);
+            updateViaCardinalityTracker(bindings, CODES.TOO_MANY_VALUES);
 /*            let counter = 0;
             bindings.forEach((binding) => {
               if (binding.isValid()) {
                 counter += 1;
                 if (counter > card.max) {
-                  binding.setMatchingCode(engine.CODES.TOO_MANY_VALUES);
+                  binding.setMatchingCode(CODES.TOO_MANY_VALUES);
                 }
               }
             }); */
@@ -172,7 +173,7 @@ const _createReport = (groupbinding, report, firstLevel) => {
 
     groupbinding.getChildBindings().forEach((binding) => {
       const item = binding.getItem();
-      if (binding.getMatchingCode() !== engine.CODES.OK) {
+      if (binding.getMatchingCode() !== CODES.OK) {
         report.errors.push({
           parentBinding: binding,
           item,
@@ -330,7 +331,7 @@ const _simplifyReport = (report) => {
 };
 
 const _resourceReport = (resource, graph, template, ignoreResources) => {
-  const binding = engine.fuzzyMatch(graph, resource, template);
+  const binding = fuzzyMatch(graph, resource, template);
   const report = bindingReport(binding);
   _filterReport(report, resource, ignoreResources || {});
   _simplifyReport(report);

package/src/template/Item.js

@@ -54,7 +54,6 @@ export default class Item {
       'atLeastOneChild',
       'atMostOneChild',
       'exactlyOneChild',
-      'deprecated',
       'noLabelInPresent',
       'autoInitDate',
       'autoUpdateDate',
@@ -63,6 +62,8 @@ export default class Item {
       'showURI',
       'showLink',
       'showValue',
+      'showDescriptionInPresent',
+      'showDescriptionInEdit',
       'textAsChoice',
       'preserveOrderOfChoices',
       'linkWithLabel',

package/src/view/Editor.js

@@ -1,5 +1,6 @@
 import renderingContext from './renderingContext';
 import Presenter from './Presenter';
+import CODES from '../model/CODES';
 import * as engine from '../model/engine';
 import { bindingReport } from '../model/validate';
 
@@ -74,7 +75,7 @@ export default class Editor extends Presenter {
     for (let j = 0; j < _report.errors.length; j++) {
       const err = _report.errors[j];
       if (err.parentBinding === this.binding) {
-        if (err.code === engine.CODES.TOO_FEW_VALUES_MIN) {
+        if (err.code === CODES.TOO_FEW_VALUES_MIN) {
           const item = err.item;
           let counter = item.getCardinality().min;
 
@@ -86,9 +87,9 @@ export default class Editor extends Presenter {
             }
             return counter === 0;
           });
-        } else if (err.code === engine.CODES.AT_MOST_ONE_CHILD) {
+        } else if (err.code === CODES.AT_MOST_ONE_CHILD) {
           this.binding.getChildBindings().forEach((binding) => {
-            if (binding.getMatchingCode() !== engine.CODES.OK) {
+            if (binding.getMatchingCode() !== CODES.OK) {
               renderingContext.domClassToggle(this._binding2node[binding.getHash()],
                 'errorReport', true);
             }

package/src/view/Presenter.js

@@ -1,7 +1,35 @@
-import moment, {locale} from 'moment';
+/* eslint-disable class-methods-use-this */
+import moment from 'moment';
 import renderingContext from './renderingContext';
 import View from './View';
 
+
+const showNow = (editor, item, bindings) => {
+  if (bindings.length === 0 ||
+//    item.hasStyle('deprecated') ||
+    item.hasStyle('invisible')) {
+    return false;
+  }
+  const prop = item.getProperty();
+  if (prop) {
+    return !editor.filterItem(item);
+  }
+
+    // Take care of layout grouping by checking recursively.
+  if (item.getType() === 'group') {
+    const groupedItemsArr = item.getChildren();
+    if (groupedItemsArr.length === 0) {
+      return true; // Corresponds to an extention or pure heading, since no children.
+    }
+    if (bindings[0].getItemGroupedChildBindings().find((childBindings, idx) =>
+      showNow(editor, groupedItemsArr[idx], childBindings))) {
+      return true;
+    }
+    return false;
+  }
+  return true;
+};
+
 export default class Presenter extends View {
   _handleParams(params) {
     this.showLanguage = params.showLanguage !== false;
@@ -17,10 +45,11 @@ export default class Presenter extends View {
    * @param {Object} bindings
    */
   showNow(item, bindings) {
-    if (item.hasStyle('deprecated') && bindings.length === 0) {
+    return showNow(this, item, bindings);
+/*    if (item.hasStyle('deprecated') && bindings.length === 0) {
       return false;
     }
-    return bindings.length > 0 && !item.hasStyle('invisible');
+    return bindings.length > 0 && !item.hasStyle('invisible');*/
   }
 
   skipBinding(binding) {

package/src/view/Registry.js

@@ -272,4 +272,4 @@ export default class Registry {
   check(func) {
     return (new Filter(this)).check(func);
   }
-};
+}

package/src/view/ValidationPresenter.js

@@ -1,6 +1,7 @@
 import renderingContext from './renderingContext';
 import Presenter from './Presenter';
-import engine, { CODES } from '../model/engine';
+import CODES from '../model/CODES';
+import { create } from '../model/engine';
 import { bindingReport } from '../model/validate';
 
 const localize = (bundle, key, val) => {
@@ -101,7 +102,7 @@ export default class ValidationPresenter extends Presenter {
     if (target > _bindings.length && groupChildRequirementHinder && !groupError) {
       _bindings = _bindings.concat([]);
       while (target > _bindings.length) {
-        const binding = engine.create(this.binding, item);
+        const binding = create(this.binding, item);
         if (_bindings.length < min) {
           binding.setMatchingCode(CODES.TOO_FEW_VALUES_MIN);
           // binding.error = CODES.TOO_FEW_VALUES;

package/src/view/View.js

@@ -1,9 +1,9 @@
 /* eslint-disable class-methods-use-this,no-unused-vars */
+import { namespaces } from '@entryscape/rdfjson';
 import renderingContext from './renderingContext';
 import GroupBinding from '../model/GroupBinding';
 import * as engine from '../model/engine';
 import { bindingReport } from '../model/validate';
-import {namespaces} from "@entryscape/rdfjson";
 
 let viewCounter = 0;
 export default class View {
@@ -18,10 +18,14 @@ export default class View {
     this.resource = params.resource || '';
     this.topLevel = params.topLevel !== false;
     this.compact = params.compact !== false;
+    this.showDescription = params.showDescription === true;
     this.styleCls = params.styleCls || '';
-    this.filterPredicates = params.filterPredicates || null;
+    this.filterPredicates = Array.isArray(params.filterPredicates) ?
+      params.filterPredicates.reduce((prev, current) => { prev[current] = true; return prev; }, {}) :
+      params.filterPredicates || null;
     this.restrictToItem = params.restrictToItem;
     this.fuzzy = params.fuzzy === true;
+    this.markOrigin = params.markOrigin !== false;
     this._handleParams(params);
     this._labelIndex = {};
     this.domNode = renderingContext.createDomNode(srcNodeRef, this);
@@ -30,6 +34,32 @@ export default class View {
     this.render();
   }
 
+  getParentView() {
+    return this.parentView;
+  }
+
+  getNamedGraphId(namedGraph) {
+    if (!this.markOrigin) {
+      return undefined;
+    }
+    if (!this.namedGraphs) {
+      this.namedGraphs = {};
+      this.namedGraphCounter = 65; // 'A'
+    }
+
+    let id = this.namedGraphs[namedGraph];
+    if (id === undefined) {
+      id = String.fromCharCode(this.namedGraphCounter);
+      this.namedGraphs[namedGraph] = id;
+      this.namedGraphCounter += 1;
+    }
+    return id;
+  }
+
+  getNamedGraphFromId(id) {
+    return this.namedGraphs ? Object.keys(this.namedGraphs).find(key => this.namedGraphs[key] === id) : undefined;
+  }
+
   destroy() {
     renderingContext.destroyDomNode(this.domNode, this);
   }
@@ -192,6 +222,7 @@ export default class View {
           }
         }
       } else {
+        this.context = { view: this };
         lastRow = this.createRowNode(lastRow, null, item);
       }
 
@@ -244,6 +275,17 @@ export default class View {
         this.createEndOfRowNode(newRow, binding, item);
       }
     }
+    if (this.markOrigin) {
+      const ngId = this.getNamedGraphId(binding);
+      if (ngId) {
+        renderingContext.domClassToggle(fieldDiv, 'rdformsOrigin', true);
+        renderingContext.domClassToggle(fieldDiv, `rdformsOrigin_${ngId}`, true);
+      } else {
+        renderingContext.domClassToggle(fieldDiv, 'rdformsOrigin', true);
+        renderingContext.domClassToggle(fieldDiv, 'rdformsOrigin_default', true);
+      }
+    }
+
     if (item.getType() === 'group') {
       renderingContext.domClassToggle(fieldDiv, 'rdformsGroup', true);
     } else {
@@ -275,7 +317,8 @@ export default class View {
     renderingContext.domClassToggle(rowNode, 'rdformsTopLevel', this.topLevel);
     renderingContext.domClassToggle(rowNode, 'rdformsInvisibleGroup', item.hasStyle('invisibleGroup'));
     renderingContext.domClassToggle(rowNode, 'rdformsHeading', item.hasStyle('heading'));
-    renderingContext.domClassToggle(rowNode, 'notCompact', item.getType() === 'group');
+    renderingContext.domClassToggle(rowNode, 'notCompact', item.getType() === 'group' || item.hasStyle('nonCompact'));
+    renderingContext.domClassToggle(rowNode, 'rdformsCompactItem', item.hasStyle('compact'));
 
     this.addLabel(rowNode, binding, item);
     if (binding && this.filterBinding(binding)) {
@@ -301,16 +344,15 @@ export default class View {
     const filter = (item, fp) => {
       // Exclude based on item id.
       const id = item.getId();
-      if (id && fp && Object.keys(fp).includes(id)) {
+      if (id && Object.keys(fp).includes(id)) {
         return true;
       }
-      // Exclude if property matches.
       const prop = item.getProperty();
-      if (fp && prop) {
+      // Exclude if property matches.
+      if (prop) {
         return fp[prop] === true || fp[namespaces.shortenKnown(prop)] === true;
-      }
-      if (fp && item.getType() === 'group' && !item.getProperty()) {
-        // Checks one level below if there is a child that is visible
+      } else if (item.getType() === 'group') {
+        // Exclude group headers if all children hidden
         const childBindings = item.getChildren() || [];
         let hasNonFilteredChild = false;
         childBindings.forEach((child) => {
@@ -322,7 +364,7 @@ export default class View {
       }
       return false;
     };
-    return filter(itemToCheck, filterPredicates);
+    return filterPredicates ? filter(itemToCheck, filterPredicates) : false;
   }
 
   filterProperty(property) {

package/src/view/bmd/DateTimeMD.js

@@ -1,12 +1,14 @@
 import moment from 'moment';
 import jquery from 'jquery';
 import DateTimeBase from '../bootstrap/DateTimeBase';
+import { getNamedGraphId } from '../viewUtils';
 
 /**
  * A Date and time picker.
  */
 export default class DateTimeMD extends DateTimeBase {
   buildUI() {
+    const disabledAttr = getNamedGraphId(this.binding, this.context) ? 'disabled' : '';
     this.tpdate = null;
     this.dpdate = null;
     const bundle = this.context.view.messages;
@@ -16,23 +18,23 @@ export default class DateTimeMD extends DateTimeBase {
 
     this.domNode.innerHTML = `<div class="rdformsDateValue rdformsFieldInput" xmlns="http://www.w3.org/1999/html">
     <div class="rdformsDatepicker form-group input" style="padding-right: 15px;">
-        <input class="form-control dateInput date" type="text" placeholder="YYYY-MM-DD" />
+        <input ${disabledAttr} class="form-control dateInput date" type="text" placeholder="YYYY-MM-DD" />
         <span >
-            <button type="button" class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm dateButton"><span class="fa fa-calendar"></span>
+            <button ${disabledAttr} type="button" class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm dateButton"><span class="fa fa-calendar"></span>
                 <div class="ripple-container"></div></button>
         </span>
     </div>
     <div class="form-group input" style="display:none;">
-        <input type="text" class="form-control timeInput" placeholder="HH:MM"/>
+        <input ${disabledAttr} type="text" class="form-control timeInput" placeholder="HH:MM"/>
         <span>
-            <button type="button" class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm timeButton"><span class="fa fa-clock"></span></button>
+            <button ${disabledAttr} type="button" class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm timeButton"><span class="fa fa-clock"></span></button>
         </span>
     </div>
     <div class="form-group input" style="display:none;">
-        <input type="text" class="form-control yearInput" placeholder="YYYY"/>
+        <input ${disabledAttr} type="text" class="form-control yearInput" placeholder="YYYY"/>
     </div>
 
-    <select class="form-control dateControl">
+    <select ${disabledAttr} class="form-control dateControl">
         ${yearOption}
         ${dateOption}
         ${dateTimeOption}
@@ -68,10 +70,8 @@ export default class DateTimeMD extends DateTimeBase {
     jquery(this.dateButton).click(() => {
       this.$datepicker.bootstrapMaterialDatePicker('_fireCalendar');
     });
-    this.$datepicker.on('change', (evt, m) => {
-      if (!m) {
-        m = moment(evt.target.value);
-      }
+    this.$datepicker.on('change', (evt, mInstance) => {
+      const m = mInstance || moment(evt.target.value);
 
       if (this.tpdate) {
         const tpd = moment(this.tpdate);
@@ -90,10 +90,8 @@ export default class DateTimeMD extends DateTimeBase {
       this.$timepicker.bootstrapMaterialDatePicker('_fireCalendar');
     });
 
-    this.$timepicker.on('change', (evt, m) => {
-      if (!m) {
-        m = moment(evt.target.value);
-      }
+    this.$timepicker.on('change', (evt, mInstance) => {
+      const m = mInstance || moment(evt.target.value);
 
       if (this.dpdate != null) {
         const dpd = moment(this.dpdate);

package/src/view/bmd/Selectize.js

@@ -1,7 +1,8 @@
-import 'selectize';
+import '@selectize/selectize/dist/js/standalone/selectize.min';
+//import '@selectize/selectize/dist/css/selectize.bootstrap4.css';
 import renderingContext from '../renderingContext';
-import system from '../../model/system';
 import utils from '../../utils';
+import { getNamedGraphId } from '../viewUtils';
 
 renderingContext.renderSelect = function (fieldDiv, binding, context) {
   const formgroup = jquery('<div class="form-group selectizeException">').appendTo(fieldDiv);
@@ -48,7 +49,7 @@ renderingContext.renderSelect = function (fieldDiv, binding, context) {
   }
   sel = $select.selectize(settings)[0].selectize;
 
-  if (disable) {
+  if (disable || getNamedGraphId(binding, context)) {
     sel.disable();
   }
 
@@ -60,7 +61,7 @@ renderingContext.renderSelect = function (fieldDiv, binding, context) {
     const label = utils.getLocalizedValue(choice.label).value || '';
     const op = sel.options[choice.value];
     if (!op) {
-      sel.addOption({id: choice.value, text: label, choice});
+      sel.addOption({ id: choice.value, text: label, choice });
     }
     sel.addItem(choice.value, true);
     // $select.val(choice.value).trigger('change');

package/src/view/bmd/style.css

@@ -137,5 +137,13 @@
 }
 
 .rdforms.rdformsEditor .rdformsLangFieldControl>.action {
-  margin-top: 0px;
+  margin-top: 10px;
+}
+
+.rdformsActionButton:focus {
+  color: #009688;
+}
+
+.rdforms .rdformsLabelRow>.rdformsActionButton.action {
+  margin-top: -5px;
 }

package/src/view/bootstrap/DateTimeBootstrapDatepicker.js

@@ -1,12 +1,14 @@
 import 'bootstrap-datepicker/dist/js/bootstrap-datepicker';
 import jquery from 'jquery';
 import DateTimeBase from './DateTimeBase';
+import { getNamedGraphId } from '../viewUtils';
 
 /**
  * A Date and time picker.
  */
 export default class DateTimeBootstrapDatepicker extends DateTimeBase {
   buildUI() {
+    const disabledAttr = getNamedGraphId(this.binding, this.context) ? 'disabled' : '';
     const bundle = this.context.view.messages;
     const yearOption = this.includeYearOption() ? `<option value="Year">${bundle.date_year}</option>` : '';
     const dateOption = this.includeDateOption() ? `<option value="Date" selected="true">${bundle.date_date}</option>` : '';
@@ -14,7 +16,7 @@ export default class DateTimeBootstrapDatepicker extends DateTimeBase {
     this.domNode.innerHTML = `<div class="rdformsDateValue rdformsFieldInput" xmlns="http://www.w3.org/1999/html">
     <div class="rdformsDatepicker datepicker">
         <div class="input-group date">
-            <input type="text" class="form-control">
+            <input ${disabledAttr} type="text" class="form-control">
             <div class="input-group-append">
                 <span class="input-group-text">
                 <i class="fas fa-calendar"></i>
@@ -23,12 +25,12 @@ export default class DateTimeBootstrapDatepicker extends DateTimeBase {
         </div>
     </div>
     <span style="display: none">
-        <input type="text" class="form-control timeInput" placeholder="HH:MM"/>
+        <input ${disabledAttr} type="text" class="form-control timeInput" placeholder="HH:MM"/>
     </span>
     <span style="display: none">
-        <input type="text" class="form-control yearInput" placeholder="YYYY"/>
+        <input ${disabledAttr} type="text" class="form-control yearInput" placeholder="YYYY"/>
     </span>
-    <select class="form-control dateControl">
+    <select ${disabledAttr} class="form-control dateControl">
         ${yearOption}
         ${dateOption}
         ${dateTimeOption}

package/src/view/bootstrap/RadioButtonsEditor.js

@@ -1,3 +1,5 @@
+import { getNamedGraphId } from '../viewUtils';
+
 let uniqueRadioButtonGroupNr = 0;
 
 export default class RadioButtonsEditor {
@@ -49,7 +51,8 @@ export default class RadioButtonsEditor {
           || c.seeAlso || c.value);
       }
 
-      const $input = jquery('<input type="radio">')
+      const disabledAttr = getNamedGraphId(this.binding, this.context) ? 'disabled' : '';
+      const $input = jquery(`<input ${disabledAttr} type="radio">`)
         .val(c.value)
         .attr('checked', c.value === currentValue)
         .attr('name', `rdformsRadio_${uniqueRadioButtonGroupNr}`)
@@ -60,7 +63,7 @@ export default class RadioButtonsEditor {
         $label.addClass('mismatch disabled');
         $input.attr('disabled', true);
       } else {
-        $label.click((inp) => {
+        $label.click(() => {
           this.binding.setValue($input.val());
         });
       }