@ulb-darmstadt/shacl-form 1.9.4 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.9.4",
+    "version": "1.10.1",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
@@ -69,7 +69,6 @@
         "leaflet": "^1.9.4",
         "leaflet-editable": "^1.3.2",
         "leaflet.fullscreen": "^4.0.0",
-        "lit": "^3.3.1",
         "mapbox-gl": "^3.14.0",
         "n3": "^1.26.0",
         "rdfxml-streaming-parser": "^3.1.0",
@@ -77,7 +76,8 @@
         "uuid": "^11.1.0"
     },
     "peerDependencies": {
-        "@ro-kit/ui-widgets": "^0.0.36",
+        "lit": "^3.3.1",
+        "@ro-kit/ui-widgets": "^0.0.43",
         "mdui": "^2.1.4"
     }
 }

package/src/config.ts

@@ -22,6 +22,7 @@ export class ElementAttributes {
     view: string | null = null
     language: string | null = null
     loading: string = 'Loading\u2026'
+    proxy: string | null = null
     ignoreOwlImports: string | null = null
     collapse: string | null = null
     submitButton: string | null = null
@@ -100,7 +101,7 @@ export class Config {
 
     set store(store: Store) {
         this._store = store
-        this.lists = extractLists(store)
+        this.lists = extractLists(store, { ignoreErrors: true })
         this.groups = []
         store.forSubjects(subject => {
             this.groups.push(subject.id)

package/src/constants.ts

@@ -24,6 +24,7 @@ export const SHACL_OBJECT_NODE_SHAPE = DataFactory.namedNode(PREFIX_SHACL + 'Nod
 export const SHACL_OBJECT_IRI = DataFactory.namedNode(PREFIX_SHACL + 'IRI')
 export const SHACL_PREDICATE_PROPERTY = DataFactory.namedNode(PREFIX_SHACL + 'property')
 export const SHACL_PREDICATE_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'class')
+export const SHACL_PREDICATE_NODE = DataFactory.namedNode(PREFIX_SHACL + 'node')
 export const SHACL_PREDICATE_TARGET_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'targetClass')
 export const SHACL_PREDICATE_NODE_KIND = DataFactory.namedNode(PREFIX_SHACL + 'nodeKind')
 export const XSD_DATATYPE_STRING =  DataFactory.namedNode(PREFIX_XSD + 'string')

package/src/exports.ts

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

package/src/form.ts

@@ -6,7 +6,6 @@ import { DATA_GRAPH, DCTERMS_PREDICATE_CONFORMS_TO, PREFIX_SHACL, RDF_PREDICATE_
 import { Editor, Theme } from './theme'
 import { serialize } from './serialize'
 import { Validator } from 'shacl-engine'
-import { setSharedShapesGraph } from './loader'
 import { RokitCollapsible } from '@ro-kit/ui-widgets'
 
 export class ShaclForm extends HTMLElement {
@@ -140,11 +139,6 @@ export class ShaclForm extends HTMLElement {
         this.initialize()
     }
 
-    public setSharedShapesGraph(graph: Store) {
-        setSharedShapesGraph(graph)
-        this.initialize()
-    }
-
     public setClassInstanceProvider(provider: ClassInstanceProvider) {
         this.config.classInstanceProvider = provider
         this.initialize()
@@ -165,8 +159,8 @@ export class ShaclForm extends HTMLElement {
         }
 
         this.config.store.deleteGraph(this.config.valuesGraphId || '')
-        this.shape?.toRDF(this.config.store)
         if (this.shape) {
+            this.shape.toRDF(this.config.store)
             // add node target for validation. this is required in case of missing sh:targetClass in root shape
             this.config.store.add(new Quad(this.shape.shaclSubject, DataFactory.namedNode(PREFIX_SHACL + 'targetNode'), this.shape.nodeId, this.config.valuesGraphId))
         }

package/src/loader.ts

@@ -1,5 +1,5 @@
 import { Store, Quad, NamedNode, DataFactory, StreamParser } from 'n3'
-import { DATA_GRAPH, 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, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS, SHAPES_GRAPH } from './constants'
 import { Config } from './config'
 import { isURL } from './util'
 import { RdfXmlParser } from 'rdfxml-streaming-parser'
@@ -11,7 +11,6 @@ import { toRDF } from 'jsonld'
 // that import the same resources
 const loadedURLCache: Record<string, Promise<string>> = {}
 const loadedClassesCache: Record<string, Promise<string>> = {}
-let sharedShapesGraph: Store | undefined
 
 export class Loader {
     private config: Config
@@ -26,24 +25,22 @@ export class Loader {
         // clear local caches
         this.loadedExternalUrls = []
         this.loadedClasses = []
-
-        let store = sharedShapesGraph
         this.config.prefixes = {}
 
+
         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 ? fetchRDF(this.config.attributes.shapesUrl) : '', store, SHAPES_GRAPH))
-        }
-        promises.push(this.importRDF(this.config.attributes.values ? this.config.attributes.values : this.config.attributes.valuesUrl ? fetchRDF(this.config.attributes.valuesUrl) : '', store, DATA_GRAPH))
+        const 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))
         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 && store.countQuads(null, null, null, SHAPES_GRAPH) === 0 && this.config.attributes.valuesSubject) {
+        // or if we have data-shape-subject set on the form,
+        // then try to load the referenced object(s) into the shapes graph
+        if (store.countQuads(null, null, null, SHAPES_GRAPH) === 0 && this.config.attributes.valuesSubject) {
             const shapeCandidates = [
-                ...store.getObjects(this.config.attributes.valuesSubject, RDF_PREDICATE_TYPE, DATA_GRAPH),
+                // ...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>[] = []
@@ -51,7 +48,7 @@ export class Loader {
                 const url = this.toURL(uri.value)
                 if (url && this.loadedExternalUrls.indexOf(url) < 0) {
                     this.loadedExternalUrls.push(url)
-                    promises.push(this.importRDF(fetchRDF(url), store, SHAPES_GRAPH))
+                    promises.push(this.importRDF(this.fetchRDF(url), store, SHAPES_GRAPH))
                 }
             }
             try {
@@ -78,11 +75,11 @@ export class Loader {
                         if (url && this.loadedExternalUrls.indexOf(url) < 0) {
                             this.loadedExternalUrls.push(url)
                             // import into separate graph
-                            dependencies.push(this.importRDF(fetchRDF(url), store, DataFactory.namedNode(url)))
+                            dependencies.push(this.importRDF(this.fetchRDF(url), store, DataFactory.namedNode(url)))
                         }
                     }
                     // check if this is an sh:class predicate and invoke class instance provider
-                    if (this.config.classInstanceProvider && SHACL_PREDICATE_CLASS.equals(quad.predicate)) {
+                    if (this.config.classInstanceProvider && (SHACL_PREDICATE_CLASS.equals(quad.predicate) || SHACL_PREDICATE_TARGET_CLASS.equals(quad.predicate))) {
                         const className = quad.object.value
                         // import class definitions only once
                         if (this.loadedClasses.indexOf(className) < 0) {
@@ -159,20 +156,24 @@ export class Loader {
         return null
     }
 
-}
-
-async function fetchRDF(url: string): Promise<string> {
-    // try to load from cache first
-    if (url in loadedURLCache) {
-        return loadedURLCache[url]
+    async fetchRDF(url: string): Promise<string> {
+        // try to load from cache first
+        if (url in loadedURLCache) {
+            return loadedURLCache[url]
+        }
+        let proxiedURL = url
+        // if we have a proxy configured, then load url via proxy
+        if (this.config.attributes.proxy) {
+            proxiedURL = this.config.attributes.proxy + encodeURIComponent(url)
+        }
+        const promise = fetch(proxiedURL, {
+            headers: {
+                'Accept': 'text/turtle, application/trig, application/n-triples, application/n-quads, text/n3, application/ld+json'
+            },
+        }).then(resp => resp.text())
+        loadedURLCache[url] = promise
+        return promise
     }
-    const promise = fetch(url, {
-        headers: {
-            'Accept': 'text/turtle, application/trig, application/n-triples, application/n-quads, text/n3, application/ld+json'
-        },
-    }).then(resp => resp.text())
-    loadedURLCache[url] = promise
-    return promise
 }
 
 /* Can't rely on HTTP content-type header, since many resources are delivered with text/plain */
@@ -184,7 +185,3 @@ function guessContentType(input: string) {
     } 
     return 'ttl'
 }
-
-export function setSharedShapesGraph(graph: Store) {
-    sharedShapesGraph = graph
-}

package/src/node.ts

@@ -1,6 +1,6 @@
 import { BlankNode, DataFactory, NamedNode, Store } from 'n3'
 import { Term } from '@rdfjs/types'
-import { PREFIX_SHACL, RDF_PREDICATE_TYPE, OWL_PREDICATE_IMPORTS, SHACL_PREDICATE_PROPERTY } from './constants'
+import { PREFIX_SHACL, RDF_PREDICATE_TYPE, OWL_PREDICATE_IMPORTS, SHACL_PREDICATE_PROPERTY, SHACL_PREDICATE_NODE } from './constants'
 import { ShaclProperty } from './property'
 import { createShaclGroup } from './group'
 import { v4 as uuidv4 } from 'uuid'
@@ -97,7 +97,7 @@ export class ShaclNode extends HTMLElement {
                             console.error('list not found:', quad.object.value, 'existing lists:', config.lists)
                         }
                         break;
-                    case `${PREFIX_SHACL}node`:
+                    case SHACL_PREDICATE_NODE.id:
                         // inheritance via sh:node
                         this.prepend(new ShaclNode(quad.object as NamedNode, config, valueSubject, this))
                         break;

package/src/property.ts

@@ -192,6 +192,7 @@ export class ShaclProperty extends HTMLElement {
         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

package/src/serialize.ts

@@ -49,7 +49,9 @@ 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') {
+        if (value.startsWith('<') && value.endsWith('>') && value.indexOf(':') > -1) {
+            return DataFactory.namedNode(value.substring(1, value.length - 1))
+        } else if (editor.dataset.class || editor.dataset.nodeKind === PREFIX_SHACL + 'IRI') {
             return DataFactory.namedNode(value)
         } else if (editor.dataset.link) {
             return JSON.parse(editor.dataset.link)

package/src/themes/default.ts

@@ -220,8 +220,10 @@ export class DefaultTheme extends Theme {
             } else {
                 if (entry.value instanceof Literal && entry.value.datatype.equals(XSD_DATATYPE_STRING)) {
                     li.dataset.value = entry.value.value
+                } else if (entry.value instanceof NamedNode) {
+                    li.dataset.value = '<' + entry.value.value + ">"
                 } else {
-                    // this is needed for typed rdf literals
+                    // this is needed for typed rdf literals e.g. "ex"^^xsd:anyUri
                     li.dataset.value = (entry.value as N3Term).id
                 }
                 li.innerText = entry.label ? entry.label : entry.value.value