@eodash/eodash 5.2.0 → 5.3.1

package/dist/client/EodashLayerControl-CSnQh2tb.js

@@ -0,0 +1,1517 @@
+import { withAsyncContext, computed, ref, createElementBlock, openBlock, createCommentVNode, mergeProps, unref, renderSlot, createElementVNode, toDisplayString } from 'vue';
+import 'color-legend-element';
+import '@eox/timecontrol';
+import { M as mapCompareEl, h as mapEl, N as getColFromLayer } from './helpers-CI_7CUmn.js';
+import { _ as _export_sfc, E as useSTAcStore, M as layerControlFormValueCompare, N as layerControlFormValue, J as eodashCompareCollections, I as eodashCollections } from './asWebComponent-DZeEbWG0.js';
+import { storeToRefs } from 'pinia';
+
+/**
+ * Taken from jQuery 2.1.3
+ *
+ * #### NOTE
+ * Not plain objects is,
+ * - Any object or value whose internal [[Class]] property is not "[object Object]"
+ * - DOM nodes
+ * - window
+ *
+ * @param {Object} obj - Variable name
+ * @returns {Boolean}
+ */
+function isPlainObject (obj) {
+  if (obj === null) return false
+
+  if (typeof obj !== 'object' || obj.nodeType || (obj === obj.window)) return false
+
+  if (obj.constructor && !hasOwnProperty(obj.constructor.prototype, 'isPrototypeOf')) return false
+
+  /* Most likely |obj| is a plain object, created by {} or constructed with new Object */
+  return true
+}
+
+function deepCopy (target) {
+  return isPlainObject(target) ? extend({}, target) : Array.isArray(target) ? target.map(deepCopy) : target
+}
+
+function extend (destination, ...args) {
+  args.forEach(source => {
+    if (source) {
+      Object.keys(source).forEach(property => {
+        if (source[property] && isPlainObject(source[property])) {
+          if (!hasOwnProperty(destination, property)) destination[property] = {};
+          extend(destination[property], source[property]);
+        } else if (Array.isArray(source[property])) {
+          destination[property] = deepCopy(source[property]);
+        } else {
+          destination[property] = source[property];
+        }
+      });
+    }
+  });
+
+  return destination
+}
+
+/**
+ * Helper function to check own property key
+ *
+ * @see https://eslint.org/docs/rules/no-prototype-builtins
+ */
+function hasOwnProperty (obj, key) {
+  return obj && Object.prototype.hasOwnProperty.call(obj, key)
+}
+
+/**
+ * All editors should extend from this class
+ */
+class AbstractEditor {
+  constructor (options, defaults) {
+    this.defaults = defaults;
+    this.jsoneditor = options.jsoneditor;
+    this.theme = this.jsoneditor.theme;
+    this.template_engine = this.jsoneditor.template;
+    this.iconlib = this.jsoneditor.iconlib;
+    this.translate = this.jsoneditor.translate || this.defaults.translate;
+    this.translateProperty = this.jsoneditor.translateProperty || this.defaults.translateProperty;
+    this.original_schema = options.schema;
+    this.schema = this.jsoneditor.expandSchema(this.original_schema);
+    this.active = true;
+    this.isUiOnly = false;
+    this.options = extend({}, (this.options || {}), (this.schema.options || {}), (options.schema.options || {}), options);
+    this.enforceConstEnabled = this.options.enforce_const ?? this.jsoneditor.options.enforce_const;
+    this.formname = this.jsoneditor.options.form_name_root || 'root';
+
+    if (!options.path && !this.schema.id) this.schema.id = this.formname;
+    this.path = options.path || this.formname;
+    this.formname = options.formname || this.path.replace(/\.([^.]+)/g, '[$1]');
+
+    this.parent = options.parent;
+    this.key = this.parent !== undefined ? this.path.split('.').slice(this.parent.path.split('.').length).join('.') : this.path;
+
+    this.link_watchers = [];
+    this.watchLoop = false;
+    this.optInWidget = this.options.opt_in_widget ?? this.jsoneditor.options.opt_in_widget;
+
+    if (options.container) this.setContainer(options.container);
+    this.registerDependencies();
+  }
+
+  onChildEditorChange (editor, eventData) {
+    this.onChange(true, false, eventData);
+  }
+
+  notify () {
+    if (this.path) this.jsoneditor.notifyWatchers(this.path);
+  }
+
+  change (eventData) {
+    if (this.parent) this.parent.onChildEditorChange(this, eventData);
+    else if (this.jsoneditor) this.jsoneditor.onChange(eventData);
+  }
+
+  onChange (bubble, fromTemplate, eventData) {
+    this.notify();
+
+    if (!fromTemplate) {
+      if (this.watch_listener) this.watch_listener();
+    }
+
+    if (bubble) this.change(eventData);
+  }
+
+  register () {
+    this.jsoneditor.registerEditor(this);
+    if (this.input && !this.label) {
+      const ariaLabel = this.getTitle() || this.formname;
+      this.input.setAttribute('aria-label', ariaLabel);
+    }
+    this.onChange();
+  }
+
+  unregister () {
+    if (!this.jsoneditor) return
+    this.jsoneditor.unregisterEditor(this);
+  }
+
+  getNumColumns () {
+    return 12
+  }
+
+  isActive () {
+    return this.active
+  }
+
+  activate () {
+    this.active = true;
+    this.optInCheckbox.checked = true;
+    this.enable();
+    this.change();
+  }
+
+  deactivate () {
+    /* only non required properties can be deactivated. */
+    if (!this.isRequired()) {
+      this.active = false;
+      this.optInCheckbox.checked = false;
+      this.disable();
+      this.change();
+    }
+  }
+
+  registerDependencies () {
+    this.dependenciesFulfilled = true;
+    const deps = this.options.dependencies;
+    if (!deps) {
+      return
+    }
+
+    Object.keys(deps).forEach(dependency => {
+      let path;
+      const isFullPath = dependency.startsWith(this.jsoneditor.root.path);
+
+      if (isFullPath) {
+        path = dependency;
+      } else {
+        path = this.path.split('.');
+        path[path.length - 1] = dependency;
+        path = path.join('.');
+      }
+
+      this.jsoneditor.watch(path, () => {
+        this.evaluateDependencies();
+      });
+    });
+  }
+
+  evaluateDependencies () {
+    const wrapper = this.container || this.control;
+    if (!wrapper || this.jsoneditor === null) {
+      return
+    }
+
+    const deps = this.options.dependencies;
+    if (!deps) {
+      return
+    }
+
+    // Assume true and set to false if any unmet dependencies are found
+    const previousStatus = this.dependenciesFulfilled;
+    this.dependenciesFulfilled = true;
+
+    Object.keys(deps).forEach(dependency => {
+      let path;
+      const isFullPath = dependency.startsWith(this.jsoneditor.root.path);
+
+      if (isFullPath) {
+        path = dependency;
+      } else {
+        path = this.path.split('.');
+        path[path.length - 1] = dependency;
+        path = path.join('.');
+      }
+
+      const choices = deps[dependency];
+      this.checkDependency(path, choices);
+    });
+
+    if (this.dependenciesFulfilled !== previousStatus) {
+      this.notify();
+    }
+
+    let displayMode = this.dependenciesFulfilled ? 'block' : 'none';
+
+    if (this.options.hidden) {
+      displayMode = 'none';
+    }
+
+    if (wrapper.tagName === 'TD') {
+      Object.keys(wrapper.childNodes).forEach(child => (wrapper.childNodes[child].style.display = displayMode));
+    } else wrapper.style.display = displayMode;
+  }
+
+  checkDependency (path, choices) {
+    if (this.path === path || this.jsoneditor === null) {
+      return
+    }
+
+    const editor = this.jsoneditor.getEditor(path);
+    const value = editor ? editor.getValue() : undefined;
+
+    if (!editor || !editor.dependenciesFulfilled || !value) {
+      this.dependenciesFulfilled = false;
+    } else if (Array.isArray(choices)) {
+      this.dependenciesFulfilled = choices.some(choice => {
+        if (JSON.stringify(value) === JSON.stringify(choice)) {
+          return true
+        }
+      });
+    } else if (typeof choices === 'object') {
+      if (typeof value !== 'object') {
+        this.dependenciesFulfilled = choices === value;
+      } else {
+        Object.keys(choices).some(key => {
+          if (!hasOwnProperty(choices, key)) {
+            return false
+          }
+          if (!hasOwnProperty(value, key) || choices[key] !== value[key]) {
+            this.dependenciesFulfilled = false;
+            return true
+          }
+        });
+      }
+    } else if (typeof choices === 'string' || typeof choices === 'number') {
+      this.dependenciesFulfilled = this.dependenciesFulfilled && value === choices;
+    } else if (typeof choices === 'boolean') {
+      if (choices) {
+        this.dependenciesFulfilled = this.dependenciesFulfilled && (value || value.length > 0);
+      } else {
+        this.dependenciesFulfilled = this.dependenciesFulfilled && (!value || value.length === 0);
+      }
+    }
+  }
+
+  setContainer (container) {
+    this.container = container;
+    this.setContainerAttributes();
+    if (this.schema.id) this.container.setAttribute('data-schemaid', this.schema.id);
+    if (this.schema.type && typeof this.schema.type === 'string') this.container.setAttribute('data-schematype', this.schema.type);
+    this.container.setAttribute('data-schemapath', this.path);
+  }
+
+  setOptInCheckbox () {
+    let optIn;
+
+    if (this.optInWidget === 'switch') {
+      optIn = this.theme.getOptInSwitch(this.formname);
+    } else {
+      optIn = this.theme.getOptInCheckbox(this.formname);
+    }
+
+    this.optInCheckbox = optIn.checkbox;
+    this.optInContainer = optIn.container;
+
+    this.optInCheckbox.addEventListener('click', () => {
+      if (this.isActive()) {
+        this.deactivate();
+      } else {
+        this.activate();
+      }
+    });
+
+    /* append active/deactive checkbox if show_opt_in is true */
+    const globalOptIn = this.jsoneditor.options.show_opt_in;
+    const parentOptInDefined = (typeof this.parent.options.show_opt_in !== 'undefined');
+    const parentOptInEnabled = (parentOptInDefined && this.parent.options.show_opt_in === true);
+    const parentOptInDisabled = (parentOptInDefined && this.parent.options.show_opt_in === false);
+
+    if (parentOptInEnabled || (!parentOptInDisabled && globalOptIn) || (!parentOptInDefined && globalOptIn)) {
+      /* and control to type object editors if they are not required */
+      if (this.parent && this.parent.schema.type === 'object' && !this.isRequired() && this.header) {
+        this.header.insertBefore(this.optInContainer, this.header.firstChild);
+        this.optInAppended = true;
+      }
+    }
+  }
+
+  preBuild () {
+
+  }
+
+  build () {
+
+  }
+
+  postBuild () {
+    this.setupWatchListeners();
+    this.addLinks();
+    this.register();
+    this.setValue(this.getDefault(), true);
+    this.updateHeaderText();
+    this.onWatchedFieldChange();
+
+    if (this.options.titleHidden) {
+      this.theme.visuallyHidden(this.label);
+      this.theme.visuallyHidden(this.header);
+    }
+
+    if (this.enforceConstEnabled && this.schema.const) {
+      this.disable();
+    }
+  }
+
+  setupWatchListeners () {
+    /* Watched fields */
+    this.watched = {};
+    if (this.schema.vars) this.schema.watch = this.schema.vars;
+    this.watched_values = {};
+    this.watch_listener = () => {
+      if (this.refreshWatchedFieldValues()) {
+        this.onWatchedFieldChange();
+      }
+    };
+
+    if (hasOwnProperty(this.schema, 'watch')) {
+      let path; let pathParts; let first; let root; let adjustedPath;
+      const myPath = this.container.getAttribute('data-schemapath');
+
+      Object.keys(this.schema.watch).forEach(name => {
+        path = this.schema.watch[name];
+        if (Array.isArray(path)) {
+          if (path.length < 2) return
+          pathParts = [path[0]].concat(path[1].split('.'));
+        } else {
+          pathParts = path.split('.');
+          if (!this.theme.closest(this.container, `[data-schemaid="${pathParts[0]}"]`)) pathParts.unshift('#');
+        }
+        first = pathParts.shift();
+
+        if (first === '#') first = this.jsoneditor.schema.id || this.jsoneditor.root.formname;
+
+        /* Find the root node for this template variable */
+        root = this.theme.closest(this.container, `[data-schemaid="${first}"]`);
+        if (!root) throw new Error(`Could not find ancestor node with id ${first}`)
+
+        /* Keep track of the root node and path for use when rendering the template */
+        adjustedPath = `${root.getAttribute('data-schemapath')}.${pathParts.join('.')}`;
+
+        if (myPath.startsWith(adjustedPath)) this.watchLoop = true;
+        this.jsoneditor.watch(adjustedPath, this.watch_listener);
+
+        this.watched[name] = adjustedPath;
+      });
+    }
+
+    /* Dynamic header */
+    if (this.schema.headerTemplate) {
+      this.header_template = this.jsoneditor.compileTemplate(this.schema.headerTemplate, this.template_engine);
+    }
+  }
+
+  addLinks () {
+    /* Add links */
+    if (!this.no_link_holder) {
+      this.link_holder = this.theme.getLinksHolder();
+      /* if description element exists, insert the link before */
+      if (typeof this.description !== 'undefined') this.description.parentNode.insertBefore(this.link_holder, this.description);
+      /* otherwise just insert link at bottom of container */
+      else this.container.appendChild(this.link_holder);
+      if (this.schema.links) {
+        for (let i = 0; i < this.schema.links.length; i++) {
+          this.addLink(this.getLink(this.schema.links[i]));
+        }
+      }
+    }
+  }
+
+  onMove () {}
+
+  getButton (text, icon, title, args = []) {
+    const btnClass = `json-editor-btn-${icon}`;
+    if (!this.iconlib) icon = null;
+    else icon = this.iconlib.getIcon(icon);
+
+    text = this.translate(text, args);
+    title = this.translate(title, args);
+
+    if (!icon && title) {
+      text = title;
+      title = null;
+    }
+
+    const btn = this.theme.getButton(text, icon, title);
+    btn.classList.add(btnClass);
+    return btn
+  }
+
+  setButtonText (button, text, icon, title, args = []) {
+    if (!this.iconlib) icon = null;
+    else icon = this.iconlib.getIcon(icon);
+
+    text = this.translate(text, args);
+    title = this.translate(title, args);
+
+    if (!icon && title) {
+      text = title;
+      title = null;
+    }
+
+    return this.theme.setButtonText(button, text, icon, title)
+  }
+
+  addLink (link) {
+    if (this.link_holder) this.link_holder.appendChild(link);
+  }
+
+  getLink (data) {
+    let holder;
+    let link;
+
+    /* Get mime type of the link */
+    const mime = data.mediaType || 'application/javascript';
+    const type = mime.split('/')[0];
+
+    /* Template to generate the link href */
+    const href = this.jsoneditor.compileTemplate(data.href, this.template_engine);
+    const relTemplate = this.jsoneditor.compileTemplate(data.rel ? data.rel : data.href, this.template_engine);
+
+    /* Template to generate the link's download attribute */
+    let download = null;
+    if (data.download) download = data.download;
+
+    if (download && download !== true) {
+      download = this.jsoneditor.compileTemplate(download, this.template_engine);
+    }
+
+    /* Image links */
+    if (type === 'image') {
+      holder = this.theme.getBlockLinkHolder();
+      link = document.createElement('a');
+      link.setAttribute('target', '_blank');
+      const image = document.createElement('img');
+
+      this.theme.createImageLink(holder, link, image);
+
+      /* When a watched field changes, update the url */
+      this.link_watchers.push(vars => {
+        const url = href(vars);
+        const rel = relTemplate(vars);
+        link.setAttribute('href', url);
+        link.setAttribute('title', rel || url);
+        image.setAttribute('src', url);
+      });
+    /* Audio/Video links */
+    } else if (['audio', 'video'].includes(type)) {
+      holder = this.theme.getBlockLinkHolder();
+
+      link = this.theme.getBlockLink();
+      link.setAttribute('target', '_blank');
+
+      const media = document.createElement(type);
+      media.setAttribute('controls', 'controls');
+
+      this.theme.createMediaLink(holder, link, media);
+
+      /* When a watched field changes, update the url */
+      this.link_watchers.push(vars => {
+        const url = href(vars);
+        const rel = relTemplate(vars);
+        link.setAttribute('href', url);
+        link.textContent = rel || url;
+        media.setAttribute('src', url);
+      });
+    /* Text links or blank link */
+    } else {
+      link = holder = this.theme.getBlockLink();
+      holder.setAttribute('target', '_blank');
+      holder.textContent = data.rel;
+      holder.style.display = 'none'; /* Prevent blank links from showing up when using custom view */
+
+      /* When a watched field changes, update the url */
+      this.link_watchers.push(vars => {
+        const url = href(vars);
+        const rel = relTemplate(vars);
+        if (url) holder.style.display = '';
+        holder.setAttribute('href', url);
+        holder.textContent = rel || url;
+      });
+    }
+
+    if (download && link) {
+      if (download === true) {
+        link.setAttribute('download', '');
+      } else {
+        this.link_watchers.push(vars => {
+          link.setAttribute('download', download(vars));
+        });
+      }
+    }
+
+    if (data.class) {
+      const classNames = data.class.split(' ');
+
+      classNames.forEach((className) => {
+        link.classList.add(className);
+      });
+    }
+
+    return holder
+  }
+
+  refreshWatchedFieldValues () {
+    if (!this.watched_values) return
+    const watched = {};
+    let changed = false;
+
+    if (this.watched) {
+      Object.keys(this.watched).forEach(name => {
+        const editor = this.jsoneditor.getEditor(this.watched[name]);
+        const val = editor ? editor.getValue() : null;
+        if (this.watched_values[name] !== val) changed = true;
+        watched[name] = val;
+      });
+    }
+
+    watched.self = this.getValue();
+    if (this.watched_values.self !== watched.self) changed = true;
+
+    this.watched_values = watched;
+
+    return changed
+  }
+
+  getWatchedFieldValues () {
+    return this.watched_values
+  }
+
+  updateHeaderText () {
+    if (this.header) {
+      const headerText = this.getHeaderText();
+      /* If the header has children, only update the text node's value */
+      if (this.header.children.length) {
+        for (let i = 0; i < this.header.childNodes.length; i++) {
+          if (this.header.childNodes[i].nodeType === 3) {
+            this.header.childNodes[i].nodeValue = this.cleanText(headerText);
+            break
+          }
+        }
+      /* Otherwise, just update the entire node */
+      } else {
+        if (window.DOMPurify) this.header.innerHTML = window.DOMPurify.sanitize(headerText);
+        else this.header.textContent = this.cleanText(headerText);
+      }
+    }
+  }
+
+  getHeaderText (titleOnly) {
+    if (this.header_text) return this.header_text
+    else if (titleOnly) return this.translateProperty(this.schema.title)
+    else return this.getTitle()
+  }
+
+  getPathDepth () {
+    return this.path.split('.').length
+  }
+
+  cleanText (txt) {
+    /* Clean out HTML tags from txt */
+    const tmp = document.createElement('div');
+    tmp.innerHTML = txt;
+    return (tmp.textContent || tmp.innerText)
+  }
+
+  onWatchedFieldChange () {
+    let vars;
+
+    if (this.header_template) {
+      vars = extend(this.getWatchedFieldValues(), {
+        key: this.key,
+        i: this.key,
+        i0: (this.key * 1),
+        i1: (this.key * 1 + 1),
+        title: this.getTitle()
+      });
+
+      // object properties
+      if (this.editors && Object.keys(this.editors).length) {
+        vars.properties = {};
+
+        Object.keys(this.editors).forEach((key) => {
+          const editor = this.editors[key];
+
+          if (editor.schema && editor.schema.enum && editor.schema.options && editor.schema.options.enum_titles) {
+            const enumIndex = editor.schema.enum.indexOf(editor.value);
+            const enumTitle = editor.options.enum_titles[enumIndex];
+            vars.properties[key] = {
+              enumTitle
+            };
+          }
+        });
+      }
+
+      const headerText = this.header_template(vars);
+
+      if (headerText !== this.header_text) {
+        this.header_text = headerText;
+        this.updateHeaderText();
+        this.notify();
+        /* this.fireChangeHeaderEvent(); */
+      }
+    }
+    if (this.link_watchers.length) {
+      vars = this.getWatchedFieldValues();
+      for (let i = 0; i < this.link_watchers.length; i++) {
+        this.link_watchers[i](vars);
+      }
+    }
+  }
+
+  setValue (value) {
+    value = this.applyConstFilter(value);
+    this.value = value;
+  }
+
+  applyConstFilter (value) {
+    if (this.enforceConstEnabled && typeof this.schema.const !== 'undefined') {
+      value = this.schema.const;
+    }
+
+    return value
+  }
+
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
+    }
+    return this.value
+  }
+
+  refreshValue () {
+
+  }
+
+  getChildEditors () {
+    return false
+  }
+
+  destroy () {
+    this.unregister(this);
+    if (this.watched) {
+      Object.values(this.watched).forEach(adjustedPath => this.jsoneditor.unwatch(adjustedPath, this.watch_listener));
+    }
+
+    this.watched = null;
+    this.watched_values = null;
+    this.watch_listener = null;
+    this.header_text = null;
+    this.header_template = null;
+    this.value = null;
+    if (this.container && this.container.parentNode) this.container.parentNode.removeChild(this.container);
+    this.container = null;
+    this.jsoneditor = null;
+    this.schema = null;
+    this.path = null;
+    this.key = null;
+    this.parent = null;
+  }
+
+  isDefaultRequired () {
+    return this.isRequired() || !!this.jsoneditor.options.use_default_values
+  }
+
+  getDefault () {
+    if (this.enforceConstEnabled && this.schema.const) {
+      return this.schema.const
+    }
+
+    if (typeof this.schema.default !== 'undefined') {
+      return this.schema.default
+    }
+
+    if (typeof this.schema.enum !== 'undefined') {
+      return this.schema.enum[0]
+    }
+
+    let type = this.schema.type || this.schema.oneOf;
+    if (type && Array.isArray(type)) type = type[0];
+    if (type && typeof type === 'object') type = type.type;
+    if (type && Array.isArray(type)) type = type[0];
+
+    if (typeof type === 'string') {
+      if (type === 'number') return this.isDefaultRequired() ? 0.0 : undefined
+      if (type === 'boolean') return this.isDefaultRequired() ? false : undefined
+      if (type === 'integer') return this.isDefaultRequired() ? 0 : undefined
+      if (type === 'string') return this.isDefaultRequired() ? '' : undefined
+      if (type === 'null') return null
+      if (type === 'object') return {}
+      if (type === 'array') return []
+    }
+
+    return undefined
+  }
+
+  getTitle () {
+    return this.translateProperty(this.schema.title || this.key || this.formname)
+  }
+
+  enable () {
+    this.disabled = false;
+  }
+
+  disable () {
+    this.disabled = true;
+  }
+
+  isEnabled () {
+    return !this.disabled
+  }
+
+  isRequired () {
+    if (typeof this.schema.required === 'boolean') return this.schema.required
+    else if (this.parent && this.parent.schema && Array.isArray(this.parent.schema.required)) return this.parent.schema.required.includes(this.key)
+    else if (this.jsoneditor.options.required_by_default) return true
+    else return false
+  }
+
+  getDisplayText (arr) {
+    const disp = [];
+    const used = {};
+
+    /* Determine how many times each attribute name is used. */
+    /* This helps us pick the most distinct display text for the schemas. */
+    arr.forEach(el => {
+      if (el.title) {
+        used[el.title] = used[el.title] || 0;
+        used[el.title]++;
+      }
+      if (el.description) {
+        used[el.description] = used[el.description] || 0;
+        used[el.description]++;
+      }
+      if (el.format) {
+        used[el.format] = used[el.format] || 0;
+        used[el.format]++;
+      }
+      if (el.type) {
+        used[el.type] = used[el.type] || 0;
+        used[el.type]++;
+      }
+    });
+
+    /* Determine display text for each element of the array */
+    arr.forEach(el => {
+      let name;
+
+      /* If it's a simple string */
+      if (typeof el === 'string') name = el;
+      /* Object */
+      else if (el.title && used[el.title] <= 1) name = el.title;
+      else if (el.format && used[el.format] <= 1) name = el.format;
+      else if (el.type && used[el.type] <= 1) name = el.type;
+      else if (el.description && used[el.description] <= 1) name = el.description;
+      else if (el.title) name = el.title;
+      else if (el.format) name = el.format;
+      else if (el.type) name = el.type;
+      else if (el.description) name = el.description;
+      else if (JSON.stringify(el).length < 500) name = JSON.stringify(el);
+      else name = 'type';
+
+      disp.push(name);
+    });
+
+    /* Replace identical display text with "text 1", "text 2", etc. */
+    const inc = {};
+    disp.forEach((name, i) => {
+      inc[name] = inc[name] || 0;
+      inc[name]++;
+
+      if (used[name] > 1) disp[i] = `${name} ${inc[name]}`;
+    });
+
+    return disp
+  }
+
+  /* Replace space(s) with "-" to create valid id value */
+  getValidId (id) {
+    id = id === undefined ? '' : id.toString();
+    return id.replace(/\s+/g, '-')
+  }
+
+  setInputAttributes (inputAttribute, input) {
+    if (this.schema.options && this.schema.options.inputAttributes) {
+      const inputAttributes = this.schema.options.inputAttributes;
+      const protectedAttributes = ['name', 'type'].concat(inputAttribute);
+      const workingInput = input || this.input;
+      Object.keys(inputAttributes).forEach(key => {
+        if (!protectedAttributes.includes(key.toLowerCase())) {
+          workingInput.setAttribute(key, inputAttributes[key]);
+        }
+      });
+    }
+  }
+
+  setContainerAttributes () {
+    if (this.schema.options && this.schema.options.containerAttributes) {
+      const containerAttributes = this.schema.options.containerAttributes;
+      const protectedAttributes = ['data-schemapath', 'data-schematype', 'data-schemaid'];
+      Object.keys(containerAttributes).forEach(key => {
+        if (!protectedAttributes.includes(key.toLowerCase())) {
+          this.container.setAttribute(key, containerAttributes[key]);
+        }
+      });
+    }
+  }
+
+  expandCallbacks (scope, options) {
+    const callback = this.defaults.callbacks[scope];
+    Object.entries(options).forEach(([key, value]) => {
+      if (value === Object(value)) {
+        options[key] = this.expandCallbacks(scope, value);
+      } else if (typeof value === 'string' &&
+                 typeof callback === 'object' &&
+                 typeof callback[value] === 'function') {
+        options[key] = callback[value].bind(null, this);
+      }
+    });
+    return options
+  }
+
+  showValidationErrors (errors) {
+
+  }
+}
+
+/**
+ * Generate band colors for the editor
+ * @param {Record<string,any>} schema - JSON schema
+ * @param {string} format - Format type ("bands" or "bands-arithmetic")
+ * @returns {string[]} Array of color strings
+ */
+function generateBandColors(schema, format) {
+  const bands = format === "bands" ? schema.items?.enum : schema.enum || [];
+  const colors =
+    format === "bands"
+      ? schema.items?.options?.colors
+      : schema.options?.colors || [];
+  if (colors && colors.length === bands.length) {
+    return colors;
+  }
+
+  return bands.map(
+    () =>
+      "#" +
+      Math.floor(Math.random() * 16777215)
+        .toString(16)
+        .padStart(6, "0"),
+  );
+}
+
+/**
+ * Get color for a specific band
+ * @param {string} band - Band identifier
+ * @param {string[]} bands - Array of band identifiers
+ * @param {string[]} colors - Array of color strings
+ * @returns {string} Color string
+ */
+function getBandColor(band, bands, colors) {
+  const index = bands.indexOf(band);
+  return index !== -1 ? colors[index] : "#000000";
+}
+
+/**
+ * Create a draggable band element.
+ * @param {string} enumValue
+ * @param {string} title
+ */
+function createBandDiv(enumValue, title) {
+  const div = document.createElement("div");
+  div.dataset.band = enumValue;
+  div.textContent = title;
+  div.draggable = true;
+  div.ondragstart = (e) => {
+    e.dataTransfer?.setData("band", enumValue);
+  };
+  return div;
+}
+
+/**
+ * Add draggable band elements
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+function addDraggableBands(editor, bands, bandTitles) {
+  bands.forEach((band, index) => {
+    const title = bandTitles[index];
+    const bandDiv = createBandDiv(band, title);
+
+    // createBandDiv already sets up drag functionality
+    editor.control?.appendChild(bandDiv);
+  });
+}
+
+/**
+ * Create unified styles for all slot types
+ * @param {string[]} bands - Array of band identifiers
+ * @param {string[]} colors - Array of color strings
+ * @returns {HTMLStyleElement} Style element with unified slot styles
+ */
+function createSlotStyles(bands, colors) {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    /* Base styles for all band elements */
+    [data-band] {
+      display: inline-flex;
+      border: 1px solid darkgrey;
+      border-radius: 50%;
+      height: 40px;
+      aspect-ratio: 1/1;
+      padding: 4px;
+      margin: 2px;
+      align-items: center;
+      justify-content: center;
+      cursor: move;
+      font-size: 10px;
+    }
+
+    /* Band color styles */
+    ${bands
+      .map(
+        (band) =>
+          `[data-band="${band}"] { background: ${getBandColor(
+            band,
+            bands,
+            colors,
+          )}; color: black; }`,
+      )
+      .join("\n")}
+
+    /* RGB slot styles */
+    [data-slot] {
+      display: inline-flex;
+      width: 50px;
+      height: 50px;
+      aspect-ratio: 1/1;
+      padding: 1px;
+      border: 2px solid #666;
+      background: #f0f0f0;
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      margin: 2px;
+      position: relative;
+      box-sizing: border-box;
+    }
+    [data-slot]:hover {
+      border-color: #333;
+      background: #f9f9f9;
+    }
+    [data-slot]::before {
+      content: attr(data-slot);
+      position: absolute;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      z-index: 0;
+    }
+
+    /* container */
+    .slots-container {
+      font-family: monospace;
+      font-size: 18px;
+      padding: 16px;
+      background: #f0f0f0;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      margin: 8px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+
+    .formula-text {
+      font-size: 18px;
+      margin: 0 2px;
+    }
+  `;
+  return style;
+}
+
+/**
+ * Create a unified slot element for RGB or arithmetic use
+ * @param {string} identifier - RGB letter ("R", "G", "B") or variable name for arithmetic
+ * @param {(e: DragEvent) => void} onDrop - Drop handler function
+ * @returns {HTMLDivElement} Slot element
+ */
+function createSlot(identifier, onDrop) {
+  const slotDiv = document.createElement("div");
+  // Use data-slot
+  slotDiv.dataset.slot = identifier;
+
+  // Add drag & drop functionality
+  slotDiv.ondrop = onDrop;
+  slotDiv.ondragover = (e) => e.preventDefault();
+
+  return slotDiv;
+}
+
+/**
+ * Fill a slot with a band
+ * @param {HTMLElement} slot - Slot element
+ * @param {string} enumValue - Band value
+ * @param {string} title - Band title
+ */
+function fillSlotWithBand(slot, enumValue, title) {
+  // clear existing band and add new one
+  const existingBand = slot.querySelector("[data-band]");
+  if (existingBand) {
+    existingBand.remove();
+  }
+
+  const bandDiv = createBandDiv(enumValue, title);
+  slot.appendChild(bandDiv);
+}
+
+/**
+ * Build the traditional RGB bands interface
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} colors - Array of color strings
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+function buildRGBInterface(editor, colors, bands, bandTitles) {
+  // Use unified styles instead of creating separate styles
+  const style = createSlotStyles(bands, colors);
+  editor.control?.appendChild(style);
+
+  // Add draggable bands
+  addDraggableBands(editor, bands, bandTitles);
+
+  editor.control?.appendChild(document.createElement("hr"));
+
+  // Add RGB slots using unified slot system
+  addRGBSlots(editor, bands, bandTitles);
+}
+
+/**
+ * Add RGB slots for traditional bands interface using unified slot system
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+function addRGBSlots(editor, bands, bandTitles) {
+  // Create a container for RGB slots
+  const rgbContainer = document.createElement("div");
+  rgbContainer.classList.add("slots-container");
+  ["R", "G", "B"].forEach((slot, index) => {
+    const onDrop = (/** @type {DragEvent} */ e) => {
+      e.preventDefault();
+      const enumValue = e.dataTransfer?.getData("band");
+      if (!enumValue) return;
+
+      const enumIndex = bands.indexOf(enumValue);
+      const title = bandTitles[enumIndex] || enumValue;
+
+      fillSlotWithBand(slotDiv, enumValue, title);
+      // Get current value as array or create new one
+      const currentValue = editor.getValue() || [];
+      currentValue[index] = enumValue;
+      editor.setValue(currentValue);
+      editor.onChange(true);
+    };
+
+    const slotDiv = createSlot(slot, onDrop);
+    addRGBSlotStyle(slotDiv);
+    rgbContainer.appendChild(slotDiv);
+
+    // Initialize with existing value
+    setTimeout(() => {
+      const currentValue = editor.getValue();
+      if (currentValue?.[index]) {
+        const enumValue = currentValue[index];
+        const enumIndex = bands.indexOf(enumValue);
+        const title = bandTitles[enumIndex] || enumValue;
+        if (enumValue) {
+          fillSlotWithBand(slotDiv, enumValue, title);
+        }
+      }
+    });
+  });
+
+  editor.control?.appendChild(rgbContainer);
+}
+
+/**
+ * Create specific styles for RGB slots
+ * @param {HTMLElement} rgbSlot - Array of RGB slot elements
+ */
+function addRGBSlotStyle(rgbSlot) {
+  rgbSlot.style.border = "2px dashed";
+  switch (rgbSlot.dataset.slot) {
+    case "R": {
+      rgbSlot.style.borderColor = "#F88";
+      rgbSlot.style.background = "#FEE";
+      break;
+    }
+    case "G": {
+      rgbSlot.style.borderColor = "#8F8";
+      rgbSlot.style.background = "#EFE";
+      break;
+    }
+    case "B": {
+      rgbSlot.style.borderColor = "#88F";
+      rgbSlot.style.background = "#EEF";
+      break;
+    }
+  }
+}
+
+const MUSTACHE_REGEX = /\{\{([^}]+)\}\}/g;
+/**
+ * Build the arithmetic expression interface
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} colors - Array of color strings
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+function buildArithmeticInterface(editor, colors, bands, bandTitles) {
+  const formulaTemplate = editor.schema.formulaTemplate || "{{A}}";
+
+  const style = createSlotStyles(bands, colors);
+  editor.control?.appendChild(style);
+
+  addDraggableBands(editor, bands, bandTitles);
+
+  editor.control?.appendChild(document.createElement("hr"));
+
+  // Add formula display with embedded slots after the bands
+  addFormulaSlots(editor, formulaTemplate, bands, bandTitles);
+}
+
+/**
+ * Generate the final formula string with band values substituted
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @returns {string} Formula string with substituted values
+ */
+function generateFormulaString(editor) {
+  /** @type {string} */
+  const formulaTemplate = editor.schema.formulaTemplate || "{{A}}";
+
+  const variableValues = editor.variableValues || {};
+
+  return formulaTemplate.replace(MUSTACHE_REGEX, (match, variable) => {
+    const bandValue = variableValues[variable.trim()];
+    return bandValue || match; // Keep placeholder if no value assigned
+  });
+}
+
+/**
+ * Add formula display with embedded circular slots
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {string} template - Formula template string
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+function addFormulaSlots(editor, template, bands, bandTitles) {
+  const formulaContainer = document.createElement("div");
+  formulaContainer.classList.add("slots-container");
+
+  // Initialize slots tracking
+  editor.variableSlots = {};
+
+  // Split the template into parts and create elements
+  const parts = template.split(/(\{\{[^}]+\}\})/);
+
+  parts.forEach((part) => {
+    if (!part) {
+      return;
+    }
+
+    if (!part.match(MUSTACHE_REGEX)) {
+      // This is formula text
+      part = part.trim();
+      if (part) {
+        const textElement = document.createElement("span");
+        textElement.classList.add("formula-text");
+        textElement.textContent = part;
+        formulaContainer.appendChild(textElement);
+      }
+      return;
+    }
+
+    // This is a variable placeholder
+    const variable = part.replace(/[{}]/g, "").trim();
+    const slotElement = createSlot(variable, (e) => {
+      e.preventDefault();
+      const enumValue = e.dataTransfer?.getData("band");
+      if (!enumValue) return;
+
+      const enumIndex = bands.indexOf(enumValue);
+      const title = bandTitles[enumIndex] || enumValue;
+
+      editor.variableValues[variable] = enumValue;
+
+      // Update ALL slots for this variable using unified system
+      updateAllSlotsForVariable(editor, variable, enumValue, title);
+
+      // final formula string as the value
+      //@ts-expect-error todo
+      editor.value = generateFormulaString(editor);
+      editor.onChange(true);
+    });
+    formulaContainer.appendChild(slotElement);
+
+    // Track all slots for this variable
+    if (!editor.variableSlots[variable]) {
+      editor.variableSlots[variable] = [];
+    }
+    editor.variableSlots[variable].push(slotElement);
+  });
+
+  editor.control?.appendChild(formulaContainer);
+
+  // Initialize slots with existing values after all slots are created
+  setTimeout(() => {
+    initializeSlots(editor);
+  });
+}
+
+/**
+ * Initialize all slots with existing values
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ */
+function initializeSlots(editor) {
+  if (editor.variableValues && editor.variableSlots) {
+    Object.keys(editor.variableValues).forEach((variable) => {
+      const enumValue = editor.variableValues[variable];
+      const bands = editor.bands || editor.schema.enum || [];
+      const bandTitles =
+        editor.bandTitles || editor.schema.options?.enum_titles || bands;
+      const enumIndex = bands.indexOf(enumValue);
+      const title = bandTitles[enumIndex] || enumValue;
+      updateAllSlotsForVariable(editor, variable, enumValue, title);
+    });
+  }
+}
+
+/**
+ * Update all slots for a specific variable with band circle
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {string} variable - Variable name
+ * @param {string} enumValue - Band value
+ * @param {string} title - Band title
+ */
+function updateAllSlotsForVariable(editor, variable, enumValue, title) {
+  if (editor.variableSlots && editor.variableSlots[variable]) {
+    editor.variableSlots[variable].forEach((slot) => {
+      fillSlotWithBand(slot, enumValue, title);
+    });
+  }
+}
+
+/**
+ * Custom band combination editor interface for eox-jsonform
+ */
+
+class BandsEditor extends AbstractEditor {
+  /** @type {Record<string, HTMLElement[]>} */
+  variableSlots = {};
+  /** @type {Record<string, string>} */
+  variableValues = {};
+  /** @type {string[]} */
+  bands = [];
+  /** @type {string[]} */
+  bandTitles = [];
+  /** @type {string[]} */
+  colors = [];
+
+  build() {
+    super.build();
+    // Determine the format type
+    const format = this.schema.format || "bands";
+
+    this.bands =
+      format === "bands" ? this.schema.items?.enum : this.schema.enum || [];
+    this.bandTitles =
+      format === "bands"
+        ? this.schema.items?.options?.enum_titles
+        : this.schema.options.enum_titles || this.bands;
+    this.colors = generateBandColors(this.schema, format);
+
+    // control
+    this.control = document.createElement("div");
+    this.control.classList.add("form-control");
+
+    if (format === "bands") {
+      buildRGBInterface(this, this.colors, this.bands, this.bandTitles);
+    } else if (format === "bands-arithmetic") {
+      buildArithmeticInterface(this, this.colors, this.bands, this.bandTitles);
+    }
+
+    // label
+    this.label = document.createElement("span");
+    this.label.classList.add("je-header");
+    this.label.textContent = this.schema.title ?? "";
+
+    // appends
+    this.container?.appendChild(this.label);
+    this.container?.appendChild(this.control);
+  }
+}
+
+const bandsEditorInterface = [
+  {
+    type: "array",
+    format: "bands",
+    func: BandsEditor,
+  },
+  {
+    type: "string",
+    format: "bands-arithmetic",
+    func: BandsEditor,
+  },
+];
+
+const _style_0 = "eox-layercontrol[data-v-219e33f9]{overflow:auto}";
+
+const _hoisted_1 = { class: "d-flex flex-column" };
+const _hoisted_2 = ["for", ".customEditorInterfaces"];
+const _hoisted_3 = {
+  key: 0,
+  class: "mt-2 mb-2"
+};
+
+
+const _sfc_main = {
+  __name: 'EodashLayerControl',
+  props: {
+  map: {
+    /** @type {import("vue").PropType<"first" | "second">} */
+    //@ts-expect-error todo
+    type: String,
+    default: "first",
+  },
+  tools: {
+    type: Array,
+    default: () => ["datetime", "info", "config", "legend", "opacity"],
+  },
+  title: {
+    type: String || Boolean,
+    default: "Layers",
+  },
+  cssVars: {
+    type: Object,
+  },
+},
+  async setup(__props) {
+
+let __temp, __restore;
+
+if (!customElements.get("eox-layercontrol")) {
+  (
+  ([__temp,__restore] = withAsyncContext(() => import('@eox/layercontrol'))),
+  await __temp,
+  __restore()
+);
+}
+if (!customElements.get("eox-jsonform")) {
+  (
+  ([__temp,__restore] = withAsyncContext(() => import('@eox/jsonform'))),
+  await __temp,
+  __restore()
+);
+}
+
+const props = __props;
+
+const config = {
+  tools: props.tools,
+  style: props.cssVars,
+};
+
+const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+const showControls = computed(() => {
+  if (props.map === "second") {
+    return mapCompareEl.value !== null && selectedCompareStac.value !== null;
+  }
+  return mapEl.value !== null && selectedStac.value !== null;
+});
+
+const eodashCols =
+  props.map === "second" ? eodashCompareCollections : eodashCollections;
+const mapElement = props.map === "second" ? mapCompareEl : mapEl;
+
+/** @type { import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const eoxLayercontrol = ref(null);
+
+/** @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt */
+const handleDatetimeUpdate = async (evt) => {
+  const { layer, datetime } = evt.detail;
+
+  const ec = await getColFromLayer(eodashCols, layer);
+
+  /** @type {Record<string,any>[] | undefined} */
+  let updatedLayers = [];
+
+  if (ec) {
+    updatedLayers = await ec.updateLayerJson(
+      datetime,
+      layer.get("id"),
+      props.map,
+    );
+  }
+  /** @type {Record<String,any>[] | undefined} */
+  const dataLayers = updatedLayers?.find(
+    (l) => l?.properties?.id === "AnalysisGroup",
+  )?.layers;
+
+  if (dataLayers?.length) {
+    // Add expand to all analysis layers
+    dataLayers?.forEach((dl) => {
+      dl.properties.layerControlExpand = true;
+      dl.properties.layerControlToolsExpand = true;
+    });
+    // assign layers to the map
+    /** @type {HTMLElement & Record<string,any>} */
+    (mapElement.value).layers = updatedLayers;
+  }
+};
+
+// -----  debounce logic
+/** @type {NodeJS.Timeout | undefined} */
+let timeout;
+
+/**
+ * @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt
+ **/
+const debouncedHandleDateTime = (evt) => {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    handleDatetimeUpdate(evt);
+  }, 500);
+};
+// ------
+/**
+ *
+ * @param {Event & {detail:{layer:import("ol/layer").Layer;jsonformValue:Record<string,any>}}} evt
+ */
+const onLayerConfigChange = (evt) => {
+  if (props.map === "second") {
+    layerControlFormValueCompare.value = evt.detail.jsonformValue;
+  } else {
+    layerControlFormValue.value = evt.detail.jsonformValue;
+  }
+};
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("span", _hoisted_1, [
+    (showControls.value)
+      ? (openBlock(), createElementBlock("eox-layercontrol", mergeProps({ key: unref(mapElement) }, config, {
+          for: unref(mapElement),
+          ".customEditorInterfaces": unref(bandsEditorInterface),
+          "onDatetime:updated": debouncedHandleDateTime,
+          toolsAsList: "true",
+          ref_key: "eoxLayercontrol",
+          ref: eoxLayercontrol,
+          "on:layerConfig:change": onLayerConfigChange
+        }), [
+          renderSlot(_ctx.$slots, "layerstitle", {}, () => [
+            createElementVNode("div", null, [
+              (__props.title)
+                ? (openBlock(), createElementBlock("p", _hoisted_3, [
+                    createElementVNode("strong", null, toDisplayString(__props.title), 1 /* TEXT */)
+                  ]))
+                : createCommentVNode("v-if", true)
+            ])
+          ], true)
+        ], 48 /* FULL_PROPS, NEED_HYDRATION */, _hoisted_2))
+      : createCommentVNode("v-if", true)
+  ]))
+}
+}
+
+};
+const EodashLayerControl = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-219e33f9"]]);
+
+export { EodashLayerControl as default };