@ulb-darmstadt/shacl-form 1.6.2 → 1.6.4

package/src/themes/default.ts

@@ -0,0 +1,240 @@
+import { Term } from '@rdfjs/types'
+import { ShaclPropertyTemplate } from "../property-template"
+import { Editor, InputListEntry, Theme } from "../theme"
+import { PREFIX_XSD } from '../constants'
+import { Literal } from 'n3'
+import css from './default.css?raw'
+
+export class DefaultTheme extends Theme {
+    idCtr = 0
+
+    constructor(overiddenCss?: string) {
+        super(overiddenCss ? overiddenCss : css)
+    }
+
+    createDefaultTemplate(label: string, value: Term | null, required: boolean, editor: Editor, template?: ShaclPropertyTemplate): HTMLElement {
+        editor.id = `e${this.idCtr++}`
+        editor.classList.add('editor')
+        if (template?.datatype) {
+            // store datatype on editor, this is used for RDF serialization
+            editor['shaclDatatype'] = template.datatype
+        }
+        if (template?.minCount !== undefined) {
+            editor.dataset.minCount = String(template.minCount)
+        }
+        if (template?.class) {
+            editor.dataset.class = template.class.value
+        }
+        if (template?.nodeKind) {
+            editor.dataset.nodeKind = template.nodeKind.value
+        }
+        if (template?.hasValue) {
+            editor.disabled = true
+        }
+        editor.value = value?.value || template?.defaultValue?.value || ''
+    
+        const labelElem = document.createElement('label')
+        labelElem.htmlFor = editor.id
+        labelElem.innerText = label
+        if (template?.description) {
+            labelElem.setAttribute('title', template.description.value)
+        }
+    
+        const placeholder = template?.description ? template.description.value : template?.pattern ? template.pattern : null
+        if (placeholder) {
+            editor.setAttribute('placeholder', placeholder)
+        }
+        if (required) {
+            editor.setAttribute('required', 'true')
+            labelElem.classList.add('required')
+        }
+    
+        const result = document.createElement('div')
+        result.appendChild(labelElem)
+        result.appendChild(editor)
+        return result
+    }
+
+    createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor: Editor = document.createElement('input')
+        if (template.datatype?.value  === PREFIX_XSD + 'dateTime') {
+            editor.type = 'datetime-local'
+            // this enables seconds in dateTime input
+            editor.setAttribute('step', '1')
+        }
+        else {
+            editor.type = 'date'
+        }
+        editor.classList.add('pr-0')
+        const result = this.createDefaultTemplate(label, null, required, editor, template)
+        if (value) {
+            try {
+                let isoDate = new Date(value.value).toISOString()
+                if (template.datatype?.value  === PREFIX_XSD + 'dateTime') {
+                    isoDate = isoDate.slice(0, 19)
+                } else {
+                    isoDate = isoDate.slice(0, 10)
+                }
+                editor.value = isoDate
+            } catch(ex) {
+                console.error(ex, value)
+            }
+        }
+        return result
+    }
+
+    createTextEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        let editor
+        if (template.singleLine === false) {
+            editor = document.createElement('textarea')
+            editor.rows = 5
+        }
+        else {
+            editor = document.createElement('input')
+            editor.type = 'text'
+            if (template.pattern) {
+                editor.pattern = template.pattern
+            }
+        }
+    
+        if (template.minLength) {
+            editor.minLength = template.minLength
+        }
+        if (template.maxLength) {
+            editor.maxLength = template.maxLength
+        }
+        return this.createDefaultTemplate(label, value, required, editor, template)
+    }
+
+    createLangStringEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const result = this.createTextEditor(label, value, required, template)
+        const editor = result.querySelector(':scope .editor') as Editor
+        let langChooser: HTMLSelectElement | HTMLInputElement
+        if (template.languageIn?.length) {
+            langChooser = document.createElement('select')
+            for (const lang of template.languageIn) {
+                const option = document.createElement('option')
+                option.innerText = lang.value
+                langChooser.appendChild(option)
+            }
+        } else {
+            langChooser = document.createElement('input')
+            langChooser.maxLength = 5 // e.g. en-US
+            langChooser.placeholder = 'lang?'
+        }
+        langChooser.title = 'Language of the text'
+        langChooser.classList.add('lang-chooser')
+        // if lang chooser changes, fire a change event on the text input instead. this is for shacl validation handling.
+        langChooser.addEventListener('change', (ev) => {
+            ev.stopPropagation();
+            if (editor) {
+                editor.dataset.lang = langChooser.value
+                editor.dispatchEvent(new Event('change', { bubbles: true }))
+            }
+        })
+        if (value instanceof Literal) {
+            langChooser.value = value.language
+        }
+        editor.dataset.lang = langChooser.value
+        editor.after(langChooser)
+        return result
+    }
+
+    createBooleanEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = document.createElement('input')
+        editor.type = 'checkbox'
+        editor.classList.add('ml-0')
+    
+        const result = this.createDefaultTemplate(label, null, required, editor, template)
+    
+        // 'required' on checkboxes forces the user to tick the checkbox, which is not what we want here
+        editor.removeAttribute('required')
+        result.querySelector(':scope label')?.classList.remove('required')
+        if (value instanceof Literal) {
+            editor.checked = value.value === 'true'
+        }
+        return result
+    }
+
+    createFileEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = document.createElement('input')
+        editor.type = 'file'
+        editor.addEventListener('change', (e) => {
+            if (editor.files?.length) {
+                e.stopPropagation()
+                const reader = new FileReader()
+                reader.readAsDataURL(editor.files[0])
+                reader.onload = () => {
+                    (editor as Editor)['binaryData'] = btoa(reader.result as string)
+                    editor.parentElement?.dispatchEvent(new Event('change', { bubbles: true }))
+                }
+            } else {
+                (editor as Editor)['binaryData'] = undefined               
+            }
+        })
+        return this.createDefaultTemplate(label, value, required, editor, template)
+    }
+
+    createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = document.createElement('input')
+        editor.type = 'number'
+        editor.classList.add('pr-0')
+        const min = template.minInclusive !== undefined ? template.minInclusive : template.minExclusive !== undefined ? template.minExclusive + 1 : undefined
+        const max = template.maxInclusive !== undefined ? template.maxInclusive : template.maxExclusive !== undefined ? template.maxExclusive - 1 : undefined
+        if (min !== undefined) {
+            editor.min = String(min)
+        }
+        if (max !== undefined) {
+            editor.max = String(max)
+        }
+        if (template.datatype?.value !== PREFIX_XSD + 'integer') {
+            editor.step = '0.1'
+        }
+        return this.createDefaultTemplate(label, value, required, editor, template)
+    }
+
+    createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
+        const editor = document.createElement('select')
+        const result = this.createDefaultTemplate(label, null, required, editor, template)
+        let addEmptyOption = true
+    
+        for (const item of listEntries) {
+            const option = document.createElement('option')
+            const itemValue = (typeof item.value === 'string') ? item.value : item.value.value
+            option.innerHTML = item.label ? item.label : itemValue
+            option.value = itemValue
+            if (item.indent) {
+                for (let i = 0; i < item.indent; i++) {
+                    option.innerHTML = '&#160;&#160;' + option.innerHTML
+                }
+            }
+            if (value && value.value === itemValue) {
+                option.selected = true
+            }
+            if (itemValue === '') {
+                addEmptyOption = false
+            }
+            editor.appendChild(option)
+        }
+        if (addEmptyOption) {
+            // add an empty element
+            const emptyOption = document.createElement('option')
+            emptyOption.value = ''
+            if (!value) {
+                emptyOption.selected = true
+            }
+            editor.prepend(emptyOption)
+        }
+        if (value) {
+            editor.value = value.value
+        }
+        return result
+    }
+
+    createButton(label: string, primary: boolean): HTMLElement {
+        const button = document.createElement('button')
+        button.type = 'button'
+        button.innerHTML = label
+        return button
+    }
+}

