@ulb-darmstadt/shacl-form 1.6.3 → 1.6.5

package/dist/util.d.ts

@@ -1,4 +1,4 @@
-import { NamedNode, Prefixes, Quad, Store } from 'n3';
+import { Literal, NamedNode, Prefixes, Quad, Store } from 'n3';
 import { Term } from '@rdfjs/types';
 import { InputListEntry } from './theme';
 import { ShaclPropertyTemplate } from './property-template';
@@ -10,3 +10,4 @@ export declare function createInputListEntries(subjects: Term[], shapesGraph: St
 export declare function removePrefixes(id: string, prefixes: Prefixes): string;
 export declare function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate, indent?: number): InputListEntry[];
 export declare function isURL(input: string): boolean;
+export declare function prioritizeByLanguage(languages: string[], text1?: Literal, text2?: Literal): Literal | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.6.3",
+    "version": "1.6.5",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",

package/src/config.ts

@@ -1,4 +1,4 @@
-import { Prefixes, Store } from 'n3'
+import { DataFactory, NamedNode, Prefixes, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { PREFIX_SHACL, RDF_PREDICATE_TYPE } from './constants'
 import { ClassInstanceProvider } from './plugin'
@@ -17,6 +17,7 @@ export class ElementAttributes {
     valueSubject: string | null = null // for backward compatibility
     valuesSubject: string | null = null
     valuesNamespace = ''
+    valuesGraph: string | null = null
     view: string | null = null
     language: string | null = null
     loading: string = 'Loading\u2026'
@@ -41,6 +42,7 @@ export class Config {
     theme: Theme
     form: HTMLElement
     renderedNodes = new Set<string>()
+    valuesGraph: NamedNode | undefined
     private _shapesGraph = new Store()
 
     constructor(theme: Theme, form: HTMLElement) {
@@ -49,10 +51,10 @@ export class Config {
         this.languages = [...new Set(navigator.languages.flatMap(lang => {
             if (lang.length > 2) {
                 // for each 5 letter lang code (e.g. de-DE) append its corresponding 2 letter code (e.g. de) directly afterwards
-                return [lang, lang.substring(0, 2)]
+                return [lang.toLocaleLowerCase(), lang.substring(0, 2)]
             } 
             return lang
-        }))]
+        })), ''] // <-- append empty string to accept RDF literals with no language
     }
  
     updateAttributes(elem: HTMLElement) {
@@ -78,6 +80,7 @@ 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
     }
 
     static dataAttributes(): Array<string> {

package/src/node.ts

@@ -154,11 +154,11 @@ export class ShaclNode extends HTMLElement {
             (shape as ShaclNode | ShaclProperty).toRDF(graph, subject)
         }
         if (this.targetClass) {
-            graph.addQuad(subject, RDF_PREDICATE_TYPE, this.targetClass)
+            graph.addQuad(subject, RDF_PREDICATE_TYPE, this.targetClass, this.config.valuesGraph)
         }
         // if this is the root shacl node, check if we should add one of the rdf:type or dcterms:conformsTo predicates
         if (this.config.attributes.generateNodeShapeReference && !this.parent) {
-            graph.addQuad(subject, DataFactory.namedNode(this.config.attributes.generateNodeShapeReference), this.shaclSubject)
+            graph.addQuad(subject, DataFactory.namedNode(this.config.attributes.generateNodeShapeReference), this.shaclSubject, this.config.valuesGraph)
         }
         return subject
     }

package/src/property-template.ts

@@ -2,12 +2,12 @@ import { Literal, NamedNode, Quad, DataFactory } from 'n3'
 import { Term } from '@rdfjs/types'
 import { OWL_PREDICATE_IMPORTS, PREFIX_DASH, PREFIX_OA, PREFIX_RDF, PREFIX_SHACL, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS } from './constants'
 import { Config } from './config'
