@ulb-darmstadt/shacl-form 1.6.1 → 1.6.3

package/src/plugins/map-util.ts

@@ -0,0 +1,41 @@
+import { Point, Polygon } from 'geojson'
+
+export type Geometry = Point | Polygon
+
+export const worldBounds: [number, number][] = [[-90, -180], [90, 180]]
+
+export function wktToGeometry(wkt: string): Geometry | undefined {
+    const pointCoords = wkt.match(/^POINT\((.*)\)$/)
+    if (pointCoords?.length == 2) {
+        const xy = pointCoords[1].split(' ')
+        if (xy.length === 2) {
+            return { type: 'Point', coordinates: [parseFloat(xy[0]), parseFloat(xy[1])] }
+        }
+    }
+    const polygonCoords = wkt.match(/^POLYGON[(]{2}(.*)[)]{2}$/)
+    if (polygonCoords?.length == 2) {
+        const split = polygonCoords[1].split(',')
+        if (split.length > 2) {
+            const coords: number[][][] = []
+            const outer: number[][] = []
+            coords.push(outer)
+            for (const coord of split) {
+                const xy = coord.split(' ')
+                if (xy.length === 2) {
+                    outer.push([parseFloat(xy[0]), parseFloat(xy[1])])
+                }
+            }
+            return { type: 'Polygon', coordinates: coords }
+        }
+    }
+}
+
+export function geometryToWkt(geometry: Geometry): string {
+    if (geometry.type === 'Point') {
+        return `POINT(${geometry.coordinates.join(' ')})`
+    } else if (geometry.type === 'Polygon') {
+        return `POLYGON((${geometry.coordinates[0].map(item => { return item.join(' ') }).join(',')}))`
+    } else {
+        return ''
+    }
+}

package/src/plugins/mapbox.ts

