@ulb-darmstadt/shacl-form 1.6.1 → 1.6.3

package/src/theme.ts

@@ -0,0 +1,132 @@
+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, indent?: number }
+
+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(root: 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.shapesGraph.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): HTMLElement {
+    if (template.config.editMode) {
+        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.shapesGraph, 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,44 @@
+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'
+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

@@ -0,0 +1,4 @@
+.editor:not([type='checkbox']) { border: 1px solid #DDD; padding: 2px 4px; }
+.property-instance label { display: inline-block; 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 { visibility: hidden; max-height: 0; }
+.mode-edit .property-instance label { width: var(--label-width); }

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,7 @@
+: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);
+}
+form.mode-edit { --label-width: 0em; }
+.property-instance { margin-bottom:14px; }

package/src/themes/material.ts

@@ -0,0 +1,239 @@
+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
+        // @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
+    }
+}