@ulb-darmstadt/shacl-form 1.6.2 → 1.6.3

package/dist/form-material.js.LICENSE.txt

@@ -19,36 +19,6 @@
 
 /*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
-/**
- * @license
- * Copyright 2014 Travis Webb
- * SPDX-License-Identifier: MIT
- */
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
 /**
  * A JavaScript implementation of the JSON-LD API.
  *

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.6.2",
+    "version": "1.6.3",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
     "types": "dist/form-default.d.ts",
     "files": [
-        "dist"
+        "dist",
+        "src"
     ],
     "repository": {
         "type": "git",

package/src/config.ts

@@ -0,0 +1,113 @@
+import { Prefixes, Store } from 'n3'
+import { Term } from '@rdfjs/types'
+import { PREFIX_SHACL, RDF_PREDICATE_TYPE } from './constants'
+import { ClassInstanceProvider } from './plugin'
+import { Loader } from './loader'
+import { Theme } from './theme'
+
+export class ElementAttributes {
+    shapes: string | null = null
+    shapesUrl: string | null = null
+    shapeSubject: string | null = null
+    values: string | null = null
+    valuesUrl: string | null = null
+    /**
+     * @deprecated Use valuesSubject instead
+     */
+    valueSubject: string | null = null // for backward compatibility
+    valuesSubject: string | null = null
+    valuesNamespace = ''
+    view: string | null = null
+    language: string | null = null
+    loading: string = 'Loading\u2026'
+    ignoreOwlImports: string | null = null
+    collapse: string | null = null
+    submitButton: string | null = null
+    generateNodeShapeReference: string | null = null
+    showNodeIds: string | null = null
+}
+
+export class Config {
+    attributes = new ElementAttributes()
+    loader = new Loader(this)
+    classInstanceProvider: ClassInstanceProvider | undefined
+    prefixes: Prefixes = {}
+    editMode = true
+    languages: string[]
+
+    dataGraph = new Store()
+    lists: Record<string, Term[]> = {}
+    groups: Array<string> = []
+    theme: Theme
+    form: HTMLElement
+    renderedNodes = new Set<string>()
+    private _shapesGraph = new Store()
+
+    constructor(theme: Theme, form: HTMLElement) {
+        this.theme = theme
+        this.form = form
+        this.languages = [...new Set(navigator.languages.flatMap(lang => {
+            if (lang.length > 2) {
+                // for each 5 letter lang code (e.g. de-DE) append its corresponding 2 letter code (e.g. de) directly afterwards
+                return [lang, lang.substring(0, 2)]
+            } 
+            return lang
+        }))]
+    }
+ 
+    updateAttributes(elem: HTMLElement) {
+        const atts = new ElementAttributes();
+        (Object.keys(atts) as Array<keyof ElementAttributes>).forEach(key => {
+            const value = elem.dataset[key]
+            if (value !== undefined) {
+                atts[key] = value
+            }
+        })
+        this.editMode = atts.view === null
+        this.attributes = atts
+        // for backward compatibility
+        if (this.attributes.valueSubject && !this.attributes.valuesSubject) {
+            this.attributes.valuesSubject = this.attributes.valueSubject
+        }
+        if (atts.language) {
+            const index = this.languages.indexOf(atts.language)
+            if (index > -1) {
+                // remove preferred language from the list of languages
+                this.languages.splice(index, 1)
+            }
+            // now prepend preferred language at start of the list of languages
+            this.languages.unshift(atts.language)
+        }
+    }
+
+    static dataAttributes(): Array<string> {
+        const atts = new ElementAttributes()
+        return Object.keys(atts).map(key => {
+            // convert camelcase key to kebap case
+            key = key.replace(/[A-Z]/g, m => "-" + m.toLowerCase());
+            return 'data-' + key
+        })
+    }
+
+    get shapesGraph() {
+        return this._shapesGraph
+    }
+
+    set shapesGraph(graph: Store) {
+        this._shapesGraph = graph
+        this.lists = graph.extractLists()
+        this.groups = []
+        graph.forSubjects(subject => {
+            this.groups.push(subject.id)
+        }, RDF_PREDICATE_TYPE, `${PREFIX_SHACL}PropertyGroup`, null)
+    }
+
+    registerPrefixes(prefixes: Prefixes) {
+        for (const key in prefixes) {
+            // ignore empty (default) namespace
+            if (key) {
+                this.prefixes[key] = prefixes[key]
+            } 
+        }
+    }
+}