@@ -0,0 +1,157 @@
+import { Term } from '@rdfjs/types'
+import { Plugin, PluginOptions } from '../plugin'
+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 { Geometry, geometryToWkt, wktToGeometry } from './map-util'
+
+const css = `
+#shaclMapDialog .closeButton { position: absolute; right: 0; top: 0; z-index: 1; padding: 6px 8px; cursor: pointer; border: 0; background-color: #FFFA; font-size: 24px; }
+#shaclMapDialog { padding: 0; width:90vw; height: 90vh; margin: auto; }
+#shaclMapDialog::backdrop { background-color: #0007; }
+#shaclMapDialog .closeButton:hover { background-color: #FFF }
+#shaclMapDialog .hint { position: absolute; right: 60px; top: 3px; z-index: 1; padding: 4px 6px; background-color: #FFFA; border-radius: 4px; }
+.mapboxgl-map { min-height: 300px; }
+#shaclMapDialogContainer { width:100%; height: 100% }
+`
+const dialogTemplate = `
+<dialog id="shaclMapDialog" onclick="event.target==this && this.close()">
+<div id="shaclMapDialogContainer"></div>
+<div class="hint">&#x24D8; Draw a polygon or point, then close dialog</div>
+<button class="closeButton" type="button" onclick="this.parentElement.close()">&#x2715;</button>
+</dialog>`
+
+
+export class MapboxPlugin extends Plugin {
+    map: Map | undefined
+    draw: MapboxDraw | undefined
+    currentEditor: Editor | undefined
+    apiKey: string
+
+    constructor(options: PluginOptions, apiKey: string) {
+        super(options, mapboxGlCss + '\n' + mapboxGlDrawCss + '\n' + css)
+        this.apiKey = apiKey
+    }
+
+    initEditMode(form: HTMLElement): HTMLDialogElement {
+        form.insertAdjacentHTML('beforeend', dialogTemplate)
+        const container = form.querySelector('#shaclMapDialogContainer') as HTMLElement
+        this.map = new Map({
+            container: container,
+            style: 'mapbox://styles/mapbox/satellite-streets-v11',
+            zoom: 5,
+            center: { lng: 8.657238961696038, lat: 49.87627570549512 },
+            attributionControl: false,
+            accessToken: this.apiKey
+        })
+
+        this.draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: { point: true, polygon: true }
+        })
+        this.map.addControl(new NavigationControl(), 'top-left')
+        this.map.addControl(this.draw, 'top-left')
+
+        this.map.on('idle', () => {
+            // this fixes wrong size of canvas
+            this.map!.resize()
+        })
+        // @ts-ignore
+        this.map.on('draw.create', () => this.deleteAllButLastDrawing())
+
+        const dialog = form.querySelector('#shaclMapDialog') as HTMLDialogElement
+        dialog.addEventListener('close', () => {
+            const scrollY = document.body.style.top
+            document.body.style.position = ''
+            document.body.style.top = ''
+            window.scrollTo(0, parseInt(scrollY || '0') * -1)
+            // set wkt in editor
+            const data = this.draw!.getAll()
+            if (data && data.features.length && this.currentEditor) {
+                const geometry = data.features[0].geometry as Geometry
+                if (geometry.coordinates?.length) {
+                    const wkt = geometryToWkt(geometry)
+                    this.currentEditor.value = wkt
+                    this.currentEditor.dispatchEvent(new Event('change', { bubbles: true }))
+                }
+            }
+        })
+        return dialog
+    }
+
+    createEditor(template: ShaclPropertyTemplate, value?: Term): HTMLElement {
+        let dialog = template.config.form.querySelector('#shaclMapDialog') as HTMLDialogElement
+        if (!dialog) {
+            dialog = this.initEditMode(template.config.form)
+        }
+        const button = template.config.theme.createButton('Open&#160;map...', false)
+        button.style.marginLeft = '5px'
+        button.classList.add('open-map-button')
+        button.onclick = () => {
+            this.currentEditor = instance.querySelector('.editor') as Editor
+            this.draw?.deleteAll()
+
+            const wkt = this.currentEditor.value || ''
+            const geometry = wktToGeometry(wkt)
+            if (geometry && geometry.coordinates?.length) {
+                this.draw?.add(geometry)
+                this.fitToGeometry(this.map!, geometry)
+            } else {
+                this.map?.setZoom(5)
+            }
+            document.body.style.top = `-${window.scrollY}px`
+            document.body.style.position = 'fixed'
+            dialog.showModal()
+        }
+        const instance = fieldFactory(template, value || null)
+        instance.appendChild(button)
+        return instance
+    }
+
+    createViewer(template: ShaclPropertyTemplate, value: Term): HTMLElement {
+        const container = document.createElement('div')
+        const geometry = wktToGeometry(value.value)
+        if (geometry?.coordinates?.length) {
+            // wait for container to be available in DOM
+            setTimeout(() => {
+                const draw = new MapboxDraw({ displayControlsDefault: false })
+                const map = new Map({
+                    container: container,
+                    style: 'mapbox://styles/mapbox/satellite-streets-v11',
+                    zoom: 5,
+                    attributionControl: false,
+                    accessToken: this.apiKey
+                })
+                map.addControl(draw)
+                map.addControl(new FullscreenControl())
+                draw.add(geometry)
+                this.fitToGeometry(map, geometry)
+            })
+        }
+        return container
+    }
+
+    fitToGeometry(map: Map, geometry: Geometry) {
+        if (typeof geometry.coordinates[0] === 'number') {
+            // e.g. Point
+            map.setCenter(geometry.coordinates as LngLatLike)
+            map.setZoom(15)
+        } else {
+            // e.g. Polygon
+            const bounds = geometry.coordinates[0].reduce((bounds, coord) => {
+                return bounds.extend(coord as mapboxgl.LngLatLike)
+            }, new LngLatBounds(geometry.coordinates[0][0] as mapboxgl.LngLatLike, geometry.coordinates[0][0] as mapboxgl.LngLatLike))
+            map.fitBounds(bounds, { padding: 20, animate: false })
+        }
+    }
+
+    deleteAllButLastDrawing() {
+        const data = this.draw!.getAll()
+        for (let i = 0; i < data.features.length - 1; i++) {
+            this.draw!.delete(data.features[i].id as string)
+        }
+    }
+}

package/src/property-template.ts

