using https://www.w3.org/TR/annotation-vocab/#styleclass

Author: s-tittel

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,12 +1,11 @@
 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'
 
 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}cssClass`]:         (template, term) => { template.cssClass = term.value },
     [`${PREFIX_SHACL}description`]:  (template, term) => { const literal = term as Literal; if (!template.description || literal.language === template.config.attributes.language) { template.description = literal } },
     [`${PREFIX_SHACL}path`]:         (template, term) => { template.path = term.value },
     [`${PREFIX_SHACL}node`]:         (template, term) => { template.node = term as NamedNode },
@@ -23,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'.
@@ -51,7 +51,6 @@ export class ShaclPropertyTemplate  {
     label = ''
     nodeId: NamedNode | BlankNode
     name: Literal | undefined
-    cssClass: string | undefined
     description: Literal | undefined
     path: string | undefined
     node: NamedNode | undefined
@@ -65,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,14 +22,15 @@ 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')
             this.addButton.innerText = this.template.label
             this.addButton.title = 'Add ' + this.template.label
             this.addButton.classList.add('control-button', 'add-button')
-            if (this.template.cssClass)
-              this.addButton.classList.add(this.template.cssClass);
             this.addButton.addEventListener('click', _ => {
                 const instance = this.addPropertyInstance()
                 instance.classList.add('fadeIn')