@ulb-darmstadt/shacl-form 1.10.2 → 1.10.3

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.3",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
@@ -77,7 +77,7 @@
     },
     "peerDependencies": {
         "lit": "^3.3.1",
-        "@ro-kit/ui-widgets": "^0.0.43",
+        "@ro-kit/ui-widgets": "^0.0.44",
         "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,14 +218,7 @@ 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
                 li.innerText = entry.label ? entry.label : entry.value.value
             }
             parent.appendChild(li)
@@ -248,7 +241,7 @@ export class DefaultTheme extends Theme {
 
         editor.appendChild(ul)
         if (value) {
-            editor.value = value.value
+            editor.value = (value as N3Term).id
         }
         return result
     }