@json-editor/json-editor 2.5.4 → 2.7.0

package/src/editors/radio.js

@@ -2,7 +2,6 @@ import { SelectEditor } from './select.js'
 
 export class RadioEditor extends SelectEditor {
   preBuild () {
-    this.schema.required = true /* force editor into required mode to prevent creation of empty radio button */
     super.preBuild()
   }
 
@@ -22,6 +21,12 @@ export class RadioEditor extends SelectEditor {
       this.onChange(true)
     }
 
+    if (!this.isRequired()) {
+      this.enum_display.shift()
+      this.enum_options.shift()
+      this.enum_values.shift()
+    }
+
     for (let i = 0; i < this.enum_values.length; i++) {
       /* form radio elements */
       this.input = this.theme.getFormRadio({

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) {
@@ -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 */
@@ -211,6 +213,10 @@ export class StringEditor extends AbstractEditor {
       /* it will generate an error trying to append it to the missing parentNode */
       if (this.input.parentNode) this.afterInputReady()
       if (this.adjust_height) this.adjust_height(this.input)
+      if (this.format === 'range') {
+        const output = this.control.querySelector('output')
+        output.value = this.input.value
+      }
     })
 
     /* Compile and store the template */

package/src/editors/table.js

@@ -1,5 +1,5 @@
 import { ArrayEditor } from './array.js'
-import { extend, trigger } from '../utilities.js'
+import { extend, generateUUID, trigger } from '../utilities.js'
 
 export class TableEditor extends ArrayEditor {
   register () {
@@ -99,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 */
@@ -346,6 +347,7 @@ export class TableEditor extends ArrayEditor {
 
   _createCopyButton (i, holder) {
     const button = this.getButton('', 'copy', 'button_copy_row_title_short')
+    const schema = this.schema
     button.classList.add('copy', 'json-editor-btntype-copy')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -354,8 +356,25 @@ export class TableEditor extends ArrayEditor {
       const j = e.currentTarget.getAttribute('data-i') * 1
       const value = this.getValue()
 
-      value.splice(j + 1, 0, value[j])
+      let newValue = value[j]
+
+      /* On copy, recreate uuid if needed. */
+      if (schema.items.type === 'string' && schema.items.format === 'uuid') {
+        newValue = generateUUID()
+      } else if (schema.items.type === 'object' && schema.items.properties) {
+        value.forEach((row, i) => {
+          if (j === i) {
+            for (const key of Object.keys(row)) {
+              if (schema.items.properties && schema.items.properties[key] && schema.items.properties[key].format === 'uuid') {
+                newValue = Object.assign({}, value[j])
+                newValue[key] = generateUUID()
+              }
+            }
+          }
+        })
+      }
 
+      value.splice(j + 1, 0, newValue)
       this.setValue(value)
       this.onChange(true)
       this.jsoneditor.trigger('copyRow', this.rows[j + 1])

package/src/editors/upload.js

@@ -257,7 +257,7 @@ export class UploadEditor extends AbstractEditor {
 
     if (this.options.auto_upload) {
       uploadButton.dispatchEvent(new window.MouseEvent('click'))
-      this.preview.removeChild(uploadButton)
+      uploadButton.parentNode.removeChild(uploadButton)
     }
   }
 

package/src/editors/uuid.js

@@ -1,3 +1,4 @@
+import { generateUUID } from '../utilities.js'
 import { StringEditor } from './string.js'
 
 export class UuidEditor extends StringEditor {
@@ -36,18 +37,7 @@ export class UuidEditor extends StringEditor {
   }
 
   getUuid () {
-    /* https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript */
-    let d = new Date().getTime()
-
-    if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
-      d += performance.now() /* use high-precision timer if available */
-    }
-
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-      const r = (d + Math.random() * 16) % 16 | 0
-      d = Math.floor(d / 16)
-      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-    })
+    return generateUUID()
   }
 
   testUuid (value) {

package/src/iconlib.js

@@ -8,7 +8,7 @@ export class AbstractIconLib {
   }
 
   getIconClass (key) {
-    return this.mapping[key] ? this.icon_prefix + this.mapping[key] : null
+    return this.mapping[key] ? this.icon_prefix + this.mapping[key] : this.icon_prefix + key
   }
 
   getIcon (key) {

package/src/schemaloader.js

@@ -1,11 +1,52 @@
 import { extend, hasOwnProperty } from './utilities.js'
 
+/**
+ * Handles loading Schema and tracking references.
+ */
 export class SchemaLoader {
   constructor (options) {
+    /**
+     * @prop {object}
+     *  Options of the schema. @see readme.
+     */
     this.options = options || {}
+
+    /**
+     * @prop {object}
+     *  The orginial schema to load
+     */
+    this.schema = {}
+
+    /**
+     * @prop {object}
+     *  Storage of External ref. Exemple :
+     *  refs = {
+     *    "fully/realized/path/to/schema.json": { ... }
+     *    "mylocalschema.json": { ... }
+     *  }
+     */
     this.refs = this.options.refs || {}
+
+    /**
+     * @prop {object}
+     *  Mapping between the schema and ref. Exemple:
+     *  refs_with_info = {
+     *   "#/counter/1": "fully/realized/path/to/schema.json"
+     *   "#/counter/2": "mylocalschema.json"
+     *  }
+     */
     this.refs_with_info = {}
+
+    /**
+     * @prop {string}
+     *  String to eewrite external ref with.
+     */
     this.refs_prefix = '#/counter/'
+
+    /**
+     * @prop {int}
+     *  Counter of ref
+     */
     this.refs_counter = 1
 
     this._subSchema1 = {
@@ -80,23 +121,54 @@ export class SchemaLoader {
     }
   }
 
-  load (schema, callback, fetchUrl, location) {
-    this._loadExternalRefs(schema, () => {
-      this._getDefinitions(schema, `${fetchUrl}#/definitions/`)
-      callback(this.expandRefs(schema))
-    }, fetchUrl, this._getFileBase(location))
+  /**
+   * Fully loads and expands JSON schema for a provided schema object and URL.
+   *
+   * The callback receives a expanded JSON Schema object with references
+   * replaced with loaded schemas.
+   *
+   * @param {object} schema - A JSON Schema.
+   * @param {string} fetchUrl - Base path from which to store the definitions.
+   *   Typically the URI of the schema.
+   * @param {*} location - The base URL from which to load relative paths.
+   * @returns {object} A JSON Schema with references expanded.
+   */
+  async load (schema, fetchUrl, location) {
+    this.schema = schema
+    await this._asyncloadExternalRefs(schema, fetchUrl, this._getFileBase(location), true)
+    return this.expandRefs(schema)
   }
 
+  /**
+   * Recursively expands loaded references in a provided schema.
+   *
+   * @param {object} schema - A JSON Schema with references already loaded.
+   * @param {boolean} recurseAllOf - Set true to recurse allOf properties.
+   * @returns {object} A JSON Schema with references expanded.
+   */
   expandRefs (schema, recurseAllOf) {
     const _schema = extend({}, schema)
-    if (!_schema.$ref) return _schema
 
-    const refObj = this.refs_with_info[_schema.$ref]
+    if (!_schema.$ref) return _schema
+    // This split the ref to get the Json point if it exists
+    // exemple #/counter/1#/definition/address +
+    // [1] -> /counter/1
+    // [2] -> /definition/address
+    const refWithPointerSplit = _schema.$ref.split('#')
+    // If local ref
+    if (refWithPointerSplit.length === 2 && !this.refs_with_info[_schema.$ref]) {
+      const sub = this.expandRecursivePointer(this.schema, refWithPointerSplit[1])
+      return this.extendSchemas(_schema, this.expandSchema(sub))
+    }
+    const refObj = (refWithPointerSplit.length > 2)
+      ? this.refs_with_info['#' + refWithPointerSplit[1]]
+      : this.refs_with_info[_schema.$ref]
     delete _schema.$ref
     const fetchUrl = refObj.$ref.startsWith('#')
       ? refObj.fetchUrl
       : ''
     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!`)
@@ -106,11 +178,41 @@ export class SchemaLoader {
         allOf[key] = this.expandRefs(allOf[key], true)
       })
     }
+    if (refWithPointerSplit.length > 2) {
+      return this.extendSchemas(_schema, this.expandSchema(this.expandRecursivePointer(this.refs[ref], refWithPointerSplit[2])))
+    } else {
+      return this.extendSchemas(_schema, this.expandSchema(this.refs[ref]))
+    }
+  }
 
-    return this.extendSchemas(_schema, this.expandSchema(this.refs[ref]))
+  /**
+  * Returns a subschema based on a JSON Pointer path.
+  * @param {object} schema - Schema too into
+  * @param {string} pointer - path to look for
+  * @param {object} original_schema - the Original schema
+  * @returns the subschema pointed to by the path
+  */
+  expandRecursivePointer (schema, pointer) {
+    let subschema = schema
+    pointer.split('/').slice(1).forEach(i => {
+      if (subschema[i]) {
+        subschema = subschema[i]
+      }
+    })
+    // If the result is a pointer, let's go for another turn
+    if (subschema.$refs && subschema.$refs.startsWith('#')) {
+      return this.expandRecursivePointer(schema, subschema.$refs)
+    }
+    return subschema
   }
 
-  expandSchema (schema, fileBase) {
+  /**
+   * Expands a JSON schema and its references.
+   *
+   * @param {object} schema - A JSON Schema with references already loaded.
+   * @returns {object} A JSON Schema with references expanded.
+   */
+  expandSchema (schema) {
     Object.entries(this._subSchema1).forEach(([key, func]) => {
       if (schema[key]) {
         func.call(this, schema)
@@ -136,34 +238,59 @@ 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)
   }
 
-  _getDefinitions (schema, path) {
-    if (schema.definitions) {
-      Object.keys(schema.definitions).forEach(i => {
-        this.refs[path + i] = schema.definitions[i]
-        if (schema.definitions[i].definitions) {
-          this._getDefinitions(schema.definitions[i], `${path + i}/definitions/`)
-        }
-      })
-    }
+  /**
+   * Rewrite the passed schema's JSON pointers to prepend with the current reference's path, so that it will be converted to a reference "counter".
+   *
+   * @example
+   * In file "../otherreferencedfile.json", referenced from "schema.json":
+   *
+   * "$ref": "#/definitions/myschema" => "$ref": "../path/to/my/referenced/schemafile.json#/definitions/myschema"
+   *   ...which will then be parsed later in loadExternalReferences() to "$ref": "#/counter/1#/definitions/myschema"
+   *
+   * @param {object} schema - A JSON Schema with the definitions key present.
+   * @param {string} path - Base path from which to store the definitions in refs. (exemple ../path/to/my/referenced/schemafile.json)
+   *   Typically the URI of the schema.
+   */
+  _manageRecursivePointer (schema, path) {
+    Object.keys(schema).forEach(i => {
+      if (schema[i].$ref && schema[i].$ref.indexOf('#') === 0) {
+        schema[i].$ref = path + schema[i].$ref
+      }
+    })
   }
 
-  _getExternalRefs (schema, fetchUrl) {
+  /**
+   * Recursively parse a (sub)schema to populate loader reference info.
+   *
+   * @param {object} schema - A JSON Schema
+   * @param {string} fetchUrl - Base path from which to store the definitions.
+   * @param {boolean} firstIteration - Is it the first time we load this function? Help making difference between external ref vs internal pointer
+   * @returns {array} Refs in the format of uri => true if external.
+   */
+  _getExternalRefs (schema, fetchUrl, firstIteration = false) {
+    if (!firstIteration) this._manageRecursivePointer(schema, fetchUrl)
     const refs = {}
     const mergeRefs = newrefs => Object.keys(newrefs).forEach(i => { refs[i] = true })
-
-    if (schema.$ref && typeof schema.$ref !== 'object') {
+    if (schema.$ref && typeof schema.$ref !== 'object' && !(schema.$ref.indexOf('#') === 0 && firstIteration)) {
+      let refBase = schema.$ref
+      let pointer = ''
+      // Strip any JSON pointers found for external refs.
+      if (refBase.indexOf('#') > 0) refBase = refBase.substr(0, refBase.indexOf('#'))
+      if (refBase !== schema.$ref) pointer = schema.$ref.substr(schema.$ref.indexOf('#'))
+      // We use a fragment idenfier to track json pointer in top of our pointer
       const refCounter = this.refs_prefix + this.refs_counter++
+      const refPointer = refCounter + pointer
       if (schema.$ref.substr(0, 1) !== '#' && !this.refs[schema.$ref]) {
-        refs[schema.$ref] = true
+        refs[refBase] = true
       }
-      this.refs_with_info[refCounter] = { fetchUrl, $ref: schema.$ref }
-      schema.$ref = refCounter
+      this.refs_with_info[refCounter] = { fetchUrl, $ref: refBase }
+      schema.$ref = refPointer
     }
 
     Object.values(schema).forEach(value => {
@@ -171,11 +298,14 @@ export class SchemaLoader {
       if (Array.isArray(value)) {
         Object.values(value).forEach(e => {
           if (e && typeof e === 'object') {
-            mergeRefs(this._getExternalRefs(e, fetchUrl))
+            mergeRefs(this._getExternalRefs(e, fetchUrl, firstIteration))
           }
         })
       } else {
-        mergeRefs(this._getExternalRefs(value, fetchUrl))
+        // Merge Ref if it's not a Pointer
+        if (!value.$ref || !(typeof value.$ref === 'string' && value.$ref.startsWith('#'))) {
+          mergeRefs(this._getExternalRefs(value, fetchUrl, firstIteration))
+        }
       }
     })
 
@@ -184,7 +314,6 @@ export class SchemaLoader {
     } else if (schema.$id && typeof schema.$id === 'string' && schema.$id.substr(0, 4) === 'urn:') {
       this.refs[schema.$id] = schema
     }
-
     return refs
   }
 
@@ -225,17 +354,31 @@ export class SchemaLoader {
     return uri.substr(0, 4) === 'urn:'
   }
 
-  _loadExternalRefs (schema, callback, fetchUrl, fileBase) {
-    const refs = this._getExternalRefs(schema, fetchUrl)
-    let done = false; let waiting = 0
-
-    Object.keys(refs).forEach(uri => {
-      if (this.refs[uri]) return
-
+  /**
+   * Loads external references via AJAX.
+   *
+   * Will fail if this.options.ajax is not set to true.
+   *
+   * @param {object} schema - JSON Schema with external references.
+   * @param {string} fetchUrl - Base path from which to store the definitions.
+   *   Typically the URI of the schema.
+   * @param {string} fileBase - The base URL from which to load relative paths.
+   *   Typically the URI of the schema minus filename, with trailing slash.
+   * @param {boolean} firstIteration - Is it the first time we load this function? Help making difference between external ref vs internal pointer
+   *
+   * @return {boolean}
+   * @throws Error
+   */
+  async _asyncloadExternalRefs (schema, fetchUrl, fileBase, firstIteration = false) {
+    const refs = this._getExternalRefs(schema, fetchUrl, firstIteration)
+    let waiting = 0
+    // Loop into all schema references
+    for (const uri of Object.keys(refs)) {
+      if (typeof uri === 'undefined') continue
+      if (this.refs[uri]) continue
       if (this._isUniformResourceName(uri)) {
         this.refs[uri] = 'loading'
         waiting++
-
         const urnResolver = this.options.urn_resolver
         let urn = uri
         if (typeof urnResolver !== 'function') {
@@ -247,95 +390,75 @@ export class SchemaLoader {
         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, '/')
-          })
+          let externalSchema
+          response = await urnResolver(urn)
+          try {
+            externalSchema = JSON.parse(response)
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.log(e)
+            throw new Error(`Failed to parse external ref ${urn}`)
+          }
+          if (!(typeof externalSchema === 'boolean' || typeof externalSchema === 'object') || externalSchema === null || Array.isArray(externalSchema)) {
+            throw new Error(`External ref does not contain a valid schema - ${urn}`)
+          }
+
+          this.refs[uri] = externalSchema
+
+          await this._asyncloadExternalRefs(externalSchema, uri, fileBase)
         } catch (e) {
           // eslint-disable-next-line no-console
           console.log(e)
           throw new Error(`Failed to parse external ref ${urn}`)
         }
 
-        if (typeof response !== 'boolean') {
+        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
+        continue
       }
-
       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', 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 schema
-          try {
-            schema = JSON.parse(r.responseText)
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.log(e)
-            throw new Error(`Failed to parse external ref ${url}`)
-          }
-          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._getDefinitions(schema, `${url}#/definitions/`)
-          this._loadExternalRefs(schema, () => {
-            waiting--
-            if (done && !waiting) {
-              callback()
-            }
-          }, url, fileBase)
-        } else {
-          /* Request failed */
-          // eslint-disable-next-line no-console
-          console.log(r)
-          throw new Error(`Failed to fetch ref via ajax - ${uri}`)
+      let url = this._joinUrl(uri, fileBase)
+      const response = await new Promise(resolve => {
+        const r = new XMLHttpRequest()
+        if (this.options.ajaxCredentials) r.withCredentials = this.options.ajaxCredentials
+        r.overrideMimeType('application/json')
+        r.open('GET', url, true)
+        r.onload = () => {
+          resolve(r)
+        }
+        r.onerror = (e) => {
+          resolve(undefined)
         }
+        r.send()
+      })
+      if (typeof response === 'undefined') throw new Error(`Failed to fetch ref via ajax - ${uri}`)
+      let externalSchema
+      try {
+        externalSchema = JSON.parse(response.responseText)
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e)
+        throw new Error(`Failed to parse external ref ${url}`)
       }
-      r.send()
-    })
 
-    done = true
+      if (!(typeof externalSchema === 'boolean' || typeof externalSchema === 'object') || externalSchema === null || Array.isArray(externalSchema)) {
+        throw new Error(`External ref does not contain a valid schema - ${url}`)
+      }
+      this.refs[uri] = externalSchema
+      const newfileBase = this._getFileBaseFromFileLocation(url)
+
+      // Add leading slash.
+      if (url !== uri) {
+        const pathItems = url.split('/')
+        url = (uri.substr(0, 1) === '/' ? '/' : '') + pathItems.pop()
+      }
+      await this._asyncloadExternalRefs(externalSchema, url, newfileBase)
+    }
     if (!waiting) {
-      callback()
+      return true
     }
   }
 

package/src/style.css

@@ -33,6 +33,9 @@
   position: absolute;
 }
 
+.je-not-loaded {
+  pointer-events: none;
+}
 .je-header {
   display: inline-block
 }

package/src/style.css.js

@@ -1,3 +1,3 @@
 /* eslint-disable */
-export default {".je-float-right-linkholder":"float:right;margin-left:10px",".je-modal":"background-color:white;border:1px%20solid%20black;box-shadow:3px%203px%20black;position:absolute;z-index:10",".je-infobutton-icon":"font-size:16px;font-weight:bold;padding:0.25rem;position:relative;display:inline-block",".je-infobutton-tooltip":"font-size:12px;font-weight:normal;font-family:sans-serif;visibility:hidden;background-color:rgba(50%2C%2050%2C%2050%2C%200.75);margin:0%200.25rem;color:%23fafafa;padding:0.5rem%201rem;border-radius:0.25rem;width:20rem;position:absolute",".je-header":"display:inline-block",".je-upload-preview img":"float:left;margin:0%200.5rem%200.5rem%200;max-width:100%25;max-height:5rem",".je-checkbox":"display:inline-block;width:auto",".je-checkbox-control--compact":"display:inline-block;margin-right:1rem",".je-radio":"display:inline-block;width:auto",".je-radio-control--compact":"display:inline-block;margin-right:1rem",".je-switcher":"background-color:transparent;display:inline-block;font-style:italic;font-weight:normal;height:auto;width:auto;margin-bottom:0;margin-left:5px;padding:0%200%200%203px",".je-textarea":"width:100%25;height:300px;box-sizing:border-box",".je-range-control":"text-align:center",".je-indented-panel":"padding-left:10px;margin-left:10px;border-left:1px%20solid%20%23ccc",".je-indented-panel--top":"padding-left:10px;margin-left:10px",".je-tabholder":"float:left;width:130px",".je-tabholder .content":"margin-left:120px",".je-tabholder--top":"margin-left:10px",".je-tabholder--clear":"clear:both",".je-tab":"border:1px%20solid%20%23ccc;border-width:1px%200%201px%201px;text-align:center;line-height:30px;border-radius:5px;border-bottom-right-radius:0;border-top-right-radius:0;font-weight:bold;cursor:pointer",".je-tab--top":"float:left;border:1px%20solid%20%23ccc;border-width:1px%201px%200px%201px;text-align:center;line-height:30px;border-radius:5px;padding-left:5px;padding-right:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;font-weight:bold;cursor:pointer",".je-block-link":"display:block",".je-media":"width:100%25"}
+export default {".je-float-right-linkholder":"float:right;margin-left:10px",".je-modal":"background-color:white;border:1px%20solid%20black;box-shadow:3px%203px%20black;position:absolute;z-index:10",".je-infobutton-icon":"font-size:16px;font-weight:bold;padding:0.25rem;position:relative;display:inline-block",".je-infobutton-tooltip":"font-size:12px;font-weight:normal;font-family:sans-serif;visibility:hidden;background-color:rgba(50%2C%2050%2C%2050%2C%200.75);margin:0%200.25rem;color:%23fafafa;padding:0.5rem%201rem;border-radius:0.25rem;width:20rem;position:absolute",".je-not-loaded":"pointer-events:none",".je-header":"display:inline-block",".je-upload-preview img":"float:left;margin:0%200.5rem%200.5rem%200;max-width:100%25;max-height:5rem",".je-checkbox":"display:inline-block;width:auto",".je-checkbox-control--compact":"display:inline-block;margin-right:1rem",".je-radio":"display:inline-block;width:auto",".je-radio-control--compact":"display:inline-block;margin-right:1rem",".je-switcher":"background-color:transparent;display:inline-block;font-style:italic;font-weight:normal;height:auto;width:auto;margin-bottom:0;margin-left:5px;padding:0%200%200%203px",".je-textarea":"width:100%25;height:300px;box-sizing:border-box",".je-range-control":"text-align:center",".je-indented-panel":"padding-left:10px;margin-left:10px;border-left:1px%20solid%20%23ccc",".je-indented-panel--top":"padding-left:10px;margin-left:10px",".je-tabholder":"float:left;width:130px",".je-tabholder .content":"margin-left:120px",".je-tabholder--top":"margin-left:10px",".je-tabholder--clear":"clear:both",".je-tab":"border:1px%20solid%20%23ccc;border-width:1px%200%201px%201px;text-align:center;line-height:30px;border-radius:5px;border-bottom-right-radius:0;border-top-right-radius:0;font-weight:bold;cursor:pointer",".je-tab--top":"float:left;border:1px%20solid%20%23ccc;border-width:1px%201px%200px%201px;text-align:center;line-height:30px;border-radius:5px;padding-left:5px;padding-right:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;font-weight:bold;cursor:pointer",".je-block-link":"display:block",".je-media":"width:100%25"}
 /* eslint-enable */

package/src/theme.js

@@ -299,8 +299,6 @@ export class AbstractTheme {
 
   getRangeOutput (input, startvalue) {
     const output = document.createElement('output')
-    output.value = startvalue || 0
-
     const updateOutput = e => { output.value = e.currentTarget.value }
     input.addEventListener('change', updateOutput, false)
     input.addEventListener('input', updateOutput, false)
@@ -325,10 +323,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)