@ulb-darmstadt/shacl-form 1.7.3 → 1.8.0

package/src/property.ts

@@ -1,22 +1,23 @@
-import { BlankNode, DataFactory, NamedNode, Store } from 'n3'
+import { BlankNode, DataFactory, NamedNode, Quad, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { ShaclNode } from './node'
-import { focusFirstInputElement } from './util'
-import { createShaclOrConstraint, resolveShaclOrConstraint } from './constraints'
+import { createShaclOrConstraint, resolveShaclOrConstraintOnProperty } from './constraints'
+import { findInstancesOf, focusFirstInputElement } from './util'
 import { Config } from './config'
 import { ShaclPropertyTemplate } from './property-template'
-import { Editor, fieldFactory } from './theme'
+import { Editor, fieldFactory, InputListEntry } from './theme'
 import { toRDF } from './serialize'
 import { findPlugin } from './plugin'
-import { RDF_PREDICATE_TYPE, SHACL_PREDICATE_TARGET_CLASS } from './constants'
+import { DATA_GRAPH, RDF_PREDICATE_TYPE, SHACL_PREDICATE_TARGET_CLASS } from './constants'
+import { RokitButton, RokitSelect } from '@ro-kit/ui-widgets'
 
 export class ShaclProperty extends HTMLElement {
     template: ShaclPropertyTemplate
-    addButton: HTMLElement | undefined
+    addButton: RokitSelect | undefined
 
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode) {
         super()
-        this.template = new ShaclPropertyTemplate(config.shapesGraph.getQuads(shaclSubject, null, null, null), parent, config)
+        this.template = new ShaclPropertyTemplate(config.store.getQuads(shaclSubject, null, null, null), parent, config)
 
         if (this.template.order !== undefined) {
             this.style.order = `${this.template.order}`
@@ -25,63 +26,48 @@ export class ShaclProperty extends HTMLElement {
             this.classList.add(this.template.cssClass)
         }
 
-        if (config.editMode) {
-            this.addButton = document.createElement('a')
-            this.addButton.innerText = this.template.label
-            this.addButton.title = 'Add ' + this.template.label
-            this.addButton.classList.add('control-button', 'add-button')
-            this.addButton.addEventListener('click', _ => {
-                const instance = this.addPropertyInstance()
-                instance.classList.add('fadeIn')
-                this.updateControls()
-                focusFirstInputElement(instance)
-                setTimeout(() => {
-                    instance.classList.remove('fadeIn')
-                }, 200)
-            })
+        if (config.editMode && !parent.linked) {
+            this.addButton = this.createAddButton()
             this.appendChild(this.addButton)
         }
 
         // bind existing values
         if (this.template.path) {
-            const values = valueSubject ? config.dataGraph.getQuads(valueSubject, this.template.path, null, null) : []
+            let values: Quad[] = []
+            if (valueSubject) {
+                if (parent.linked) {
+                    // for linked resource, get values in all graphs
+                    values = config.store.getQuads(valueSubject, this.template.path, null, null)
+                } else {
+                    // get values only from data graph
+                    values = config.store.getQuads(valueSubject, this.template.path, null, DATA_GRAPH)
+                }
+            }
             let valuesContainHasValue = false
             for (const value of values) {
                 // ignore values that do not conform to this property.
                 // this might be the case when there are multiple properties with the same sh:path in a NodeShape.
-                if (this.template.node) {
-                    const targetClasses = config.shapesGraph.getObjects(this.template.node, SHACL_PREDICATE_TARGET_CLASS, null)
-                    if (targetClasses.length > 0) {
-                        let hasTargetClass = false
-                        for (let i = 0; i < targetClasses.length && !hasTargetClass; i++) {
-                            if (config.dataGraph.getQuads(value.object, RDF_PREDICATE_TYPE, targetClasses[i], null).length > 0) {
-                                hasTargetClass = true
-                            }        
-                        }
-                        if (!hasTargetClass) {
-                            continue
-                        }
+                if (this.isValueValid(value.object)) {
+                    this.addPropertyInstance(value.object)
+                    if (this.template.hasValue && value.object.equals(this.template.hasValue)) {
+                        valuesContainHasValue = true
                     }
                 }
-                this.addPropertyInstance(value.object)
-                if (this.template.hasValue && value.object.equals(this.template.hasValue)) {
-                    valuesContainHasValue = true
-                }
             }
-            if (config.editMode && this.template.hasValue && !valuesContainHasValue) {
+            if (config.editMode && this.template.hasValue && !valuesContainHasValue && !parent.linked) {
                 // sh:hasValue is defined in shapes graph, but does not exist in data graph, so force it
                 this.addPropertyInstance(this.template.hasValue)
             }
         }
 
-        if (config.editMode) {
+        if (config.editMode && !parent.linked) {
             this.addEventListener('change', () => { this.updateControls() })
             this.updateControls()
         }
 
-        if (this.template.extendedShapes?.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
+        if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
             // in view mode, show collapsible only when we have something to show
-            if (config.editMode || this.childElementCount > 0) {
+            if ((config.editMode && !parent.linked) || this.childElementCount > 0) {
                 const collapsible = this
                 collapsible.classList.add('collapsible')
                 if (this.template.config.attributes.collapse === 'open') {
@@ -100,27 +86,43 @@ export class ShaclProperty extends HTMLElement {
 
     addPropertyInstance(value?: Term): HTMLElement {
         let instance: HTMLElement
-        if (this.template.shaclOr?.length) {
+        if (this.template.shaclOr?.length || this.template.shaclXone?.length) {
+            const options = this.template.shaclOr?.length ? this.template.shaclOr : this.template.shaclXone as Term[]
+            let resolved = false
             if (value) {
-                instance = createPropertyInstance(resolveShaclOrConstraint(this.template, value), value, true)
-            } else {
-                instance = createShaclOrConstraint(this.template.shaclOr, this, this.template.config)
+                const resolvedOptions = resolveShaclOrConstraintOnProperty(options, value, this.template.config)
+                if (resolvedOptions.length) {
+                    instance = createPropertyInstance(this.template.clone().merge(resolvedOptions), value, true)
+                    resolved = true
+                }
+            } 
+            if (!resolved) {
+                instance = createShaclOrConstraint(options, this, this.template.config)
                 appendRemoveButton(instance, '')
             }
         } else {
-            instance = createPropertyInstance(this.template, value)
+            // check if value is part of the data graph. if not, create a linked resource
+            let linked = false
+            if (value) {
+                const clazz = this.getRdfClassToLinkOrCreate()
+                if (clazz && this.template.config.store.countQuads(value, RDF_PREDICATE_TYPE, clazz, DATA_GRAPH) === 0) {
+                    // value is not in data graph, so must be a link in the shapes graph
+                    linked = true
+                }
+            }
+            instance = createPropertyInstance(this.template, value, undefined, linked || this.template.parent.linked)
         }
-        if (this.template.config.editMode) {
-            this.insertBefore(instance, this.addButton!)
+        if (this.addButton) {
+            this.insertBefore(instance!, this.addButton)
         } else {
-            this.appendChild(instance)
+            this.appendChild(instance!)
         }
-        return instance
+        return instance!
     }
 
     updateControls() {
         let instanceCount = this.querySelectorAll(":scope > .property-instance, :scope > .shacl-or-constraint, :scope > shacl-node").length
-        if (instanceCount === 0 && (!this.template.extendedShapes?.length || (this.template.minCount !== undefined && this.template.minCount > 0))) {
+        if (instanceCount === 0 && (!this.template.extendedShapes.length || (this.template.minCount !== undefined && this.template.minCount > 0))) {
             this.addPropertyInstance()
             instanceCount = this.querySelectorAll(":scope > .property-instance, :scope > .shacl-or-constraint, :scope > shacl-node").length
         }
@@ -128,7 +130,7 @@ export class ShaclProperty extends HTMLElement {
         if (this.template.minCount !== undefined) {
             mayRemove = instanceCount > this.template.minCount
         } else {
-            mayRemove = (this.template.extendedShapes && this.template.extendedShapes.length > 0) || instanceCount > 1
+            mayRemove = this.template.extendedShapes.length > 0 || instanceCount > 1
         }
 
         const mayAdd = this.template.maxCount === undefined || instanceCount < this.template.maxCount
@@ -141,39 +143,142 @@ export class ShaclProperty extends HTMLElement {
             const pathNode = DataFactory.namedNode((instance as HTMLElement).dataset.path!)
             if (instance.firstChild instanceof ShaclNode) {
                 const shapeSubject = instance.firstChild.toRDF(graph)
-                graph.addQuad(subject, pathNode, shapeSubject, this.template.config.valuesGraph)
+                graph.addQuad(subject, pathNode, shapeSubject, this.template.config.valuesGraphId)
             } else {
                 for (const editor of instance.querySelectorAll<Editor>(':scope > .editor')) {
                     const value = toRDF(editor)
                     if (value) {
-                        graph.addQuad(subject, pathNode, value, this.template.config.valuesGraph)
+                        graph.addQuad(subject, pathNode, value, this.template.config.valuesGraphId)
                     }
                 }
             }
         }
     }
+
+    getRdfClassToLinkOrCreate() {
+        if (this.template.class && this.template.node) {
+            return this.template.class
+        }
+        else {
+            for (const node of this.template.extendedShapes) {
+                // if this property has no sh:class but sh:node, then use the node shape's sh:targetClass to find protiential instances
+                const targetClasses = this.template.config.store.getObjects(node, SHACL_PREDICATE_TARGET_CLASS, null)
+                if (targetClasses.length > 0) {
+                    return targetClasses[0] as NamedNode
+                }
+            }
+        }
+        return undefined
+    }
+
+    isValueValid(value: Term) {
+        if (!this.template.extendedShapes.length) {
+            // property has no node shape, so value is valid
+            return true
+        }
+        // property has node shape(s), so check if value conforms to any targetClass
+        for (const node of this.template.extendedShapes) {
+            const targetClasses = this.template.config.store.getObjects(node, SHACL_PREDICATE_TARGET_CLASS, null)
+            for (const targetClass of targetClasses) {
+                if (this.template.config.store.countQuads(value, RDF_PREDICATE_TYPE, targetClass, null) > 0) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+
+    createAddButton() {
+        const addButton = new RokitSelect()
+        addButton.dense = true
+        addButton.label = "+ " + this.template.label
+        addButton.title = 'Add ' + this.template.label
+        addButton.classList.add('add-button')
+
+        // load potential value candidates for linking
+        let instances: InputListEntry[] = []
+        let clazz = this.getRdfClassToLinkOrCreate()
+        if (clazz) {
+            instances = findInstancesOf(clazz, this.template)
+        }
+        if (instances.length === 0) {
+            // no class instances found, so create an add button that creates a new instance
+            addButton.emptyMessage = ''
+            addButton.inputMinWidth = 0
+            addButton.addEventListener('click', _ => {
+                addButton.blur()
+                const instance = this.addPropertyInstance()
+                instance.classList.add('fadeIn')
+                this.updateControls()
+                setTimeout(() => {
+                    focusFirstInputElement(instance)
+                    instance.classList.remove('fadeIn')
+                }, 200)
+            })
+        } else {
+            // some instances found, so create an add button that can create a new instance or link existing ones
+            const ul = document.createElement('ul')
+            const newItem = document.createElement('li')
+            newItem.innerHTML = '&#xFF0B; Create new ' + this.template.label + '...'
+            newItem.dataset.value = 'new'
+            newItem.classList.add('large')
+            ul.appendChild(newItem)
+            const divider = document.createElement('li')
+            divider.classList.add('divider')
+            ul.appendChild(divider)
+            const header = document.createElement('li')
+            header.classList.add('header')
+            header.innerText = 'Or link existing:'
+            ul.appendChild(header)
+            for (const instance of instances) {
+                const li = document.createElement('li')
+                const itemValue = (typeof instance.value === 'string') ? instance.value : instance.value.value
+                li.innerText = instance.label ? instance.label : itemValue
+                li.dataset.value = JSON.stringify(instance.value)
+                ul.appendChild(li)
+            }
+            addButton.appendChild(ul)
+            addButton.collapsibleWidth = '250px'
+            addButton.collapsibleOrientationLeft = ''
+            addButton.addEventListener('change', () => {
+                if (addButton.value === 'new') {
+                    // user wants to create a new instance
+                    this.addPropertyInstance()
+                } else {
+                    // user wants to link existing instance
+                    const value = JSON.parse(addButton.value) as Term
+                    this.insertBefore(createPropertyInstance(this.template, value, true, true), addButton)
+                }
+                addButton.value = ''
+            })
+        }
+        return addButton
+    }
 }
 
-export function createPropertyInstance(template: ShaclPropertyTemplate, value?: Term, forceRemovable = false): HTMLElement {
+export function createPropertyInstance(template: ShaclPropertyTemplate, value?: Term, forceRemovable = false, linked = false): HTMLElement {
     let instance: HTMLElement
-    if (template.extendedShapes?.length) {
+    if (template.extendedShapes.length) {
         instance = document.createElement('div')
         instance.classList.add('property-instance')
         for (const node of template.extendedShapes) {
-            instance.appendChild(new ShaclNode(node, template.config, value as NamedNode | BlankNode | undefined, template.parent, template.nodeKind, template.label))
+            instance.appendChild(new ShaclNode(node, template.config, value as NamedNode | BlankNode | undefined, template.parent, template.nodeKind, template.label, linked))
         }
     } else {
         const plugin = findPlugin(template.path, template.datatype?.value)
         if (plugin) {
-            if (template.config.editMode) {
+            if (template.config.editMode && !linked) {
                 instance = plugin.createEditor(template, value)
             } else {
                 instance = plugin.createViewer(template, value!)
             }
         } else {
-            instance = fieldFactory(template, value || null)
+            instance = fieldFactory(template, value || null, template.config.editMode && !linked)
         }
         instance.classList.add('property-instance')
+        if (linked) {
+            instance.classList.add('linked')
+        }
     }
     if (template.config.editMode) {
         appendRemoveButton(instance, template.label, forceRemovable)
@@ -183,10 +288,10 @@ export function createPropertyInstance(template: ShaclPropertyTemplate, value?:
 }
 
 function appendRemoveButton(instance: HTMLElement, label: string, forceRemovable = false) {
-    const removeButton = document.createElement('a')
-    removeButton.innerText = '\u00d7'
-    removeButton.classList.add('control-button', 'btn', 'remove-button')
+    const removeButton = new RokitButton()
+    removeButton.classList.add('remove-button', 'clear')
     removeButton.title = 'Remove ' + label
+    removeButton.dense = true
     removeButton.addEventListener('click', _ => {
         instance.classList.remove('fadeIn')
         instance.classList.add('fadeOut')

package/src/serialize.ts

@@ -46,11 +46,13 @@ function serializeJsonld(quads: Quad[]): string {
 }
 
 export function toRDF(editor: Editor): Literal | NamedNode | undefined {
-    let languageOrDatatype: NamedNode<string> | string | undefined = editor['shaclDatatype']
+    let languageOrDatatype: NamedNode<string> | string | undefined = editor.shaclDatatype
     let value: number | string = editor.value
     if (value) {
         if (editor.dataset.class || editor.dataset.nodeKind === PREFIX_SHACL + 'IRI') {
             return DataFactory.namedNode(value)
+        } else if (editor.dataset.link) {
+            return JSON.parse(editor.dataset.link)
         } else {
             if (editor.dataset.lang) {
                 languageOrDatatype = editor.dataset.lang
@@ -65,6 +67,17 @@ export function toRDF(editor: Editor): Literal | NamedNode | undefined {
                 // if seconds in value are 0, the input field omits them which is then not a valid xsd:dateTime
                 value = new Date(value).toISOString().slice(0, 19)
             }
+            // check if value is a typed rdf literal
+            if (!languageOrDatatype && typeof value === 'string') {
+                const tokens = value.split('^^')
+                if (tokens.length === 2 &&
+                    ((tokens[0].startsWith('"') && tokens[0].endsWith('"') || tokens[0].startsWith('\'') && tokens[0].endsWith('\''))) &&
+                    tokens[1].split(':').length === 2
+                ) {
+                    value = tokens[0].substring(1, tokens[0].length - 1)
+                    languageOrDatatype = DataFactory.namedNode(tokens[1])
+                }
+            }
             return DataFactory.literal(value, languageOrDatatype)
         }
     } else if (editor['type'] === 'checkbox' || editor.getAttribute('type') === 'checkbox') {

package/src/styles.css

@@ -2,31 +2,29 @@ form { box-sizing: border-box; display:block; --label-width: 8em; --caret-size:
 form.mode-edit { padding-left: 1em;  }
 form *, form ::after, form ::before { box-sizing: inherit; }
 shacl-node, .shacl-group { display: flex; flex-direction: column; width: 100%; position: relative; }
-shacl-node .control-button { text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; }
-shacl-node .control-button:hover { border-color: inherit; }
-shacl-node .remove-button { margin-left: 4px; }
-shacl-node .add-button { font-size: 0.8rem; color: #555; margin: 4px 24px 0 0; }
-shacl-node .add-button:before { content: '+'; margin-right: 0.2em; }
-shacl-node .add-button:hover { color: inherit; }
+shacl-node .remove-button { margin-left: 4px; margin-top: 1px; }
+shacl-node .add-button { color: #555; background-color: transparent; margin: 4px 24px 0 0; border: 0; }
+shacl-node .add-button:hover { color:#222; }
+shacl-node .add-button:focus { box-shadow: none; }
 shacl-node h1 { font-size: 1.1rem; border-bottom: 1px solid; margin-top: 4px; color: #555; }
 shacl-property { display: flex; flex-direction: column; align-items: end; position: relative; }
 shacl-property:not(.may-add) > .add-button { display: none; }
 shacl-property:not(.may-remove) > .property-instance > .remove-button:not(.persistent) { visibility: hidden; }
 shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.persistent) { visibility: hidden; }
-.shacl-group { margin-bottom: 1em; padding-bottom: 1em; }
 .mode-view .shacl-group:not(:has(shacl-property)) { display: none; }
 .property-instance, .shacl-or-constraint { display: flex; align-items: flex-start; padding: 4px 0; width: 100%; position: relative; }
 .shacl-or-constraint label { display: inline-block; word-break: break-word; width: var(--label-width); line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
 .property-instance label[title] { cursor: help; text-decoration: underline dashed #AAA; }
+.property-instance.linked label:after, label.linked:after { content: '\1F517'; font-size: 0.6em; padding-left: 6px; }
 .mode-edit .property-instance label.required::before { color: red; content: '\2736'; font-size: 0.6rem; position: absolute; left: -1.4em; top: 0.15rem; }
-.property-instance.valid::before { position: absolute; left: calc(var(--label-width) - 1em); top: 6px; color: green; content: '\2713'; }
+.property-instance.valid::before { position: absolute; left: calc(var(--label-width) - 1em); top: 3px; color: green; content: '\2713'; }
 .editor:not([type='checkbox']), .shacl-or-constraint select { flex-grow: 1; }
 .shacl-or-constraint select { border: 1px solid #DDD; padding: 2px 4px; }
 select { overflow: hidden; text-overflow: ellipsis; }
 textarea.editor { resize: vertical; }
-.lang-chooser { position: absolute; top: 5px; right: 24px; border: 0; background-color: #e9e9ed; padding: 2px 4px; max-width: 40px; width: 40px; box-sizing: content-box; }
+.lang-chooser { position: absolute; top: 6px; right: 26px; border: 0; background-color: #e9e9ed; padding: 2px 4px; max-width: 40px; width: 40px; box-sizing: content-box; }
 .lang-chooser+.editor { padding-right: 55px; }
-.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 6px; color: red; cursor: help; }
+.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 3px; color: red; cursor: help; }
 .validation-error::before { content: '\26a0' }
 .validation-error.node { left: -1em; }
 .invalid > .editor { border-color: red !important; }

package/src/theme.ts

@@ -20,7 +20,7 @@ export abstract class Theme {
         this.stylesheet.replaceSync(aggregatedStyles)
     }
 
-    apply(root: HTMLFormElement) {
+    apply(_: HTMLFormElement) {
         // NOP
     }
 
@@ -35,7 +35,7 @@ export abstract class Theme {
         let name = value.value
         let lang: HTMLElement | null = null
         if (value instanceof NamedNode) {
-            const quads = template.config.shapesGraph.getQuads(name, null, null, null)
+            const quads = template.config.store.getQuads(name, null, null, null)
             if (quads.length) {
                 const s = findLabel(quads, template.config.languages)
                 if (s) {
@@ -79,8 +79,8 @@ export abstract class Theme {
     abstract createButton(label: string, primary: boolean): HTMLElement
 }
 
-export function fieldFactory(template: ShaclPropertyTemplate, value: Term | null): HTMLElement {
-    if (template.config.editMode) {
+export function fieldFactory(template: ShaclPropertyTemplate, value: Term | null, editable: boolean): HTMLElement {
+    if (editable) {
         const required = template.minCount !== undefined && template.minCount > 0
         // if we have a class, find the instances and display them in a list
         if (template.class) {
@@ -91,7 +91,7 @@ export function fieldFactory(template: ShaclPropertyTemplate, value: Term | null
         if (template.shaclIn) {
             const list = template.config.lists[template.shaclIn]
             if (list?.length) {
-                const listEntries = createInputListEntries(list, template.config.shapesGraph, template.config.languages)
+                const listEntries = createInputListEntries(list, template.config.store, template.config.languages)
                 return template.config.theme.createListEditor(template.label, value, required, listEntries, template)
             }
             else {

package/src/themes/bootstrap.ts

@@ -2,7 +2,7 @@ import { DefaultTheme } from './default'
 import { Term } from '@rdfjs/types'
 import { ShaclPropertyTemplate } from '../property-template'
 import { Editor } from '../theme'
-import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
+import bootstrap from 'bootstrap/dist/css/bootstrap.min.css?raw'
 import css from './bootstrap.css?raw'
 
 export class BootstrapTheme extends DefaultTheme {

package/src/themes/default.css

@@ -1,4 +1,4 @@
 .editor:not([type='checkbox']) { border: 1px solid #DDD; padding: 2px 4px; }
-.property-instance label { display: inline-block; word-break: break-word; line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
-.property-instance:not(:first-child) > label { visibility: hidden; max-height: 0; }
+.property-instance label { display: inline-flex; word-break: break-word; line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
+.property-instance:not(:first-child) > label:not(.persistent) { visibility: hidden; max-height: 0; }
 .mode-edit .property-instance label { width: var(--label-width); }

package/src/themes/default.ts

@@ -3,6 +3,7 @@ import { ShaclPropertyTemplate } from "../property-template"
 import { Editor, InputListEntry, Theme } from "../theme"
 import { PREFIX_XSD } from '../constants'
 import { Literal } from 'n3'
+import { Term as N3Term }  from 'n3'
 import css from './default.css?raw'
 
 export class DefaultTheme extends Theme {
@@ -17,7 +18,9 @@ export class DefaultTheme extends Theme {
         editor.classList.add('editor')
         if (template?.datatype) {
             // store datatype on editor, this is used for RDF serialization
-            editor['shaclDatatype'] = template.datatype
+            editor.shaclDatatype = template.datatype
+        } else if (value instanceof Literal) {
+            editor.shaclDatatype = value.datatype
         }
         if (template?.minCount !== undefined) {
             editor.dataset.minCount = String(template.minCount)
@@ -200,7 +203,13 @@ export class DefaultTheme extends Theme {
     
         for (const item of listEntries) {
             const option = document.createElement('option')
-            const itemValue = (typeof item.value === 'string') ? item.value : item.value.value
+            let itemValue = ''
+            if (typeof item.value === 'string') {
+                itemValue = item.value
+            } else {
+                // this is needed for typed rdf literals
+                itemValue = (item.value as N3Term).id
+            }
             option.innerHTML = item.label ? item.label : itemValue
             option.value = itemValue
             if (item.indent) {
@@ -231,7 +240,7 @@ export class DefaultTheme extends Theme {
         return result
     }
 
-    createButton(label: string, primary: boolean): HTMLElement {
+    createButton(label: string, _: boolean): HTMLElement {
         const button = document.createElement('button')
         button.type = 'button'
         button.innerHTML = label

package/src/themes/material.ts

@@ -4,6 +4,7 @@ import { Button, TextField, Select, MenuItem, Checkbox } from 'mdui'
 import { Theme } from '../theme'
 import { InputListEntry, Editor } from '../theme'
 import { Literal } from 'n3'
+import { Term as N3Term }  from 'n3'
 import css from './material.css?raw'
 import { PREFIX_XSD } from '../constants'
 
@@ -16,7 +17,9 @@ export class MaterialTheme extends Theme {
         editor.classList.add('editor')
         if (template?.datatype) {
             // store datatype on editor, this is used for RDF serialization
-            editor['shaclDatatype'] = template.datatype
+            editor.shaclDatatype = template.datatype
+        } else if (value instanceof Literal) {
+            editor.shaclDatatype = value.datatype
         }
         if (template?.minCount !== undefined) {
             editor.dataset.minCount = String(template.minCount)
@@ -100,7 +103,13 @@ export class MaterialTheme extends Theme {
     
         for (const item of listEntries) {
             const option = new MenuItem()
-            const itemValue = (typeof item.value === 'string') ? item.value : item.value.value
+            let itemValue = ''
+            if (typeof item.value === 'string') {
+                itemValue = item.value
+            } else {
+                // this is needed for typed rdf literals
+                itemValue = (item.value as N3Term).id
+            }
             const itemLabel = item.label ? item.label : itemValue
             option.value = itemValue
             option.textContent = itemLabel || itemValue
@@ -142,7 +151,7 @@ export class MaterialTheme extends Theme {
         return result
     }
 
-    createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+    createDateEditor(_: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
         const editor = new TextField()
         editor.variant = 'outlined'
         editor.helper = template?.description?.value || template?.label || ''

package/src/util.ts

@@ -1,5 +1,5 @@
 import { Literal, NamedNode, Prefixes, Quad, Store } from 'n3'
-import { OWL_OBJECT_NAMED_INDIVIDUAL, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH, SKOS_PREDICATE_BROADER } from './constants'
+import { DATA_GRAPH, OWL_OBJECT_NAMED_INDIVIDUAL, PREFIX_FOAF, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH, SKOS_PREDICATE_BROADER } from './constants'
 import { Term } from '@rdfjs/types'
 import { InputListEntry } from './theme'
 import { ShaclPropertyTemplate } from './property-template'
@@ -48,11 +48,9 @@ export function focusFirstInputElement(context: HTMLElement) {
 }
 
 export function findLabel(quads: Quad[], languages: string[]): string {
-    let label = findObjectValueByPredicate(quads, 'prefLabel', PREFIX_SKOS, languages)
-    if (label) {
-        return label
-    }
-    return findObjectValueByPredicate(quads, 'label', PREFIX_RDFS, languages)
+    return findObjectValueByPredicate(quads, 'prefLabel', PREFIX_SKOS, languages) ||
+    findObjectValueByPredicate(quads, 'label', PREFIX_RDFS, languages) ||
+    findObjectValueByPredicate(quads, 'name', PREFIX_FOAF, languages)
 }
 
 export function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[], indent?: number): InputListEntry[] {
@@ -92,22 +90,22 @@ export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplat
         instances = list?.length ? list : []
     } else {
         // find instances in the shapes graph
-        instances = template.config.shapesGraph.getSubjects(RDF_PREDICATE_TYPE, clazz, SHAPES_GRAPH)
+        instances = template.config.store.getSubjects(RDF_PREDICATE_TYPE, clazz, SHAPES_GRAPH)
         // find instances in the data graph
-        instances.push(...template.config.dataGraph.getSubjects(RDF_PREDICATE_TYPE, clazz, null))
+        instances.push(...template.config.store.getSubjects(RDF_PREDICATE_TYPE, clazz, DATA_GRAPH))
         // find instances in imported taxonomies
-        findClassInstancesFromOwlImports(clazz, template, template.config.shapesGraph, instances)
+        findClassInstancesFromOwlImports(clazz, template, template.config.store, instances)
     }
 
-    const entries = createInputListEntries(instances, template.config.shapesGraph, template.config.languages, indent)
+    const entries = createInputListEntries(instances, template.config.store, template.config.languages, indent)
     // build inheritance tree only if sh:in is not defined
     if (template.shaclIn === undefined) {
-        for (const subClass of template.config.shapesGraph.getSubjects(RDFS_PREDICATE_SUBCLASS_OF, clazz, null)) {
+        for (const subClass of template.config.store.getSubjects(RDFS_PREDICATE_SUBCLASS_OF, clazz, null)) {
             entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
         }
-        if (template.config.shapesGraph.getQuads(clazz, RDF_PREDICATE_TYPE, OWL_OBJECT_NAMED_INDIVIDUAL, null).length > 0) {
-            entries.push(...createInputListEntries([ clazz ], template.config.shapesGraph, template.config.languages, indent))
-            for (const subClass of template.config.shapesGraph.getSubjects(SKOS_PREDICATE_BROADER, clazz, null)) {
+        if (template.config.store.getQuads(clazz, RDF_PREDICATE_TYPE, OWL_OBJECT_NAMED_INDIVIDUAL, null).length > 0) {
+            entries.push(...createInputListEntries([ clazz ], template.config.store, template.config.languages, indent))
+            for (const subClass of template.config.store.getSubjects(SKOS_PREDICATE_BROADER, clazz, null)) {
                 entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
             }
         }