@ulb-darmstadt/shacl-form 1.7.4 → 1.8.1

package/src/node.ts

@@ -14,24 +14,26 @@ export class ShaclNode extends HTMLElement {
     targetClass: NamedNode | undefined
     owlImports: NamedNode[] = []
     config: Config
+    linked: boolean
 
-    constructor(shaclSubject: NamedNode, config: Config, valueSubject: NamedNode | BlankNode | undefined, parent?: ShaclNode, nodeKind?: NamedNode, label?: string) {
+    constructor(shaclSubject: NamedNode, config: Config, valueSubject: NamedNode | BlankNode | undefined, parent?: ShaclNode, nodeKind?: NamedNode, label?: string, linked?: boolean) {
         super()
 
         this.parent = parent
         this.config = config
         this.shaclSubject = shaclSubject
+        this.linked = linked || false
         let nodeId: NamedNode | BlankNode | undefined = valueSubject
         if (!nodeId) {
             // if no value subject given, create new node id with a type depending on own nodeKind or given parent property nodeKind
             if (!nodeKind) {
-                const spec = config.shapesGraph.getObjects(shaclSubject, `${PREFIX_SHACL}nodeKind`, null)
+                const spec = config.store.getObjects(shaclSubject, `${PREFIX_SHACL}nodeKind`, null)
                 if (spec.length) {
                     nodeKind = spec[0] as NamedNode
                 }
             }
             // if nodeKind is not set, but a value namespace is configured or if nodeKind is sh:IRI, then create a NamedNode
-            if ((nodeKind === undefined && config.attributes.valuesNamespace) || nodeKind?.id === `${PREFIX_SHACL}IRI`) {
+            if ((nodeKind === undefined && config.attributes.valuesNamespace) || nodeKind?.value === `${PREFIX_SHACL}IRI`) {
                 // no requirements on node type, so create a NamedNode and use configured value namespace
                 nodeId = DataFactory.namedNode(config.attributes.valuesNamespace + uuidv4())
             } else {
@@ -45,17 +47,19 @@ export class ShaclNode extends HTMLElement {
         const id = JSON.stringify([shaclSubject, valueSubject])
         if (valueSubject && config.renderedNodes.has(id)) {
             // node/value pair is already rendered in the form, so just display a reference
-            if (label && config.attributes.collapse === null) {
-                const labelElem = document.createElement('label')
-                labelElem.innerText = label
-                this.appendChild(labelElem)
-            }
+            label = label || "Link"
+            const labelElem = document.createElement('label')
+            labelElem.innerText = label
+            labelElem.classList.add('linked')
+            this.appendChild(labelElem)
+
             const anchor = document.createElement('a')
-            anchor.innerText = valueSubject.id
+            let refId = (valueSubject.termType === 'BlankNode') ? '_:' + valueSubject.value : valueSubject.value
+            anchor.innerText = refId
             anchor.classList.add('ref-link')
             anchor.onclick = () => {
                 // if anchor is clicked, scroll referenced shacl node into view
-                this.config.form.querySelector(`shacl-node[data-node-id='${this.nodeId.id}']`)?.scrollIntoView()
+                this.config.form.querySelector(`shacl-node[data-node-id='${refId}']`)?.scrollIntoView()
             }
             this.appendChild(anchor)
             this.style.flexDirection = 'row'
@@ -64,9 +68,6 @@ export class ShaclNode extends HTMLElement {
                 config.renderedNodes.add(id)
             }
             this.dataset.nodeId = this.nodeId.id
-            const quads = config.shapesGraph.getQuads(shaclSubject, null, null, null)
-            let list: Term[] | undefined
-
             if (this.config.attributes.showNodeIds !== null) {
                 const div = document.createElement('div')
                 div.innerText = `id: ${this.nodeId.id}`
@@ -74,14 +75,19 @@ export class ShaclNode extends HTMLElement {
                 this.appendChild(div)
             }
 
-            for (const quad of quads) {
+            // first initialize owl:imports, this is needed before adding properties to properly resolve class instances etc.
+            for (const owlImport of config.store.getQuads(shaclSubject, OWL_PREDICATE_IMPORTS, null, null)) {
+                this.owlImports.push(owlImport.object as NamedNode)
+            }
+            // now parse other node quads
+            for (const quad of config.store.getQuads(shaclSubject, null, null, null)) {
                 switch (quad.predicate.id) {
                     case SHACL_PREDICATE_PROPERTY.id:
                         this.addPropertyInstance(quad.object, config, valueSubject)
                         break;
                     case `${PREFIX_SHACL}and`:
                         // inheritance via sh:and
-                        list = config.lists[quad.object.value]
+                        const list = config.lists[quad.object.value]
                         if (list?.length) {
                             for (const shape of list) {
                                 this.prepend(new ShaclNode(shape as NamedNode, config, valueSubject, this))
@@ -98,9 +104,6 @@ export class ShaclNode extends HTMLElement {
                     case `${PREFIX_SHACL}targetClass`:
                         this.targetClass = quad.object as NamedNode
                         break;
-                    case OWL_PREDICATE_IMPORTS.id:
-                        this.owlImports.push(quad.object as NamedNode)
-                        break;
                     case `${PREFIX_SHACL}or`:
                         this.tryResolve(quad.object, valueSubject, config)
                         break;
@@ -122,15 +125,18 @@ export class ShaclNode extends HTMLElement {
         if (!subject) {
             subject = this.nodeId
         }
-        for (const shape of this.querySelectorAll(':scope > shacl-node, :scope > .shacl-group > shacl-node, :scope > shacl-property, :scope > .shacl-group > shacl-property')) {
-            (shape as ShaclNode | ShaclProperty).toRDF(graph, subject)
-        }
-        if (this.targetClass) {
-            graph.addQuad(subject, RDF_PREDICATE_TYPE, this.targetClass, this.config.valuesGraph)
-        }
-        // if this is the root shacl node, check if we should add one of the rdf:type or dcterms:conformsTo predicates
-        if (this.config.attributes.generateNodeShapeReference && !this.parent) {
-            graph.addQuad(subject, DataFactory.namedNode(this.config.attributes.generateNodeShapeReference), this.shaclSubject, this.config.valuesGraph)
+        // output triples only if node is not a link
+        if (!this.linked) {
+            for (const shape of this.querySelectorAll(':scope > shacl-node, :scope > .shacl-group > shacl-node, :scope > shacl-property, :scope > .shacl-group > shacl-property')) {
+                (shape as ShaclNode | ShaclProperty).toRDF(graph, subject)
+            }
+            if (this.targetClass) {
+                graph.addQuad(subject, RDF_PREDICATE_TYPE, this.targetClass, this.config.valuesGraphId)
+            }
+            // if this is the root shacl node, check if we should add one of the rdf:type or dcterms:conformsTo predicates
+            if (this.config.attributes.generateNodeShapeReference && !this.parent) {
+                graph.addQuad(subject, DataFactory.namedNode(this.config.attributes.generateNodeShapeReference), this.shaclSubject, this.config.valuesGraphId)
+            }
         }
         return subject
     }
@@ -138,7 +144,7 @@ export class ShaclNode extends HTMLElement {
     addPropertyInstance(shaclSubject: Term, config: Config, valueSubject: NamedNode | BlankNode | undefined) {
         let parentElement: HTMLElement = this
         // check if property belongs to a group
-        const groupRef = config.shapesGraph.getQuads(shaclSubject as Term, `${PREFIX_SHACL}group`, null, null)
+        const groupRef = config.store.getQuads(shaclSubject as Term, `${PREFIX_SHACL}group`, null, null)
         if (groupRef.length > 0) {
             const groupSubject = groupRef[0].object.value
             if (config.groups.indexOf(groupSubject) > -1) {
@@ -153,15 +159,11 @@ export class ShaclNode extends HTMLElement {
                 console.warn('ignoring unknown group reference', groupRef[0], 'existing groups:', config.groups)
             }
         }
-        // delay creating/appending the property until we finished parsing the node.
-        // This is needed to have possible owlImports parsed before creating the property.
-        setTimeout(() => {
-            const property = new ShaclProperty(shaclSubject as NamedNode | BlankNode, this, config, valueSubject)
-            // do not add empty properties (i.e. properties with no instances). This can be the case e.g. in viewer mode when there is no data for the respective property.
-            if (property.childElementCount > 0) {
-                parentElement.appendChild(property)
-            }
-        })
+        const property = new ShaclProperty(shaclSubject as NamedNode | BlankNode, this, config, valueSubject)
+        // do not add empty properties (i.e. properties with no instances). This can be the case e.g. in viewer mode when there is no data for the respective property.
+        if (property.childElementCount > 0) {
+            parentElement.appendChild(property)
+        }
     }
 
     tryResolve(subject: Term, valueSubject: NamedNode | BlankNode | undefined, config: Config) {
@@ -187,4 +189,4 @@ export class ShaclNode extends HTMLElement {
     }
 }
 
-window.customElements.define('shacl-node', ShaclNode)
+window.customElements.define('shacl-node', ShaclNode)

package/src/plugins/leaflet.ts

@@ -136,12 +136,12 @@ export class LeafletPlugin extends Plugin {
             document.body.style.position = 'fixed'
             dialog.showModal()
         }
-        const instance = fieldFactory(template, value || null)
+        const instance = fieldFactory(template, value || null, true)
         instance.appendChild(button)
         return instance
     }
 
-    createViewer(template: ShaclPropertyTemplate, value: Term): HTMLElement {
+    createViewer(_: ShaclPropertyTemplate, value: Term): HTMLElement {
         const container = document.createElement('div')
         const geometry = wktToGeometry(value.value)
         if (geometry?.coordinates?.length) {

package/src/plugins/mapbox.ts

@@ -4,8 +4,8 @@ import { ShaclPropertyTemplate } from '../property-template'
 import { Editor, fieldFactory } from '../theme'
 import { Map, NavigationControl, FullscreenControl, LngLatBounds, LngLatLike } from 'mapbox-gl'
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
-import mapboxGlCss from 'mapbox-gl/dist/mapbox-gl.css'
-import mapboxGlDrawCss from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+import mapboxGlCss from 'mapbox-gl/dist/mapbox-gl.css?raw'
+import mapboxGlDrawCss from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css?raw'
 import { Geometry, geometryToWkt, wktToGeometry } from './map-util'
 
 const css = `
@@ -106,12 +106,12 @@ export class MapboxPlugin extends Plugin {
             document.body.style.position = 'fixed'
             dialog.showModal()
         }
-        const instance = fieldFactory(template, value || null)
+        const instance = fieldFactory(template, value || null, true)
         instance.appendChild(button)
         return instance
     }
 
-    createViewer(template: ShaclPropertyTemplate, value: Term): HTMLElement {
+    createViewer(_: ShaclPropertyTemplate, value: Term): HTMLElement {
         const container = document.createElement('div')
         const geometry = wktToGeometry(value.value)
         if (geometry?.coordinates?.length) {

package/src/property-template.ts

@@ -38,7 +38,7 @@ const mappers: Record<string, (template: ShaclPropertyTemplate, term: Term) => v
     [SHACL_PREDICATE_CLASS.id]:      (template, term) => {
         template.class = term as NamedNode
         // try to find node shape that has requested target class
-        const nodeShapes = template.config.shapesGraph.getSubjects(SHACL_PREDICATE_TARGET_CLASS, term, null)
+        const nodeShapes = template.config.store.getSubjects(SHACL_PREDICATE_TARGET_CLASS, term, null)
         if (nodeShapes.length > 0) {
             template.node = nodeShapes[0] as NamedNode
         }
@@ -61,7 +61,7 @@ const mappers: Record<string, (template: ShaclPropertyTemplate, term: Term) => v
     }
 }
 
-export class ShaclPropertyTemplate  {
+export class ShaclPropertyTemplate {
     parent: ShaclNode
     label = ''
     name: Literal | undefined
@@ -95,14 +95,14 @@ export class ShaclPropertyTemplate  {
     owlImports: NamedNode[] = []
 
     config: Config
-    extendedShapes: NamedNode[] | undefined
+    extendedShapes: NamedNode[]  = []
 
     constructor(quads: Quad[], parent: ShaclNode, config: Config) {
         this.parent = parent
         this.config = config
         this.merge(quads)
         if (this.qualifiedValueShape) {
-            this.merge(config.shapesGraph.getQuads(this.qualifiedValueShape, null, null, null))
+            this.merge(config.store.getQuads(this.qualifiedValueShape, null, null, null))
         }
     }
 
@@ -117,7 +117,6 @@ export class ShaclPropertyTemplate  {
         }
         // resolve extended shapes
         if (this.node || this.shaclAnd) {
-            this.extendedShapes = []
             if (this.node) {
                 this.extendedShapes.push(this.node)
             }

package/src/property.ts

@@ -1,22 +1,23 @@
-import { BlankNode, DataFactory, NamedNode, Store } from 'n3'
+import { BlankNode, DataFactory, Literal, NamedNode, Quad, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { ShaclNode } from './node'
-import { focusFirstInputElement } from './util'
 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') {
@@ -115,10 +101,19 @@ export class ShaclProperty extends HTMLElement {
                 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 && !(value instanceof Literal)) {
+                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!)
         }
@@ -127,7 +122,7 @@ export class ShaclProperty extends HTMLElement {
 
     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
         }
@@ -135,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
@@ -148,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)
@@ -190,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; }