package/src/themes/material.css

@@ -0,0 +1,14 @@
+:host {
+    --mdui-color-primary-light: var(--mdui-color-primary-light);
+    --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

@@ -0,0 +1,240 @@
+import { ShaclPropertyTemplate } from '../property-template'
+import { Term } from '@rdfjs/types'
+import { Button, TextField, Select, MenuItem, Checkbox } from 'mdui'
+import { Theme } from '../theme'
+import { InputListEntry, Editor } from '../theme'
+import { Literal } from 'n3'
+import css from './material.css?raw'
+import { PREFIX_XSD } from '../constants'
+
+export class MaterialTheme extends Theme {
+    constructor() {
+        super(css)
+    }
+
+    createDefaultTemplate(label: string, value: Term | null, required: boolean, editor: Editor, template?: ShaclPropertyTemplate): HTMLElement {
+        editor.classList.add('editor')
+        if (template?.datatype) {
+            // store datatype on editor, this is used for RDF serialization
+            editor['shaclDatatype'] = template.datatype
+        }
+        if (template?.minCount !== undefined) {
+            editor.dataset.minCount = String(template.minCount)
+        }
+        if (template?.class) {
+            editor.dataset.class = template.class.value
+        }
+        if (template?.nodeKind) {
+            editor.dataset.nodeKind = template.nodeKind.value
+        }
+        if (template?.hasValue) {
+            editor.disabled = true
+        }
+        editor.value = value?.value || template?.defaultValue?.value || ''
+    
+        const placeholder = template?.description ? template.description.value : template?.pattern ? template.pattern : null
+        if (placeholder) {
+            editor.setAttribute('placeholder', placeholder)
+        }
+        if (required) {
+            editor.setAttribute('required', 'true')
+        }
+    
+        const result = document.createElement('div')
+        if (label) {
+            const labelElem = document.createElement('label')
+            labelElem.htmlFor = editor.id
+            labelElem.innerText = label
+            result.appendChild(labelElem)
+        }
+        result.appendChild(editor)
+        return result
+    }
+    
+    createTextEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = new TextField()
+        editor.variant = 'outlined'
+        editor.label = label
+        editor.type = 'text'
+        if (template.description) {
+            editor.helper = template.description.value
+        }
+        if (template.singleLine === false) {
+            editor.rows = 5
+        }
+        if (template.pattern) {
+            editor.pattern = template.pattern
+        }
+        return this.createDefaultTemplate('', value, required, editor, template)
+    }
+
+    createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = new TextField()
+        editor.variant = 'outlined'
+        editor.type = 'number'
+        editor.label = label
+        editor.helper = template.description ?.value || ''
+        const min = template.minInclusive !== undefined ? template.minInclusive : template.minExclusive !== undefined ? template.minExclusive + 1 : undefined
+        const max = template.maxInclusive !== undefined ? template.maxInclusive : template.maxExclusive !== undefined ? template.maxExclusive - 1 : undefined
+        if (min !== undefined) {
+            editor.setAttribute('min', String(min))
+        }
+        if (max !== undefined) {
+            editor.setAttribute('max', String(max))
+        }
+        if (template.datatype?.value !== PREFIX_XSD + 'integer') {
+            editor.setAttribute('step', '0.1')
+        }
+        return this.createDefaultTemplate('', value, required, editor, template)
+    }
+
+    createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
+        const editor = new Select()
+        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
+    
+        for (const item of listEntries) {
+            const option = new MenuItem()
+            const itemValue = (typeof item.value === 'string') ? item.value : item.value.value
+            const itemLabel = item.label ? item.label : itemValue
+            option.value = itemValue
+            option.textContent = itemLabel || itemValue
+            // if (value && value.value === itemValue) {
+            //     option.selected = true
+            // }
+            if (item.indent) {
+                for (let i = 0; i < item.indent; i++) {
+                    option.innerHTML = '&#160;&#160;' + option.innerHTML
+                }
+            }
+            if (itemValue === '') {
+                addEmptyOption = false
+                option.ariaLabel = 'blank'
+            }
+            editor.appendChild(option)
+        }
+        if (addEmptyOption) {
+            // add an empty element
+            const empty = new MenuItem()
+            empty.ariaLabel = 'blank'
+            editor.prepend(empty)
+        }
+        if (value) {
+            editor.value = value.value
+        }
+        return result
+    }
+
+    createBooleanEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = new Checkbox()
+        const result = this.createDefaultTemplate('', value, required, editor, template)
+        // 'required' on checkboxes forces the user to tick the checkbox, which is not what we want here
+        editor.removeAttribute('required')
+        if (value instanceof Literal) {
+            editor.checked = value.value === 'true'
+        }
+        editor.innerText = label
+        return result
+    }
+
+    createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = new TextField()
+        editor.variant = 'outlined'
+        editor.helper = template?.description?.value || template?.label || ''
+        if (template.datatype?.value  === PREFIX_XSD + 'dateTime') {
+            editor.type = 'datetime-local'
+            // this enables seconds in dateTime input
+            editor.setAttribute('step', '1')
+        }
+        else {
+            editor.type = 'date'
+        }
+        editor.classList.add('pr-0')
+        const result = this.createDefaultTemplate('', null, required, editor, template)
+        if (value) {
+            try {
+                let isoDate = new Date(value.value).toISOString()
+                if (template.datatype?.value  === PREFIX_XSD + 'dateTime') {
+                    isoDate = isoDate.slice(0, 19)
+                } else {
+                    isoDate = isoDate.slice(0, 10)
+                }
+                editor.value = isoDate
+            } catch(ex) {
+                console.error(ex, value)
+            }
+        }
+        return result
+    }
+
+    createLangStringEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const result = this.createTextEditor(label, value, required, template)
+        const editor = result.querySelector(':scope .editor') as Editor
+        let langChooser: HTMLSelectElement | HTMLInputElement
+        if (template.languageIn?.length) {
+            langChooser = document.createElement('select')
+            for (const lang of template.languageIn) {
+                const option = document.createElement('option')
+                option.innerText = lang.value
+                langChooser.appendChild(option)
+            }
+        } else {
+            langChooser = document.createElement('input')
+            langChooser.maxLength = 5 // e.g. en-US
+            langChooser.placeholder = 'lang?'
+        }
+        langChooser.title = 'Language of the text'
+        langChooser.classList.add('lang-chooser')
+        // if lang chooser changes, fire a change event on the text input instead. this is for shacl validation handling.
+        langChooser.addEventListener('change', (ev) => {
+            ev.stopPropagation();
+            if (editor) {
+                editor.dataset.lang = langChooser.value
+                editor.dispatchEvent(new Event('change', { bubbles: true }))
+            }
+        })
+        if (value instanceof Literal) {
+            langChooser.value = value.language
+        }
+        editor.dataset.lang = langChooser.value
+        editor.after(langChooser)
+        return result
+    }
+
+    createFileEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
+        const editor = document.createElement('input')
+        editor.type = 'file'
+        editor.addEventListener('change', (e) => {
+            if (editor.files?.length) {
+                e.stopPropagation()
+                const reader = new FileReader()
+                reader.readAsDataURL(editor.files[0])
+                reader.onload = () => {
+                    (editor as Editor)['binaryData'] = btoa(reader.result as string)
+                    editor.parentElement?.dispatchEvent(new Event('change', { bubbles: true }))
+                }
+            } else {
+                (editor as Editor)['binaryData'] = undefined               
+            }
+        })
+        return this.createDefaultTemplate(label, value, required, editor, template)
+    }
+
+    createButton(label: string, primary: boolean): HTMLElement {
+        let button
+        if (primary) {
+            button = new Button()
+            button.classList.add('primary')
+        } else {
+            button = new Button()
+            button.classList.add('secondary')
+        }
+        button.innerHTML = label
+        return button
+    }
+}

