Merge branch 'main' of https://github.com/ULB-Darmstadt/shacl-form

src/constants.ts

@@ -7,6 +7,7 @@ export const PREFIX_RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'
 export const PREFIX_RDFS = 'http://www.w3.org/2000/01/rdf-schema#'
 export const PREFIX_SKOS = 'http://www.w3.org/2004/02/skos/core#'
 export const PREFIX_OWL = 'http://www.w3.org/2002/07/owl#'
+export const PREFIX_OA = 'http://www.w3.org/ns/oa#'
 
 export const SHAPES_GRAPH = DataFactory.namedNode('shapes')
 export const OWL_IMPORTS = DataFactory.namedNode(PREFIX_OWL + 'imports')

src/property-template.ts

@@ -1,6 +1,6 @@
 import { Literal, NamedNode, BlankNode, Quad, DataFactory } from 'n3'
 import { Term } from '@rdfjs/types'
-import { PREFIX_DASH, PREFIX_RDF, PREFIX_SHACL, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS, SHAPES_GRAPH } from './constants'
+import { PREFIX_DASH, PREFIX_OA, PREFIX_RDF, PREFIX_SHACL, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS, SHAPES_GRAPH } from './constants'
 import { Config } from './config'
 import { findLabel, removePrefixes } from './util'
 
@@ -22,6 +22,7 @@ const mappers: Record<string, (template: ShaclPropertyTemplate, term: Term) => v
     [`${PREFIX_SHACL}pattern`]:      (template, term) => { template.pattern = term.value },
     [`${PREFIX_SHACL}order`]:        (template, term) => { template.order = parseInt(term.value) },
     [`${PREFIX_DASH}singleLine`]:    (template, term) => { template.singleLine = term.value === 'true' },
+    [`${PREFIX_OA}styleClass`]:      (template, term) => { template.cssClass = term.value },
     [`${PREFIX_SHACL}and`]:          (template, term) => { template.shaclAnd = term.value },
     [`${PREFIX_SHACL}in`]:           (template, term) => { template.shaclIn = term.value },
     // sh:datatype might be undefined, but sh:languageIn defined. this is undesired. the spec says, that strings without a lang tag are not valid if sh:languageIn is set. but the shacl validator accepts these as valid. to prevent this, we just set the datatype here to 'langString'.
@@ -63,6 +64,7 @@ export class ShaclPropertyTemplate  {
     minExclusive: number | undefined
     maxExclusive: number | undefined
     singleLine: boolean | undefined
+    cssClass: string | undefined
     defaultValue: Term | undefined
     pattern: string | undefined
     order: number | undefined

src/property.ts

@@ -22,6 +22,9 @@ export class ShaclProperty extends HTMLElement {
         if (this.template.order !== undefined) {
             this.style.order = `${this.template.order}`
         }
+        if (this.template.cssClass) {
+            this.classList.add(this.template.cssClass)
+        }
 
         if (config.editMode) {
             this.addButton = document.createElement('a')