@ulb-darmstadt/shacl-form 1.10.4 → 2.0.0-rc2

package/src/serialize.ts

@@ -1,96 +0,0 @@
-import { DataFactory, NamedNode, Writer, Quad, Literal, Prefixes } from 'n3'
-import { PREFIX_XSD, RDF_PREDICATE_TYPE, PREFIX_SHACL } from './constants'
-import { Editor } from './theme'
-import { NodeObject } from 'jsonld'
-
-export function serialize(quads: Quad[], format: string, prefixes?: Prefixes): string {
-    if (format === 'application/ld+json') {
-        return serializeJsonld(quads)
-    } else {
-        const writer = new Writer({ format: format, prefixes: prefixes })
-        writer.addQuads(quads)
-        let serialized = ''
-        writer.end((error, result) => {
-            if (error) {
-                console.error(error)
-            }
-            serialized = result
-        })
-        return serialized
-    }
-}
-
-function serializeJsonld(quads: Quad[]): string {
-    const triples: NodeObject[] = []
-    for (const quad of quads) {
-        const triple: NodeObject = { '@id': quad.subject.id }
-  
-        if (quad.predicate === RDF_PREDICATE_TYPE) {
-          triple['@type'] = quad.object.id
-        } else {
-            let object: string | {} = quad.object.value
-            if (quad.object instanceof Literal) {
-                if (quad.object.language) {
-                    object = { '@language': quad.object.language, '@value': quad.object.value }
-                } else if (quad.object.datatype && quad.object.datatype.value !== `${PREFIX_XSD}#string`) {
-                    object = { '@type': quad.object.datatype.value, '@value': quad.object.value }
-                }
-            } else {
-                object = { '@id': quad.object.id }
-            }
-            triple[quad.predicate.value] = object
-        }
-        triples.push(triple)
-    }
-    return JSON.stringify(triples)
-}
-
-export function toRDF(editor: Editor): NamedNode | Literal | undefined {
-    let languageOrDatatype: NamedNode<string> | string | undefined = editor.shaclDatatype
-    let value: number | string = editor.value
-    if (value) {
-        if (value.startsWith('<') && value.endsWith('>') && value.indexOf(':') > -1) {
-            return DataFactory.namedNode(value.substring(1, value.length - 1))
-        } else if (editor.dataset.class || editor.dataset.nodeKind === PREFIX_SHACL + 'IRI') {
-            return DataFactory.namedNode(value)
-        } else if (editor.dataset.link) {
-            return JSON.parse(editor.dataset.link)
-        } else {
-            if (editor.dataset.lang) {
-                languageOrDatatype = editor.dataset.lang
-            }
-            else if (editor['type'] === 'number') {
-                value = parseFloat(value)
-            }
-            else if (editor['type'] === 'file' && editor['binaryData']) {
-                value = editor['binaryData']
-            }
-            else if (editor['type'] === 'datetime-local') {
-                // if seconds in value are 0, the input field omits them which is then not a valid xsd:dateTime
-                value = new Date(value).toISOString().slice(0, 19)
-            }
-            // check if value is a typed rdf literal or langString
-            if (!languageOrDatatype && typeof value === 'string') {
-                // check for typed rdf literal
-                let tokens = value.split('^^')
-                if (tokens.length === 2 && tokens[0].startsWith('"') && tokens[0].endsWith('"') && tokens[1].split(':').length === 2) {
-                    value = tokens[0].substring(1, tokens[0].length - 1)
-                    languageOrDatatype = DataFactory.namedNode(tokens[1])
-                } else {
-                    // check for langString
-                    tokens = value.split('@')
-                    if (tokens.length === 2 && tokens[0].startsWith('"') && tokens[0].endsWith('"')) {
-                        value = tokens[0].substring(1, tokens[0].length - 1)
-                        languageOrDatatype = tokens[1]
-                    }
-                }
-            }
-            return DataFactory.literal(value, languageOrDatatype)
-        }
-    } else if (editor['type'] === 'checkbox' || editor.getAttribute('type') === 'checkbox') {
-        // emit boolean 'false' only when required
-        if (editor['checked'] || parseInt(editor.dataset.minCount || '0') > 0) {
-            return DataFactory.literal(editor['checked'] ? 'true' : 'false', languageOrDatatype)
-        }
-    }
-}

package/src/shacl-engine.d.ts

@@ -1,2 +0,0 @@
-declare module 'shacl-engine'
-declare module '@rdfjs/data-model'

package/src/styles.css