package/src/util.ts

@@ -0,0 +1,134 @@
+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'
+import { ShaclPropertyTemplate } from './property-template'
+import { ShaclNode } from './node'
+
+export function findObjectValueByPredicate(quads: Quad[], predicate: string, prefix: string = PREFIX_SHACL, languages?: string[]): string {
+    let result = ''
+    const object = findObjectByPredicate(quads, predicate, prefix, languages)
+    if (object) {
+        result = object.value
+    }
+    return result
+}
+
+export function findObjectByPredicate(quads: Quad[], predicate: string, prefix: string = PREFIX_SHACL, languages?: string[]): Term | undefined {
+    let candidate: Term | undefined
+    const prefixedPredicate = prefix + predicate
+
+    if (languages?.length) {
+        for (const language of languages) {
+            for (const quad of quads) {
+                if (quad.predicate.value === prefixedPredicate) {
+                    if (quad.object.id.endsWith(`@${language}`)) {
+                        return quad.object
+                    }
+                    else if (quad.object.id.indexOf('@') < 0) {
+                        candidate = quad.object
+                    } else if (!candidate) {
+                        candidate = quad.object
+                    }
+                }
+            }
+        }
+    } else {
+        for (const quad of quads) {
+            if (quad.predicate.value === prefixedPredicate) {
+                return quad.object
+            }
+        }
+    }
+    return candidate
+}
+
+export function focusFirstInputElement(context: HTMLElement) {
+    (context.querySelector('input,select,textarea') as HTMLElement)?.focus()
+}
+
+export function findLabel(quads: Quad[], languages: string[]): string {
+    let label = findObjectValueByPredicate(quads, 'prefLabel', PREFIX_SKOS, languages)
+    if (label) {
+        return label
+    }
+    return findObjectValueByPredicate(quads, 'label', PREFIX_RDFS, languages)
+}
+
+export function createInputListEntries(subjects: Term[], shapesGraph: Store, languages: string[], indent?: number): InputListEntry[] {
+    const entries: InputListEntry[] = []
+    for (const subject of subjects) {
+        entries.push({ value: subject, label: findLabel(shapesGraph.getQuads(subject, null, null, null), languages), indent: indent })
+    }
+    return entries
+}
+
+export function removePrefixes(id: string, prefixes: Prefixes): string {
+    for (const key in prefixes) {
+        // need to ignore type check. 'prefix' is a string and not a NamedNode<string> (seems to be a bug in n3 typings)
+        // @ts-ignore
+        id = id.replace(prefixes[key], '')
+    }
+    return id
+}
+
+function findClassInstancesFromOwlImports(clazz: NamedNode, context: ShaclNode | ShaclPropertyTemplate, shapesGraph: Store, instances: Term[], alreadyCheckedImports = new Set<string>()) {
+    for (const owlImport of context.owlImports) {
+        if (!alreadyCheckedImports.has(owlImport.id)) {
+            alreadyCheckedImports.add(owlImport.id)
+            instances.push(...shapesGraph.getSubjects(RDF_PREDICATE_TYPE, clazz, owlImport))
+        }
+    }
+    if (context.parent) {
+        findClassInstancesFromOwlImports(clazz, context.parent, shapesGraph, instances, alreadyCheckedImports)
+    }
+}
+
+export function findInstancesOf(clazz: NamedNode, template: ShaclPropertyTemplate, indent = 0): InputListEntry[] {
+    // find instances in the shapes graph
+    const instances: Term[] = template.config.shapesGraph.getSubjects(RDF_PREDICATE_TYPE, clazz, SHAPES_GRAPH)
+    // find instances in the data graph
+    instances.push(...template.config.dataGraph.getSubjects(RDF_PREDICATE_TYPE, clazz, null))
+    // find instances in imported taxonomies
+    findClassInstancesFromOwlImports(clazz, template, template.config.shapesGraph, instances)
+    
+    const entries = createInputListEntries(instances, template.config.shapesGraph, template.config.languages, indent)
+    for (const subClass of template.config.shapesGraph.getSubjects(RDFS_PREDICATE_SUBCLASS_OF, clazz, null)) {
+        entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
+    }
+    if (template.config.shapesGraph.getQuads(clazz, RDF_PREDICATE_TYPE, OWL_OBJECT_NAMED_INDIVIDUAL, null).length > 0) {
+        entries.push(...createInputListEntries([ clazz ], template.config.shapesGraph, template.config.languages, indent))
+        for (const subClass of template.config.shapesGraph.getSubjects(SKOS_PREDICATE_BROADER, clazz, null)) {
+            entries.push(...findInstancesOf(subClass as NamedNode, template, indent + 1))
+        }
+    }
+    return entries
+}
+
+export function isURL(input: string): boolean {
+    let url: URL
+    try {
+        url = new URL(input)
+    } catch (_) {
+        return false
+    }
+    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
+}