@entryscape/rdforms 10.6.2 → 10.7.2

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.6.2",
+  "version": "10.7.2",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -19,17 +19,19 @@
     "@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",
-    "core-js": "^3.1.4",
     "circular-dependency-plugin": "^5.2.2",
+    "core-js": "^3.1.4",
     "ifdef-loader": "^2.1.1",
     "jquery": "^3.3.1",
     "jquery-mousewheel": "^3.1.13",
@@ -43,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/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/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,7 +1,7 @@
 import renderingContext from './renderingContext';
 import Presenter from './Presenter';
 import CODES from '../model/CODES';
-import engine from '../model/engine';
+import { create } from '../model/engine';
 import { bindingReport } from '../model/validate';
 
 const localize = (bundle, key, val) => {
@@ -102,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());
         });
       }

package/src/view/bootstrap/Select2.js

@@ -1,13 +1,16 @@
+import ArrayAdapter from 'select2/src/js/select2/data/array';
+import 'select2';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
-import ArrayAdapter from 'select2/src/js/select2/data/array';
 import Select2QueryAdapter from './Select2QueryAdapter';
-import 'select2';
-//import 'select2/src/js/jquery.select2';
+import { getNamedGraphId } from '../viewUtils';
+// import 'select2/src/js/jquery.select2';
+
 
 renderingContext.renderSelect = (fieldDiv, binding, context) => {
   const choices = context.choices;
-  const $select = jquery('<select>').appendTo(fieldDiv).append('<option></option>');
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
+  const $select = jquery(`<select ${disabledAttr}>`).appendTo(fieldDiv).append('<option></option>');
 
   const options = {
     placeholder: binding.getItem().getPlaceholder() || '',
@@ -34,7 +37,7 @@ renderingContext.renderSelect = (fieldDiv, binding, context) => {
       $select.trigger({
         type: 'select2:select',
         params: {
-          data: {id: choice.val, text: label, choice},
+          data: { id: choice.val, text: label, choice },
         },
       });
     } else {

package/src/view/bootstrap/buttons.js

@@ -1,8 +1,11 @@
 import renderingContext from '../renderingContext';
 import * as engine from '../../model/engine';
+import { getNamedGraphId } from '../viewUtils';
+
 
 renderingContext.addRemoveButton = (fieldDiv, binding, context) => {
-  const $remove = jquery('<span class="fas fa-times action">')
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
+  const $remove = jquery(`<button ${disabledAttr} class="fas fa-times action rdformsActionButton">`)
     .attr('title', context.view.messages.edit_remove)
     .appendTo(context.controlDiv);
   const cardTr = binding.getCardinalityTracker();
@@ -39,7 +42,7 @@ renderingContext.addRemoveButton = (fieldDiv, binding, context) => {
 };
 
 renderingContext.addExpandButton = (rowDiv, labelDiv, item, context) => {
-  const $expand = jquery('<span class="fas fa-plus action">')
+  const $expand = jquery('<button class="fas fa-plus action rdformsActionButton">')
     .attr('title', context.view.messages.edit_expand)
     .appendTo(labelDiv)
     .click(() => {
@@ -62,7 +65,7 @@ renderingContext.addGroupButtons = (rowDiv, labelDiv, binding, context) => {
   const card = item.getCardinality();
   let $add;
   if (card.max !== 1) {
-    $add = jquery('<span class="action fas fa-plus ">')
+    $add = jquery('<button class="action fas fa-plus rdformsActionButton">')
       .attr('title', context.view.messages.edit_add)
       .appendTo(labelDiv);
     $add.click(() => {
@@ -72,7 +75,8 @@ renderingContext.addGroupButtons = (rowDiv, labelDiv, binding, context) => {
       }
     });
   }
-  const $remove = jquery('<span class="action fas fa-times">')
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
+  const $remove = jquery(`<button ${disabledAttr} class="action fas fa-times rdformsActionButton">`)
     .attr('title', context.view.messages.edit_remove)
     .appendTo(labelDiv);
 
@@ -127,7 +131,7 @@ renderingContext.addCreateChildButton = (rowDiv, labelDiv, binding, context) =>
   const parentBinding = binding.getParent();
   const item = binding.getItem();
   const cardTr = binding.getCardinalityTracker();
-  const $add = jquery('<span class="action fas fa-plus">')
+  const $add = jquery('<button class="action fas fa-plus rdformsActionButton">')
     .attr('title', context.view.messages.edit_add)
     .appendTo(labelDiv)
     .click(() => {

package/src/view/bootstrap/choice.js

@@ -1,6 +1,7 @@
 import renderingContext from '../renderingContext';
 import system from '../../model/system';
-import {default as RadioButtonsEditor} from './RadioButtonsEditor';
+import RadioButtonsEditor from './RadioButtonsEditor';
+import { getNamedGraphId } from '../viewUtils';
 
 const editors = renderingContext.editorRegistry;
 
@@ -14,7 +15,7 @@ const radioCheck = (item) => {
 };
 editors.itemtype('choice').choices().check(radioCheck).register((fieldDiv, binding, context) => {
   // eslint-disable-next-line no-new
-  new RadioButtonsEditor({binding, context}, fieldDiv);
+  new RadioButtonsEditor({ binding, context }, fieldDiv);
 });
 
 editors.itemtype('choice').choices().register((fieldDiv, binding, context) => {
@@ -52,13 +53,14 @@ editors.itemtype('choice').choices('none').register((fieldDiv, binding, context)
   context.chooser = renderingContext.chooserRegistry.getComponent(binding.getItem());
   context.choices = undefined; // Reset choices so no bleeding over when reusing context between fields.
 
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
   const renderSelect = () => {
     renderingContext.renderSelect(fieldDiv, binding, context);
     // remember the function since the context object is reused and may
     // reference to the wrong setValue function later on.
     const setValue = context.setValue;
 
-    const $search = jquery('<button class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm browseChoices" type="button">')
+    const $search = jquery(`<button ${disabledAttr} class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm browseChoices" type="button">`)
       .attr('title', context.view.messages.edit_browse)
       .appendTo(fieldDiv);
     if (context.chooser && context.chooser.supportsInlineCreate &&
@@ -109,7 +111,7 @@ editors.itemtype('choice').choices('none').register((fieldDiv, binding, context)
       c.load(() => {
         // If the value can be upgraded into its own entity.
         if (c.upgrade) {
-          const $button = jquery('<button class="btn btn-default bmd-btn-fab bmd-btn-fab-sm' +
+          const $button = jquery(`<button ${disabledAttr} class="btn btn-default bmd-btn-fab bmd-btn-fab-sm` +
             ' browseChoices" type="button">')
             .attr('title', context.view.messages.edit_upgrade)
             .click(() => {

package/src/view/bootstrap/durationEditor.js

@@ -1,4 +1,4 @@
-import { fromDuration, toDuration } from '../jquery/util';
+import { fromDuration, toDuration, getNamedGraphId } from '../viewUtils';
 
 let counter = 0;
 export default (fieldDiv, binding, context) => {
@@ -6,6 +6,7 @@ export default (fieldDiv, binding, context) => {
   let data = fromDuration(binding.getValue());
 
   const wrapper = jquery('<div>').addClass('rdformsDuration rdformsFieldInput').appendTo(fieldDiv);
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
   const render = () => {
     wrapper.empty();
     ['years', 'months', 'days', 'hours', 'minutes'].forEach((key) => {
@@ -17,7 +18,7 @@ export default (fieldDiv, binding, context) => {
         .attr('id', id)
         .text(bundle[`duration_${key}`])
         .appendTo(group);
-      const inp = jquery('<input>').addClass('form-control')
+      const inp = jquery(`<input ${disabledAttr}>`).addClass('form-control')
         .attr('type', 'number')
         .attr('aria-describedby', id)
         .appendTo(group);

package/src/view/bootstrap/labels.js

@@ -18,7 +18,7 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     $labelDiv.attr('id', context.view.createLabelIndex(binding));
   }
   context.labelNode = $labelDiv[0];
-  const $label = jquery('<span class="rdformsLabel">').text(label).appendTo($labelDiv);
+  const $label = jquery('<span class="rdformsLabel" tabindex="0">').text(label).appendTo($labelDiv);
   const card = item.getCardinality();
   const b = context.view.messages;
   if (card.min > 0) {
@@ -32,25 +32,36 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
       .appendTo($labelDiv);
   }
 
-  renderingContext.attachItemInfo(item, $label[0], context);
-
+  // Buttons of various sorts
   if (binding == null) {
     renderingContext.addExpandButton(rowNode, $labelDiv[0], item, context);
-    return undefined;
-  }
-  // If table, no add or remove buttons.
-  if (context.view.showAsTable(item)) {
-    return undefined;
-  }
-  if (card.max != null && (card.max === card.min)) {
-    return undefined;
+  } else if (!context.view.showAsTable(item) &&
+    (card.max === null || card.max !== card.min)) {
+    // If not table or min and max are not the same, then add buttons.
+    if (item.getType() === 'group') {
+      renderingContext.addGroupButtons(rowNode, $labelDiv[0], binding, context);
+    } else {
+      renderingContext.addCreateChildButton(rowNode, $labelDiv[0], binding, context);
+    }
   }
 
-  if (item.getType() === 'group') {
-    renderingContext.addGroupButtons(rowNode, $labelDiv[0], binding, context);
-  } else {
-    renderingContext.addCreateChildButton(rowNode, $labelDiv[0], binding, context);
+  const view = context.view;
+  if (item.hasStyle('showDescriptionInEdit') || view.showDescription) {
+    // An item is compact if it is exclicitly set as compact or
+    // the view is set as compact and the item is not explicitly set as not compact AND
+    // we are at the top
+    const compactField = item.hasStyle('compact') ||
+      (view.compact && !item.hasStyle('nonCompact') && (
+        (view.topLevel && item.getType() !== 'group') ||
+        (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
+    const desc = context.view instanceof Editor ? item.getEditDescription() || item.getDescription() :
+      item.getDescription();
+    if (!compactField && desc) {
+      jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
+    }
   }
+  renderingContext.attachItemInfo(item, $label[0], context);
+
   return undefined;
 };