@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/esm/{tttx-range-slider_localcomponent.entry.js → tttx-range-slider_1_9_103.entry.js}

@@ -2,190 +2,190 @@ import { r as registerInstance, c as createEvent, h, F as Fragment } from './ind
 
 const tttxRangeSliderCss = ".slider-container{position:relative;width:100%;height:50px;margin-top:10px}.slider-container-with-fields{margin-top:20px !important}input[type=\"range\"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;outline:none;position:absolute;margin:auto;top:0;bottom:0;background-color:transparent;pointer-events:none}.slider-track{width:100%;height:5px;position:absolute;margin:auto;top:0;bottom:0;border-radius:5px}input[type=\"range\"]::-webkit-slider-runnable-track{-webkit-appearance:none;height:5px}input[type=\"range\"]::-moz-range-track{-moz-appearance:none;height:5px}input[type=\"range\"]::-ms-track{appearance:none;height:5px}input[type=\"range\"]::-webkit-slider-thumb{-webkit-appearance:none;height:1.7em;width:1.7em;background-color:#1579C6;cursor:pointer;margin-top:-9px;pointer-events:auto;border-radius:50%;border:2px solid white;box-shadow:0 0 5px lightslategray}input[type=\"range\"]::-moz-range-thumb{-webkit-appearance:none;height:1.7em;width:1.7em;cursor:pointer;border-radius:50%;border:2px solid white;background-color:#1579C6;pointer-events:auto;box-shadow:0 0 5px lightslategray}input[type=\"range\"]::-ms-thumb{appearance:none;height:1.7em;width:1.7em;cursor:pointer;border-radius:50%;border:2px solid white;background-color:#1579C6;pointer-events:auto;box-shadow:0 0 5px lightslategray}input[type=\"range\"]:active::-webkit-slider-thumb{background-color:#1579C6;border:2px solid white;box-shadow:0 0 5px lightslategray}.values{display:flex;flex-direction:row;width:100%}.range-divider{flex-grow:1;display:flex;justify-content:center;align-items:center}.range-divider,.value-input{color:#9E9E9E}.input-pre-text-container{position:relative}.input-pre-text{position:absolute;z-index:1;font-size:14px;line-height:16px;font-style:normal;margin-top:10px;margin-left:5px}.value-input{padding-left:40px;height:30px;width:45px;border-radius:4px;border:1px solid #D5D5D5}.value-input-large-width{width:55px !important}.slider-tooltip{background:#212121;border-radius:.4em;display:none;position:absolute;color:#ffffff;padding:var(--05, 4px) var(--2, 14px);font-size:12px;white-space:nowrap;opacity:1;top:-15px !important;left:1px}.slider-tooltip-upper{right:1px;left:auto !important}.slider-tooltip:after{content:'';position:absolute;bottom:0;left:50%;width:0;height:0;border:6px solid transparent;border-top-color:#212121;border-bottom:0;margin-left:-6px;margin-bottom:-6px}";
 
-const TttxRangeSlider = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sliderValuesUpdated = createEvent(this, "sliderValuesUpdated", 7);
-    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() }))))));
-  }
-};
+const TttxRangeSlider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sliderValuesUpdated = createEvent(this, "sliderValuesUpdated", 7);
+    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() }))))));
+  }
+};
 TttxRangeSlider.style = tttxRangeSliderCss;
 
-export { TttxRangeSlider as tttx_range_slider_localcomponent };
+export { TttxRangeSlider as tttx_range_slider_1_9_103 };