import { i, r, x } from './query-assigned-elements-fea1f631.js';
|
import { n, B as BaseElement } from './base.component-813fc7cf.js';
|
import { e } from './custom-element-30fc6381.js';
|
import { i as i$1 } from './query-1c86d710.js';
|
import '@dh-software/furnview-icons';
|
|
var css_248z = i`.close-symbol{cursor:pointer;height:100%;position:relative;width:100%}.close-symbol.loading{z-index:999}.close-symbol.loading:after,.close-symbol.loading:before{background:#fff}.close-symbol:after,.close-symbol:before{background:var(--close-symbol-background,#888);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;content:" ";height:1px;margin:0;padding:0;position:absolute;top:50%;width:100%}.close-symbol:after:hover,.close-symbol:before:hover{background:var(--close-symbol-background-hover,#333)}.close-symbol:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}.close-symbol:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}:host(.active) .circle-number-symbol{border:var(--circle-number-symbol-border-active,2px solid #000)}.circle-number-symbol{align-items:center;background:var(--circle-number-symbol-background,var(--primary-color,red));border:var(--circle-number-symbol-border,2px solid #fff);border-radius:50%;box-shadow:var(--circle-number-symbol-box-shadow,1px 2px 5px 0 #000);color:var(--circle-number-symbol-color,var(--primary-text-color,#000));display:flex;height:var(--circle-number-symbol-size,30px);justify-content:center;position:relative;width:var(--circle-number-symbol-size,30px)}.custom-symbol{cursor:pointer;display:flex;left:10px;position:relative}.custom-symbol.up:after{background-image:var(--custom-symbol-image-down,url("/webui/images/minus.svg"));content:"";height:18px}.custom-symbol.down:after{background-image:var(--custom-symbol-image-down,url("/webui/images/plus.svg"));content:"";height:18px}.custom-symbol:after{color:#1e1e1e;margin:auto 0;padding:0 0 2px;pointer-events:none;transform:translateX(-15px);width:18px}.accordion-symbol{cursor:pointer;display:flex;left:10px;position:relative}.accordion-symbol.up:after{content:"-";font-size:xx-large;transform:scaleX(2) translateX(-4px)}.accordion-symbol.down:after{content:"+";font-size:xx-large}.accordion-symbol:after{color:#1e1e1e;margin:auto 0;padding:0 0 2px;pointer-events:none;transform:translateX(-15px);width:18px}.chevron-symbol{cursor:pointer;left:10px;position:relative}.chevron-symbol.up:after{content:"<"}.chevron-symbol.down:after{content:">"}.chevron-symbol:after{color:inherit;font:17px Consolas,monospace;padding:0 0 2px;pointer-events:none;position:absolute;-webkit-transform:rotate(90deg) translateX(-100%);-moz-transform:rotate(90deg) translateX(-100%);-ms-transform:rotate(90deg) translateX(-100%);transform:rotate(90deg) translateX(-100%)}@media (width >= 980px){.only-mobile{display:none!important}}@media (width <= 980px){.only-desktop{display:none!important}}.bold{font-weight:var(--global-font-weight-bold,600)}*{font-family:var(--global-font,Roboto);font-weight:var(--global-font-weight,400);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container{display:flex;margin:10px 0}.container.column{flex-direction:column}.container.column.reverse{flex-direction:column-reverse}.container.row{flex-direction:row}.container.row.reverse{flex-direction:row-reverse}.fluid{flex:1}.fluid.space-after{margin-right:55px}.hidden{display:none!important}.mobile-mode-hide,:host(.mobile-mode-hide){display:none!important}.invisible{visibility:hidden!important}.invisible-scroll,:host(.invisible-scroll){margin-right:-22px;overflow:hidden}.invisible-scroll>:first-child,:host(.invisible-scroll)>:first-child{box-sizing:content-box;overflow-x:hidden;overflow-y:scroll;padding-right:22px}.invisible-scroll.bottom,:host(.invisible-scroll.bottom){margin-right:unset;overflow:hidden}.invisible-scroll.bottom>:first-child,:host(.invisible-scroll.bottom)>:first-child{box-sizing:content-box;margin-bottom:-22px;overflow-x:scroll;overflow-y:hidden;padding-bottom:22px;padding-right:unset}:host([disabled]){filter:contrast(.5) grayscale(1);pointer-events:none}*{scrollbar-color:#5c5c5c hsla(0,0%,100%,.004);scrollbar-width:thin}[disabled]{filter:contrast(.5) grayscale(1);pointer-events:none}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar,::-webkit-scrollbar-corner{background:hsla(0,0%,100%,0)}::-webkit-scrollbar-thumb{background:#5c5c5c;-webkit-border-radius:8px}::-webkit-scrollbar-button,::-webkit-scrollbar-button:horizontal:end:decrement,::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:start:increment{background-color:transparent;border:none;color:transparent}:host{align-items:center;display:flex;font-size:1em;gap:var(--range-slider-gap-min-max-slider,10px);justify-content:center;line-height:1em;position:relative;width:100%}:host .slider-max-display,:host .slider-min-display{font-size:1em;line-height:1em;white-space:nowrap;width:fit-content}:host .inputs-container{align-items:center;border:var(--range-slider-border,none);display:flex;font-size:1em;justify-content:center;line-height:1em;position:relative;width:100%}:host .inputs-container .slider{-webkit-appearance:none;background:var(--range-slider-color,#d3d3d3);margin:0;opacity:var(--range-slider-unfocused-opacity,1);padding:0;width:100%}:host .inputs-container .slider:focus{outline:none}:host .inputs-container .slider:hover{opacity:1}:host .inputs-container .slider::-webkit-slider-runnable-track{font-size:var(--range-slider-height,1em);height:var(--range-slider-height,1em);line-height:var(--range-slider-height,1em)}:host .inputs-container .slider::-moz-range-track{font-size:var(--range-slider-height,1em);height:var(--range-slider-height,1em);line-height:var(--range-slider-height,1em)}:host .inputs-container .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--range-slider-thumb-color,#000);cursor:pointer;height:var(--range-slider-thumb-height,var(--range-slider-height,1em));width:var(--auto-range-slider-thumb-width,100px)}:host .inputs-container .slider::-moz-range-thumb{background:var(--range-slider-thumb-color,#000);cursor:pointer;height:var(--range-slider-thumb-height,var(--range-slider-height,1em));width:var(--auto-range-slider-thumb-width,100px)}:host .inputs-container .slider-value-display-container{align-items:center;display:flex;justify-content:center;pointer-events:none;position:absolute;transform:translateX(-50%);width:var(--auto-range-slider-thumb-width,100px)}:host .inputs-container .slider-value-display-container .fv-icon-arrow-down{align-items:center;color:var(--range-slider-value-arrow-color,#fff);display:flex;font-size:var(--range-slider-thumb-arrow-width,1em);height:var(--range-slider-thumb-arrow-width,1em);justify-content:center;position:absolute;width:calc(var(--range-slider-thumb-arrow-width, 1em) + var(--range-slider-thumb-arrow-spacing, .5em) + var(--range-slider-thumb-arrow-spacing, .5em))}:host .inputs-container .slider-value-display-container .fv-icon-arrow-down:before{font-size:var(--range-slider-thumb-arrow-width,1em)}:host .inputs-container .slider-value-display-container .fv-icon-arrow-down.left{left:0}:host .inputs-container .slider-value-display-container .fv-icon-arrow-down.left:before{transform:rotate(90deg)}:host .inputs-container .slider-value-display-container .fv-icon-arrow-down.right{right:0}:host .inputs-container .slider-value-display-container .fv-icon-arrow-down.right:before{transform:rotate(-90deg)}:host .inputs-container .slider-value-display-container .slider-value-display-background{align-items:center;background:var(--range-slider-value-display-background,#fff);display:flex;justify-content:center;padding:var(--range-slider-value-display-background--padding-top,2px) var(--range-slider-value-display-background--padding-right,2px) var(--range-slider-value-display-background--padding-bottom,2px) var(--range-slider-value-display-background--padding-left,2px);position:relative}:host .inputs-container .slider-value-display-container .slider-value-display-background .slider-value-display-spacer{visibility:hidden}:host .inputs-container .slider-value-display-container .slider-value-display-background .slider-value-display{background:transparent;border:none;color:var(--range-slider-value-display-color,#000);left:2px;margin:0;padding:0;pointer-events:all;position:absolute;width:100%;z-index:9999}:host .inputs-container .slider-value-display-container .slider-value-display-background .slider-value-display:focus-visible{outline:none}:host .inputs-container .slider-value-display-container .slider-value-display-background .slider-value-display-suffix{color:var(--range-slider-value-display-suffix-color,grey);pointer-events:all;position:absolute;right:2px}`;
|
|
var __defProp = Object.defineProperty;
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
var __getProtoOf = Object.getPrototypeOf;
|
var __reflectGet = Reflect.get;
|
var __decorateClass = (decorators, target, key, kind) => {
|
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
if (decorator = decorators[i])
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
if (kind && result)
|
__defProp(target, key, result);
|
return result;
|
};
|
var __superStaticGet = (obj, member) => __reflectGet(__getProtoOf(obj), member, obj);
|
let RangeSliderInputComponent = class extends BaseElement {
|
constructor() {
|
super();
|
this.min = 0;
|
this.max = 99999999999;
|
this.value = 1;
|
this.decimals = 0;
|
this.unit = "error";
|
this.decimalDivider = ".";
|
new ResizeObserver(() => {
|
this.resize(this);
|
}).observe(this);
|
}
|
resize(target) {
|
target.requestUpdate();
|
}
|
get unitifier() {
|
switch (this.unit) {
|
case "cm":
|
return 0.1;
|
case "m":
|
return 1e-3;
|
case "mm":
|
default:
|
return 1;
|
}
|
}
|
get unitremover() {
|
return 1 / this.unitifier;
|
}
|
getDisplayValue(value_) {
|
const result = (value_ * this.unitifier).toFixed(this.decimals);
|
return result.replace(".", this.decimalDivider);
|
}
|
constrainValue(value_) {
|
let toleranceString = "0";
|
if (this.decimals > 0) {
|
toleranceString += ".";
|
for (let index = 0; index < this.decimals; ++index)
|
toleranceString += index == this.decimals - 1 ? "1" : "0";
|
}
|
const tolerance = parseFloat(toleranceString);
|
if (value_ < this.min + tolerance) {
|
value_ = this.min;
|
} else if (value_ > this.max - tolerance) {
|
value_ = this.max;
|
}
|
return value_;
|
}
|
set values(value_) {
|
if (this.input && this.valueDisplay && this.valueDisplaySpacer) {
|
const decimalDividerCleanValueString = value_.replace(",", ".");
|
if (this.decimals > 0) {
|
this.value = parseFloat(decimalDividerCleanValueString) * this.unitremover;
|
} else {
|
this.value = parseInt(decimalDividerCleanValueString) * this.unitremover;
|
}
|
this.value = this.constrainValue(this.value);
|
this.valueDisplay.innerText = this.getDisplayValue(this.value);
|
this.valueDisplaySpacer.innerText = this.valueDisplay.innerText + (this.unit == "error" ? "" : " " + this.unit);
|
}
|
}
|
valueDisplayInput() {
|
if (this.valueDisplay == void 0 || this.valueDisplaySpacer == void 0)
|
return;
|
if (this.valueDisplay.innerText != "") {
|
const value = this.decimals > 0 ? parseFloat(this.valueDisplay.innerText) : parseInt(this.valueDisplay.innerText);
|
if (Number.isNaN(value)) {
|
this.valueDisplay.innerText = this.getDisplayValue(this.value);
|
}
|
this.valueDisplaySpacer.innerText = this.valueDisplay.innerText + (this.unit == "error" ? "" : " " + this.unit);
|
}
|
}
|
valueDisplayBlur() {
|
if (this.input == void 0 || this.valueDisplay == void 0)
|
return;
|
if (this.valueDisplay.innerText == "") {
|
this.values = this.input.value;
|
this.updateThumbPosition();
|
return;
|
}
|
this.values = this.valueDisplay.innerText;
|
this.input.value = this.valueDisplay.innerText;
|
this.updateThumbPosition();
|
this.release();
|
}
|
valueDisplayKeyDown(e) {
|
if (e.key == "Enter") {
|
e.preventDefault();
|
if (this.valueDisplay) {
|
this.valueDisplay.blur();
|
}
|
}
|
}
|
move() {
|
if (this.input == void 0)
|
return;
|
this.values = this.input.value;
|
this.updateThumbPosition();
|
}
|
change() {
|
if (this.input == void 0)
|
return;
|
this.values = this.input.value;
|
this.release();
|
}
|
release() {
|
this.dispatchEvent(new CustomEvent("slider-release", {
|
bubbles: true,
|
composed: true,
|
detail: {
|
min: this.min,
|
max: this.max,
|
value: this.value
|
}
|
}));
|
this.requestUpdate();
|
}
|
render() {
|
const min = this.getDisplayValue(this.min);
|
const max = this.getDisplayValue(this.max);
|
const value = this.getDisplayValue(this.value);
|
const unit = this.unit == "error" ? "" : " " + this.unit;
|
return x`
|
<div class="slider-min-display">${min + unit}</div>
|
<div class="inputs-container">
|
<div class="slider-value-display-container">
|
<div class="fv-icon-arrow-down left"></div>
|
<div class="slider-value-display-background">
|
<div class="slider-value-display-spacer">${value + unit}</div>
|
<div class="slider-value-display" contenteditable @keydown="${this.valueDisplayKeyDown}" @input="${this.valueDisplayInput}" @blur="${this.valueDisplayBlur}">${value}</div>
|
<div class="slider-value-display-suffix">${unit}</div>
|
</div>
|
<div class="fv-icon-arrow-down right"></div>
|
</div>
|
<input @change="${this.change}" @input="${this.move}" type="range" min="${min.replace(this.decimalDivider, ".")}" max="${max.replace(this.decimalDivider, ".")}" value="${value.replace(this.decimalDivider, ".")}" class="slider">
|
</div>
|
<div class="slider-max-display">${max + unit}</div>
|
`;
|
}
|
updated(_changedProperties) {
|
super.updated(_changedProperties);
|
this.updateThumbPosition();
|
}
|
updateThumbPosition() {
|
if (this.valueDisplayContainer) {
|
this.valueDisplayContainer.style.left = this.thumb_pos + "px";
|
}
|
}
|
get thumb_pos() {
|
if (this.input && this.valueDisplayBackground) {
|
const inputStyles = getComputedStyle(this.input);
|
const thumbArrowWidth = parseFloat(inputStyles.getPropertyValue("--range-slider-thumb-arrow-width"));
|
let additionalwidth = Number.isNaN(thumbArrowWidth) ? parseFloat(inputStyles.fontSize) * 2 : thumbArrowWidth * 2;
|
const thumbArrowSpacing = parseFloat(inputStyles.getPropertyValue("--range-slider-thumb-arrow-spacing"));
|
additionalwidth += Number.isNaN(thumbArrowSpacing) ? parseFloat(inputStyles.fontSize) * 2 : thumbArrowSpacing * 4;
|
const valueDisplayBackgroundStyles = getComputedStyle(this.valueDisplayBackground);
|
if (Number.isNaN(valueDisplayBackgroundStyles.paddingLeft) == false) {
|
additionalwidth += parseFloat(valueDisplayBackgroundStyles.paddingLeft);
|
}
|
if (Number.isNaN(valueDisplayBackgroundStyles.paddingRight) == false) {
|
additionalwidth += parseFloat(valueDisplayBackgroundStyles.paddingRight);
|
}
|
const thumb = this.max_display_width + additionalwidth;
|
this.style.setProperty("--auto-range-slider-thumb-width", thumb.toFixed(2) + "px");
|
const range = this.max - this.min;
|
const filledRange = this.value - this.min;
|
const startPosAreaAdjustedByThumb = thumb * 0.5;
|
const currentWidthPercentOfMaxWidth = filledRange / range;
|
const areaWidthWithoutThumb = parseFloat(inputStyles.width) - thumb;
|
return startPosAreaAdjustedByThumb + currentWidthPercentOfMaxWidth * areaWidthWithoutThumb;
|
}
|
return 0;
|
}
|
get max_display_width() {
|
if (this.maxDisplay) {
|
const maxDisplayStyles = getComputedStyle(this.maxDisplay);
|
return Number.isNaN(maxDisplayStyles.width) ? 100 : parseFloat(maxDisplayStyles.width);
|
}
|
return 100;
|
}
|
};
|
RangeSliderInputComponent.styles = [
|
__superStaticGet(RangeSliderInputComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], RangeSliderInputComponent.prototype, "min", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], RangeSliderInputComponent.prototype, "max", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], RangeSliderInputComponent.prototype, "value", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true, attribute: "decimals" })
|
], RangeSliderInputComponent.prototype, "decimals", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "unit" })
|
], RangeSliderInputComponent.prototype, "unit", 2);
|
__decorateClass([
|
i$1("input")
|
], RangeSliderInputComponent.prototype, "input", 2);
|
__decorateClass([
|
i$1(".slider-min-display")
|
], RangeSliderInputComponent.prototype, "minDisplay", 2);
|
__decorateClass([
|
i$1(".slider-max-display")
|
], RangeSliderInputComponent.prototype, "maxDisplay", 2);
|
__decorateClass([
|
i$1(".slider-value-display-container")
|
], RangeSliderInputComponent.prototype, "valueDisplayContainer", 2);
|
__decorateClass([
|
i$1(".slider-value-display")
|
], RangeSliderInputComponent.prototype, "valueDisplay", 2);
|
__decorateClass([
|
i$1(".slider-value-display-spacer")
|
], RangeSliderInputComponent.prototype, "valueDisplaySpacer", 2);
|
__decorateClass([
|
i$1(".slider-value-display-background")
|
], RangeSliderInputComponent.prototype, "valueDisplayBackground", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "decimal-divider" })
|
], RangeSliderInputComponent.prototype, "decimalDivider", 2);
|
RangeSliderInputComponent = __decorateClass([
|
e("fv-range-slider-input")
|
], RangeSliderInputComponent);
|
|
export { RangeSliderInputComponent };
|