@@ -0,0 +1,132 @@
+import { Literal, NamedNode, Quad, DataFactory } from 'n3'
+import { Term } from '@rdfjs/types'
+import { OWL_PREDICATE_IMPORTS, PREFIX_DASH, PREFIX_OA, PREFIX_RDF, PREFIX_SHACL, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS } from './constants'
+import { Config } from './config'
+import { findLabel, removePrefixes } from './util'
+import { ShaclNode } from './node'
+
+const mappers: Record<string, (template: ShaclPropertyTemplate, term: Term) => void> = {
+    [`${PREFIX_SHACL}name`]:         (template, term) => { const literal = term as Literal; if (!template.name || literal.language === template.config.attributes.language) { template.name = literal } },
+    [`${PREFIX_SHACL}description`]:  (template, term) => { const literal = term as Literal; if (!template.description || literal.language === template.config.attributes.language) { template.description = literal } },
+    [`${PREFIX_SHACL}path`]:         (template, term) => { template.path = term.value },
+    [`${PREFIX_SHACL}node`]:         (template, term) => { template.node = term as NamedNode },
+    [`${PREFIX_SHACL}datatype`]:     (template, term) => { template.datatype = term as NamedNode },
+    [`${PREFIX_SHACL}nodeKind`]:     (template, term) => { template.nodeKind = term as NamedNode },
+    [`${PREFIX_SHACL}minCount`]:     (template, term) => { template.minCount = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxCount`]:     (template, term) => { template.maxCount = parseInt(term.value) },
+    [`${PREFIX_SHACL}minLength`]:    (template, term) => { template.minLength = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxLength`]:    (template, term) => { template.maxLength = parseInt(term.value) },
+    [`${PREFIX_SHACL}minInclusive`]: (template, term) => { template.minInclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxInclusive`]: (template, term) => { template.maxInclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}minExclusive`]: (template, term) => { template.minExclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxExclusive`]: (template, term) => { template.maxExclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}pattern`]:      (template, term) => { template.pattern = term.value },
+    [`${PREFIX_SHACL}order`]:        (template, term) => { template.order = parseInt(term.value) },
+    [`${PREFIX_DASH}singleLine`]:    (template, term) => { template.singleLine = term.value === 'true' },
+    [`${PREFIX_OA}styleClass`]:      (template, term) => { template.cssClass = term.value },
+    [`${PREFIX_SHACL}and`]:          (template, term) => { template.shaclAnd = term.value },
+    [`${PREFIX_SHACL}in`]:           (template, term) => { template.shaclIn = term.value },
+    // sh:datatype might be undefined, but sh:languageIn defined. this is undesired. the spec says, that strings without a lang tag are not valid if sh:languageIn is set. but the shacl validator accepts these as valid. to prevent this, we just set the datatype here to 'langString'.
+    [`${PREFIX_SHACL}languageIn`]:   (template, term) => { template.languageIn = template.config.lists[term.value]; template.datatype = DataFactory.namedNode(PREFIX_RDF + 'langString') },
+    [`${PREFIX_SHACL}defaultValue`]: (template, term) => { template.defaultValue = term },
+    [`${PREFIX_SHACL}hasValue`]:     (template, term) => { template.hasValue = term },
+    [OWL_PREDICATE_IMPORTS.id]:   (template, term) => { template.owlImports.push(term as NamedNode) },
+    [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)
+        if (nodeShapes.length > 0) {
+            template.node = nodeShapes[0] as NamedNode
+        }
+    },
+    [`${PREFIX_SHACL}or`]:           (template, term) => {
+        const list = template.config.lists[term.value]
+        if (list?.length) {
+            template.shaclOr = list
+        } else {
+            console.error('list not found:', term.value, 'existing lists:', template.config.lists)
+        }
+    }
+}
+
+export class ShaclPropertyTemplate  {
+    parent: ShaclNode
+    label = ''
+    name: Literal | undefined
+    description: Literal | undefined
+    path: string | undefined
+    node: NamedNode | undefined
+    class: NamedNode | undefined
+    minCount: number | undefined
+    maxCount: number | undefined
+    minLength: number | undefined
+    maxLength: number | undefined
+    minInclusive: number | undefined
+    maxInclusive: number | undefined
+    minExclusive: number | undefined
+    maxExclusive: number | undefined
+    singleLine: boolean | undefined
+    cssClass: string | undefined
+    defaultValue: Term | undefined
+    pattern: string | undefined
+    order: number | undefined
+    nodeKind: NamedNode | undefined
+    shaclAnd: string | undefined
+    shaclIn: string | undefined
+    shaclOr: Term[] | undefined
+    languageIn: Term[] | undefined
+    datatype: NamedNode | undefined
+    hasValue: Term | undefined
+    owlImports: NamedNode[] = []
+
+    config: Config
+    extendedShapes: NamedNode[] | undefined
+
+    constructor(quads: Quad[], parent: ShaclNode, config: Config) {
+        this.parent = parent
+        this.config = config
+        this.merge(quads)
+    }
+
+    merge(quads: Quad[]): ShaclPropertyTemplate {
+        for (const quad of quads) {
+            mappers[quad.predicate.id]?.call(this, this, quad.object)
+        }
+        // provide best fitting label for UI
+        this.label = this.name?.value || findLabel(quads, this.config.languages)
+        if (!this.label && !this.shaclAnd) {
+            this.label = this.path ? removePrefixes(this.path, this.config.prefixes) : 'unknown'
+        }
+        // resolve extended shapes
+        if (this.node || this.shaclAnd) {
+            this.extendedShapes = []
+            if (this.node) {
+                this.extendedShapes.push(this.node)
+            }
+            if (this.shaclAnd) {
+                const list = this.config.lists[this.shaclAnd]
+                if (list?.length) {
+                    for (const node of list) {
+                        this.extendedShapes.push(node as NamedNode)
+                    }
+                }
+            }
+        }
+        return this
+    }
+
+    clone(): ShaclPropertyTemplate {
+        const copy = Object.assign({}, this)
+        // arrays are not cloned but referenced, so create them manually
+        copy.owlImports = [ ...this.owlImports ]
+        if (this.languageIn) {
+            copy.languageIn = [ ...this.languageIn ]
+        }
+        if (this.shaclOr) {
+            copy.shaclOr = [ ...this.shaclOr ]
+        }
+        copy.merge = this.merge.bind(copy)
+        copy.clone = this.clone.bind(copy)
+        return copy
+    }
+}

