umap-project 2.2.0b0__tar.gz → 2.2.1__tar.gz

{umap_project-2.2.0b0 → umap_project-2.2.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: umap-project
-Version: 2.2.0b0
+Version: 2.2.1
 Summary: Create maps with OpenStreetMap layers in a minute and embed them in your site.
 Author-email: Yohan Boniface <yb@enix.org>
 Maintainer-email: David Larlet <david@larlet.fr>
@@ -26,15 +26,15 @@ Requires-Dist: rcssmin==1.1.2
 Requires-Dist: requests==2.31.0
 Requires-Dist: rjsmin==1.2.2
 Requires-Dist: social-auth-app-django==5.4.1
-Requires-Dist: social-auth-core==4.5.3
+Requires-Dist: social-auth-core==4.5.4
 Provides-Extra: dev
 Requires-Dist: djlint==1.34.1; extra == 'dev'
-Requires-Dist: hatch==1.9.4; extra == 'dev'
+Requires-Dist: hatch==1.9.7; extra == 'dev'
 Requires-Dist: isort==5.13.2; extra == 'dev'
 Requires-Dist: mkdocs-material==9.5.18; extra == 'dev'
 Requires-Dist: mkdocs==1.5.3; extra == 'dev'
-Requires-Dist: pymdown-extensions==10.8; extra == 'dev'
-Requires-Dist: ruff==0.4.1; extra == 'dev'
+Requires-Dist: pymdown-extensions==10.8.1; extra == 'dev'
+Requires-Dist: ruff==0.4.2; extra == 'dev'
 Requires-Dist: vermin==1.6.0; extra == 'dev'
 Provides-Extra: docker
 Requires-Dist: uwsgi==2.0.25.1; extra == 'docker'
@@ -44,7 +44,7 @@ Requires-Dist: playwright>=1.39; extra == 'test'
 Requires-Dist: pytest-django==4.8.0; extra == 'test'
 Requires-Dist: pytest-playwright==0.4.4; extra == 'test'
 Requires-Dist: pytest-xdist<4,>=3.5.0; extra == 'test'
-Requires-Dist: pytest==8.1.1; extra == 'test'
+Requires-Dist: pytest==8.2.0; extra == 'test'
 Description-Content-Type: text/markdown
 
 # uMap project

{umap_project-2.2.0b0 → umap_project-2.2.1}/pyproject.toml

@@ -37,25 +37,25 @@ dependencies = [
   "requests==2.31.0",
   "rcssmin==1.1.2",
   "rjsmin==1.2.2",
-  "social-auth-core==4.5.3",
+  "social-auth-core==4.5.4",
   "social-auth-app-django==5.4.1",
 ]
 
 [project.optional-dependencies]
 dev = [
-  "hatch==1.9.4",
-  "ruff==0.4.1",
+  "hatch==1.9.7",
+  "ruff==0.4.2",
   "djlint==1.34.1",
   "mkdocs==1.5.3",
   "mkdocs-material==9.5.18",
   "vermin==1.6.0",
-  "pymdown-extensions==10.8",
+  "pymdown-extensions==10.8.1",
   "isort==5.13.2",
 ]
 test = [
   "factory-boy==3.2.1",
   "playwright>=1.39",
-  "pytest==8.1.1",
+  "pytest==8.2.0",
   "pytest-django==4.8.0",
   "pytest-playwright==0.4.4",
   "pytest-xdist>=3.5.0,<4",

umap_project-2.2.1/umap/__init__.py

@@ -0,0 +1 @@
+VERSION = "2.2.1"

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/base.css

@@ -580,20 +580,29 @@ i.info {
     margin-top: -8px;
     padding: 0 5px;
 }
-.pictogram-tabs {
+.flat-tabs {
     display: flex;
     justify-content: space-around;
     font-size: 1.2em;
-    padding-bottom: 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #bebebe;
 }
-.pictogram-tabs button {
+.flat-tabs button {
     padding: 10px;
-    color: #fff;
     text-decoration: none;
     cursor: pointer;
+    border-bottom: 1px solid transparent;
 }
-.pictogram-tabs .on {
+.flat-tabs button:hover,
+.flat-tabs .on {
     font-weight: bold;
+    border-bottom: 1px solid #444;
+}
+.dark .flat-tabs button {
+    color: #fff;
+}
+.dark .flat-tabs button:hover,
+.dark .flat-tabs .on {
     border-bottom: 1px solid #fff;
 }
 .umap-pictogram-category h6 {

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/modules/browser.js

@@ -44,7 +44,7 @@ export default class Browser {
       U.Icon.setIconContrast(icon, colorBox, symbol, bgcolor)
     }
     const viewFeature = (e) => {
-      feature.zoomTo({...e, callback: feature.view})
+      feature.zoomTo({ ...e, callback: feature.view })
     }
     DomEvent.on(zoom_to, 'click', viewFeature)
     DomEvent.on(title, 'click', viewFeature)
@@ -135,6 +135,7 @@ export default class Browser {
     DomEvent.disableClickPropagation(container)
 
     DomUtil.createTitle(container, translate('Browse data'), 'icon-layers')
+    this.tabsMenu(container, 'browse')
     const formContainer = DomUtil.create('div', '', container)
     this.dataContainer = DomUtil.create('div', '', container)
 
@@ -165,4 +166,18 @@ export default class Browser {
     DomEvent.on(button, 'click', map.openBrowser, map)
     return button
   }
+
+  tabsMenu(container, active) {
+    const tabs = L.DomUtil.create('div', 'flat-tabs', container)
+    const browse = L.DomUtil.add('button', 'flat tab-browse', tabs, L._('Data'))
+    DomEvent.on(browse, 'click', this.open, this)
+    if (this.map.options.facetKey) {
+      const facets = L.DomUtil.add('button', 'flat tab-facets', tabs, L._('Filters'))
+      DomEvent.on(facets, 'click', this.map.facets.open, this.map.facets)
+    }
+    const info = L.DomUtil.add('button', 'flat tab-info', tabs, L._('About'))
+    DomEvent.on(info, 'click', this.map.displayCaption, this.map)
+    let el = tabs.querySelector(`.tab-${active}`)
+    L.DomUtil.addClass(el, 'on')
+  }
 }

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/modules/dompurify.js

@@ -1,4 +1,4 @@
-import {default as DOMPurifyInitializer} from '../../vendors/dompurify/purify.es.mjs'
+import { default as DOMPurifyInitializer } from '../../vendors/dompurify/purify.es.js'
 import { JSDOM } from 'jsdom'
 
 console.log(DOMPurifyInitializer)

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/modules/facets.js

@@ -69,6 +69,7 @@ export default class Facets {
       container,
       translate('Facet search')
     )
+    this.map.browser.tabsMenu(container, 'facets')
     const defined = this.getDefined()
     const names = Object.keys(defined)
     const facetProperties = this.compute(names, defined)

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/modules/utils.js

@@ -1,4 +1,4 @@
-import { default as DOMPurifyInitializer } from '../../vendors/dompurify/purify.es.mjs'
+import { default as DOMPurifyInitializer } from '../../vendors/dompurify/purify.es.js'
 
 /**
  * Generate a pseudo-unique identifier (5 chars long, mixed-case alphanumeric)
@@ -70,7 +70,6 @@ export default function getPurify() {
 export function escapeHTML(s) {
   s = s ? s.toString() : ''
   s = getPurify().sanitize(s, {
-    USE_PROFILES: { html: true },
     ADD_TAGS: ['iframe'],
     ALLOWED_TAGS: [
       'h3',
@@ -86,9 +85,10 @@ export function escapeHTML(s) {
       'iframe',
       'img',
       'br',
+      'span',
     ],
     ADD_ATTR: ['target', 'allow', 'allowfullscreen', 'frameborder', 'scrolling'],
-    ALLOWED_ATTR: ['href', 'src', 'width', 'height'],
+    ALLOWED_ATTR: ['href', 'src', 'width', 'height', 'style'],
     // Added: `geo:` URL scheme as defined in RFC5870:
     // https://www.rfc-editor.org/rfc/rfc5870.html
     // The base RegExp comes from:
@@ -358,7 +358,7 @@ export function template(str, data) {
 }
 
 export function parseNaiveDate(value) {
-    const naive = new Date(value)
-    // Let's pretend naive date are UTC, and remove time…
-    return new Date(Date.UTC(naive.getFullYear(), naive.getMonth(), naive.getDate()))
+  const naive = new Date(value)
+  // Let's pretend naive date are UTC, and remove time…
+  return new Date(Date.UTC(naive.getFullYear(), naive.getMonth(), naive.getDate()))
 }

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/umap.autocomplete.js

@@ -35,27 +35,25 @@ U.AutoComplete = L.Class.extend({
   },
 
   createInput: function () {
-    this.input = L.DomUtil.element(
-      'input',
-      {
-        type: 'text',
-        placeholder: this.options.placeholder,
-        autocomplete: 'off',
-        className: this.options.className,
-      },
-      this.el
-    )
+    this.input = L.DomUtil.element({
+      tagName: 'input',
+      type: 'text',
+      parent: this.el,
+      placeholder: this.options.placeholder,
+      autocomplete: 'off',
+      className: this.options.className,
+    })
     L.DomEvent.on(this.input, 'keydown', this.onKeyDown, this)
     L.DomEvent.on(this.input, 'keyup', this.onKeyUp, this)
     L.DomEvent.on(this.input, 'blur', this.onBlur, this)
   },
 
   createContainer: function () {
-    this.container = L.DomUtil.element(
-      'ul',
-      { className: 'umap-autocomplete' },
-      document.body
-    )
+    this.container = L.DomUtil.element({
+      tagName: 'ul',
+      parent: document.body,
+      className: 'umap-autocomplete',
+    })
   },
 
   resizeContainer: function () {
@@ -174,8 +172,11 @@ U.AutoComplete = L.Class.extend({
   },
 
   createResult: function (item) {
-    const el = L.DomUtil.element('li', {}, this.container)
-    el.textContent = item.label
+    const el = L.DomUtil.element({
+      tagName: 'li',
+      parent: this.container,
+      textContent: item.label,
+    })
     const result = {
       item: item,
       el: el,
@@ -276,15 +277,22 @@ U.AutoComplete.Ajax.SelectMultiple = U.AutoComplete.Ajax.extend({
   initSelectedContainer: function () {
     return L.DomUtil.after(
       this.input,
-      L.DomUtil.element('ul', { className: 'umap-multiresult' })
+      L.DomUtil.element({ tagName: 'ul', className: 'umap-multiresult' })
     )
   },
 
   displaySelected: function (result) {
-    const result_el = L.DomUtil.element('li', {}, this.selected_container)
+    const result_el = L.DomUtil.element({
+      tagName: 'li',
+      parent: this.selected_container,
+    })
     result_el.textContent = result.item.label
-    const close = L.DomUtil.element('span', { className: 'close' }, result_el)
-    close.textContent = '×'
+    const close = L.DomUtil.element({
+      tagName: 'span',
+      parent: result_el,
+      className: 'close',
+      textContent: '×',
+    })
     L.DomEvent.on(
       close,
       'click',
@@ -302,15 +310,22 @@ U.AutoComplete.Ajax.Select = U.AutoComplete.Ajax.extend({
   initSelectedContainer: function () {
     return L.DomUtil.after(
       this.input,
-      L.DomUtil.element('div', { className: 'umap-singleresult' })
+      L.DomUtil.element({ tagName: 'div', className: 'umap-singleresult' })
     )
   },
 
   displaySelected: function (result) {
-    const result_el = L.DomUtil.element('div', {}, this.selected_container)
+    const result_el = L.DomUtil.element({
+      tagName: 'div',
+      parent: this.selected_container,
+    })
     result_el.textContent = result.item.label
-    const close = L.DomUtil.element('span', { className: 'close' }, result_el)
-    close.textContent = '×'
+    const close = L.DomUtil.element({
+      tagName: 'span',
+      parent: result_el,
+      className: 'close',
+      textContent: '×',
+    })
     this.input.style.display = 'none'
     L.DomEvent.on(
       close,

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/umap.controls.js

@@ -392,7 +392,7 @@ U.EditControl = L.Control.extend({
       'mouseover',
       function () {
         map.ui.tooltip({
-          content: `${L._('Switch to edit mode')} (<kbd>Ctrl+E</kbd>)`,
+          content: map.help.displayLabel('TOGGLE_EDIT'),
           anchor: enableEditing,
           position: 'bottom',
           delay: 750,
@@ -668,21 +668,29 @@ const ControlsMixin = {
     const container = L.DomUtil.create('div', 'umap-caption')
     L.DomUtil.createTitle(container, this.options.name, 'icon-caption')
     this.permissions.addOwnerLink('h5', container)
+    this.browser.tabsMenu(container, 'info')
     if (this.options.description) {
-      const description = L.DomUtil.create('div', 'umap-map-description', container)
-      description.innerHTML = U.Utils.toHTML(this.options.description)
+      const description = L.DomUtil.element({
+        tagName: 'div',
+        className: 'umap-map-description',
+        safeHTML: U.Utils.toHTML(this.options.description),
+        parent: container,
+      })
     }
     const datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container)
     this.eachVisibleDataLayer((datalayer) => {
       if (!datalayer.options.inCaption) return
       const p = L.DomUtil.create('p', 'datalayer-legend', datalayerContainer),
         legend = L.DomUtil.create('span', '', p),
-        headline = L.DomUtil.create('strong', '', p),
-        description = L.DomUtil.create('span', '', p)
+        headline = L.DomUtil.create('strong', '', p)
       datalayer.onceLoaded(function () {
         datalayer.renderLegend(legend)
         if (datalayer.options.description) {
-          description.innerHTML = U.Utils.toHTML(datalayer.options.description)
+          L.DomUtil.element({
+            tagName: 'span',
+            parent: p,
+            safeHTML: U.Utils.toHTML(datalayer.options.description),
+          })
         }
       })
       datalayer.renderToolbox(headline)
@@ -692,12 +700,11 @@ const ControlsMixin = {
       credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits'))
     title = L.DomUtil.add('h5', '', credits, L._('User content credits'))
     if (this.options.shortCredit || this.options.longCredit) {
-      L.DomUtil.add(
-        'p',
-        '',
-        credits,
-        U.Utils.toHTML(this.options.longCredit || this.options.shortCredit)
-      )
+      L.DomUtil.element({
+        tagName: 'p',
+        parent: credits,
+        safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit),
+      })
     }
     if (this.options.licence) {
       const licence = L.DomUtil.add(
@@ -715,24 +722,27 @@ const ControlsMixin = {
     } else {
       L.DomUtil.add('p', '', credits, L._('No licence has been set'))
     }
-    L.DomUtil.create('hr', '', credits)
     title = L.DomUtil.create('h5', '', credits)
     title.textContent = L._('Map background credits')
-    const tilelayerCredit = L.DomUtil.create('p', '', credits),
-      name = L.DomUtil.create('strong', '', tilelayerCredit),
-      attribution = L.DomUtil.create('span', '', tilelayerCredit)
-    name.textContent = `${this.selected_tilelayer.options.name} `
-    attribution.innerHTML = this.selected_tilelayer.getAttribution()
-    L.DomUtil.create('hr', '', credits)
-    const umapCredit = L.DomUtil.create('p', '', credits),
-      urls = {
-        leaflet: 'http://leafletjs.com',
-        django: 'https://www.djangoproject.com',
-        umap: 'http://wiki.openstreetmap.org/wiki/UMap',
-        changelog: 'https://umap-project.readthedocs.io/en/master/changelog/',
-        version: this.options.umap_version,
-      }
-    umapCredit.innerHTML = L._(
+    const tilelayerCredit = L.DomUtil.create('p', '', credits)
+    L.DomUtil.element({
+      tagName: 'strong',
+      parent: tilelayerCredit,
+      textContent: `${this.selected_tilelayer.options.name} `,
+    })
+    L.DomUtil.element({
+      tagName: 'span',
+      parent: tilelayerCredit,
+      safeHTML: this.selected_tilelayer.getAttribution(),
+    })
+    const urls = {
+      leaflet: 'http://leafletjs.com',
+      django: 'https://www.djangoproject.com',
+      umap: 'http://wiki.openstreetmap.org/wiki/UMap',
+      changelog: 'https://umap-project.readthedocs.io/en/master/changelog/',
+      version: this.options.umap_version,
+    }
+    const creditHTML = L._(
       `
       Powered by <a href="{leaflet}">Leaflet</a> and
       <a href="{django}">Django</a>,
@@ -741,6 +751,7 @@ const ControlsMixin = {
       `,
       urls
     )
+    L.DomUtil.element({ tagName: 'p', innerHTML: creditHTML, parent: credits })
     this.panel.open({ content: container })
   },
 
@@ -754,13 +765,7 @@ const ControlsMixin = {
     const rightContainer = L.DomUtil.create('div', 'umap-right-edit-toolbox', container)
     const logo = L.DomUtil.create('div', 'logo', leftContainer)
     L.DomUtil.createLink('', logo, 'uMap', '/', null, L._('Go to the homepage'))
-    const nameButton = L.DomUtil.createButton(
-      'map-name',
-      leftContainer,
-      '',
-      this.edit,
-      this
-    )
+    const nameButton = L.DomUtil.createButton('map-name', leftContainer, '')
     L.DomEvent.on(
       nameButton,
       'mouseover',
@@ -809,7 +814,7 @@ const ControlsMixin = {
     update()
     this.once('saved', L.bind(update, this))
     if (this.options.editMode === 'advanced') {
-      L.DomEvent.on(nameButton, 'click', this.edit, this)
+      L.DomEvent.on(nameButton, 'click', this.editCaption, this)
       L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
     }
     this.on('postsync', L.bind(update, this))
@@ -1052,16 +1057,16 @@ U.AttributionControl = L.Control.Attribution.extend({
     // Use our own container, so we can hide/show on small screens
     const credits = this._container.innerHTML
     this._container.innerHTML = ''
-    const container = L.DomUtil.add(
-      'div',
-      'attribution-container',
-      this._container,
-      credits
-    )
+    const container = L.DomUtil.create('div', 'attribution-container', this._container)
+    container.innerHTML = credits
     const shortCredit = this._map.getOption('shortCredit'),
       captionMenus = this._map.getOption('captionMenus')
     if (shortCredit) {
-      L.DomUtil.add('span', '', container, ` — ${U.Utils.toHTML(shortCredit)}`)
+      L.DomUtil.element({
+        tagName: 'span',
+        parent: container,
+        safeHTML: ` — ${U.Utils.toHTML(shortCredit)}`,
+      })
     }
     if (captionMenus) {
       const link = L.DomUtil.add('a', '', container, ` — ${L._('About')}`)

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/umap.core.js

@@ -118,19 +118,21 @@ L.DomUtil.createLink = (className, container, content, url, target, title) => {
 }
 
 L.DomUtil.createIcon = (parent, className, title, size = 16) => {
-  return L.DomUtil.element(
-    'i',
-    { className: `icon icon-${size} ${className}`, title: title || '' },
-    parent
-  )
+  return L.DomUtil.element({
+    tagName: 'i',
+    parent: parent,
+    className: `icon icon-${size} ${className}`,
+    title: title || '',
+  })
 }
 
 L.DomUtil.createButtonIcon = (parent, className, title, size = 16) => {
-  return L.DomUtil.element(
-    'button',
-    { className: `icon icon-${size} ${className}`, title: title || '' },
-    parent
-  )
+  return L.DomUtil.element({
+    tagName: 'button',
+    parent: parent,
+    className: `icon icon-${size} ${className}`,
+    title: title || '',
+  })
 }
 
 L.DomUtil.createTitle = (parent, text, className, tag = 'h3') => {
@@ -163,8 +165,13 @@ L.DomUtil.classIf = (el, className, bool) => {
   else L.DomUtil.removeClass(el, className)
 }
 
-L.DomUtil.element = (what, attrs, parent) => {
-  const el = document.createElement(what)
+L.DomUtil.element = ({ tagName, parent, ...attrs }) => {
+  const el = document.createElement(tagName)
+  if (attrs.innerHTML) {
+    attrs.innerHTML = U.Utils.escapeHTML(attrs.innerHTML)
+  } else if (attrs.safeHTML) {
+    attrs.innerHTML = attrs.safeHTML
+  }
   for (const attr in attrs) {
     el[attr] = attrs[attr]
   }
@@ -314,6 +321,14 @@ U.Help = L.Class.extend({
       shortcut: 'Modifier+S',
       label: L._('Save current edits'),
     },
+    EDIT_FEATURE_LAYER: {
+      shortcut: 'Modifier+⇧+Click',
+      label: L._("Edit feature's layer"),
+    },
+    CONTINUE_LINE: {
+      shortcut: 'Modifier+Click',
+      label: L._('Continue line'),
+    },
   },
 
   displayLabel: function (action, withKbdTag = true) {

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/umap.features.js

@@ -448,7 +448,7 @@ U.FeatureMixin = {
     }
     items = items.concat(
       {
-        text: L._("Edit feature's layer") + ' (Ctrl+⇧+Click)',
+        text: this.map.help.displayLabel('EDIT_FEATURE_LAYER'),
         callback: this.datalayer.edit,
         context: this.datalayer,
         iconCls: 'umap-edit',
@@ -1055,7 +1055,7 @@ U.Polyline = L.Polyline.extend({
         })
       } else if (index === 0 || index === e.vertex.getLastIndex()) {
         items.push({
-          text: L._('Continue line (Ctrl+Click)'),
+          text: this.map.help.displayLabel('CONTINUE_LINE'),
           callback: e.vertex.continue,
           context: e.vertex.continue,
         })

{umap_project-2.2.0b0 → umap_project-2.2.1}/umap/static/umap/js/umap.forms.js

@@ -475,7 +475,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   build: function () {
     L.FormBuilder.BlurInput.prototype.build.call(this)
     this.buttons = L.DomUtil.create('div', '', this.parentNode)
-    this.tabs = L.DomUtil.create('div', 'pictogram-tabs', this.parentNode)
+    this.tabs = L.DomUtil.create('div', 'flat-tabs', this.parentNode)
     this.body = L.DomUtil.create('div', 'umap-pictogram-body', this.parentNode)
     this.footer = L.DomUtil.create('div', '', this.parentNode)
     this.updatePreview()
@@ -757,12 +757,15 @@ L.FormBuilder.FacetSearchChoices = L.FormBuilder.Element.extend({
   },
 
   buildLabel: function () {
-    this.label = L.DomUtil.element('legend', {textContent: this.options.label})
+    this.label = L.DomUtil.element({
+      tagName: 'legend',
+      textContent: this.options.label,
+    })
   },
 
   buildLi: function (value) {
     const property_li = L.DomUtil.create('li', '', this.ul)
-    const label = L.DomUtil.add('label', '', property_li)
+    const label = L.DomUtil.create('label', '', property_li)
     const input = L.DomUtil.create('input', '', label)
     L.DomUtil.add('span', '', label, value)
 
@@ -800,14 +803,14 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
   build: function () {
     this.container = L.DomUtil.create('fieldset', 'umap-facet', this.parentNode)
     this.container.appendChild(this.label)
-    const {min, max, type} = this.options.criteria
+    const { min, max, type } = this.options.criteria
     this.type = type
     this.inputType = this.getInputType(this.type)
 
     const [minLabel, maxLabel] = this.getLabels()
 
     this.minLabel = L.DomUtil.create('label', '', this.container)
-    this.minLabel.innerHTML = minLabel
+    this.minLabel.textContent = minLabel
 
     this.minInput = L.DomUtil.create('input', '', this.minLabel)
     this.minInput.type = this.inputType
@@ -817,9 +820,8 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
       this.minInput.dataset.value = min
     }
 
-
     this.maxLabel = L.DomUtil.create('label', '', this.container)
-    this.maxLabel.innerHTML = maxLabel
+    this.maxLabel.textContent = maxLabel
 
     this.maxInput = L.DomUtil.create('input', '', this.maxLabel)
     this.maxInput.type = this.inputType
@@ -834,7 +836,10 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
   },
 
   buildLabel: function () {
-    this.label = L.DomUtil.element('legend', {textContent: this.options.label})
+    this.label = L.DomUtil.element({
+      tagName: 'legend',
+      textContent: this.options.label,
+    })
   },
 
   toJS: function () {
@@ -974,22 +979,23 @@ L.FormBuilder.Range = L.FormBuilder.FloatInput.extend({
   },
 
   buildHelpText: function () {
-    const datalist = L.DomUtil.create(
-      'datalist',
-      'umap-field-datalist',
-      this.getHelpTextParent()
-    )
-    datalist.id = `range-${this.options.label || this.name}`
-    this.input.setAttribute('list', datalist.id)
     let options = ''
-    const step = this.options.step || 1,
-      digits = step < 1 ? 1 : 0
+    const step = this.options.step || 1
+    const digits = step < 1 ? 1 : 0
+    const id = `range-${this.options.label || this.name}`
     for (let i = this.options.min; i <= this.options.max; i += this.options.step) {
       options += `<option value="${i.toFixed(digits)}" label="${i.toFixed(
         digits
       )}"></option>`
     }
-    datalist.innerHTML = options
+    const datalist = L.DomUtil.element({
+      tagName: 'datalist',
+      parent: this.getHelpTextParent(),
+      className: 'umap-field-datalist',
+      safeHTML: options,
+      id: id,
+    })
+    this.input.setAttribute('list', id)
     L.FormBuilder.Input.prototype.buildHelpText.call(this)
   },
 })