@ulb-darmstadt/shacl-form 1.10.1 → 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.1",
+    "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,9 +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 () => {
-            // 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
@@ -116,6 +118,7 @@ export class ShaclForm extends HTMLElement {
                 errorDisplay.innerText = String(e)
                 this.form.replaceChildren(errorDisplay)
             }
+            this.removeAttribute('loading')
         }, 200)
     }
 

package/src/property-template.ts

@@ -115,17 +115,15 @@ export class ShaclPropertyTemplate {
         if (!this.label && !this.shaclAnd) {
             this.label = this.path ? removePrefixes(this.path, this.config.prefixes) : 'unknown'
         }
-        // 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)
-                    }
+        // register extended shapes
+        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)
                 }
             }
         }

package/src/property.ts

@@ -19,14 +19,13 @@ export class ShaclProperty extends HTMLElement {
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode) {
         super()
         this.template = new ShaclPropertyTemplate(config.store.getQuads(shaclSubject, null, null, null), parent, config)
+        this.container = this
         if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
             const collapsible = new RokitCollapsible()
             collapsible.classList.add('collapsible', 'shacl-group');
             collapsible.open = config.attributes.collapse === 'open';
             collapsible.label = this.template.label;
             this.container = collapsible
-        } else {
-            this.container = this
         }
 
         if (this.template.order !== undefined) {
@@ -35,7 +34,6 @@ export class ShaclProperty extends HTMLElement {
         if (this.template.cssClass) {
             this.classList.add(this.template.cssClass)
         }
-
         if (config.editMode && !parent.linked) {
             this.addButton = this.createAddButton()
             this.container.appendChild(this.addButton)

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
     }