-import { findLabel, removePrefixes } from './util'
+import { findLabel, prioritizeByLanguage, removePrefixes } from './util'
 import { ShaclNode } from './node'
 
 const mappers: Record<string, (template: ShaclPropertyTemplate, term: Term) => void> = {
-    [`${PREFIX_SHACL}name`]:         (template, term) => { const literal = term as Literal; if (!template.name || literal.language === template.config.attributes.language) { template.name = literal } },
-    [`${PREFIX_SHACL}description`]:  (template, term) => { const literal = term as Literal; if (!template.description || literal.language === template.config.attributes.language) { template.description = literal } },
+    [`${PREFIX_SHACL}name`]:         (template, term) => { const literal = term as Literal; template.name = prioritizeByLanguage(template.config.languages, template.name, literal) },
+    [`${PREFIX_SHACL}description`]:  (template, term) => { const literal = term as Literal; template.description = prioritizeByLanguage(template.config.languages, template.description, literal) },
     [`${PREFIX_SHACL}path`]:         (template, term) => { template.path = term.value },
     [`${PREFIX_SHACL}node`]:         (template, term) => { template.node = term as NamedNode },
     [`${PREFIX_SHACL}datatype`]:     (template, term) => { template.datatype = term as NamedNode },

package/src/property.ts

@@ -123,14 +123,13 @@ export class ShaclProperty extends HTMLElement {
         for (const instance of this.querySelectorAll(':scope > .property-instance')) {
             const pathNode = DataFactory.namedNode((instance as HTMLElement).dataset.path!)
             if (instance.firstChild instanceof ShaclNode) {
-                const quadCount = graph.size
                 const shapeSubject = instance.firstChild.toRDF(graph)
-                graph.addQuad(subject, pathNode, shapeSubject)
+                graph.addQuad(subject, pathNode, shapeSubject, this.template.config.valuesGraph)
             } else {
                 const editor = instance.querySelector('.editor') as Editor
                 const value = toRDF(editor)
                 if (value) {
-                    graph.addQuad(subject, pathNode, value)
+                    graph.addQuad(subject, pathNode, value, this.template.config.valuesGraph)
                 }
             }
         }

package/src/themes/material.css

@@ -3,5 +3,12 @@
     --mdui-color-primary-dark: var(--mdui-color-primary-dark);
     --mdui-color-background-light: var(--mdui-color-background-light);
 }
+/* this prevents hiding the date picker icon and number controls */
+mdui-text-field::part(input) {
+    clip-path: none;
+    appearance: inherit;
+}
 form.mode-edit { --label-width: 0em; }
 .property-instance { margin-bottom:14px; }
+.mode-edit .property-instance *[required]::part(icon) { align-self: flex-start; padding-top: 0.7em; }
+.mode-edit .property-instance *[required]::part(icon)::before { color: red; content: '\2736'; font-size: 0.6em; }

package/src/themes/material.ts

@@ -93,6 +93,7 @@ export class MaterialTheme extends Theme {
         editor.variant = 'outlined'
         editor.label = label
         editor.helper = template?.description?.value
+        editor.clearable = true
         // @ts-ignore
         const result = this.createDefaultTemplate('', null, required, editor, template)
         let addEmptyOption = true

package/src/util.ts

@@ -1,4 +1,4 @@
-import { NamedNode, Prefixes, Quad, Store } from 'n3'
+import { Literal, NamedNode, Prefixes, Quad, Store } from 'n3'
 import { OWL_OBJECT_NAMED_INDIVIDUAL, PREFIX_RDFS, PREFIX_SHACL, PREFIX_SKOS, RDFS_PREDICATE_SUBCLASS_OF, RDF_PREDICATE_TYPE, SHAPES_GRAPH, SKOS_PREDICATE_BROADER } from './constants'
 import { Term } from '@rdfjs/types'
 import { InputListEntry } from './theme'
@@ -114,3 +114,21 @@ export function isURL(input: string): boolean {
     }
     return url.protocol === 'http:' || url.protocol === 'https:'
 }
+
+export function prioritizeByLanguage(languages: string[], text1?: Literal, text2?: Literal): Literal | undefined {
+    if (text1 === undefined) {
+        return text2
+    }
+    if (text2 === undefined) {
+        return text1
+    }
+    const index1 = languages.indexOf(text1.language)
+    if (index1 < 0) {
+        return text2
+    }
+    const index2 = languages.indexOf(text2.language)
+    if (index2 < 0) {
+        return text1
+    }
+    return index2 > index1 ? text1 : text2
+}