@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/collection/components/molecules/tttx-range-slider/tttx-range-slider.js

@@ -1,304 +1,304 @@
-import { h, Fragment } from '@stencil/core';
-export class TttxRangeSlider {
-  constructor() {
-    this.sliderBackground = '#D5D5D5';
-    this.activeSliderBackground = '#1579C6';
-    this.minGap = 0;
-    this.minimum = 0;
-    this.maximum = 100;
-    this.sliderMode = 'single';
-    this.showFields = false;
-    this.lowerValue = undefined;
-    this.upperValue = undefined;
-  }
-  componentWillLoad() {
-    if (!['single', 'dual'].includes(this.sliderMode))
-      this.sliderMode = 'single';
-    if (this.minimum < 0)
-      this.minimum = 0;
-    if (this.maximum <= this.minimum)
-      this.maximum = this.minimum + 1;
-    if (this.maximum > 9999)
-      this.maximum = 9999;
-    this.lowerValue = this.minimum;
-    this.upperValue = this.maximum;
-    this.showFields = this.showFields && this.sliderMode === 'dual'; // only show fields if requested & on dual slider
-  }
-  componentDidRender() {
-    this.setSliderColours();
-  }
-  emitValuesUpdatedEvent() {
-    // timeout as could be fired several times as slider is dragged, only send one event
-    clearTimeout(this.emitValuesTimeout);
-    this.emitValuesTimeout = setTimeout((lowerValue, upperValue) => {
-      this.sliderValuesUpdated.emit({
-        lowerValue,
-        upperValue
-      });
-    }, 300, this.lowerValue, this.upperValue);
-  }
-  onSetSliderValues(event) {
-    // allow user to manually update slider values (useful on form reset)
-    let { lowerValue, upperValue } = event.detail;
-    // lower cannot go below min, upper cannot go above max
-    if (lowerValue < this.minimum)
-      lowerValue = this.minimum;
-    if (upperValue > this.maximum)
-      upperValue = this.maximum;
-    if (this.sliderMode === 'single') {
-      this.lowerValue = this.minimum; // single mode only uses upper slider, this is always min
-      if (upperValue < this.lowerValue)
-        upperValue = lowerValue;
-      this.upperValue = upperValue;
-    }
-    if (this.sliderMode === 'dual') {
-      // lower & upper cannot cross, lower must always be less than upper
-      if (lowerValue > upperValue)
-        lowerValue = upperValue;
-      if (this.showFields) {
-        this.refLowerInput.value = lowerValue;
-        this.refUpperInput.value = upperValue;
-      }
-      this.lowerValue = lowerValue;
-      this.upperValue = upperValue;
-    }
-    // notify user, in case validation overruled any values
-    this.emitValuesUpdatedEvent();
-  }
-  inputDebounce(inputType, event) {
-    // debounce to allow user time to finish inputting value
-    clearTimeout(this.inputTimeout);
-    this.inputTimeout = setTimeout((inputType, event) => {
-      this.handleInputChange(inputType, event);
-    }, 300, inputType, event.target.value);
-  }
-  handleInputChange(inputType, inputValue) {
-    const enteredValue = parseInt(inputValue);
-    if (inputType === 'min') {
-      let newValue = enteredValue;
-      // cannot go higher than max slider or lower than minimum
-      if (Number.isNaN(enteredValue) || newValue < this.minimum)
-        newValue = this.minimum;
-      if (newValue > this.upperValue)
-        newValue = this.upperValue;
-      this.refLowerInput.value = newValue;
-      this.lowerValue = newValue;
-    }
-    if (inputType === 'max') {
-      let newValue = enteredValue;
-      // cannot go lower than min slider or higher than maximum
-      if (Number.isNaN(enteredValue) || newValue > this.maximum)
-        newValue = this.maximum;
-      if (newValue < this.lowerValue)
-        newValue = this.lowerValue;
-      this.refUpperInput.value = newValue;
-      this.upperValue = newValue;
-    }
-    // notify user of updated slider values
-    this.emitValuesUpdatedEvent();
-  }
-  onMinSliderFocusOut() {
-    this.setTooltipPositions('min', false);
-  }
-  onMaxSliderFocusOut() {
-    this.setTooltipPositions('max', false);
-  }
-  onMinSliderChange() {
-    // update slider & fields (without going above upper limit)
-    if (parseInt(this.refSliderUpper.value) - parseInt(this.refSliderLower.value) <= this.minGap) {
-      this.refSliderLower.value = parseInt(this.refSliderUpper.value) - this.minGap;
-    }
-    if (this.showFields)
-      this.refLowerInput.value = this.refSliderLower.value;
-    this.setSliderColours();
-    this.setTooltipPositions('min');
-    this.lowerValue = parseInt(this.refSliderLower.value);
-    // notify user of updated slider values
-    this.emitValuesUpdatedEvent();
-  }
-  onMaxSliderChange() {
-    // update slider & fields (without going below lower limit)
-    if (parseInt(this.refSliderUpper.value) - parseInt(this.refSliderLower.value) <= this.minGap) {
-      this.refSliderUpper.value = parseInt(this.refSliderLower.value) + this.minGap;
-    }
-    if (this.showFields)
-      this.refUpperInput.value = this.refSliderUpper.value;
-    this.setSliderColours();
-    this.setTooltipPositions('max');
-    this.upperValue = parseInt(this.refSliderUpper.value);
-    // notify user of updated slider values
-    this.emitValuesUpdatedEvent();
-  }
-  setSliderColours() {
-    // update highlighted part of slider based on where slider has moved to
-    if (this.sliderMode === 'single') {
-      const percent = (this.refSliderSingle.value / this.maximum) * 100;
-      this.refSliderTrack.style.background = `linear-gradient(to right, ${this.activeSliderBackground} ${percent}% , ${this.sliderBackground} ${percent}%)`;
-    }
-    if (this.sliderMode === 'dual') {
-      const percent1 = (this.refSliderLower.value / this.maximum) * 100;
-      const percent2 = (this.refSliderUpper.value / this.maximum) * 100;
-      this.refSliderTrack.style.background = `linear-gradient(to right, ${this.sliderBackground} ${percent1}% , ${this.activeSliderBackground} ${percent1}% , ${this.activeSliderBackground} ${percent2}%, ${this.sliderBackground} ${percent2}%)`;
-    }
-  }
-  renderValueInput(inputType, value) {
-    return (h("div", { class: 'input-wrapper' }, h("div", { class: 'input-pre-text-container' }, h("span", { class: 'input-pre-text' }, inputType[0].toUpperCase() + inputType.slice(1, inputType.length) + ':')), h("input", { type: 'number', class: `value-input${this.maximum >= 1000 ? ' value-input-large-width' : ''}`, value: value, ref: el => this.setValueInputRef(inputType, el), onInput: (event) => this.inputDebounce(inputType, event) })));
-  }
-  setValueInputRef(inputType, element) {
-    if (inputType === 'min')
-      this.refLowerInput = element;
-    if (inputType === 'max')
-      this.refUpperInput = element;
-  }
-  setTooltipPositions(sliderMoved, isVisible = true) {
-    let tooltipRef;
-    let percentage;
-    let styleElement;
-    if (sliderMoved === 'min') {
-      // single slider uses upper val but needs to build from left
-      const value = this.sliderMode === 'single' ? this.upperValue : this.lowerValue;
-      tooltipRef = this.refTooltipMin;
-      percentage = ((value - this.minimum) / (this.maximum - this.minimum)) * 100;
-      styleElement = 'left';
-    }
-    if (sliderMoved === 'max') {
-      tooltipRef = this.refTooltipMax;
-      percentage = 100 - (((this.upperValue - this.minimum) / (this.maximum - this.minimum)) * 100);
-      styleElement = 'right';
-    }
-    // clear relevant timeout & set element expected % from right or left
-    tooltipRef.style[styleElement] = `${percentage}%`;
-    tooltipRef.style.display = isVisible ? 'block' : 'none';
-  }
-  onSingleSliderChange(event) {
-    const value = event.target.value;
-    this.upperValue = parseInt(value); // can only come from slider, no chance of being NaN
-    this.setTooltipPositions('min');
-    // notify user of updated slider values
-    this.emitValuesUpdatedEvent();
-  }
-  render() {
-    return (h("div", { class: 'wrapper' }, this.sliderMode === 'single' && (h("div", { class: 'slider-container' }, h("div", { class: 'slider-track', ref: el => (this.refSliderTrack = el) }), h("span", { ref: el => (this.refTooltipMin = el), class: 'slider-tooltip' }, this.upperValue), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.upperValue, ref: el => (this.refSliderSingle = el), onInput: this.onSingleSliderChange.bind(this), onFocusout: () => this.onMinSliderFocusOut() }))), this.sliderMode === 'dual' && (h(Fragment, null, this.showFields && (h("div", { class: 'values' }, this.renderValueInput('min', this.minimum), h("span", { class: 'range-divider' }, " to "), this.renderValueInput('max', this.maximum))), h("div", { class: `slider-container${this.showFields ? ' slider-container-with-fields' : ''}` }, h("div", { class: 'slider-track', ref: el => (this.refSliderTrack = el) }), h("span", { ref: el => (this.refTooltipMin = el), class: 'slider-tooltip' }, this.lowerValue), h("span", { ref: el => (this.refTooltipMax = el), class: 'slider-tooltip slider-tooltip-upper' }, this.upperValue), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.lowerValue, ref: el => (this.refSliderLower = el), onInput: () => this.onMinSliderChange(), onFocusout: () => this.onMinSliderFocusOut() }), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.upperValue, ref: el => (this.refSliderUpper = el), onInput: () => this.onMaxSliderChange(), onFocusout: () => this.onMaxSliderFocusOut() }))))));
-  }
-  static get is() { return "tttx-range-slider_localcomponent"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-range-slider.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-range-slider.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "minimum": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "minimum",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "maximum": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "maximum",
-        "reflect": false,
-        "defaultValue": "100"
-      },
-      "sliderMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'single' | 'dual'",
-          "resolved": "\"dual\" | \"single\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "slider-mode",
-        "reflect": false,
-        "defaultValue": "'single'"
-      },
-      "showFields": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-fields",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "lowerValue": {},
-      "upperValue": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sliderValuesUpdated",
-        "name": "sliderValuesUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ lowerValue: number, upperValue: number }",
-          "resolved": "{ lowerValue: number; upperValue: number; }",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "setSliderValues",
-        "method": "onSetSliderValues",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h, Fragment } from '@stencil/core';
+export class TttxRangeSlider {
+  constructor() {
+    this.sliderBackground = '#D5D5D5';
+    this.activeSliderBackground = '#1579C6';
+    this.minGap = 0;
+    this.minimum = 0;
+    this.maximum = 100;
+    this.sliderMode = 'single';
+    this.showFields = false;
+    this.lowerValue = undefined;
+    this.upperValue = undefined;
+  }
+  componentWillLoad() {
+    if (!['single', 'dual'].includes(this.sliderMode))
+      this.sliderMode = 'single';
+    if (this.minimum < 0)
+      this.minimum = 0;
+    if (this.maximum <= this.minimum)
+      this.maximum = this.minimum + 1;
+    if (this.maximum > 9999)
+      this.maximum = 9999;
+    this.lowerValue = this.minimum;
+    this.upperValue = this.maximum;
+    this.showFields = this.showFields && this.sliderMode === 'dual'; // only show fields if requested & on dual slider
+  }
+  componentDidRender() {
+    this.setSliderColours();
+  }
+  emitValuesUpdatedEvent() {
+    // timeout as could be fired several times as slider is dragged, only send one event
+    clearTimeout(this.emitValuesTimeout);
+    this.emitValuesTimeout = setTimeout((lowerValue, upperValue) => {
+      this.sliderValuesUpdated.emit({
+        lowerValue,
+        upperValue
+      });
+    }, 300, this.lowerValue, this.upperValue);
+  }
+  onSetSliderValues(event) {
+    // allow user to manually update slider values (useful on form reset)
+    let { lowerValue, upperValue } = event.detail;
+    // lower cannot go below min, upper cannot go above max
+    if (lowerValue < this.minimum)
+      lowerValue = this.minimum;
+    if (upperValue > this.maximum)
+      upperValue = this.maximum;
+    if (this.sliderMode === 'single') {
+      this.lowerValue = this.minimum; // single mode only uses upper slider, this is always min
+      if (upperValue < this.lowerValue)
+        upperValue = lowerValue;
+      this.upperValue = upperValue;
+    }
+    if (this.sliderMode === 'dual') {
+      // lower & upper cannot cross, lower must always be less than upper
+      if (lowerValue > upperValue)
+        lowerValue = upperValue;
+      if (this.showFields) {
+        this.refLowerInput.value = lowerValue;
+        this.refUpperInput.value = upperValue;
+      }
+      this.lowerValue = lowerValue;
+      this.upperValue = upperValue;
+    }
+    // notify user, in case validation overruled any values
+    this.emitValuesUpdatedEvent();
+  }
+  inputDebounce(inputType, event) {
+    // debounce to allow user time to finish inputting value
+    clearTimeout(this.inputTimeout);
+    this.inputTimeout = setTimeout((inputType, event) => {
+      this.handleInputChange(inputType, event);
+    }, 300, inputType, event.target.value);
+  }
+  handleInputChange(inputType, inputValue) {
+    const enteredValue = parseInt(inputValue);
+    if (inputType === 'min') {
+      let newValue = enteredValue;
+      // cannot go higher than max slider or lower than minimum
+      if (Number.isNaN(enteredValue) || newValue < this.minimum)
+        newValue = this.minimum;
+      if (newValue > this.upperValue)
+        newValue = this.upperValue;
+      this.refLowerInput.value = newValue;
+      this.lowerValue = newValue;
+    }
+    if (inputType === 'max') {
+      let newValue = enteredValue;
+      // cannot go lower than min slider or higher than maximum
+      if (Number.isNaN(enteredValue) || newValue > this.maximum)
+        newValue = this.maximum;
+      if (newValue < this.lowerValue)
+        newValue = this.lowerValue;
+      this.refUpperInput.value = newValue;
+      this.upperValue = newValue;
+    }
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  onMinSliderFocusOut() {
+    this.setTooltipPositions('min', false);
+  }
+  onMaxSliderFocusOut() {
+    this.setTooltipPositions('max', false);
+  }
+  onMinSliderChange() {
+    // update slider & fields (without going above upper limit)
+    if (parseInt(this.refSliderUpper.value) - parseInt(this.refSliderLower.value) <= this.minGap) {
+      this.refSliderLower.value = parseInt(this.refSliderUpper.value) - this.minGap;
+    }
+    if (this.showFields)
+      this.refLowerInput.value = this.refSliderLower.value;
+    this.setSliderColours();
+    this.setTooltipPositions('min');
+    this.lowerValue = parseInt(this.refSliderLower.value);
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  onMaxSliderChange() {
+    // update slider & fields (without going below lower limit)
+    if (parseInt(this.refSliderUpper.value) - parseInt(this.refSliderLower.value) <= this.minGap) {
+      this.refSliderUpper.value = parseInt(this.refSliderLower.value) + this.minGap;
+    }
+    if (this.showFields)
+      this.refUpperInput.value = this.refSliderUpper.value;
+    this.setSliderColours();
+    this.setTooltipPositions('max');
+    this.upperValue = parseInt(this.refSliderUpper.value);
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  setSliderColours() {
+    // update highlighted part of slider based on where slider has moved to
+    if (this.sliderMode === 'single') {
+      const percent = (this.refSliderSingle.value / this.maximum) * 100;
+      this.refSliderTrack.style.background = `linear-gradient(to right, ${this.activeSliderBackground} ${percent}% , ${this.sliderBackground} ${percent}%)`;
+    }
+    if (this.sliderMode === 'dual') {
+      const percent1 = (this.refSliderLower.value / this.maximum) * 100;
+      const percent2 = (this.refSliderUpper.value / this.maximum) * 100;
+      this.refSliderTrack.style.background = `linear-gradient(to right, ${this.sliderBackground} ${percent1}% , ${this.activeSliderBackground} ${percent1}% , ${this.activeSliderBackground} ${percent2}%, ${this.sliderBackground} ${percent2}%)`;
+    }
+  }
+  renderValueInput(inputType, value) {
+    return (h("div", { class: 'input-wrapper' }, h("div", { class: 'input-pre-text-container' }, h("span", { class: 'input-pre-text' }, inputType[0].toUpperCase() + inputType.slice(1, inputType.length) + ':')), h("input", { type: 'number', class: `value-input${this.maximum >= 1000 ? ' value-input-large-width' : ''}`, value: value, ref: el => this.setValueInputRef(inputType, el), onInput: (event) => this.inputDebounce(inputType, event) })));
+  }
+  setValueInputRef(inputType, element) {
+    if (inputType === 'min')
+      this.refLowerInput = element;
+    if (inputType === 'max')
+      this.refUpperInput = element;
+  }
+  setTooltipPositions(sliderMoved, isVisible = true) {
+    let tooltipRef;
+    let percentage;
+    let styleElement;
+    if (sliderMoved === 'min') {
+      // single slider uses upper val but needs to build from left
+      const value = this.sliderMode === 'single' ? this.upperValue : this.lowerValue;
+      tooltipRef = this.refTooltipMin;
+      percentage = ((value - this.minimum) / (this.maximum - this.minimum)) * 100;
+      styleElement = 'left';
+    }
+    if (sliderMoved === 'max') {
+      tooltipRef = this.refTooltipMax;
+      percentage = 100 - (((this.upperValue - this.minimum) / (this.maximum - this.minimum)) * 100);
+      styleElement = 'right';
+    }
+    // clear relevant timeout & set element expected % from right or left
+    tooltipRef.style[styleElement] = `${percentage}%`;
+    tooltipRef.style.display = isVisible ? 'block' : 'none';
+  }
+  onSingleSliderChange(event) {
+    const value = event.target.value;
+    this.upperValue = parseInt(value); // can only come from slider, no chance of being NaN
+    this.setTooltipPositions('min');
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  render() {
+    return (h("div", { class: 'wrapper' }, this.sliderMode === 'single' && (h("div", { class: 'slider-container' }, h("div", { class: 'slider-track', ref: el => (this.refSliderTrack = el) }), h("span", { ref: el => (this.refTooltipMin = el), class: 'slider-tooltip' }, this.upperValue), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.upperValue, ref: el => (this.refSliderSingle = el), onInput: this.onSingleSliderChange.bind(this), onFocusout: () => this.onMinSliderFocusOut() }))), this.sliderMode === 'dual' && (h(Fragment, null, this.showFields && (h("div", { class: 'values' }, this.renderValueInput('min', this.minimum), h("span", { class: 'range-divider' }, " to "), this.renderValueInput('max', this.maximum))), h("div", { class: `slider-container${this.showFields ? ' slider-container-with-fields' : ''}` }, h("div", { class: 'slider-track', ref: el => (this.refSliderTrack = el) }), h("span", { ref: el => (this.refTooltipMin = el), class: 'slider-tooltip' }, this.lowerValue), h("span", { ref: el => (this.refTooltipMax = el), class: 'slider-tooltip slider-tooltip-upper' }, this.upperValue), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.lowerValue, ref: el => (this.refSliderLower = el), onInput: () => this.onMinSliderChange(), onFocusout: () => this.onMinSliderFocusOut() }), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.upperValue, ref: el => (this.refSliderUpper = el), onInput: () => this.onMaxSliderChange(), onFocusout: () => this.onMaxSliderFocusOut() }))))));
+  }
+  static get is() { return "tttx-range-slider_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-range-slider.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-range-slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "minimum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "minimum",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "maximum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "maximum",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "sliderMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'single' | 'dual'",
+          "resolved": "\"dual\" | \"single\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "slider-mode",
+        "reflect": false,
+        "defaultValue": "'single'"
+      },
+      "showFields": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-fields",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "lowerValue": {},
+      "upperValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sliderValuesUpdated",
+        "name": "sliderValuesUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ lowerValue: number, upperValue: number }",
+          "resolved": "{ lowerValue: number; upperValue: number; }",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "setSliderValues",
+        "method": "onSetSliderValues",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}