package/src/property.ts

@@ -0,0 +1,188 @@
+import { BlankNode, DataFactory, NamedNode, Store } from 'n3'
+import { Term } from '@rdfjs/types'
+import { ShaclNode } from './node'
+import { focusFirstInputElement } from './util'
+import { createShaclOrConstraint, resolveShaclOrConstraint } from './constraints'
+import { Config } from './config'
+import { ShaclPropertyTemplate } from './property-template'
+import { Editor, fieldFactory } from './theme'
+import { toRDF } from './serialize'
+import { findPlugin } from './plugin'
+
+export class ShaclProperty extends HTMLElement {
+    template: ShaclPropertyTemplate
+    addButton: HTMLElement | 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)
+
+        if (this.template.order !== undefined) {
+            this.style.order = `${this.template.order}`
+        }
+        if (this.template.cssClass) {
+            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)
+            })
+            this.appendChild(this.addButton)
+        }
+
+        // bind existing values
+        if (this.template.path) {
+            const values = valueSubject ? config.dataGraph.getQuads(valueSubject, this.template.path, null, null) : []
+            let valuesContainHasValue = false
+            for (const value of values) {
+                this.addPropertyInstance(value.object)
+                if (this.template.hasValue && value.object.equals(this.template.hasValue)) {
+                    valuesContainHasValue = true
+                }
+            }
+            if (config.editMode && this.template.hasValue && !valuesContainHasValue) {
+                // 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) {
+            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)) {
+            // in view mode, show collapsible only when we have something to show
+            if (config.editMode || this.childElementCount > 0) {
+                const collapsible = this
+                collapsible.classList.add('collapsible')
+                if (this.template.config.attributes.collapse === 'open') {
+                    collapsible.classList.add('open')
+                }
+                const activator = document.createElement('h1')
+                activator.classList.add('activator')
+                activator.innerText = this.template.label
+                activator.addEventListener('click', () => {
+                    collapsible.classList.toggle('open')
+                })
+                this.prepend(activator)
+            }
+        }
+    }
+
+    addPropertyInstance(value?: Term): HTMLElement {
+        let instance: HTMLElement
+        if (this.template.shaclOr?.length) {
+            if (value) {
+                instance = createPropertyInstance(resolveShaclOrConstraint(this.template, value), value, true)
+            } else {
+                instance = createShaclOrConstraint(this.template.shaclOr, this, this.template.config)
+                appendRemoveButton(instance, '')
+            }
+        } else {
+            instance = createPropertyInstance(this.template, value)
+        }
+        if (this.template.config.editMode) {
+            this.insertBefore(instance, this.addButton!)
+        } else {
+            this.appendChild(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))) {
+            this.addPropertyInstance()
+            instanceCount = this.querySelectorAll(":scope > .property-instance, :scope > .shacl-or-constraint, :scope > shacl-node").length
+        }
+        let mayRemove: boolean
+        if (this.template.minCount !== undefined) {
+            mayRemove = instanceCount > this.template.minCount
+        } else {
+            mayRemove = (this.template.extendedShapes && this.template.extendedShapes.length > 0) || instanceCount > 1
+        }
+
+        const mayAdd = this.template.maxCount === undefined || instanceCount < this.template.maxCount
+        this.classList.toggle('may-remove', mayRemove)
+        this.classList.toggle('may-add', mayAdd)
+    }
+
+    toRDF(graph: Store, subject: NamedNode | BlankNode) {
+        for (const instance of this.querySelectorAll(':scope > .property-instance')) {
+            const pathNode = DataFactory.namedNode((instance as HTMLElement).dataset.path!)
+            if (instance.firstChild instanceof ShaclNode) {
+                const quadCount = graph.size
+                const shapeSubject = instance.firstChild.toRDF(graph)
+                graph.addQuad(subject, pathNode, shapeSubject)
+            } else {
+                const editor = instance.querySelector('.editor') as Editor
+                const value = toRDF(editor)
+                if (value) {
+                    graph.addQuad(subject, pathNode, value)
+                }
+            }
+        }
+    }
+}
+
+export function createPropertyInstance(template: ShaclPropertyTemplate, value?: Term, forceRemovable = false): HTMLElement {
+    let instance: HTMLElement
+    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))
+        }
+    } else {
+        const plugin = findPlugin(template.path, template.datatype?.value)
+        if (plugin) {
+            if (template.config.editMode) {
+                instance = plugin.createEditor(template, value)
+            } else {
+                instance = plugin.createViewer(template, value!)
+            }
+        } else {
+            instance = fieldFactory(template, value || null)
+        }
+        instance.classList.add('property-instance')
+    }
+    if (template.config.editMode) {
+        appendRemoveButton(instance, template.label, forceRemovable)
+    }
+    instance.dataset.path = template.path
+    return instance
+}
+
+function appendRemoveButton(instance: HTMLElement, label: string, forceRemovable = false) {
+    const removeButton = document.createElement('a')
+    removeButton.innerText = '\u00d7'
+    removeButton.classList.add('control-button', 'btn', 'remove-button')
+    removeButton.title = 'Remove ' + label
+    removeButton.addEventListener('click', _ => {
+        instance.classList.remove('fadeIn')
+        instance.classList.add('fadeOut')
+        setTimeout(() => {
+            const parent = instance.parentElement
+            instance.remove()
+            parent?.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))
+        }, 200)
+    })
+    if (forceRemovable) {
+        removeButton.classList.add('persistent')
+    }
+    instance.appendChild(removeButton)
+}
+
+window.customElements.define('shacl-property', ShaclProperty)

