define a CSS class from the shacl form

This allow to give a particular CSS class to a specific element of the form
by defining a new cssClass in the shacl file.

Author: thhck

src/property-template.ts

@@ -6,6 +6,7 @@ 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 },
@@ -50,6 +51,7 @@ export class ShaclPropertyTemplate  {
     label = ''
     nodeId: NamedNode | BlankNode
     name: Literal | undefined
+    cssClass: string | undefined
     description: Literal | undefined
     path: string | undefined
     node: NamedNode | undefined

src/property.ts

@@ -28,6 +28,8 @@ export class ShaclProperty extends HTMLElement {
             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')