package/src/constants.ts

@@ -0,0 +1,25 @@
+import { DataFactory } from "n3"
+
+export const PREFIX_SHACL = 'http://www.w3.org/ns/shacl#'
+export const PREFIX_DASH = 'http://datashapes.org/dash#'
+export const PREFIX_XSD = 'http://www.w3.org/2001/XMLSchema#'
+export const PREFIX_RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'
+export const PREFIX_RDFS = 'http://www.w3.org/2000/01/rdf-schema#'
+export const PREFIX_SKOS = 'http://www.w3.org/2004/02/skos/core#'
+export const PREFIX_OWL = 'http://www.w3.org/2002/07/owl#'
+export const PREFIX_OA = 'http://www.w3.org/ns/oa#'
+export const PREFIX_DCTERMS = 'http://purl.org/dc/terms/'
+
+export const SHAPES_GRAPH = DataFactory.namedNode('shapes')
+
+export const RDF_PREDICATE_TYPE = DataFactory.namedNode(PREFIX_RDF + 'type')
+export const DCTERMS_PREDICATE_CONFORMS_TO = DataFactory.namedNode(PREFIX_DCTERMS + 'conformsTo')
+export const RDFS_PREDICATE_SUBCLASS_OF = DataFactory.namedNode(PREFIX_RDFS + 'subClassOf')
+export const SKOS_PREDICATE_BROADER = DataFactory.namedNode(PREFIX_SKOS + 'broader')
+export const OWL_PREDICATE_IMPORTS = DataFactory.namedNode(PREFIX_OWL + 'imports')
+export const OWL_OBJECT_NAMED_INDIVIDUAL = DataFactory.namedNode(PREFIX_OWL + 'NamedIndividual')
+export const SHACL_OBJECT_NODE_SHAPE = DataFactory.namedNode(PREFIX_SHACL + 'NodeShape')
+export const SHACL_OBJECT_IRI = DataFactory.namedNode(PREFIX_SHACL + 'IRI')
+export const SHACL_PREDICATE_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'class')
+export const SHACL_PREDICATE_TARGET_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'targetClass')
+export const SHACL_PREDICATE_NODE_KIND = DataFactory.namedNode(PREFIX_SHACL + 'nodeKind')

package/src/constraints.ts