package/src/serialize.ts

@@ -0,0 +1,76 @@
+import { DataFactory, NamedNode, Writer, Quad, Literal, Prefixes } from 'n3'
+import { PREFIX_XSD, RDF_PREDICATE_TYPE, PREFIX_SHACL } from './constants'
+import { Editor } from './theme'
+import { NodeObject } from 'jsonld'
+
+export function serialize(quads: Quad[], format: string, prefixes?: Prefixes): string {
+    if (format === 'application/ld+json') {
+        return serializeJsonld(quads)
+    } else {
+        const writer = new Writer({ format: format, prefixes: prefixes })
+        writer.addQuads(quads)
+        let serialized = ''
+        writer.end((error, result) => {
+            if (error) {
+                console.error(error)
+            }
+            serialized = result
+        })
+        return serialized
+    }
+}
+
+function serializeJsonld(quads: Quad[]): string {
+    const triples: NodeObject[] = []
+    for (const quad of quads) {
+        const triple: NodeObject = { '@id': quad.subject.id }
+  
+        if (quad.predicate === RDF_PREDICATE_TYPE) {
+          triple['@type'] = quad.object.id
+        } else {
+            let object: string | {} = quad.object.value
+            if (quad.object instanceof Literal) {
+                if (quad.object.language) {
+                    object = { '@language': quad.object.language, '@value': quad.object.value }
+                } else if (quad.object.datatype && quad.object.datatype.value !== `${PREFIX_XSD}#string`) {
+                    object = { '@type': quad.object.datatype.value, '@value': quad.object.value }
+                }
+            } else {
+                object = { '@id': quad.object.id }
+            }
+            triple[quad.predicate.value] = object
+        }
+        triples.push(triple)
+    }
+    return JSON.stringify(triples)
+}
+
+export function toRDF(editor: Editor): Literal | NamedNode | undefined {
+    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.lang) {
+                languageOrDatatype = editor.dataset.lang
+            }
+            else if (editor['type'] === 'number') {
+                value = parseFloat(value)
+            }
+            else if (editor['type'] === 'file' && editor['binaryData']) {
+                value = editor['binaryData']
+            }
+            else if (editor['type'] === 'datetime-local') {
+                // 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)
+            }
+            return DataFactory.literal(value, languageOrDatatype)
+        }
+    } else if (editor['type'] === 'checkbox' || editor.getAttribute('type') === 'checkbox') {
+        // emit boolean 'false' only when required
+        if (editor['checked'] || parseInt(editor.dataset.minCount || '0') > 0) {
+            return DataFactory.literal(editor['checked'] ? 'true' : 'false', languageOrDatatype)
+        }
+    }
+}

