@ulb-darmstadt/shacl-form 1.8.1 → 1.8.2

package/dist/property.d.ts

@@ -7,6 +7,7 @@ import { RokitSelect } from '@ro-kit/ui-widgets';
 export declare class ShaclProperty extends HTMLElement {
     template: ShaclPropertyTemplate;
     addButton: RokitSelect | undefined;
+    container: HTMLElement;
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode);
     addPropertyInstance(value?: Term): HTMLElement;
     updateControls(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.8.1",
+    "version": "1.8.2",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
@@ -71,7 +71,7 @@
         "uuid": "^11.1.0"
     },
     "peerDependencies": {
-        "@ro-kit/ui-widgets": "^0.0.28",
+        "@ro-kit/ui-widgets": "^0.0.29",
         "mdui": "^2.1.4"
     }
 }

package/src/constants.ts

@@ -23,4 +23,5 @@ export const SHACL_OBJECT_IRI = DataFactory.namedNode(PREFIX_SHACL + 'IRI')
 export const SHACL_PREDICATE_PROPERTY = DataFactory.namedNode(PREFIX_SHACL + 'property')
 export const SHACL_PREDICATE_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'class')
 export const SHACL_PREDICATE_TARGET_CLASS = DataFactory.namedNode(PREFIX_SHACL + 'targetClass')
-export const SHACL_PREDICATE_NODE_KIND = DataFactory.namedNode(PREFIX_SHACL + 'nodeKind')
+export const SHACL_PREDICATE_NODE_KIND = DataFactory.namedNode(PREFIX_SHACL + 'nodeKind')
+export const XSD_DATATYPE_STRING =  DataFactory.namedNode(PREFIX_XSD + 'string')

package/src/constraints.ts

@@ -13,7 +13,6 @@ export function createShaclOrConstraint(options: Term[], context: ShaclNode | Sh
     constraintElement.classList.add('shacl-or-constraint')
 
     const optionElements: InputListEntry[] =  []
-    optionElements.push({ label: '--- please choose ---', value: '' })
 
     if (context instanceof ShaclNode) {
         const properties: ShaclProperty[][] = []

package/src/form.ts

@@ -7,6 +7,7 @@ import { Editor, Theme } from './theme'
 import { serialize } from './serialize'
 import { Validator } from 'shacl-engine'
 import { setSharedShapesGraph } from './loader'
+import { RokitCollapsible } from '@ro-kit/ui-widgets'
 
 export class ShaclForm extends HTMLElement {
     static get observedAttributes() { return Config.dataAttributes() }
@@ -88,7 +89,12 @@ export class ShaclForm extends HTMLElement {
                                             this.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
                                         } else {
                                             // focus first invalid element
-                                            (this.form.querySelector(':scope .invalid > .editor') as HTMLElement)?.focus()
+                                            let invalidEditor = this.form.querySelector(':scope .invalid > .editor')
+                                            if (invalidEditor) {
+                                                (invalidEditor as HTMLElement).focus()
+                                            } else {
+                                                this.form.querySelector(':scope .invalid')?.scrollIntoView()
+                                            }
                                         }
                                     })
                                 }