@@ -0,0 +1,106 @@
+import { BlankNode, Literal, NamedNode, Quad } from 'n3'
+import { Term } from '@rdfjs/types'
+import { ShaclNode } from "./node"
+import { ShaclProperty, createPropertyInstance } from "./property"
+import { Config } from './config'
+import { PREFIX_SHACL, RDF_PREDICATE_TYPE, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS, SHACL_PREDICATE_NODE_KIND, SHACL_OBJECT_IRI } from './constants'
+import { findLabel, removePrefixes } from './util'
+import { ShaclPropertyTemplate } from './property-template'
+import { Editor, InputListEntry } from './theme'
+
+
+export function createShaclOrConstraint(options: Term[], context: ShaclNode | ShaclProperty, config: Config): HTMLElement {
+    const constraintElement = document.createElement('div')
+    constraintElement.classList.add('shacl-or-constraint')
+
+    const optionElements: InputListEntry[] =  []
+    optionElements.push({ label: '--- please choose ---', value: '' })
+
+    if (context instanceof ShaclNode) {
+        const properties: ShaclProperty[] = []
+        // expect options to be shacl properties
+        for (let i = 0; i < options.length; i++) {
+            const property = new ShaclProperty(options[i] as NamedNode | BlankNode, context, config)
+            properties.push(property)
+            optionElements.push({ label: property.template.label, value: i.toString() })
+        }
+        const editor = config.theme.createListEditor('Please choose', null, false, optionElements)
+        const select = editor.querySelector('.editor') as Editor
+        select.onchange = () => {
+            if (select.value) {
+                constraintElement.replaceWith(properties[parseInt(select.value)])
+            }
+        }
+        constraintElement.appendChild(editor)
+    } else {
+        const values: Quad[][] = []
+        for (let i = 0; i < options.length; i++) {
+            const quads = config.shapesGraph.getQuads(options[i], null, null, null)
+            if (quads.length) {
+                values.push(quads)
+                optionElements.push({ label: findLabel(quads, config.languages) || (removePrefixes(quads[0].predicate.value, config.prefixes) + ' = ' + removePrefixes(quads[0].object.value, config.prefixes)), value: i.toString() })
+            }
+        }
+        const editor = config.theme.createListEditor(context.template.label + '?', null, false, optionElements, context.template)
+        const select = editor.querySelector('.editor') as Editor
+        select.onchange = () => {
+            if (select.value) {
+                constraintElement.replaceWith(createPropertyInstance(context.template.clone().merge(values[parseInt(select.value)]), undefined, true))
+            }
+        }
+        constraintElement.appendChild(editor)
+    }
+
+    return constraintElement
+}
+
+export function resolveShaclOrConstraint(template: ShaclPropertyTemplate, value: Term): ShaclPropertyTemplate {
+    if (!template.shaclOr) {
+        console.warn('can\'t resolve sh:or because template has no options', template)
+        return template
+    }
+    if (value instanceof Literal) {
+        // value is a literal, try to resolve sh:or by matching on given value datatype
+        const valueType = value.datatype
+        for (const subject of template.shaclOr) {
+            const options = template.config.shapesGraph.getQuads(subject, null, null, null)
+            for (const quad of options) {
+                if (quad.predicate.value === `${PREFIX_SHACL}datatype` && quad.object.equals(valueType)) {
+                    return template.clone().merge(options)
+                }
+            }
+        }
+    } else {
+        // value is a NamedNode or BlankNode, try to resolve sh:or by matching rdf:type of given value with sh:node or sh:class in data graph or shapes graph
+        let types = template.config.dataGraph.getObjects(value, RDF_PREDICATE_TYPE, null)
+        types.push(...template.config.shapesGraph.getObjects(value, RDF_PREDICATE_TYPE, null))
+        for (const subject of template.shaclOr) {
+            const options = template.config.shapesGraph.getQuads(subject, null, null, null)
+            for (const quad of options) {
+                if (types.length > 0) {
+                    // try to find matching sh:node in sh:or values
+                    if (quad.predicate.value === `${PREFIX_SHACL}node`) {
+                        for (const type of types) {
+                            if (template.config.shapesGraph.getQuads(quad.object, SHACL_PREDICATE_TARGET_CLASS, type, null).length > 0) {
+                                return template.clone().merge(options)
+                            }
+                        }
+                    }
+                    // try to find matching sh:class in sh:or values
+                    if (quad.predicate.equals(SHACL_PREDICATE_CLASS)) {
+                        for (const type of types) {
+                            if (quad.object.equals(type)) {
+                                return template.clone().merge(options)
+                            }
+                        }
+                    }
+                } else if (quad.predicate.equals(SHACL_PREDICATE_NODE_KIND) && quad.object.equals(SHACL_OBJECT_IRI)) {
+                    // if sh:nodeKind is sh:IRI, just use that
+                    return template.clone().merge(options)
+                }
+            }
+        }
+    }
+    console.error('couldn\'t resolve sh:or for value', value)
+    return template
+}

package/src/exports.ts

@@ -0,0 +1,6 @@
+export { Theme, InputListEntry, Editor } from './theme'
+export { Loader, setSharedShapesGraph } from './loader'
+export { Config } from './config'
+export { Plugin, registerPlugin } from './plugin'
+export { ShaclPropertyTemplate } from './property-template'
+export { findLabel } from './util'

package/src/form-bootstrap.ts

@@ -0,0 +1,12 @@
+import { ShaclForm as FormBase } from "./form"
+import { BootstrapTheme } from "./themes/bootstrap"
+
+export * from './exports'
+
+export class ShaclForm extends FormBase {
+    constructor() {
+        super(new BootstrapTheme())
+    }
+}
+
+window.customElements.define('shacl-form', ShaclForm)

package/src/form-default.ts

@@ -0,0 +1,12 @@
+import { ShaclForm as FormBase } from "./form"
+import { DefaultTheme } from "./themes/default"
+
+export * from './exports'
+
+export class ShaclForm extends FormBase {
+    constructor() {
+        super(new DefaultTheme())
+    }
+}
+
+window.customElements.define('shacl-form', ShaclForm)