package/src/shacl-engine.d.ts

@@ -0,0 +1,2 @@
+declare module 'shacl-engine'
+declare module '@rdfjs/data-model'

package/src/styles.css

@@ -0,0 +1,59 @@
+form { box-sizing: border-box; display:block; --label-width: 8em; --caret-size: 10px; }
+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 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; }
+.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'; }
+.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+.editor { padding-right: 55px; }
+.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 6px; color: red; cursor: help; }
+.validation-error::before { content: '\26a0' }
+.validation-error.node { left: -1em; }
+.invalid > .editor { border-color: red !important; }
+.ml-0  { margin-left: 0 !important; }
+.pr-0  { padding-right: 0 !important; }
+.mode-view .property-instance:not(:first-child) > label { visibility: hidden; }
+.mode-view .property-instance label { width: var(--label-width); }
+
+.d-flex { display: flex; }
+.lang { opacity: 0.65; font-size: 0.6em; }
+a, a:visited { color: inherit; }
+
+.fadeIn, .fadeOut { animation: fadeIn 0.2s ease-out; }
+.fadeOut { animation-direction: reverse; animation-timing-function: ease-out;}
+@keyframes fadeIn {
+    0% { opacity: 0; transform: scaleY(0.8); }
+    100% { opacity: 1; transform: scaleY(1); }
+}
+  
+.collapsible > .activator { display: flex; justify-content: space-between; align-items: center; cursor: pointer; width: 100%; border: 0; padding: 8px 0; transition: 0.2s; }
+.collapsible > .activator:hover, .collapsible.open > .activator { background-color: #F5F5F5; }
+.collapsible > .activator::after { content:''; width: var(--caret-size); height: var(--caret-size); border-style: none solid solid none; border-width: calc(0.3 * var(--caret-size)); transform: rotate(45deg); transition: transform .15s ease-out; margin-right: calc(0.5 * var(--caret-size)); }
+.collapsible.open > .activator::after { transform: rotate(225deg); }
+.collapsible > *:not(.activator) { transition: all 0.2s ease-out; opacity: 1; }
+.collapsible:not(.open) > *:not(.activator) { max-height: 0; padding: 0; opacity: 0; overflow: hidden; }
+.collapsible > .property-instance > shacl-node > h1 { display: none; }
+.collapsible.open > .property-instance:nth-child(odd) { background-color: #F5F5F5; }
+.ref-link { cursor: pointer; }
+.ref-link:hover { text-decoration: underline; }
+.node-id-display { color: #999; font-size: 11px; }