@@ -176,10 +182,16 @@ export class ShaclForm extends HTMLElement {
                         if (result.path?.length) {
                             const path = result.path[0].predicates[0]
                             // try to find most specific editor elements first
-                            let invalidElements = this.form.querySelectorAll(`:scope shacl-node[data-node-id='${focusNode.id}'] > shacl-property > .property-instance[data-path='${path.id}'] > .editor, :scope shacl-node[data-node-id='${focusNode.id}'] > .shacl-group > shacl-property > .property-instance[data-path='${path.id}'] > .editor`)
+                            let invalidElements = this.form.querySelectorAll(`
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > shacl-property > .property-instance[data-path='${path.id}'] > .editor,
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > shacl-property > .shacl-group > .property-instance[data-path='${path.id}'] > .editor,
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > .shacl-group > shacl-property > .property-instance[data-path='${path.id}'] > .editor,
+                                :scope shacl-node[data-node-id='${focusNode.id}'] > .shacl-group > shacl-property > .shacl-group > .property-instance[data-path='${path.id}'] > .editor`)
                             if (invalidElements.length === 0) {
                                 // if no editors found, select respective node. this will be the case for node shape violations.
-                                invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${focusNode.id}']  > * > [data-path='${path.id}']`)
+                                invalidElements = this.form.querySelectorAll(`
+                                    :scope [data-node-id='${focusNode.id}']  > shacl-property > .property-instance[data-path='${path.id}'],
+                                    :scope [data-node-id='${focusNode.id}']  > shacl-property > .shacl-group > .property-instance[data-path='${path.id}']`)
                             }
 
                             for (const invalidElement of invalidElements) {
@@ -191,8 +203,8 @@ export class ShaclForm extends HTMLElement {
                                         parent.classList.remove('valid')
                                         parent.appendChild(this.createValidationErrorDisplay(result))
                                         do {
-                                            if (parent.classList.contains('collapsible')) {
-                                                parent.classList.add('open')
+                                            if (parent instanceof RokitCollapsible) {
+                                                parent.open = true
                                             }
                                             parent = parent.parentElement
                                         } while (parent)

package/src/group.ts

@@ -1,35 +1,34 @@
 import { PREFIX_RDFS } from './constants'
 import { Config } from './config'
 import { findObjectValueByPredicate } from './util'
+import { RokitCollapsible } from '@ro-kit/ui-widgets'
 
 export function createShaclGroup(groupSubject: string, config: Config): HTMLElement {
-    const group = document.createElement('div')
-    group.dataset['subject'] = groupSubject
-    group.classList.add('shacl-group')
     let name = groupSubject
     const quads = config.store.getQuads(groupSubject, null, null, null)
     const label = findObjectValueByPredicate(quads, "label", PREFIX_RDFS, config.languages)
     if (label) {
         name = label
     }
-    const order = findObjectValueByPredicate(quads, "order")
-    if (order) {
-        group.style.order = order
-    }
-    const header = document.createElement('h1')
-    header.innerText = name
-    group.appendChild(header)
 
+    let group: HTMLElement
     if (config.attributes.collapse !== null) {
-        group.classList.add('collapsible')
-        if (config.attributes.collapse === 'open') {
-            group.classList.add('open')
-        }
-        header.classList.add('activator')
-        header.addEventListener('click', () => {
-            group.classList.toggle('open')
-        })
+        group = new RokitCollapsible()
+        group.classList.add('collapsible');
+        (group as RokitCollapsible).open = config.attributes.collapse === 'open';
+        (group as RokitCollapsible).label = name
+    } else {
+        group = document.createElement('div')
+        const header = document.createElement('h1')
+        header.innerText = name
+        group.appendChild(header)
+    }
 
+    group.dataset['subject'] = groupSubject
+    group.classList.add('shacl-group')
+    const order = findObjectValueByPredicate(quads, "order")
+    if (order) {
+        group.style.order = order
     }
     return group
 }

package/src/property-template.ts

@@ -135,6 +135,7 @@ export class ShaclPropertyTemplate {
     clone(): ShaclPropertyTemplate {
         const copy = Object.assign({}, this)
         // arrays are not cloned but referenced, so create them manually
+        copy.extendedShapes = [ ...this.extendedShapes ]
         copy.owlImports = [ ...this.owlImports ]
         if (this.languageIn) {
             copy.languageIn = [ ...this.languageIn ]

package/src/property.ts

@@ -9,15 +9,25 @@ import { Editor, fieldFactory, InputListEntry } from './theme'
 import { toRDF } from './serialize'
 import { findPlugin } from './plugin'
 import { DATA_GRAPH, RDF_PREDICATE_TYPE, SHACL_PREDICATE_TARGET_CLASS } from './constants'
-import { RokitButton, RokitSelect } from '@ro-kit/ui-widgets'
+import { RokitButton, RokitCollapsible, RokitSelect } from '@ro-kit/ui-widgets'
 
 export class ShaclProperty extends HTMLElement {
     template: ShaclPropertyTemplate
     addButton: RokitSelect | undefined
+    container: HTMLElement
 
     constructor(shaclSubject: BlankNode | NamedNode, parent: ShaclNode, config: Config, valueSubject?: NamedNode | BlankNode) {
         super()
         this.template = new ShaclPropertyTemplate(config.store.getQuads(shaclSubject, null, null, null), parent, config)
+        if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
+            const collapsible = new RokitCollapsible()
+            collapsible.classList.add('collapsible', 'shacl-group');
+            collapsible.open = config.attributes.collapse === 'open';
+            collapsible.label = this.template.label;
+            this.container = collapsible
+        } else {
+            this.container = this
+        }
 
         if (this.template.order !== undefined) {
             this.style.order = `${this.template.order}`
@@ -28,7 +38,7 @@ export class ShaclProperty extends HTMLElement {
 
         if (config.editMode && !parent.linked) {
             this.addButton = this.createAddButton()
-            this.appendChild(this.addButton)
+            this.container.appendChild(this.addButton)
         }
 
         // bind existing values
@@ -65,21 +75,10 @@ export class ShaclProperty extends HTMLElement {
             this.updateControls()
         }
 
-        if (this.template.extendedShapes.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
+        if (this.container instanceof RokitCollapsible) {
             // in view mode, show collapsible only when we have something to show
-            if ((config.editMode && !parent.linked) || this.childElementCount > 0) {
-                const collapsible = this
-                collapsible.classList.add('collapsible')
-                if (this.template.config.attributes.collapse === 'open') {
-                    collapsible.classList.add('open')
-                }
-                const activator = document.createElement('h1')
-                activator.classList.add('activator')
-                activator.innerText = this.template.label
-                activator.addEventListener('click', () => {
-                    collapsible.classList.toggle('open')
-                })
-                this.prepend(activator)
+            if ((config.editMode && !parent.linked) || this.container.childElementCount > 0) {
+                this.appendChild(this.container)
             }
         }
     }
@@ -113,9 +112,9 @@ export class ShaclProperty extends HTMLElement {
             instance = createPropertyInstance(this.template, value, undefined, linked || this.template.parent.linked)
         }
         if (this.addButton) {
-            this.insertBefore(instance!, this.addButton)
+            this.container.insertBefore(instance!, this.addButton)
         } else {
-            this.appendChild(instance!)
+            this.container.appendChild(instance!)
         }
         return instance!
     }
@@ -136,10 +135,13 @@ export class ShaclProperty extends HTMLElement {
         const mayAdd = this.template.maxCount === undefined || instanceCount < this.template.maxCount
         this.classList.toggle('may-remove', mayRemove)
         this.classList.toggle('may-add', mayAdd)
+        if (mayAdd && this.addButton?.input) {
+            this.addButton.input.updateMinWidth()
+        }
     }
 
     toRDF(graph: Store, subject: NamedNode | BlankNode) {
-        for (const instance of this.querySelectorAll(':scope > .property-instance')) {
+        for (const instance of this.querySelectorAll(':scope > .property-instance, :scope > .collapsible > .property-instance')) {
             const pathNode = DataFactory.namedNode((instance as HTMLElement).dataset.path!)
             if (instance.firstChild instanceof ShaclNode) {
                 const shapeSubject = instance.firstChild.toRDF(graph)
@@ -247,7 +249,7 @@ export class ShaclProperty extends HTMLElement {
                 } else {
                     // user wants to link existing instance
                     const value = JSON.parse(addButton.value) as Term
-                    this.insertBefore(createPropertyInstance(this.template, value, true, true), addButton)
+                    this.container.insertBefore(createPropertyInstance(this.template, value, true, true), addButton)
                 }
                 addButton.value = ''
             })

package/src/styles.css

@@ -1,30 +1,28 @@
-form { box-sizing: border-box; display:block; --label-width: 8em; --caret-size: 10px; }
+form { display:block; --label-width: 8em; --caret-size: 10px; }
 form.mode-edit { padding-left: 1em;  }
-form *, form ::after, form ::before { box-sizing: inherit; }
-shacl-node, .shacl-group { display: flex; flex-direction: column; width: 100%; position: relative; }
+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: 1.1rem; border-bottom: 1px solid; margin-top: 4px; color: #555; }
-shacl-property { display: flex; flex-direction: column; align-items: end; position: relative; }
+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; }
 .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 { position: absolute; left: calc(var(--label-width) - 1em); top: 3px; color: green; content: '\2713'; }
-.editor:not([type='checkbox']), .shacl-or-constraint select { flex-grow: 1; }
-.shacl-or-constraint select { border: 1px solid #DDD; padding: 2px 4px; }
-select { overflow: hidden; text-overflow: ellipsis; }
+.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 { position: absolute; top: 6px; right: 26px; border: 0; background-color: #e9e9ed; padding: 2px 4px; max-width: 40px; width: 40px; box-sizing: content-box; }
-.lang-chooser+.editor { padding-right: 55px; }
-.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 3px; color: red; cursor: help; }
+.lang-chooser { border: 0; background-color: #e9e9ed; padding: 2px 4px; align-self: flex-start; }
+.validation-error { position: absolute; left: calc(var(--label-width) - 1em); top: 0.5em; color: red; cursor: help; }
 .validation-error::before { content: '\26a0' }
 .validation-error.node { left: -1em; }
 .invalid > .editor { border-color: red !important; }
@@ -43,15 +41,9 @@ a, a:visited { color: inherit; }
     0% { opacity: 0; transform: scaleY(0.8); }
     100% { opacity: 1; transform: scaleY(1); }
 }
-  
-.collapsible > .activator { display: flex; justify-content: space-between; align-items: center; cursor: pointer; width: 100%; border: 0; padding: 8px 0; transition: 0.2s; }
-.collapsible > .activator:hover, .collapsible.open > .activator { background-color: #F5F5F5; }
-.collapsible > .activator::after { content:''; width: var(--caret-size); height: var(--caret-size); border-style: none solid solid none; border-width: calc(0.3 * var(--caret-size)); transform: rotate(45deg); transition: transform .15s ease-out; margin-right: calc(0.5 * var(--caret-size)); }
-.collapsible.open > .activator::after { transform: rotate(225deg); }
-.collapsible > *:not(.activator) { transition: all 0.2s ease-out; opacity: 1; }
-.collapsible:not(.open) > *:not(.activator) { max-height: 0; padding: 0; opacity: 0; overflow: hidden; }
+.collapsible::part(label) { font-weight: 600; }
+.collapsible > .property-instance:nth-child(even) { background-color: #F8F8F8; }
 .collapsible > .property-instance > shacl-node > h1 { display: none; }
-.collapsible.open > .property-instance:nth-child(odd) { background-color: #F5F5F5; }
 .ref-link { cursor: pointer; }
 .ref-link:hover { text-decoration: underline; }
 .node-id-display { color: #999; font-size: 11px; }

package/src/themes/default.css

@@ -1,4 +1,4 @@
-.editor:not([type='checkbox']) { border: 1px solid #DDD; padding: 2px 4px; }
+.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,11 +1,11 @@
 import { Term } from '@rdfjs/types'
 import { ShaclPropertyTemplate } from "../property-template"
 import { Editor, InputListEntry, Theme } from "../theme"
-import { PREFIX_SHACL, PREFIX_XSD } from '../constants'
+import { PREFIX_SHACL, PREFIX_XSD, XSD_DATATYPE_STRING } from '../constants'
 import { Literal, NamedNode } from 'n3'
 import { Term as N3Term }  from 'n3'
 import css from './default.css?raw'
-import { RokitSelect } from '@ro-kit/ui-widgets'
+import { RokitInput, RokitSelect, RokitTextArea } from '@ro-kit/ui-widgets'
 
 export class DefaultTheme extends Theme {
     idCtr = 0
@@ -62,7 +62,7 @@ export class DefaultTheme extends Theme {
     }
 
     createDateEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
-        const editor: Editor = document.createElement('input')
+        const editor = new RokitInput()
         if (template.datatype?.value  === PREFIX_XSD + 'dateTime') {
             editor.type = 'datetime-local'
             // this enables seconds in dateTime input
@@ -71,6 +71,8 @@ export class DefaultTheme extends Theme {
         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) {
@@ -92,17 +94,16 @@ export class DefaultTheme extends Theme {
     createTextEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
         let editor
         if (template.singleLine === false) {
-            editor = document.createElement('textarea')
-            editor.rows = 5
+            editor = new RokitTextArea()
+            editor.resize = 'auto'
         }
         else {
-            editor = document.createElement('input')
-            editor.type = 'text'
-            if (template.pattern) {
-                editor.pattern = template.pattern
-            }
+            editor = new RokitInput()
+        }
+        editor.dense = true
+        if (template.pattern) {
+            editor.pattern = template.pattern
         }
-    
         if (template.minLength) {
             editor.minLength = template.minLength
         }
@@ -126,10 +127,12 @@ export class DefaultTheme extends Theme {
         } 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();
@@ -142,7 +145,7 @@ export class DefaultTheme extends Theme {
             langChooser.value = value.language
         }
         editor.dataset.lang = langChooser.value
-        editor.after(langChooser)
+        editor.appendChild(langChooser)
         return result
     }
 
@@ -182,8 +185,10 @@ export class DefaultTheme extends Theme {
     }
 
     createNumberEditor(label: string, value: Term | null, required: boolean, template: ShaclPropertyTemplate): HTMLElement {
-        const editor = document.createElement('input')
+        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
@@ -201,25 +206,29 @@ export class DefaultTheme extends Theme {
 
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
         const editor = new RokitSelect()
-        editor.dense = true
         editor.clearable = true
-        editor.collapse = 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')
-            let entryValue = ''
             if (typeof entry.value === 'string') {
-                entryValue = entry.value
+                li.dataset.value = entry.value
+                li.innerText = entry.label ? entry.label : entry.value
             } else {
-                // this is needed for typed rdf literals
-                entryValue = (entry.value as N3Term).id
+                if (entry.value instanceof Literal && entry.value.datatype.equals(XSD_DATATYPE_STRING)) {
+                    li.dataset.value = entry.value.value
+                } else {
+                    // this is needed for typed rdf literals
+                    li.dataset.value = (entry.value as N3Term).id
+                }
+                li.innerText = entry.label ? entry.label : entry.value.value
             }
-            li.innerText = entry.label ? entry.label : entryValue
-            li.dataset.value = entryValue
             parent.appendChild(li)
             if (entry.children?.length) {
+                isFlatList = false
                 const ul = document.createElement('ul')
                 li.appendChild(ul)
                 for (const child of entry.children) {
@@ -231,6 +240,9 @@ export class DefaultTheme extends Theme {
         for (const item of listEntries) {
             appendListEntry(item, ul)
         }
+        if (!isFlatList) {
+            editor.collapse = true
+        }
 
         editor.appendChild(ul)
         if (value) {

package/src/themes/material.ts

@@ -6,7 +6,7 @@ import { InputListEntry, Editor } from '../theme'
 import { Literal, NamedNode } from 'n3'
 import { Term as N3Term }  from 'n3'
 import css from './material.css?raw'
-import { PREFIX_SHACL, PREFIX_XSD } from '../constants'
+import { PREFIX_SHACL, PREFIX_XSD, XSD_DATATYPE_STRING } from '../constants'
 import { RokitSelect } from '@ro-kit/ui-widgets'
 
 export class MaterialTheme extends Theme {
@@ -96,24 +96,28 @@ export class MaterialTheme extends Theme {
 
     createListEditor(label: string, value: Term | null, required: boolean, listEntries: InputListEntry[], template?: ShaclPropertyTemplate): HTMLElement {
         const editor = new RokitSelect()
-        editor.dense = true
         editor.clearable = 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')
-            let entryValue = ''
             if (typeof entry.value === 'string') {
-                entryValue = entry.value
+                li.dataset.value = entry.value
+                li.innerText = entry.label ? entry.label : entry.value
             } else {
-                // this is needed for typed rdf literals
-                entryValue = (entry.value as N3Term).id
+                if (entry.value instanceof Literal && entry.value.datatype.equals(XSD_DATATYPE_STRING)) {
+                    li.dataset.value = entry.value.value
+                } else {
+                    // this is needed for typed rdf literals
+                    li.dataset.value = (entry.value as N3Term).id
+                }
+                li.innerText = entry.label ? entry.label : entry.value.value
             }
-            li.innerText = entry.label ? entry.label : entryValue
-            li.dataset.value = entryValue
             parent.appendChild(li)
             if (entry.children?.length) {
+                isFlatList = false
                 const ul = document.createElement('ul')
                 li.appendChild(ul)
                 for (const child of entry.children) {
@@ -125,6 +129,9 @@ export class MaterialTheme extends Theme {
         for (const item of listEntries) {
             appendListEntry(item, ul)
         }
+        if (!isFlatList) {
+            editor.collapse = true
+        }
 
         editor.appendChild(ul)
         if (value) {