@ulb-darmstadt/shacl-form 1.7.4 → 1.8.0

package/dist/property-template.d.ts

@@ -35,7 +35,7 @@ export declare class ShaclPropertyTemplate {
     qualifiedValueShape: Term | undefined;
     owlImports: NamedNode[];
     config: Config;
-    extendedShapes: NamedNode[] | undefined;
+    extendedShapes: NamedNode[];
     constructor(quads: Quad[], parent: ShaclNode, config: Config);
     merge(quads: Quad[]): ShaclPropertyTemplate;
     clone(): ShaclPropertyTemplate;

package/dist/property.d.ts

@@ -3,12 +3,16 @@ import { Term } from '@rdfjs/types';
 import { ShaclNode } from './node';
 import { Config } from './config';
 import { ShaclPropertyTemplate } from './property-template';
+import { RokitSelect } from '@ro-kit/ui-widgets';
 export declare class ShaclProperty extends HTMLElement {
     template: ShaclPropertyTemplate;
-    addButton: HTMLElement | undefined;
+    addButton: RokitSelect | undefined;
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode);
     addPropertyInstance(value?: Term): HTMLElement;
     updateControls(): void;
     toRDF(graph: Store, subject: NamedNode | BlankNode): void;
+    getRdfClassToLinkOrCreate(): NamedNode<string> | undefined;
+    isValueValid(value: Term): boolean;
+    createAddButton(): RokitSelect;
 }
-export declare function createPropertyInstance(template: ShaclPropertyTemplate, value?: Term, forceRemovable?: boolean): HTMLElement;
+export declare function createPropertyInstance(template: ShaclPropertyTemplate, value?: Term, forceRemovable?: boolean, linked?: boolean): HTMLElement;

package/dist/theme.d.ts

