@ulb-darmstadt/shacl-form 1.10.3 → 2.0.0-rc1

package/src/plugins/mapbox.ts

@@ -1,157 +0,0 @@
-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?raw'
-import mapboxGlDrawCss from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css?raw'
-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, true)
-        instance.appendChild(button)
-        return instance
-    }
-
-    createViewer(_: 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

@@ -1,151 +0,0 @@
-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, prioritizeByLanguage, 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; template.name = prioritizeByLanguage(template.config.languages, template.name, literal) },
-    [`${PREFIX_SHACL}description`]:  (template, term) => { const literal = term as Literal; template.description = prioritizeByLanguage(template.config.languages, 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_DASH}readonly`]:      (template, term) => { template.readonly = 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 },
-    [`${PREFIX_SHACL}qualifiedValueShape`]:     (template, term) => { template.qualifiedValueShape = term },
-    [`${PREFIX_SHACL}qualifiedMinCount`]: (template, term) => { template.minCount = parseInt(term.value) },
-    [`${PREFIX_SHACL}qualifiedMaxCount`]: (template, term) => { template.maxCount = parseInt(term.value) },
-    [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.store.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 for sh:or not found:', term.value, 'existing lists:', template.config.lists)
-        }
-    },
-    [`${PREFIX_SHACL}xone`]:           (template, term) => {
-        const list = template.config.lists[term.value]
-        if (list?.length) {
-            template.shaclXone = list
-        } else {
-            console.error('list for sh:xone 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
-    readonly: 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
-    shaclXone: Term[] | undefined
-    languageIn: Term[] | undefined
-    datatype: NamedNode | undefined
-    hasValue: Term | undefined
-    qualifiedValueShape: Term | undefined
-    owlImports: NamedNode[] = []
-
-    config: Config
-    extendedShapes: NamedNode[]  = []
-
-    constructor(quads: Quad[], parent: ShaclNode, config: Config) {
-        this.parent = parent
-        this.config = config
-        this.merge(quads)
-        if (this.qualifiedValueShape) {
-            this.merge(config.store.getQuads(this.qualifiedValueShape, null, null, null))
-        }
-    }
-
-    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'
-        }
-        // register extended shapes
-        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.extendedShapes = [ ...this.extendedShapes ]
-        copy.owlImports = [ ...this.owlImports ]
-        if (this.languageIn) {
-            copy.languageIn = [ ...this.languageIn ]
-        }
-        if (this.shaclOr) {
-            copy.shaclOr = [ ...this.shaclOr ]
-        }
-        if (this.shaclXone) {
-            copy.shaclXone = [ ...this.shaclXone ]
-        }
-        copy.merge = this.merge.bind(copy)
-        copy.clone = this.clone.bind(copy)
-        return copy
-    }
-}

package/src/property.ts

@@ -1,309 +0,0 @@
-import { BlankNode, DataFactory, Literal, NamedNode, Quad, Store } from 'n3'
-import { Term } from '@rdfjs/types'
-import { ShaclNode } from './node'
-import { createShaclOrConstraint, resolveShaclOrConstraintOnProperty } from './constraints'
-import { findInstancesOf, focusFirstInputElement } from './util'
-import { Config } from './config'
-import { ShaclPropertyTemplate } from './property-template'
-import { Editor, fieldFactory, InputListEntry } from './theme'
-import { toRDF } from './serialize'
-import { findPlugin } from './plugin'
-import { DATA_GRAPH, RDF_PREDICATE_TYPE, SHACL_PREDICATE_TARGET_CLASS } from './constants'
-import { RokitButton, RokitCollapsible, RokitSelect } from '@ro-kit/ui-widgets'
-
-export class ShaclProperty extends HTMLElement {
-    template: ShaclPropertyTemplate
-    addButton: RokitSelect | undefined
-    container: HTMLElement
-
-    constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode) {
-        super()
-        this.template = new ShaclPropertyTemplate(config.store.getQuads(shaclSubject, null, null, null), parent, config)
-        this.container = this
-        if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
-            const collapsible = new RokitCollapsible()
-            collapsible.classList.add('collapsible', 'shacl-group');
-            collapsible.open = config.attributes.collapse === 'open';
-            collapsible.label = this.template.label;
-            this.container = collapsible
-        }
-
-        if (this.template.order !== undefined) {
-            this.style.order = `${this.template.order}`
-        }
-        if (this.template.cssClass) {
-            this.classList.add(this.template.cssClass)
-        }
-        if (config.editMode && !parent.linked) {
-            this.addButton = this.createAddButton()
-            this.container.appendChild(this.addButton)
-        }
-
-        // bind existing values
-        if (this.template.path) {
-            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.isValueValid(value.object)) {
-                    this.addPropertyInstance(value.object)
-                    if (this.template.hasValue && value.object.equals(this.template.hasValue)) {
-                        valuesContainHasValue = true
-                    }
-                }
-            }
-            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 && !parent.linked) {
-            this.addEventListener('change', () => { this.updateControls() })
-            this.updateControls()
-        }
-
-        if (this.container instanceof RokitCollapsible) {
-            // in view mode, show collapsible only when we have something to show
-            if ((config.editMode && !parent.linked) || this.container.childElementCount > 0) {
-                this.appendChild(this.container)
-            }
-        }
-    }
-
-    addPropertyInstance(value?: Term): HTMLElement {
-        let instance: HTMLElement
-        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) {
-                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 {
-            // 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.addButton) {
-            this.container.insertBefore(instance!, this.addButton)
-        } else {
-            this.container.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.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, :scope > .collapsible > .property-instance')) {
-            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.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.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.autoGrowLabelWidth = true
-        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.container.insertBefore(createPropertyInstance(this.template, value, true, true), addButton)
-                }
-                addButton.value = ''
-            })
-        }
-        return addButton
-    }
-}
-
-export function createPropertyInstance(template: ShaclPropertyTemplate, value?: Term, forceRemovable = false, linked = 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, linked))
-        }
-    } else {
-        const plugin = findPlugin(template.path, template.datatype?.value)
-        if (plugin) {
-            if (template.config.editMode && !linked) {
-                instance = plugin.createEditor(template, value)
-            } else {
-                instance = plugin.createViewer(template, value!)
-            }
-        } else {
-            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)
-    }
-    instance.dataset.path = template.path
-    return instance
-}
-
-function appendRemoveButton(instance: HTMLElement, label: string, forceRemovable = false) {
-    const removeButton = new RokitButton()
-    removeButton.classList.add('remove-button', 'clear')
-    removeButton.title = 'Remove ' + label
-    removeButton.dense = true
-    removeButton.icon = true
-    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)