@@ -1,49 +0,0 @@
-form { display:block; --label-width: 8em; --caret-size: 10px; }
-form.mode-edit { padding-left: 1em;  }
-form, form * { box-sizing: border-box; }
-shacl-node, .collapsible::part(content) { display: flex; flex-direction: column; width: 100%; position: relative; }
-shacl-node .remove-button { margin-left: 4px; margin-top: 1px; }
-shacl-node .add-button { color: #555; background-color: transparent; margin: 4px 24px 0 0; border: 0; }
-shacl-node .add-button:hover { color:#222; }
-shacl-node .add-button:focus { box-shadow: none; }
-shacl-node h1 { font-size: 16px; border-bottom: 1px solid #AAA; margin-top: 4px; color: #555; }
-shacl-property:not(:has(>.collapsible)), shacl-property>.collapsible::part(content) { display: flex; flex-direction: column; align-items: end; position: relative; }
-shacl-property:not(.may-add) > .add-button { display: none; }
-shacl-property:not(.may-remove) > .property-instance > .remove-button:not(.persistent) { visibility: hidden; }
-shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.persistent) { visibility: hidden; }
-.mode-view .shacl-group:not(:has(shacl-property)) { display: none; }
-.property-instance, .shacl-or-constraint { display: flex; align-items: flex-start; padding: 4px 0; width: 100%; position: relative; }
-.shacl-or-constraint > div { display: flex; flex-grow: 1; align-items: flex-start; }
-.shacl-or-constraint label { display: inline-block; word-break: break-word; width: var(--label-width); line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
-.property-instance label[title] { cursor: help; text-decoration: underline dashed #AAA; }
-.property-instance.linked label:after, label.linked:after { content: '\1F517'; font-size: 0.6em; padding-left: 6px; }
-.mode-edit .property-instance label.required::before { color: red; content: '\2736'; font-size: 0.6rem; position: absolute; left: -1.4em; top: 0.15rem; }
-.property-instance.valid::before { content: ''; position: absolute; left: calc(var(--label-width) - 1em); top:0.5em; width: 0.9em; height: 0.9em; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" fill="green" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z"/></svg>'); }
-.editor:not([type='checkbox']) { flex-grow: 1; }
-textarea.editor { resize: vertical; }
-.lang-chooser { border: 0; background-color: #e9e9ed; padding: 2px 4px; align-self: flex-start; }
-.validation-error { position: absolute; left: calc(var(--label-width) - 1em); color: red; cursor: help; }
-.validation-error::before { content: '\26a0' }
-.validation-error.node { left: -1em; }
-.invalid > .editor { border-color: red !important; }
-.ml-0  { margin-left: 0 !important; }
-.pr-0  { padding-right: 0 !important; }
-.mode-view .property-instance:not(:first-child) > label { visibility: hidden; }
-.mode-view .property-instance label { width: var(--label-width); }
-
-.d-flex { display: flex; }
-.lang { opacity: 0.65; font-size: 0.6em; }
-a, a:visited { color: inherit; }
-
-.fadeIn, .fadeOut { animation: fadeIn 0.2s ease-out; }
-.fadeOut { animation-direction: reverse; animation-timing-function: ease-out;}
-@keyframes fadeIn {
-    0% { opacity: 0; transform: scaleY(0.8); }
-    100% { opacity: 1; transform: scaleY(1); }
-}
-.collapsible::part(label) { font-weight: 600; }
-.collapsible > .property-instance:nth-child(even) { background-color: #F8F8F8; }
-.collapsible > .property-instance > shacl-node > h1 { display: none; }
-.ref-link { cursor: pointer; }
-.ref-link:hover { text-decoration: underline; }
-.node-id-display { color: #999; font-size: 11px; }

package/src/theme.ts

@@ -1,132 +0,0 @@
-import { Literal, NamedNode } from 'n3'
-import { Term } from '@rdfjs/types'
-import { PREFIX_XSD, PREFIX_RDF } from './constants'
-import { createInputListEntries, findInstancesOf, findLabel, isURL } from './util'
-import { ShaclPropertyTemplate } from './property-template'
-import css from './styles.css?raw'
-
-export type Editor = HTMLElement & { value: string, type?: string, shaclDatatype?: NamedNode<string>, binaryData?: string, checked?: boolean, disabled?: boolean }
-export type InputListEntry = { value: Term | string, label?: string, children?: InputListEntry[] }
-
-export abstract class Theme {
-    stylesheet: CSSStyleSheet
-
-    constructor(styles?: string) {
-        let aggregatedStyles = css
-        if (styles) {
-            aggregatedStyles += '\n' + styles
-        }
-        this.stylesheet = new CSSStyleSheet()
-        this.stylesheet.replaceSync(aggregatedStyles)
-    }
-
-    apply(_: HTMLFormElement) {
-        // NOP
-    }
-
-    createViewer(label: string, value: Term, template: ShaclPropertyTemplate): HTMLElement {
-        const viewer = document.createElement('div')
-        const labelElem = document.createElement('label')
-        labelElem.innerHTML = label + ':'
-        if (template.description) {
-            labelElem.setAttribute('title', template.description.value)
-        }
-        viewer.appendChild(labelElem)
-        let name = value.value
-        let lang: HTMLElement | null = null
-        if (value instanceof NamedNode) {
-            const quads = template.config.store.getQuads(name, null, null, null)
-            if (quads.length) {
-                const s = findLabel(quads, template.config.languages)
-                if (s) {
-                    name = s
-                }
-            }
-        } else if (value instanceof Literal) {
-            if (value.language) {
-                lang = document.createElement('span')
-                lang.classList.add('lang')
-                lang.innerText = `@${value.language}`
-            } else if (value.datatype.value === `${PREFIX_XSD}date`) {
-                name = new Date(Date.parse(value.value)).toDateString()
-            } else if (value.datatype.value === `${PREFIX_XSD}dateTime`) {
-                name = new Date(Date.parse(value.value)).toLocaleString()
-            }
-        }
-        let valueElem: HTMLElement
-        if (isURL(value.value)) {
-            valueElem = document.createElement('a')
-            valueElem.setAttribute('href', value.value)
-        } else {
-            valueElem = document.createElement('div')
-        }
-        valueElem.classList.add('d-flex')
-        valueElem.innerText = name
-        if (lang) {
-            valueElem.appendChild(lang)
-        }
-        viewer.appendChild(valueElem)
-        return viewer
-    }
-    
-    abstract createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement
-    abstract createLangStringEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
-    abstract createTextEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
-    abstract createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
-    abstract createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
-    abstract createBooleanEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
-    abstract createFileEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement
-    abstract createButton(label: string, primary: boolean): HTMLElement
-}
-
-export function fieldFactory(template: ShaclPropertyTemplate, value: Term | null, editable: boolean): HTMLElement {
-    if (editable) {
-        const required = template.minCount !== undefined && template.minCount > 0
-        // if we have a class, find the instances and display them in a list
-        if (template.class) {
-            return template.config.theme.createListEditor(template.label, value, required, findInstancesOf(template.class, template), template)
-        }
-
-        // check if it is a list
-        if (template.shaclIn) {
-            const list = template.config.lists[template.shaclIn]
-            if (list?.length) {
-                const listEntries = createInputListEntries(list, template.config.store, template.config.languages)
-                return template.config.theme.createListEditor(template.label, value, required, listEntries, template)
-            }
-            else {
-                console.error('list not found:', template.shaclIn, 'existing lists:', template.config.lists)
-            }
-        }
-
-        // check if it is a langstring
-        if  (template.datatype?.value === `${PREFIX_RDF}langString` || template.languageIn?.length) {
-            return template.config.theme.createLangStringEditor(template.label, value, required, template)
-        }
-
-        switch (template.datatype?.value.replace(PREFIX_XSD, '')) {
-            case 'integer':
-            case 'float':
-            case 'double':
-            case 'decimal':
-                return template.config.theme.createNumberEditor(template.label, value, required, template)
-            case 'date':
-            case 'dateTime':
-                return template.config.theme.createDateEditor(template.label, value, required, template)
-            case 'boolean':
-                return template.config.theme.createBooleanEditor(template.label, value, required, template)
-            case 'base64Binary':
-                return template.config.theme.createFileEditor(template.label, value, required, template)
-            }
-
-        // nothing found (or datatype is 'string'), fallback to 'text'
-        return template.config.theme.createTextEditor(template.label, value, required, template)
-    } else {
-        if (value) {
-            return template.config.theme.createViewer(template.label, value, template)
-        }
-        const fallback = document.createElement('div')
-        fallback.innerHTML = 'No value'
-        return fallback
-    }
-}

package/src/themes/bootstrap.css

@@ -1,6 +0,0 @@
-form.mode-edit { --label-width: 0em; }
-.lang-chooser { right: 24px; font-size: 0.8em; }
-.property-instance[data-description]::after { content: attr(data-description); position: absolute; bottom: -12px; left: 13px; font-size: 12px; opacity: 0.7;}
-.property-instance { margin-bottom:14px; }
-.form-floating[data-description] { margin-bottom: 28px; }
-.remove-button { padding: 6px; }

package/src/themes/bootstrap.ts

@@ -1,44 +0,0 @@
-import { DefaultTheme } from './default'
-import { Term } from '@rdfjs/types'
-import { ShaclPropertyTemplate } from '../property-template'
-import { Editor } from '../theme'
-import bootstrap from 'bootstrap/dist/css/bootstrap.min.css?raw'
-import css from './bootstrap.css?raw'
-
-export class BootstrapTheme extends DefaultTheme {
-    constructor() {
-        super(bootstrap + '\n' + css)
-    }
-
-    apply(root: HTMLFormElement): void {
-        super.apply(root)
-        root.dataset.bsTheme = 'light'
-    }
-
-    createDefaultTemplate(label: string, value: Term | null, required: boolean, editor: Editor, template?: ShaclPropertyTemplate | undefined): HTMLElement {
-        const result = super.createDefaultTemplate(label, value, required, editor, template)
-        if (editor.type !== 'checkbox') {
-            result.classList.add('form-floating')
-            if (editor.tagName === 'SELECT') {
-                editor.classList.add('form-select')
-            } else {
-                editor.classList.add('form-control')
-            }
-        }
-        const labelElem = result.querySelector('label')
-        labelElem?.classList.add('form-label')
-        if (labelElem?.title) {
-            result.dataset.description = labelElem.title
-            labelElem.removeAttribute('title')
-        }
-        
-        result.prepend(editor)
-        return result
-    }
-
-    createButton(label: string, primary: boolean): HTMLElement {
-        const button = super.createButton(label, primary)
-        button.classList.add('btn', primary ? 'btn-primary' : 'btn-outline-secondary')
-        return button
-    }
-}

package/src/themes/default.css

@@ -1,4 +0,0 @@
-.editor:not([type='checkbox']) { border: 1px solid #DDD; }
-.property-instance label { display: inline-flex; word-break: break-word; line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
-.property-instance:not(:first-child) > label:not(.persistent) { visibility: hidden; max-height: 0; }
-.mode-edit .property-instance label { width: var(--label-width); }

package/src/themes/default.ts

@@ -1,258 +0,0 @@
-import { Term } from '@rdfjs/types'
-import { ShaclPropertyTemplate } from "../property-template"
-import { Editor, InputListEntry, Theme } from "../theme"
-import { PREFIX_SHACL, PREFIX_XSD } from '../constants'
-import { Literal, NamedNode } from 'n3'
-import { Term as N3Term }  from 'n3'
-import css from './default.css?raw'
-import { RokitInput, RokitSelect, RokitTextArea } from '@ro-kit/ui-widgets'
-
-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
-        } else if (value instanceof Literal) {
-            editor.shaclDatatype = value.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
-        } else if (value instanceof NamedNode) {
-            editor.dataset.nodeKind = PREFIX_SHACL + 'IRI'
-        }
-        if (template?.hasValue || template?.readonly) {
-            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 = new RokitInput()
-        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.clearable = true
-        editor.dense = true
-        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 = new RokitTextArea()
-            editor.resize = 'auto'
-        }
-        else {
-            editor = new RokitInput()
-        }
-        editor.dense = true
-        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.size = 5
-            langChooser.placeholder = 'lang?'
-        }
-        langChooser.title = 'Language of the text'
-        langChooser.classList.add('lang-chooser')
-        langChooser.slot = 'suffix'
-        // 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.appendChild(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 = new RokitInput()
-        editor.type = 'number'
-        editor.clearable = true
-        editor.dense = true
-        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 = new RokitSelect()
-        editor.clearable = true
-        editor.dense = true
-        const result = this.createDefaultTemplate(label, null, required, editor, template)
-        const ul = document.createElement('ul')
-        let isFlatList = true
-
-        const appendListEntry = (entry: InputListEntry, parent: HTMLUListElement) => {
-            const li = document.createElement('li')
-            if (typeof entry.value === 'string') {
-                li.dataset.value = entry.value
-                li.innerText = entry.label ? entry.label : entry.value
-            } else {
-                li.dataset.value = (entry.value as N3Term).id
-                if (entry.value instanceof NamedNode) {
-                    li.dataset.value = '<' + li.dataset.value + ">"
-                }
-                li.innerText = entry.label ? entry.label : entry.value.value
-            }
-            parent.appendChild(li)
-            if (entry.children?.length) {
-                isFlatList = false
-                const ul = document.createElement('ul')
-                li.appendChild(ul)
-                for (const child of entry.children) {
-                    appendListEntry(child, ul)
-                }
-            }
-        }
-
-        for (const item of listEntries) {
-            appendListEntry(item, ul)
-        }
-        if (!isFlatList) {
-            editor.collapse = true
-        }
-
-        editor.appendChild(ul)
-        if (value) {
-            editor.value = (value as N3Term).id
-        }
-        return result
-    }
-
-    createButton(label: string, _: boolean): HTMLElement {
-        const button = document.createElement('button')
-        button.type = 'button'
-        button.innerHTML = label
-        return button
-    }
-}

package/src/themes/material.css

@@ -1,14 +0,0 @@
-: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; }