@@ -17,7 +17,7 @@ export type InputListEntry = {
 export declare abstract class Theme {
     stylesheet: CSSStyleSheet;
     constructor(styles?: string);
-    apply(root: HTMLFormElement): void;
+    apply(_: HTMLFormElement): void;
     createViewer(label: string, value: Term, template: ShaclPropertyTemplate): HTMLElement;
     abstract createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement;
     abstract createLangStringEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
@@ -28,4 +28,4 @@ export declare abstract class Theme {
     abstract createFileEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
     abstract createButton(label: string, primary: boolean): HTMLElement;
 }
-export declare function fieldFactory(template: ShaclPropertyTemplate, value: Term | null): HTMLElement;
+export declare function fieldFactory(template: ShaclPropertyTemplate, value: Term | null, editable: boolean): HTMLElement;

package/dist/themes/default.d.ts

@@ -1,6 +1,6 @@
 import { Term } from '@rdfjs/types';
-import { ShaclPropertyTemplate } from "../property-template";
-import { Editor, InputListEntry, Theme } from "../theme";
+import { ShaclPropertyTemplate } from '../property-template';
+import { Editor, InputListEntry, Theme } from '../theme';
 export declare class DefaultTheme extends Theme {
     idCtr: number;
     constructor(overiddenCss?: string);
@@ -12,5 +12,5 @@ export declare class DefaultTheme extends Theme {
     createFileEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
     createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement;
-    createButton(label: string, primary: boolean): HTMLElement;
+    createButton(label: string, _: boolean): HTMLElement;
 }

package/dist/themes/material.d.ts

@@ -1,7 +1,6 @@
 import { ShaclPropertyTemplate } from '../property-template';
 import { Term } from '@rdfjs/types';
-import { Theme } from '../theme';
-import { InputListEntry, Editor } from '../theme';
+import { Theme, InputListEntry, Editor } from '../theme';
 export declare class MaterialTheme extends Theme {
     constructor();
     createDefaultTemplate(label: string, value: Term | null, required: boolean, editor: Editor, template?: ShaclPropertyTemplate): HTMLElement;
@@ -9,7 +8,7 @@ export declare class MaterialTheme extends Theme {
     createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement;
     createBooleanEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
-    createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
+    createDateEditor(_: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
     createLangStringEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
     createFileEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement;
     createButton(label: string, primary: boolean): HTMLElement;

package/package.json

@@ -1,10 +1,17 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.7.4",
+    "version": "1.8.0",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
     "types": "dist/form-default.d.ts",
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./dist/form-default.js",
+            "types": "./dist/form-default.d.ts"
+        }
+    },
     "files": [
         "dist",
         "src"
@@ -26,10 +33,15 @@
         "viewer"
     ],
     "scripts": {
-        "build": "npm run clean && webpack --mode production",
-        "clean": "rimraf dist",
+        "dev": "vite serve ./demo --host",
+        "build": "tsc && npm run build-default && npm run build-bootstrap && npm run build-material && npm run build-leaflet && npm run build-mapbox",
+        "preview": "vite preview",
         "test": "echo \"no tests specified\" && exit 0",
-        "serve": "webpack serve --mode development"
+        "build-default": "vite build  -c ./vite.form-default.config.ts",
+        "build-bootstrap": "vite build -c ./vite.form-bootstrap.config.ts",
+        "build-material": "vite build -c ./vite.form-material.config.ts",
+        "build-leaflet": "vite build -c ./vite.plugin-leaflet.config.ts",
+        "build-mapbox": "vite build -c ./vite.plugin-mapbox.config.ts"
     },
     "devDependencies": {
         "@types/jsonld": "^1.5.15",
@@ -39,13 +51,10 @@
         "@types/mapbox__mapbox-gl-draw": "^1.4.9",
         "@types/n3": "^1.26.0",
         "@types/uuid": "^10.0.0",
-        "raw-loader": "^4.0.2",
-        "rimraf": "^6.0.1",
-        "ts-loader": "^9.5.2",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
         "typescript": "^5.8.3",
-        "webpack": ">=5.99.9",
-        "webpack-cli": "^6.0.1",
-        "webpack-dev-server": "^5.2.2"
+        "vite": "^6.2.5",
+        "vite-plugin-dts": "^4.5.3"
     },
     "dependencies": {
         "@mapbox/mapbox-gl-draw": "^1.5.0",
@@ -55,9 +64,12 @@
         "leaflet-editable": "^1.3.1",
         "leaflet.fullscreen": "^4.0.0",
         "mapbox-gl": "^3.13.0",
-        "mdui": "^2.1.4",
         "n3": "^1.26.0",
         "shacl-engine": "^1.0.2",
         "uuid": "^11.1.0"
+    },
+    "peerDependencies": {
+        "@ro-kit/ui-widgets": "^0.0.27",
+        "mdui": "^2.1.4"
     }
 }

package/src/config.ts

@@ -36,14 +36,13 @@ export class Config {
     editMode = true
     languages: string[]
 
-    dataGraph = new Store()
     lists: Record<string, Term[]> = {}
     groups: Array<string> = []
     theme: Theme
     form: HTMLElement
     renderedNodes = new Set<string>()
-    valuesGraph: NamedNode | undefined
-    private _shapesGraph = new Store()
+    valuesGraphId: NamedNode | undefined
+    private _store = new Store()
 
     constructor(theme: Theme, form: HTMLElement) {
         this.theme = theme
@@ -80,7 +79,9 @@ export class Config {
             // now prepend preferred language at start of the list of languages
             this.languages.unshift(atts.language)
         }
-        this.valuesGraph = atts.valuesGraph ? DataFactory.namedNode(atts.valuesGraph) : undefined
+        if (atts.valuesGraph) {
+            this.valuesGraphId = DataFactory.namedNode(atts.valuesGraph)
+        }
     }
 
     static dataAttributes(): Array<string> {
@@ -92,15 +93,15 @@ export class Config {
         })
     }
 
-    get shapesGraph() {
-        return this._shapesGraph
+    get store() {
+        return this._store
     }
 
-    set shapesGraph(graph: Store) {
-        this._shapesGraph = graph
-        this.lists = graph.extractLists()
+    set store(store: Store) {
+        this._store = store
+        this.lists = store.extractLists()
         this.groups = []
-        graph.forSubjects(subject => {
+        store.forSubjects(subject => {
             this.groups.push(subject.id)
         }, RDF_PREDICATE_TYPE, `${PREFIX_SHACL}PropertyGroup`, null)
     }

package/src/constants.ts

@@ -9,8 +9,10 @@ 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 PREFIX_FOAF = 'http://xmlns.com/foaf/0.1/'
 
-export const SHAPES_GRAPH = DataFactory.namedNode('shapes')
+export const SHAPES_GRAPH = DataFactory.namedNode('loaded-shapes')
+export const DATA_GRAPH = DataFactory.namedNode('loaded-data')
 
 export const RDF_PREDICATE_TYPE = DataFactory.namedNode(PREFIX_RDF + 'type')
 export const DCTERMS_PREDICATE_CONFORMS_TO = DataFactory.namedNode(PREFIX_DCTERMS + 'conformsTo')

package/src/constraints.ts

@@ -5,7 +5,6 @@ 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, SHACL_PREDICATE_PROPERTY } from './constants'
 import { findLabel, removePrefixes } from './util'
-import { ShaclPropertyTemplate } from './property-template'
 import { Editor, InputListEntry } from './theme'
 
 
@@ -21,11 +20,11 @@ export function createShaclOrConstraint(options: Term[], context: ShaclNode | Sh
         // options can be shacl properties or blank nodes referring to (list of) properties
         let optionsAreReferencedProperties = false
         if (options.length) {
-            optionsAreReferencedProperties = config.shapesGraph.getObjects(options[0] , SHACL_PREDICATE_PROPERTY, null).length > 0
+            optionsAreReferencedProperties = config.store.countQuads(options[0], SHACL_PREDICATE_PROPERTY, null, null) > 0
         }
         for (let i = 0; i < options.length; i++) {
             if (optionsAreReferencedProperties) {
-                const quads = config.shapesGraph.getObjects(options[i] , SHACL_PREDICATE_PROPERTY, null)
+                const quads = config.store.getObjects(options[i] , SHACL_PREDICATE_PROPERTY, null)
                 // option can be single property or list of properties
                 const list: ShaclProperty[] = []
                 let combinedText = ''
@@ -53,8 +52,8 @@ export function createShaclOrConstraint(options: Term[], context: ShaclNode | Sh
                     constraintElement.replaceWith(selectedOptions[0])
                 }
                 for (let i = 1; i < selectedOptions.length; i++) {
-                    lastAddedProperty!.after(selectedOptions[1])
-                    lastAddedProperty = selectedOptions[1]
+                    lastAddedProperty!.after(selectedOptions[i])
+                    lastAddedProperty = selectedOptions[i]
                 }
             }
         }
@@ -62,7 +61,7 @@ export function createShaclOrConstraint(options: Term[], context: ShaclNode | Sh
     } else {
         const values: Quad[][] = []
         for (let i = 0; i < options.length; i++) {
-            const quads = config.shapesGraph.getQuads(options[i], null, null, null)
+            const quads = config.store.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() })
@@ -86,7 +85,7 @@ export function resolveShaclOrConstraintOnProperty(subjects: Term[], value: Term
         // value is a literal, try to resolve sh:or/sh:xone by matching on given value datatype
         const valueType = value.datatype
         for (const subject of subjects) {
-            const options = config.shapesGraph.getQuads(subject, null, null, null)
+            const options = config.store.getQuads(subject, null, null, null)
             for (const quad of options) {
                 if (quad.predicate.value === `${PREFIX_SHACL}datatype` && quad.object.equals(valueType)) {
                     return options
@@ -95,16 +94,15 @@ export function resolveShaclOrConstraintOnProperty(subjects: Term[], value: Term
         }
     } else {
         // value is a NamedNode or BlankNode, try to resolve sh:or/sh:xone by matching rdf:type of given value with sh:node or sh:class in data graph or shapes graph
-        const types = config.dataGraph.getObjects(value, RDF_PREDICATE_TYPE, null)
-        types.push(...config.shapesGraph.getObjects(value, RDF_PREDICATE_TYPE, null))
+        const types = config.store.getObjects(value, RDF_PREDICATE_TYPE, null)
         for (const subject of subjects) {
-            const options = config.shapesGraph.getQuads(subject, null, null, null)
+            const options = config.store.getQuads(subject, null, null, null)
             for (const quad of options) {
                 if (types.length > 0) {
                     // try to find matching sh:node in sh:or/sh:xone values
                     if (quad.predicate.value === `${PREFIX_SHACL}node`) {
                         for (const type of types) {
-                            if (config.shapesGraph.getQuads(quad.object, SHACL_PREDICATE_TARGET_CLASS, type, null).length > 0) {
+                            if (config.store.getQuads(quad.object, SHACL_PREDICATE_TARGET_CLASS, type, null).length > 0) {
                                 return options
                             }
                         }
@@ -130,15 +128,14 @@ export function resolveShaclOrConstraintOnProperty(subjects: Term[], value: Term
 
 export function resolveShaclOrConstraintOnNode(subjects: Term[], value: Term, config: Config): Term[] {
     for (const subject of subjects) {
-        let subjectMatches = true
-        const propertySubjects = config.shapesGraph.getObjects(subject, SHACL_PREDICATE_PROPERTY, null)
+        let subjectMatches = false
+        const propertySubjects = config.store.getObjects(subject, SHACL_PREDICATE_PROPERTY, null)
         for (const propertySubject of propertySubjects) {
-            const paths = config.shapesGraph.getObjects(propertySubject, `${PREFIX_SHACL}path`, null)
+            const paths = config.store.getObjects(propertySubject, `${PREFIX_SHACL}path`, null)
             for (const path of paths) {
-                const values = config.dataGraph.getObjects(value, path, null)
-                values.push(...config.shapesGraph.getObjects(value, path, null))
-                if (!values.length) {
-                    subjectMatches = false
+                // this allows partial matches in data or shapes graph on properties
+                subjectMatches = config.store.countQuads(value, path, null, null) > 0
+                if (subjectMatches) {
                     break
                 }
             }

package/src/exports.ts

@@ -1,4 +1,5 @@
-export { Theme, InputListEntry, Editor } from './theme'
+export type { InputListEntry, Editor } from './theme'
+export { Theme } from './theme'
 export { Loader, setSharedShapesGraph } from './loader'
 export { Config } from './config'
 export { Plugin, registerPlugin } from './plugin'

package/src/form.ts

@@ -1,8 +1,8 @@
 import { ShaclNode } from './node'
 import { Config } from './config'
 import { ClassInstanceProvider, Plugin, listPlugins, registerPlugin } from './plugin'
-import { Store, NamedNode, DataFactory, Quad } from 'n3'
-import { DCTERMS_PREDICATE_CONFORMS_TO, PREFIX_SHACL, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, SHACL_PREDICATE_TARGET_CLASS } from './constants'
+import { Store, NamedNode, DataFactory, Quad, BlankNode } from 'n3'
+import { DATA_GRAPH, DCTERMS_PREDICATE_CONFORMS_TO, PREFIX_SHACL, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, SHACL_PREDICATE_TARGET_CLASS, SHAPES_GRAPH } from './constants'
 import { Editor, Theme } from './theme'
 import { serialize } from './serialize'
 import { Validator } from 'shacl-engine'
@@ -95,9 +95,13 @@ export class ShaclForm extends HTMLElement {
                             })
                             this.form.appendChild(button)
                         }
+                        // delete bound values from data graph, otherwise validation would be confused
+                        if (this.config.attributes.valuesSubject) {
+                            this.removeFromDataGraph(DataFactory.namedNode(this.config.attributes.valuesSubject))
+                        }
                         await this.validate(true)
                     }
-                } else if (this.config.shapesGraph.size > 0) {
+                } else if (this.config.store.countQuads(null, null, null, SHAPES_GRAPH) > 0) {
                     // raise error only when shapes graph is not empty
                     throw new Error('shacl root node shape not found')
                 }
@@ -154,14 +158,14 @@ export class ShaclForm extends HTMLElement {
             }
         }
 
-        this.config.shapesGraph.deleteGraph('')
-        this.shape?.toRDF(this.config.shapesGraph)
+        this.config.store.deleteGraph(this.config.valuesGraphId || '')
+        this.shape?.toRDF(this.config.store)
         if (this.shape) {
             // add node target for validation. this is required in case of missing sh:targetClass in root shape
-            this.config.shapesGraph.add(new Quad(this.shape.shaclSubject, DataFactory.namedNode(PREFIX_SHACL + 'targetNode'), this.shape.nodeId, undefined))
+            this.config.store.add(new Quad(this.shape.shaclSubject, DataFactory.namedNode(PREFIX_SHACL + 'targetNode'), this.shape.nodeId, this.config.valuesGraphId))
         }
         try {
-            const dataset = this.config.shapesGraph
+            const dataset = this.config.store
             const report = await new Validator(dataset, { details: true, factory: DataFactory }).validate({ dataset })
 
             for (const result of report.results) {
@@ -172,10 +176,10 @@ export class ShaclForm extends HTMLElement {
                         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`)
+                            let invalidElements = this.form.querySelectorAll(`:scope shacl-node[data-node-id='${focusNode.id}'] > shacl-property > .property-instance[data-path='${path.id}'] > .editor, :scope shacl-node[data-node-id='${focusNode.id}'] > .shacl-group > shacl-property > .property-instance[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}']`)
+                                invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${focusNode.id}']  > * > [data-path='${path.id}']`)
                             }
 
                             for (const invalidElement of invalidElements) {
@@ -236,18 +240,18 @@ export class ShaclForm extends HTMLElement {
         // 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) {
+            if (this.config.store.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) {
+            if (this.config.attributes.valuesSubject && this.config.store.countQuads(null, null, null, DATA_GRAPH) > 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)
+                    ...this.config.store.getQuads(rootValueSubject, RDF_PREDICATE_TYPE, null, DATA_GRAPH),
+                    ...this.config.store.getQuads(rootValueSubject, DCTERMS_PREDICATE_CONFORMS_TO, null, DATA_GRAPH)
                 ]
                 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`)
@@ -255,13 +259,13 @@ export class ShaclForm extends HTMLElement {
                 }
                 // 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) {
+                    if (this.config.store.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)
+                    const rootShapes = this.config.store.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
@@ -269,7 +273,7 @@ export class ShaclForm extends HTMLElement {
                     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) {
+                    if (this.config.store.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
                     }
@@ -278,7 +282,7 @@ export class ShaclForm extends HTMLElement {
             }
             else {
                 // choose first of all defined root shapes
-                const rootShapes = this.config.shapesGraph.getQuads(null, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, null)
+                const rootShapes = this.config.store.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
@@ -292,4 +296,15 @@ export class ShaclForm extends HTMLElement {
         }
         return rootShapeShaclSubject
     }
+
+    private removeFromDataGraph(subject: NamedNode | BlankNode) {
+        this.config.attributes.valuesSubject
+        for (const quad of this.config.store.getQuads(subject, null, null, DATA_GRAPH)) {
+            this.config.store.delete(quad)
+            if (quad.object.termType === 'NamedNode' || quad.object.termType === 'BlankNode') {
+                // recurse
+                this.removeFromDataGraph(quad.object)
+            }
+        }
+    }
 }

package/src/group.ts

@@ -7,7 +7,7 @@ export function createShaclGroup(groupSubject: string, config: Config): HTMLElem
     group.dataset['subject'] = groupSubject
     group.classList.add('shacl-group')
     let name = groupSubject
-    const quads = config.shapesGraph.getQuads(groupSubject, null, null, null)
+    const quads = config.store.getQuads(groupSubject, null, null, null)
     const label = findObjectValueByPredicate(quads, "label", PREFIX_RDFS, config.languages)
     if (label) {
         name = label

package/src/loader.ts

@@ -1,6 +1,6 @@
 import { Store, Parser, Quad, Prefixes, NamedNode, DataFactory } from 'n3'
 import { toRDF } from 'jsonld'
-import { DCTERMS_PREDICATE_CONFORMS_TO, OWL_PREDICATE_IMPORTS, RDF_PREDICATE_TYPE, SHACL_PREDICATE_CLASS, SHAPES_GRAPH } from './constants'
+import { DATA_GRAPH, DCTERMS_PREDICATE_CONFORMS_TO, OWL_PREDICATE_IMPORTS, RDF_PREDICATE_TYPE, SHACL_PREDICATE_CLASS, SHAPES_GRAPH } from './constants'
 import { Config } from './config'
 import { isURL } from './util'
 
@@ -25,31 +25,31 @@ export class Loader {
         this.loadedExternalUrls = []
         this.loadedClasses = []
 
-        let shapesStore = sharedShapesGraph
-        const valuesStore = new Store()
+        let store = sharedShapesGraph
         this.config.prefixes = {}
 
-        const promises = [ this.importRDF(this.config.attributes.values ? this.config.attributes.values : this.config.attributes.valuesUrl ? this.fetchRDF(this.config.attributes.valuesUrl) : '', valuesStore, undefined, new Parser({ blankNodePrefix: '' })) ]
-        if (!shapesStore) {
-            shapesStore = new Store()
-            promises.push(this.importRDF(this.config.attributes.shapes ? this.config.attributes.shapes : this.config.attributes.shapesUrl ? this.fetchRDF(this.config.attributes.shapesUrl) : '', shapesStore, SHAPES_GRAPH))
+        const promises: Promise<void>[] = []
+        if (!store) {
+            store = new Store()
+            promises.push(this.importRDF(this.config.attributes.shapes ? this.config.attributes.shapes : this.config.attributes.shapesUrl ? this.fetchRDF(this.config.attributes.shapesUrl) : '', store, SHAPES_GRAPH))
         }
+        promises.push(this.importRDF(this.config.attributes.values ? this.config.attributes.values : this.config.attributes.valuesUrl ? this.fetchRDF(this.config.attributes.valuesUrl) : '', store, DATA_GRAPH, new Parser({ blankNodePrefix: '' })))
         await Promise.all(promises)
 
         // if shapes graph is empty, but we have the following triples:
         // <valueSubject> a <uri> or <valueSubject> dcterms:conformsTo <uri>
         // then try to load the referenced object into the shapes graph
-        if (!sharedShapesGraph && shapesStore?.size == 0 && this.config.attributes.valuesSubject) {
+        if (!sharedShapesGraph && store?.size == 0 && this.config.attributes.valuesSubject) {
             const shapeCandidates = [
-                ...valuesStore.getObjects(this.config.attributes.valuesSubject, RDF_PREDICATE_TYPE, null),
-                ...valuesStore.getObjects(this.config.attributes.valuesSubject, DCTERMS_PREDICATE_CONFORMS_TO, null)
+                ...store.getObjects(this.config.attributes.valuesSubject, RDF_PREDICATE_TYPE, DATA_GRAPH),
+                ...store.getObjects(this.config.attributes.valuesSubject, DCTERMS_PREDICATE_CONFORMS_TO, DATA_GRAPH)
             ]
             const promises: Promise<void>[] = []
             for (const uri of shapeCandidates) {
                 const url = this.toURL(uri.value)
                 if (url && this.loadedExternalUrls.indexOf(url) < 0) {
                     this.loadedExternalUrls.push(url)
-                    promises.push(this.importRDF(this.fetchRDF(url), shapesStore, SHAPES_GRAPH))
+                    promises.push(this.importRDF(this.fetchRDF(url), store, SHAPES_GRAPH))
                 }
             }
             try {
@@ -59,8 +59,7 @@ export class Loader {
             }
         }
 
-        this.config.shapesGraph = shapesStore
-        this.config.dataGraph = valuesStore
+        this.config.store = store
     }
     
     async importRDF(input: string | Promise<string>, store: Store, graph?: NamedNode, parser?: Parser) {

package/src/node-template.ts

@@ -0,0 +1,82 @@
+import { BlankNode, NamedNode, Quad } from "n3"
+import { Config } from "./config"
+import { OWL_PREDICATE_IMPORTS, PREFIX_SHACL } from "./constants";
+import { Term } from "@rdfjs/types";
+
+const mappers: Record<string, (template: ShaclNodeTemplate, term: Term) => void> = {
+    [`${PREFIX_SHACL}property`]:     (template, term) => { template.properties.push(term as (BlankNode | NamedNode)) },
+    [`${PREFIX_SHACL}and`]:          (template, term) => { template.shaclAnd = term.value },
+    [`${PREFIX_SHACL}node`]:         (template, term) => { template.node = term as NamedNode },
+    [`${PREFIX_SHACL}targetClass`]:  (template, term) => { template.targetClass = term 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)
+        }
+    },
+    [OWL_PREDICATE_IMPORTS.id]:      (template, term) => { template.owlImports.push(term as NamedNode) }
+}
+
+export class ShaclNodeTemplate {
+    properties: (NamedNode | BlankNode)[] = []
+    node: NamedNode | undefined
+    shaclAnd: string | undefined    
+    shaclOr: Term[] | undefined
+    shaclXone: Term[] | undefined
+    targetClass: NamedNode | undefined
+
+    owlImports: NamedNode[] = []
+    config: Config
+    extendedShapes: NamedNode[] = []
+
+    constructor(quads: Quad[], config: Config) {
+        this.config = config
+        this.merge(quads)
+    }
+
+    merge(quads: Quad[]): ShaclNodeTemplate {
+        for (const quad of quads) {
+            mappers[quad.predicate.id]?.call(this, this, quad.object)
+        }
+        // resolve extended shapes
+        if (this.node || this.shaclAnd) {
+            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(): ShaclNodeTemplate {
+        const copy = Object.assign({}, this)
+        // arrays are not cloned but referenced, so create them manually
+        copy.owlImports = [ ...this.owlImports ]
+        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
+    }
+}