@json-editor/json-editor 2.5.1 → 2.6.0

package/src/editors/string.js

@@ -6,12 +6,14 @@ export class StringEditor extends AbstractEditor {
     super.register()
     if (!this.input) return
     this.input.setAttribute('name', this.formname)
+    this.input.setAttribute('aria-label', this.formname)
   }
 
   unregister () {
     super.unregister()
     if (!this.input) return
     this.input.removeAttribute('name')
+    this.input.removeAttribute('aria-label')
   }
 
   setValue (value, initial, fromTemplate) {
@@ -70,8 +72,8 @@ export class StringEditor extends AbstractEditor {
 
   build () {
     if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
-    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
-    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText)
+    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
 
     this.format = this.schema.format
     if (!this.format && this.schema.media && this.schema.media.type) {
@@ -127,7 +129,7 @@ export class StringEditor extends AbstractEditor {
     } else if (this.options.input_width) this.input.style.width = this.options.input_width
 
     if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
-      this.always_disabled = true
+      this.disable(true)
       this.input.setAttribute('readonly', 'true')
     }
 
@@ -201,7 +203,7 @@ export class StringEditor extends AbstractEditor {
       input = this.theme.getRangeControl(this.input, this.theme.getRangeOutput(this.input, this.schema.default || Math.max(this.schema.minimum || 0, 0)))
     }
 
-    this.control = this.theme.getFormControl(this.label, input, this.description, this.infoButton)
+    this.control = this.theme.getFormControl(this.label, input, this.description, this.infoButton, this.formname)
     this.container.appendChild(this.control)
 
     /* Any special formatting that needs to happen after the input is added to the dom */

package/src/editors/table.js

@@ -31,6 +31,7 @@ export class TableEditor extends ArrayEditor {
     this.item_default = itemSchema.default || null
     this.item_has_child_editors = itemSchema.properties || itemSchema.items
     this.width = 12
+    this.array_controls_top = this.options.array_controls_top || this.jsoneditor.options.array_controls_top
     super.preBuild()
   }
 
@@ -52,12 +53,16 @@ export class TableEditor extends ArrayEditor {
     if (!this.options.compact) {
       this.header = document.createElement('label')
       this.header.textContent = this.getTitle()
-      this.title = this.theme.getHeader(this.header)
+      this.title = this.theme.getHeader(this.header, this.getPathDepth())
       this.container.appendChild(this.title)
+      if (this.options.infoText) {
+        this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
+        this.container.appendChild(this.infoButton)
+      }
       this.title_controls = this.theme.getHeaderButtonHolder()
       this.title.appendChild(this.title_controls)
       if (this.schema.description) {
-        this.description = this.theme.getDescription(this.schema.description)
+        this.description = this.theme.getDescription(this.translateProperty(this.schema.description))
         this.container.appendChild(this.description)
       }
       this.panel = this.theme.getIndentedPanel()
@@ -71,7 +76,11 @@ export class TableEditor extends ArrayEditor {
 
     this.panel.appendChild(this.table)
     this.controls = this.theme.getButtonHolder()
-    this.panel.appendChild(this.controls)
+    if (this.array_controls_top) {
+      this.title.appendChild(this.controls)
+    } else {
+      this.panel.appendChild(this.controls)
+    }
 
     if (this.item_has_child_editors) {
       const ce = tmp.getChildEditors()
@@ -90,6 +99,7 @@ export class TableEditor extends ArrayEditor {
 
     /* Row Controls column */
     this.controls_header_cell = this.theme.getTableHeaderCell(' ')
+    this.controls_header_cell.setAttribute('aria-hidden', 'true')
     this.header_row.appendChild(this.controls_header_cell)
 
     /* Add controls */
@@ -307,11 +317,11 @@ export class TableEditor extends ArrayEditor {
       this.rows[i].movedown_button = this._createMoveDownButton(i, controlsHolder)
     }
 
-    if (value) this.rows[i].setValue(value)
+    if (typeof value !== 'undefined') this.rows[i].setValue(value)
   }
 
   _createDeleteButton (i, holder) {
-    const button = this.getButton('', 'delete', this.translate('button_delete_row_title_short'))
+    const button = this.getButton('', 'delete', 'button_delete_row_title_short')
     button.classList.add('delete', 'json-editor-btntype-delete')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -336,7 +346,7 @@ export class TableEditor extends ArrayEditor {
   }
 
   _createCopyButton (i, holder) {
-    const button = this.getButton('', 'copy', this.translate('button_copy_row_title_short'))
+    const button = this.getButton('', 'copy', 'button_copy_row_title_short')
     button.classList.add('copy', 'json-editor-btntype-copy')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -356,7 +366,7 @@ export class TableEditor extends ArrayEditor {
   }
 
   _createMoveUpButton (i, holder) {
-    const button = this.getButton('', 'moveup', this.translate('button_move_up_title'))
+    const button = this.getButton('', 'moveup', 'button_move_up_title')
     button.classList.add('moveup', 'json-editor-btntype-move')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -377,7 +387,7 @@ export class TableEditor extends ArrayEditor {
   }
 
   _createMoveDownButton (i, holder) {
-    const button = this.getButton('', 'movedown', this.translate('button_move_down_title'))
+    const button = this.getButton('', 'movedown', 'button_move_down_title')
     button.classList.add('movedown', 'json-editor-btntype-move')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -409,10 +419,10 @@ export class TableEditor extends ArrayEditor {
         this.setVisibility(this.panel, this.collapsed)
         if (this.collapsed) {
           this.collapsed = false
-          this.setButtonText(e.currentTarget, '', 'collapse', this.translate('button_collapse'))
+          this.setButtonText(e.currentTarget, '', 'collapse', 'button_collapse')
         } else {
           this.collapsed = true
-          this.setButtonText(e.currentTarget, '', 'expand', this.translate('button_expand'))
+          this.setButtonText(e.currentTarget, '', 'expand', 'button_expand')
         }
       })
 
@@ -436,13 +446,13 @@ export class TableEditor extends ArrayEditor {
   }
 
   _createToggleButton () {
-    const button = this.getButton('', 'collapse', this.translate('button_collapse'))
+    const button = this.getButton('', 'collapse', 'button_collapse')
     button.classList.add('json-editor-btntype-toggle')
     return button
   }
 
   _createAddRowButton () {
-    const button = this.getButton(this.getItemTitle(), 'add', this.translate('button_add_row_title', [this.getItemTitle()]))
+    const button = this.getButton(this.getItemTitle(), 'add', 'button_add_row_title', [this.getItemTitle()])
     button.classList.add('json-editor-btntype-add')
     button.addEventListener('click', (e) => {
       e.preventDefault()
@@ -459,7 +469,7 @@ export class TableEditor extends ArrayEditor {
   }
 
   _createDeleteLastRowButton () {
-    const button = this.getButton(this.translate('button_delete_last', [this.getItemTitle()]), 'subtract', this.translate('button_delete_last_title', [this.getItemTitle()]))
+    const button = this.getButton('button_delete_last', 'subtract', 'button_delete_last_title', [this.getItemTitle()])
     button.classList.add('json-editor-btntype-deletelast')
     button.addEventListener('click', (e) => {
       e.preventDefault()
@@ -480,7 +490,7 @@ export class TableEditor extends ArrayEditor {
   }
 
   _createRemoveAllRowsButton () {
-    const button = this.getButton(this.translate('button_delete_all'), 'delete', this.translate('button_delete_all_title'))
+    const button = this.getButton('button_delete_all', 'delete', 'button_delete_all_title')
     button.classList.add('json-editor-btntype-deleteall')
     button.addEventListener('click', (e) => {
       e.preventDefault()

package/src/editors/upload.js

@@ -8,8 +8,8 @@ export class UploadEditor extends AbstractEditor {
 
   build () {
     if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
-    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
-    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText)
+    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
 
     /* Editor options */
     this.options = this.expandCallbacks('upload', extend({}, {
@@ -189,6 +189,7 @@ export class UploadEditor extends AbstractEditor {
         this.preview.appendChild(img)
       }
       img.onerror = error => {
+        // eslint-disable-next-line no-console
         console.error('upload error', error, error.currentTarget)
       }
       img.src = this.container.querySelector('a').href
@@ -216,7 +217,7 @@ export class UploadEditor extends AbstractEditor {
       file.formattedSize = `${parseFloat((file.size / (1024 ** i)).toFixed(2))} ${['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'][i]}`
     } else file.formattedSize = '0 Bytes'
 
-    const uploadButton = this.getButton('Upload', 'upload', 'Upload')
+    const uploadButton = this.getButton('button_upload', 'upload', 'button_upload')
     uploadButton.addEventListener('click', (event) => {
       event.preventDefault()
 

package/src/editors/uuid.js

@@ -20,7 +20,7 @@ export class UuidEditor extends StringEditor {
   build () {
     super.build()
     /* Set field to readonly */
-    this.always_disabled = true
+    this.disable(true)
     this.input.setAttribute('readonly', 'true')
   }
 

package/src/iconlibs/index.js

@@ -7,6 +7,7 @@ import { fontawesome5Iconlib } from './fontawesome5.js'
 // import  { foundation3Iconlib } from  './foundation3.js'
 import { jqueryuiIconlib } from './jqueryui.js'
 // import  { materialiconsIconlib } from  './materialicons.js'
+import { openiconicIconlib } from './openiconic.js'
 import { spectreIconlib } from './spectre.js'
 
 export const iconlibs = {
@@ -19,5 +20,6 @@ export const iconlibs = {
   // foundation3: foundation3Iconlib,
   jqueryui: jqueryuiIconlib,
   // materialicons: materialiconsIconlib,
+  openiconic: openiconicIconlib,
   spectre: spectreIconlib
 }

package/src/iconlibs/openiconic.js

@@ -0,0 +1,28 @@
+import { AbstractIconLib } from '../iconlib.js'
+
+const iconPrefix = 'oi oi-'
+const mapping = {
+  collapse: 'collapse-down',
+  expand: 'expand-right',
+  delete: 'trash',
+  edit: 'pencil',
+  add: 'plus',
+  subtract: 'minus',
+  cancel: 'ban',
+  save: 'file',
+  moveup: 'arrow-thick-top',
+  moveright: 'arrow-thick-right',
+  movedown: 'arrow-thick-bottom',
+  moveleft: 'arrow-thick-left',
+  copy: 'clipboard',
+  clear: 'circle-x',
+  time: 'clock',
+  calendar: 'calendar',
+  edit_properties: 'list'
+}
+
+export class openiconicIconlib extends AbstractIconLib {
+  constructor () {
+    super(iconPrefix, mapping)
+  }
+}

package/src/schemaloader.js

@@ -98,6 +98,7 @@ export class SchemaLoader {
       : ''
     const ref = this._getRef(fetchUrl, refObj)
     if (!this.refs[ref]) { /* if reference not found */
+      // eslint-disable-next-line no-console
       console.warn(`reference:'${ref}' not found!`)
     } else if (recurseAllOf && hasOwnProperty(this.refs[ref], 'allOf')) {
       const allOf = this.refs[ref].allOf
@@ -135,7 +136,7 @@ export class SchemaLoader {
 
   _expandSubSchema (subschema) {
     /* Array of types */
-    if (Array.isArray(subschema)) return subschema.map(m => typeof value === 'object' ? this.expandSchema(m) : m)
+    if (Array.isArray(subschema)) return subschema.map(m => typeof m === 'object' ? this.expandSchema(m) : m)
 
     /* Schema */
     return this.expandSchema(subschema)
@@ -177,10 +178,19 @@ export class SchemaLoader {
         mergeRefs(this._getExternalRefs(value, fetchUrl))
       }
     })
+
+    if (schema.id && typeof schema.id === 'string' && schema.id.substr(0, 4) === 'urn:') {
+      this.refs[schema.id] = schema
+    } else if (schema.$id && typeof schema.$id === 'string' && schema.$id.substr(0, 4) === 'urn:') {
+      this.refs[schema.$id] = schema
+    }
+
     return refs
   }
 
   _getFileBase (location) {
+    if (!location) return '/'
+
     const { ajaxBase } = this.options
 
     return typeof ajaxBase === 'undefined' ? this._getFileBaseFromFileLocation(location) : ajaxBase
@@ -192,64 +202,138 @@ export class SchemaLoader {
     return `${pathItems.join('/')}/`
   }
 
-  _isLocalUrl (url, fileBase) {
-    return fileBase !== url.substr(0, fileBase.length) &&
-      url.substr(0, 4) !== 'http' &&
+  _joinUrl (url, fileBase) {
+    var fetchUrl = url
+
+    if (url.substr(0, 7) !== 'http://' &&
+      url.substr(0, 8) !== 'https://' &&
       url.substr(0, 5) !== 'blob:' &&
       url.substr(0, 5) !== 'data:' &&
+      url.substr(0, 1) !== '#' &&
       url.substr(0, 1) !== '/'
+    ) {
+      fetchUrl = fileBase + url
+    }
+
+    // strip #fragment from URI, so json pointers resolve correctly #928
+    if (fetchUrl.indexOf('#') > 0) fetchUrl = fetchUrl.substr(0, fetchUrl.indexOf('#'))
+
+    return fetchUrl
+  }
+
+  _isUniformResourceName (uri) {
+    return uri.substr(0, 4) === 'urn:'
   }
 
   _loadExternalRefs (schema, callback, fetchUrl, fileBase) {
     const refs = this._getExternalRefs(schema, fetchUrl)
-    let done = 0; let waiting = 0; let callbackFired = false
+    let done = false; let waiting = 0
 
-    Object.keys(refs).forEach(url => {
-      if (this.refs[url]) return
-      if (!this.options.ajax) throw new Error(`Must set ajax option to true to load external ref ${url}`)
-      this.refs[url] = 'loading'
-      waiting++
+    Object.keys(refs).forEach(uri => {
+      if (this.refs[uri]) return
 
-      const fetchUrl = this._isLocalUrl(url, fileBase) ? fileBase + url : url
+      if (this._isUniformResourceName(uri)) {
+        this.refs[uri] = 'loading'
+        waiting++
+
+        const urnResolver = this.options.urn_resolver
+        let urn = uri
+        if (typeof urnResolver !== 'function') {
+          // eslint-disable-next-line no-console
+          console.log(`No "urn_resolver" callback defined to resolve "${urn}"`)
+          throw new Error(`Must set urn_resolver option to a callback to resolve ${urn}`)
+        }
+        // theoretically a URN can contain a JSON pointer
+        if (urn.indexOf('#') > 0) urn = urn.substr(0, urn.indexOf('#'))
+        let response
+        try {
+          response = urnResolver(urn, responseText => {
+            try {
+              schema = JSON.parse(responseText)
+            } catch (e) {
+              // eslint-disable-next-line no-console
+              console.log(e)
+              throw new Error(`Failed to parse external ref ${urn}`)
+            }
+            if (!(typeof schema === 'boolean' || typeof schema === 'object') || schema === null || Array.isArray(schema)) {
+              throw new Error(`External ref does not contain a valid schema - ${urn}`)
+            }
+            this.refs[uri] = schema
+            this._getDefinitions(schema, `${urn}#/definitions/`)
+            this._loadExternalRefs(schema, () => {
+              waiting--
+              if (done && !waiting) {
+                callback()
+              }
+            }, uri, '/')
+          })
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.log(e)
+          throw new Error(`Failed to parse external ref ${urn}`)
+        }
+
+        if (typeof response !== 'boolean') {
+          throw new Error(`External ref does not contain a valid schema - ${urn}`)
+        } else if (response !== true) {
+          throw new Error(`External ref did not resolve - ${urn}`)
+        }
+
+        return
+      }
+
+      if (!this.options.ajax) throw new Error(`Must set ajax option to true to load external ref ${uri}`)
+      this.refs[uri] = 'loading'
+      waiting++
+      let url = this._joinUrl(uri, fileBase)
 
       const r = new XMLHttpRequest()
       r.overrideMimeType('application/json')
-      r.open('GET', fetchUrl, true)
+      r.open('GET', url, true)
       if (this.options.ajaxCredentials) r.withCredentials = this.options.ajaxCredentials
       r.onreadystatechange = () => {
         if (r.readyState !== 4) return
         /* Request succeeded */
         if (r.status === 200) {
-          let response
+          let schema
           try {
-            response = JSON.parse(r.responseText)
+            schema = JSON.parse(r.responseText)
           } catch (e) {
-            window.console.log(e)
-            throw new Error(`Failed to parse external ref ${fetchUrl}`)
+            // eslint-disable-next-line no-console
+            console.log(e)
+            throw new Error(`Failed to parse external ref ${url}`)
           }
-          if (!(typeof response === 'boolean' || typeof response === 'object') || response === null || Array.isArray(response)) {
-            throw new Error(`External ref does not contain a valid schema - ${fetchUrl}`)
+          if (!(typeof schema === 'boolean' || typeof schema === 'object') || schema === null || Array.isArray(schema)) {
+            throw new Error(`External ref does not contain a valid schema - ${url}`)
+          }
+
+          this.refs[uri] = schema
+          const fileBase = this._getFileBaseFromFileLocation(url)
+
+          // add leading slash
+          if (url !== uri) {
+            const pathItems = url.split('/')
+            url = (uri.substr(0, 1) === '/' ? '/' : '') + pathItems.pop()
           }
 
-          this.refs[url] = response
-          const fileBase = this._getFileBaseFromFileLocation(fetchUrl)
-          this._getDefinitions(response, `${fetchUrl}#/definitions/`)
-          this._loadExternalRefs(response, () => {
-            done++
-            if (done >= waiting && !callbackFired) {
-              callbackFired = true
+          this._getDefinitions(schema, `${url}#/definitions/`)
+          this._loadExternalRefs(schema, () => {
+            waiting--
+            if (done && !waiting) {
               callback()
             }
-          }, fetchUrl, fileBase)
+          }, url, fileBase)
         } else {
           /* Request failed */
-          window.console.log(r)
-          throw new Error(`Failed to fetch ref via ajax- ${url}`)
+          // eslint-disable-next-line no-console
+          console.log(r)
+          throw new Error(`Failed to fetch ref via ajax - ${uri}`)
         }
       }
       r.send()
     })
 
+    done = true
     if (!waiting) {
       callback()
     }

package/src/theme.js

@@ -105,7 +105,7 @@ export class AbstractTheme {
     return el
   }
 
-  getHeader (text) {
+  getHeader (text, pathDepth) {
     const el = document.createElement('h3')
     if (typeof text === 'string') {
       el.textContent = text
@@ -254,13 +254,41 @@ export class AbstractTheme {
     minusBtn.textContent = '-'
     plusBtn.textContent = '+'
 
+    const initialize = (input, min) => {
+      if (min) {
+        input.value = Number(min)
+      } else {
+        input.value = Number(input.value)
+      }
+      input.setAttribute('initialized', '1')
+    }
+
+    const min = input.getAttribute('min')
+    const max = input.getAttribute('max')
+
     minusBtn.addEventListener('click', () => {
-      input.stepDown()
+      if (!input.getAttribute('initialized')) {
+        initialize(input, min)
+      } else if (min) {
+        if (Number(input.value) > Number(min)) {
+          input.stepDown()
+        }
+      } else {
+        input.stepDown()
+      }
       trigger(input, 'change')
     })
 
     plusBtn.addEventListener('click', () => {
-      input.stepUp()
+      if (!input.getAttribute('initialized')) {
+        initialize(input, min)
+      } else if (max) {
+        if (Number(input.value) < Number(max)) {
+          input.stepUp()
+        }
+      } else {
+        input.stepUp()
+      }
       trigger(input, 'change')
     })
 
@@ -297,10 +325,13 @@ export class AbstractTheme {
 
   }
 
-  getFormControl (label, input, description, infoText) {
+  getFormControl (label, input, description, infoText, formName) {
     const el = document.createElement('div')
     el.classList.add('form-control')
-    if (label) el.appendChild(label)
+    if (label) {
+      el.appendChild(label)
+      if (formName) label.setAttribute('for', formName)
+    }
     if ((input.type === 'checkbox' || input.type === 'radio') && label) {
       input.style.width = 'auto'
       label.insertBefore(input, label.firstChild)

package/src/themes/bootstrap3.js

@@ -50,7 +50,7 @@ export class bootstrap3Theme extends AbstractTheme {
     return el
   }
 
-  getFormControl (label, input, description) {
+  getFormControl (label, input, description, infoText) {
     const group = document.createElement('div')
 
     if (label && (input.type === 'checkbox' || input.type === 'radio')) {
@@ -62,6 +62,7 @@ export class bootstrap3Theme extends AbstractTheme {
       if (label) {
         label.classList.add('control-label')
         group.appendChild(label)
+        if (infoText) label.appendChild(infoText)
       }
       group.appendChild(input)
     }
@@ -94,7 +95,6 @@ export class bootstrap3Theme extends AbstractTheme {
     tooltip.style.padding = '.5rem 1rem'
     tooltip.style['border-radius'] = '.25rem'
     tooltip.style.width = '25rem'
-    tooltip.style.transform = 'translateX(-27rem) translateY(-.5rem)'
     tooltip.style.position = 'absolute'
     tooltip.innerText = text
     icon.onmouseover = () => {
@@ -172,14 +172,14 @@ export class bootstrap3Theme extends AbstractTheme {
   getTabHolder (propertyName) {
     const pName = (typeof propertyName === 'undefined') ? '' : propertyName
     const el = document.createElement('div')
-    el.innerHTML = `<ul class='col-md-2 nav nav-pills nav-stacked' id='${pName}' role='tablist'></ul><div class='col-md-10 tab-content well well-small'  id='${pName}'></div>`
+    el.innerHTML = `<ul class='col-md-2 nav nav-pills nav-stacked' id='${pName}' role='tablist'></ul><div class='col-md-10 tab-content active well well-small'  id='${pName}'></div>`
     return el
   }
 
   getTopTabHolder (propertyName) {
     const pName = (typeof propertyName === 'undefined') ? '' : propertyName
     const el = document.createElement('div')
-    el.innerHTML = `<ul class='nav nav-tabs' id='${pName}' role='tablist'></ul><div class='tab-content well well-small'  id='${pName}'></div>`
+    el.innerHTML = `<ul class='nav nav-tabs' id='${pName}' role='tablist'></ul><div class='tab-content active well well-small'  id='${pName}'></div>`
     return el
   }
 

package/src/themes/bootstrap4.js

@@ -123,13 +123,47 @@ export class bootstrap4Theme extends AbstractTheme {
     minusBtn.textContent = '-'
     plusBtn.textContent = '+'
 
+    const initialize = (input, min) => {
+      if (min) {
+        input.value = Number(min)
+      } else {
+        input.value = Number(input.value)
+      }
+      input.setAttribute('initialized', '1')
+    }
+
+    const min = input.getAttribute('min')
+    const max = input.getAttribute('max')
+
+    input.addEventListener('change', () => {
+      if (!input.getAttribute('initialized')) {
+        input.setAttribute('initialized', '1')
+      }
+    })
+
     minusBtn.addEventListener('click', () => {
-      input.stepDown()
+      if (!input.getAttribute('initialized')) {
+        initialize(input, min)
+      } else if (min) {
+        if (Number(input.value) > Number(min)) {
+          input.stepDown()
+        }
+      } else {
+        input.stepDown()
+      }
       trigger(input, 'change')
     })
 
     plusBtn.addEventListener('click', () => {
-      input.stepUp()
+      if (!input.getAttribute('initialized')) {
+        initialize(input, min)
+      } else if (max) {
+        if (Number(input.value) < Number(max)) {
+          input.stepUp()
+        }
+      } else {
+        input.stepUp()
+      }
       trigger(input, 'change')
     })
 
@@ -218,6 +252,7 @@ export class bootstrap4Theme extends AbstractTheme {
       if (window.jQuery && window.jQuery().tooltip) {
         window.jQuery(button).tooltip()
       } else {
+        // eslint-disable-next-line no-console
         console.warn('Could not find popper jQuery plugin of Bootstrap.')
       }
     } else if (this.options.tooltip === 'css') {
@@ -370,12 +405,13 @@ export class bootstrap4Theme extends AbstractTheme {
     return el
   }
 
-  getHeader (text) {
+  getHeader (text, pathDepth) {
     /* var cardHeader = document.createElement('div') */
     /* cardHeader.classList.add('card-header') */
 
     const el = document.createElement('h3')
     el.classList.add('card-title')
+    el.classList.add('level-' + pathDepth)
 
     if (typeof text === 'string') {
       el.textContent = text
@@ -447,7 +483,7 @@ export class bootstrap4Theme extends AbstractTheme {
   addInputError (input, text) {
     if (!input.controlgroup) return
 
-    input.classList.add('is-invalid')
+    input.controlgroup.classList.add('is-invalid')
 
     if (!input.errmsg) {
       input.errmsg = document.createElement('p')
@@ -463,7 +499,7 @@ export class bootstrap4Theme extends AbstractTheme {
   removeInputError (input) {
     if (!input.errmsg) return
     input.errmsg.style.display = 'none'
-    input.classList.remove('is-invalid')
+    input.controlgroup.classList.remove('is-invalid')
   }
 
   getTabHolder (propertyName) {