@ulb-darmstadt/shacl-form 1.10.2 → 1.10.4

package/dist/serialize.d.ts

@@ -1,4 +1,4 @@
 import { NamedNode, Quad, Literal, Prefixes } from 'n3';
 import { Editor } from './theme';
 export declare function serialize(quads: Quad[], format: string, prefixes?: Prefixes): string;
-export declare function toRDF(editor: Editor): Literal | NamedNode | undefined;
+export declare function toRDF(editor: Editor): NamedNode | Literal | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.10.2",
+    "version": "1.10.4",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
@@ -46,38 +46,39 @@
         "build-mapbox": "vite build -c ./vite.plugin-mapbox.config.ts"
     },
     "devDependencies": {
+        "@open-wc/testing": "^4.0.0",
         "@types/jsonld": "^1.5.15",
         "@types/leaflet": "^1.9.20",
-        "@types/leaflet-editable": "^1.2.6",
-        "@types/leaflet.fullscreen": "^3.0.2",
+        "@types/leaflet-editable": "^1.2.7",
+        "@types/leaflet.fullscreen": "^3.0.3",
         "@types/mapbox__mapbox-gl-draw": "^1.4.9",
         "@types/n3": "^1.26.0",
         "@types/uuid": "^10.0.0",
-        "happy-dom": "^18.0.1",
-        "jest": "^30.0.5",
+        "@web/dev-server-esbuild": "^1.0.4",
+        "@web/test-runner": "^0.20.2",
         "rdf-isomorphic": "^2.0.1",
         "rollup-plugin-peer-deps-external": "^2.2.4",
-        "typescript": "^5.8.3",
-        "vite": "^7.0.6",
+        "typescript": "^5.9.2",
+        "vite": "^7.1.5",
         "vite-plugin-dts": "^4.5.4",
         "vitest": "^3.2.4"
     },
     "dependencies": {
         "@mapbox/mapbox-gl-draw": "^1.5.0",
-        "bootstrap": "^5.3.7",
+        "bootstrap": "^5.3.8",
         "jsonld": "^8.3.3",
         "leaflet": "^1.9.4",
         "leaflet-editable": "^1.3.2",
         "leaflet.fullscreen": "^4.0.0",
-        "mapbox-gl": "^3.14.0",
+        "mapbox-gl": "^3.15.0",
         "n3": "^1.26.0",
         "rdfxml-streaming-parser": "^3.1.0",
         "shacl-engine": "^1.0.2",
-        "uuid": "^11.1.0"
+        "uuid": "^13.0.0"
     },
     "peerDependencies": {
+        "@ro-kit/ui-widgets": "^0.0.44",
         "lit": "^3.3.1",
-        "@ro-kit/ui-widgets": "^0.0.43",
         "mdui": "^2.1.4"
     }
 }

package/src/form.ts

@@ -43,11 +43,11 @@ export class ShaclForm extends HTMLElement {
 
     private initialize() {
         clearTimeout(this.initDebounceTimeout)
+        // set loading attribute on element so that hosting app can apply special css rules
+        this.setAttribute('loading', '')
+        // remove all child elements from form and show loading indicator
+        this.form.replaceChildren(document.createTextNode(this.config.attributes.loading))
         this.initDebounceTimeout = setTimeout(async () => {
-            // set loading attribute on element so that hosting app can apply special css rules
-            this.setAttribute('loading', '')
-            // 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

package/src/serialize.ts

@@ -45,7 +45,7 @@ function serializeJsonld(quads: Quad[]): string {
     return JSON.stringify(triples)
 }
 
-export function toRDF(editor: Editor): Literal | NamedNode | undefined {
+export function toRDF(editor: Editor): NamedNode | Literal | undefined {
     let languageOrDatatype: NamedNode<string> | string | undefined = editor.shaclDatatype
     let value: number | string = editor.value
     if (value) {
@@ -69,15 +69,20 @@ export function toRDF(editor: Editor): Literal | NamedNode | undefined {
                 // if seconds in value are 0, the input field omits them which is then not a valid xsd:dateTime
                 value = new Date(value).toISOString().slice(0, 19)
             }
-            // check if value is a typed rdf literal
+            // check if value is a typed rdf literal or langString
             if (!languageOrDatatype && typeof value === 'string') {
-                const tokens = value.split('^^')
-                if (tokens.length === 2 &&
-                    ((tokens[0].startsWith('"') && tokens[0].endsWith('"') || tokens[0].startsWith('\'') && tokens[0].endsWith('\''))) &&
-                    tokens[1].split(':').length === 2
-                ) {
+                // check for typed rdf literal
+                let tokens = value.split('^^')
+                if (tokens.length === 2 && tokens[0].startsWith('"') && tokens[0].endsWith('"') && tokens[1].split(':').length === 2) {
                     value = tokens[0].substring(1, tokens[0].length - 1)
                     languageOrDatatype = DataFactory.namedNode(tokens[1])
+                } else {
+                    // check for langString
+                    tokens = value.split('@')
+                    if (tokens.length === 2 && tokens[0].startsWith('"') && tokens[0].endsWith('"')) {
+                        value = tokens[0].substring(1, tokens[0].length - 1)
+                        languageOrDatatype = tokens[1]
+                    }
                 }
             }
             return DataFactory.literal(value, languageOrDatatype)

package/src/themes/default.ts

@@ -1,7 +1,7 @@
 import { Term } from '@rdfjs/types'
 import { ShaclPropertyTemplate } from "../property-template"
 import { Editor, InputListEntry, Theme } from "../theme"
-import { PREFIX_SHACL, PREFIX_XSD, XSD_DATATYPE_STRING } from '../constants'
+import { PREFIX_SHACL, PREFIX_XSD } from '../constants'
 import { Literal, NamedNode } from 'n3'
 import { Term as N3Term }  from 'n3'
 import css from './default.css?raw'
@@ -218,13 +218,9 @@ export class DefaultTheme extends Theme {
                 li.dataset.value = entry.value
                 li.innerText = entry.label ? entry.label : entry.value
             } 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 e.g. "ex"^^xsd:anyUri
-                    li.dataset.value = (entry.value as N3Term).id
+                li.dataset.value = (entry.value as N3Term).id
+                if (entry.value instanceof NamedNode) {
+                    li.dataset.value = '<' + li.dataset.value + ">"
                 }
                 li.innerText = entry.label ? entry.label : entry.value.value
             }
@@ -248,7 +244,7 @@ export class DefaultTheme extends Theme {
 
         editor.appendChild(ul)
         if (value) {
-            editor.value = value.value
+            editor.value = (value as N3Term).id
         }
         return result
     }

package/src/themes/material.ts

@@ -71,6 +71,7 @@ export class MaterialTheme extends Theme {
         if (template.pattern) {
             editor.pattern = template.pattern
         }
+        // @ts-ignore
         return this.createDefaultTemplate('', value, required, editor, template)
     }
 
@@ -91,6 +92,7 @@ export class MaterialTheme extends Theme {
         if (template.datatype?.value !== PREFIX_XSD + 'integer') {
             editor.setAttribute('step', '0.1')
         }
+        // @ts-ignore
         return this.createDefaultTemplate('', value, required, editor, template)
     }
 
@@ -165,6 +167,7 @@ export class MaterialTheme extends Theme {
             editor.type = 'date'
         }
         editor.classList.add('pr-0')
+        // @ts-ignore
         const result = this.createDefaultTemplate('', null, required, editor, template)
         if (value) {
             try {