package/src/form-material.ts

@@ -0,0 +1,12 @@
+import { ShaclForm as FormBase } from "./form"
+import { MaterialTheme } from "./themes/material"
+
+export * from './exports'
+
+export class ShaclForm extends FormBase {
+    constructor() {
+        super(new MaterialTheme())
+    }
+}
+
+window.customElements.define('shacl-form', ShaclForm)

package/src/form.ts

@@ -0,0 +1,290 @@
+import { ShaclNode } from './node'
+import { Config } from './config'
+import { ClassInstanceProvider, Plugin, listPlugins, registerPlugin } from './plugin'
+import { Store, NamedNode, DataFactory } from 'n3'
+import { DCTERMS_PREDICATE_CONFORMS_TO, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, SHACL_PREDICATE_TARGET_CLASS } from './constants'
+import { Editor, Theme } from './theme'
+import { serialize } from './serialize'
+import { Validator } from 'shacl-engine'
+import { setSharedShapesGraph } from './loader'
+
+export class ShaclForm extends HTMLElement {
+    static get observedAttributes() { return Config.dataAttributes() }
+
+    config: Config
+    shape: ShaclNode | null = null
+    form: HTMLFormElement
+    initDebounceTimeout: ReturnType<typeof setTimeout> | undefined
+
+    constructor(theme: Theme) {
+        super()
+
+        this.attachShadow({ mode: 'open' })
+        this.form = document.createElement('form')
+        this.config = new Config(theme, this.form)
+        this.form.addEventListener('change', ev => {
+            ev.stopPropagation()
+            if (this.config.editMode) {
+                this.validate(true).then(valid => {
+                    this.dispatchEvent(new CustomEvent('change', { bubbles: true, cancelable: false, composed: true, detail: { 'valid': valid } }))
+                }).catch(e => { console.warn(e) })
+            }
+        })
+    }
+
+    connectedCallback() {
+        this.shadowRoot!.prepend(this.form)
+    }
+
+    attributeChangedCallback() {
+        this.config.updateAttributes(this)
+        this.initialize()
+    }
+
+    private initialize() {
+        clearTimeout(this.initDebounceTimeout)
+        this.initDebounceTimeout = setTimeout(async () => {
+            // remove all child elements from form and show loading indicator
+            this.form.replaceChildren(document.createTextNode(this.config.attributes.loading))
+            try {
+                await this.config.loader.loadGraphs()
+                // remove loading indicator
+                this.form.replaceChildren()
+                // reset rendered node references
+                this.config.renderedNodes.clear()
+                // find root shacl shape
+                const rootShapeShaclSubject = this.findRootShaclShapeSubject()
+                if (rootShapeShaclSubject) {
+                    // remove all previous css classes to have a defined state
+                    this.form.classList.forEach(value => { this.form.classList.remove(value) })
+                    this.form.classList.toggle('mode-edit', this.config.editMode)
+                    this.form.classList.toggle('mode-view', !this.config.editMode)
+                    // let theme add classes to form element
+                    this.config.theme.apply(this.form)
+                    // adopt stylesheets from theme and plugins
+                    const styles: CSSStyleSheet[] = [ this.config.theme.stylesheet ]
+                    for (const plugin of listPlugins()) {
+                        if (plugin.stylesheet) {
+                            styles.push(plugin.stylesheet)
+                        }
+                    }
+                    this.shadowRoot!.adoptedStyleSheets = styles
+
+                    this.shape = new ShaclNode(rootShapeShaclSubject, this.config, this.config.attributes.valuesSubject ? DataFactory.namedNode(this.config.attributes.valuesSubject) : undefined)
+                    this.form.appendChild(this.shape)
+
+                    if (this.config.editMode) {
+                        // add submit button
+                        if (this.config.attributes.submitButton !== null) {
+                            const button = this.config.theme.createButton(this.config.attributes.submitButton || 'Submit', true)
+                            button.addEventListener('click', (event) => {
+                                event.preventDefault()
+                                // let browser check form validity first
+                                if (this.form.reportValidity()) {
+                                    // now validate data graph
+                                    this.validate().then(valid => {
+                                        if (valid) {
+                                            // form and data graph are valid, so fire submit event
+                                            this.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+                                        } else {
+                                            // focus first invalid element
+                                            (this.form.querySelector(':scope .invalid > .editor') as HTMLElement)?.focus()
+                                        }
+                                    })
+                                }
+                            })
+                            this.form.appendChild(button)
+                        }
+                        await this.validate(true)
+                    }
+                } else if (this.config.shapesGraph.size > 0) {
+                    // raise error only when shapes graph is not empty
+                    throw new Error('shacl root node shape not found')
+                }
+            } catch (e) {
+                console.error(e)
+                const errorDisplay = document.createElement('div')
+                errorDisplay.innerText = String(e)
+                this.form.replaceChildren(errorDisplay)
+            }
+        }, 200)
+    }
+
+    public serialize(format = 'text/turtle', graph = this.toRDF()): string {
+        const quads = graph.getQuads(null, null, null, null)
+        return serialize(quads, format, this.config.prefixes)
+    }
+
+    public toRDF(graph = new Store()): Store {
+        this.shape?.toRDF(graph)
+        return graph
+    }
+
+    public registerPlugin(plugin: Plugin) {
+        registerPlugin(plugin)
+        this.initialize()
+    }
+
+    public setTheme(theme: Theme) {
+        this.config.theme = theme
+        this.initialize()
+    }
+
+    public setSharedShapesGraph(graph: Store) {
+        setSharedShapesGraph(graph)
+        this.initialize()
+    }
+
+    public setClassInstanceProvider(provider: ClassInstanceProvider) {
+        this.config.classInstanceProvider = provider
+        this.initialize()
+    }
+
+    public async validate(ignoreEmptyValues = false): Promise<boolean> {
+        for (const elem of this.form.querySelectorAll(':scope .validation-error')) {
+            elem.remove()
+        }
+        for (const elem of this.form.querySelectorAll(':scope .property-instance')) {
+            elem.classList.remove('invalid')
+            if (((elem.querySelector(':scope > .editor')) as Editor)?.value) {
+                elem.classList.add('valid')
+            } else {
+                elem.classList.remove('valid')
+            }
+        }
+
+        this.config.shapesGraph.deleteGraph('')
+        this.shape?.toRDF(this.config.shapesGraph)
+        try {
+            const dataset = this.config.shapesGraph
+            const report = await new Validator(dataset, { details: true, factory: DataFactory }).validate({ dataset })
+
+            for (const result of report.results) {
+                if (result.focusNode?.ptrs?.length) {
+                    for (const ptr of result.focusNode.ptrs) {
+                        const focusNode = ptr._term
+                        // result.path can be empty, e.g. if a focus node does not contain a required property node
+                        if (result.path?.length) {
+                            const path = result.path[0].predicates[0]
+                            // try to find most specific editor elements first
+                            let invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${focusNode.id}'] [data-path='${path.id}'] > .editor`)
+                            if (invalidElements.length === 0) {
+                                // if no editors found, select respective node. this will be the case for node shape violations.
+                                invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${focusNode.id}'] [data-path='${path.id}']`)
+                            }
+
+                            for (const invalidElement of invalidElements) {
+                                if (invalidElement.classList.contains('editor')) {
+                                    // this is a property shape violation
+                                    if (!ignoreEmptyValues || (invalidElement as Editor).value) {
+                                        let parent: HTMLElement | null = invalidElement.parentElement!
+                                        parent.classList.add('invalid')
+                                        parent.classList.remove('valid')
+                                        parent.appendChild(this.createValidationErrorDisplay(result))
+                                        do {
+                                            if (parent.classList.contains('collapsible')) {
+                                                parent.classList.add('open')
+                                            }
+                                            parent = parent.parentElement
+                                        } while (parent)
+                                    }
+                                } else if (!ignoreEmptyValues) {
+                                    // this is a node shape violation
+                                    invalidElement.classList.add('invalid')
+                                    invalidElement.classList.remove('valid')
+                                    invalidElement.appendChild(this.createValidationErrorDisplay(result, 'node'))
+                                }
+                            }
+                        } else if (!ignoreEmptyValues) {
+                            this.form.querySelector(`:scope [data-node-id='${focusNode.id}']`)?.prepend(this.createValidationErrorDisplay(result, 'node'))
+                        }
+                    }
+                }
+            }
+            return report.conforms
+        } catch(e) {
+            console.error(e)
+            return false
+        }
+    }
+
+    private createValidationErrorDisplay(validatonResult?: any, clazz?: string): HTMLElement {
+        const messageElement = document.createElement('span')
+        messageElement.classList.add('validation-error')
+        if (clazz) {
+            messageElement.classList.add(clazz)
+        }
+        if (validatonResult) {
+            if (validatonResult.message?.length > 0) {
+                for (const message of validatonResult.message) {
+                    messageElement.title += message.value + '\n'
+                }
+            } else {
+                messageElement.title = validatonResult.sourceConstraintComponent?.value
+            }
+        }
+        return messageElement
+    }
+
+    private findRootShaclShapeSubject(): NamedNode | undefined {
+        let rootShapeShaclSubject: NamedNode | null = null
+        // if data-shape-subject is set, use that
+        if (this.config.attributes.shapeSubject) {
+            rootShapeShaclSubject = DataFactory.namedNode(this.config.attributes.shapeSubject)
+            if (this.config.shapesGraph.getQuads(rootShapeShaclSubject, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, null).length === 0) {
+                console.warn(`shapes graph does not contain requested root shape ${this.config.attributes.shapeSubject}`)
+                return
+            }
+        }
+        else {
+            // if we have a data graph and data-values-subject is set, use shape of that
+            if (this.config.attributes.valuesSubject && this.config.dataGraph.size > 0) {
+                const rootValueSubject = DataFactory.namedNode(this.config.attributes.valuesSubject)
+                const rootValueSubjectTypes = [
+                    ...this.config.dataGraph.getQuads(rootValueSubject, RDF_PREDICATE_TYPE, null, null),
+                    ...this.config.dataGraph.getQuads(rootValueSubject, DCTERMS_PREDICATE_CONFORMS_TO, null, null)
+                ]
+                if (rootValueSubjectTypes.length === 0) {
+                    console.warn(`value subject '${this.config.attributes.valuesSubject}' has neither ${RDF_PREDICATE_TYPE.id} nor ${DCTERMS_PREDICATE_CONFORMS_TO.id} statement`)
+                    return
+                }
+                // if type/conformsTo refers to a node shape, prioritize that over targetClass resolution
+                for (const rootValueSubjectType of rootValueSubjectTypes) {
+                    if (this.config.shapesGraph.getQuads(rootValueSubjectType.object as NamedNode, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, null).length > 0) {
+                        rootShapeShaclSubject = rootValueSubjectType.object as NamedNode
+                        break
+                    }
+                }
+                if (!rootShapeShaclSubject) {
+                    const rootShapes = this.config.shapesGraph.getQuads(null, SHACL_PREDICATE_TARGET_CLASS, rootValueSubjectTypes[0].object, null)
+                    if (rootShapes.length === 0) {
+                        console.error(`value subject '${this.config.attributes.valuesSubject}' has no shacl shape definition in the shapes graph`)
+                        return
+                    }
+                    if (rootShapes.length > 1) {
+                        console.warn(`value subject '${this.config.attributes.valuesSubject}' has multiple shacl shape definitions in the shapes graph, choosing the first found (${rootShapes[0].subject})`)
+                    }
+                    if (this.config.shapesGraph.getQuads(rootShapes[0].subject, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, null).length === 0) {
+                        console.error(`value subject '${this.config.attributes.valuesSubject}' references a shape which is not a NodeShape (${rootShapes[0].subject})`)
+                        return
+                    }
+                    rootShapeShaclSubject = rootShapes[0].subject as NamedNode
+                }
+            }
+            else {
+                // choose first of all defined root shapes
+                const rootShapes = this.config.shapesGraph.getQuads(null, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, null)
+                if (rootShapes.length == 0) {
+                    console.warn('shapes graph does not contain any root shapes')
+                    return
+                }
+                if (rootShapes.length > 1) {
+                    console.warn('shapes graph contains', rootShapes.length, 'root shapes. choosing first found which is', rootShapes[0].subject.value)
+                    console.info('hint: set the shape to use with attribute "data-shape-subject"')
+                }
+                rootShapeShaclSubject = rootShapes[0].subject as NamedNode
+            }
+        }
+        return rootShapeShaclSubject
+    }
+}

package/src/globals.d.ts

@@ -0,0 +1,2 @@
+declare module "*.css";
+declare module "*.css?raw";