-
+
-
+
`;
-class Action extends BaseComponent {
- constructor() {
super(template);
- this._button = this.shadowRoot.querySelector('#button');
- this._name = this.shadowRoot.querySelector('#name');
+ this._button = this.shadowRoot.querySelector(`#button${this.idSuffix}`);
+ this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
this._href = null;
this._onClick = this.__onClick.bind(this);
diff --git a/static/js/components/property/boolean.js b/static/js/components/property/boolean.js
index 032c9fce3..f2f80df36 100644
--- a/static/js/components/property/boolean.js
+++ b/static/js/components/property/boolean.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class BooleanProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-
+
`;
-class BooleanProperty extends BaseComponent {
- constructor() {
super(template);
- this._input = this.shadowRoot.querySelector('#checkbox');
- this._name = this.shadowRoot.querySelector('#name');
+ this._input = this.shadowRoot.querySelector(`#checkbox${this.idSuffix}`);
+ this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
this._onClick = this.__onClick.bind(this);
this._onKeyUp = this.__onKeyUp.bind(this);
diff --git a/static/js/components/property/color.js b/static/js/components/property/color.js
index 8b956648c..7a85eff0f 100644
--- a/static/js/components/property/color.js
+++ b/static/js/components/property/color.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class ColorProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-
+
-
+
`;
-class ColorProperty extends BaseComponent {
- constructor() {
super(template);
- this._input = this.shadowRoot.querySelector('#color');
- this._name = this.shadowRoot.querySelector('#name');
+ this._input = this.shadowRoot.querySelector(`#color${this.idSuffix}`);
+ this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
this._onChange = this.__onChange.bind(this);
}
diff --git a/static/js/components/property/enum.js b/static/js/components/property/enum.js
index 8c5009ece..8e525f49c 100644
--- a/static/js/components/property/enum.js
+++ b/static/js/components/property/enum.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class EnumProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-
-
+
-
+
`;
-class EnumProperty extends BaseComponent {
- constructor() {
super(template);
- this._select = this.shadowRoot.querySelector('#select');
- this._unit = this.shadowRoot.querySelector('#unit');
- this._name = this.shadowRoot.querySelector('#name');
+ this._select = this.shadowRoot.querySelector(`#select${this.idSuffix}`);
+ this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+ this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
this._type = 'string';
diff --git a/static/js/components/property/label.js b/static/js/components/property/label.js
index 6eb9343d3..ecff04622 100644
--- a/static/js/components/property/label.js
+++ b/static/js/components/property/label.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class LabelProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-
-
+
-
+
`;
-class LabelProperty extends BaseComponent {
- constructor() {
super(template);
- this._name = this.shadowRoot.querySelector('#name');
- this._value = this.shadowRoot.querySelector('#value');
- this._unit = this.shadowRoot.querySelector('#unit');
+ this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
+ this._value = this.shadowRoot.querySelector(`#value${this.idSuffix}`);
+ this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
this._precision = 0;
}
diff --git a/static/js/components/property/level.js b/static/js/components/property/level.js
index 438b37e65..779232ae6 100644
--- a/static/js/components/property/level.js
+++ b/static/js/components/property/level.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class LevelProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-
-
-
+
`;
-
-class LevelProperty extends BaseComponent {
- constructor() {
super(template);
- this._text = this.shadowRoot.querySelector('#text');
- this._barContainer = this.shadowRoot.querySelector('#bar-container');
- this._bar = this.shadowRoot.querySelector('#bar');
- this._form = this.shadowRoot.querySelector('#form');
- this._number = this.shadowRoot.querySelector('#number');
- this._slider = this.shadowRoot.querySelector('#slider');
- this._unit = this.shadowRoot.querySelector('#unit');
- this._name = this.shadowRoot.querySelector('#name');
+ this._text = this.shadowRoot.querySelector(`#text${this.idSuffix}`);
+ this._barContainer = this.shadowRoot.querySelector(`#bar-container${this.idSuffix}`);
+ this._bar = this.shadowRoot.querySelector(`#bar${this.idSuffix}`);
+ this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+ this._number = this.shadowRoot.querySelector(`#number${this.idSuffix}`);
+ this._slider = this.shadowRoot.querySelector(`#slider`);
+ this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+ this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
this._onChange = this.__onChange.bind(this);
this._onClick = this.__onClick.bind(this);
diff --git a/static/js/components/property/number.js b/static/js/components/property/number.js
index 53cecb6c0..61c248547 100644
--- a/static/js/components/property/number.js
+++ b/static/js/components/property/number.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class NumberProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-
+
`;
-
-class NumberProperty extends BaseComponent {
- constructor() {
super(template);
- this._form = this.shadowRoot.querySelector('#form');
- this._input = this.shadowRoot.querySelector('#input');
- this._unit = this.shadowRoot.querySelector('#unit');
- this._name = this.shadowRoot.querySelector('#name');
+ this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+ this._input = this.shadowRoot.querySelector(`#input${this.idSuffix}`);
+ this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+ this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
this._onClick = this.__onClick.bind(this);
this._onSubmit = this.__onSubmit.bind(this);
diff --git a/static/js/components/property/slider.js b/static/js/components/property/slider.js
index 2b024e3da..1cb0159e6 100644
--- a/static/js/components/property/slider.js
+++ b/static/js/components/property/slider.js
@@ -11,8 +11,10 @@
const BaseComponent = require('../base-component');
-const template = document.createElement('template');
-template.innerHTML = `
+class SliderProperty extends BaseComponent {
+ constructor() {
+ const template = document.createElement('template');
+ template.innerHTML = `
-
-
-