import { i, r, x } from './query-assigned-elements-fea1f631.js';
|
import { e } from './custom-element-30fc6381.js';
|
import { n, B as BaseElement } from './base.component-813fc7cf.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(.focused){outline:var(--constrained-input-focus-outline,#000 auto 1px)}:host([show-increase-decrease]) .input-increase-decrease .input-container{width:calc(100% - var(--constrained-input-indecrease-buttons-width, 40px)*2 - var(--constrained-input-border-size, 2px)*2)}:host{display:block}:host .input-increase-decrease{background-color:var(--constrained-input-border-color,#b4b4b4);border:var(--constrained-input-border-size,2px) solid var(--constrained-input-border-color,#b4b4b4);display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--constrained-input-border-size,2px);height:100%;justify-content:space-between;margin:0;padding:0}:host .input-increase-decrease .button{align-items:center;background:var(--constrained-input-indecrease-buttons-background,#fff);border:none;cursor:pointer;display:flex;justify-content:center;margin:0;padding:0;width:var(--constrained-input-indecrease-buttons-width,40px)}:host .input-increase-decrease .input-container{display:inline-block;display:flex;height:fit-content;position:relative;width:100%}:host .input-increase-decrease .input-container .unit-container{align-items:center;background:var(--constrained-input-background,#fff);border-left:var(--constrained-input-border-size,2px) solid var(--constrained-input-border-color,#b4b4b4);display:flex;flex-direction:row;font-size:var(--constrained-input-font-size,15px);justify-content:center;padding-left:calc(.3em + var(--constrained-input-border-size, 2px));padding-right:calc(.3em + var(--constrained-input-border-size, 2px));width:var(--auto-constrained-input-max-unit-length,fit-content)}:host .input-increase-decrease .input-container .number-unit{border:none;padding-left:calc(.3em + var(--constrained-input-border-size, 2px))}:host .input-increase-decrease .input-container .number-unit fv-label{visibility:hidden}:host .input-increase-decrease .input-container input{-moz-appearance:textfield;-webkit-appearance:none;background:var(--constrained-input-background,#fff);border:none;box-sizing:border-box;font-size:var(--constrained-input-font-size,15px);height:var(--constrained-input-height,40px);margin:0;padding:var(--constrained-input-padding,0 1em 0 0);text-align:right;width:var(--constrained-input-width,100%)}:host .input-increase-decrease .input-container input:focus-visible{outline:0!important}:host .input-increase-decrease .input-container input.no-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host .input-increase-decrease .input-container input.no-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host(.disabled) .input-increase-decrease .button{display:none}:host(.disabled) .input-increase-decrease .input-container{width:100%}`;
|
|
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);
|
var __async = (__this, __arguments, generator) => {
|
return new Promise((resolve, reject) => {
|
var fulfilled = (value) => {
|
try {
|
step(generator.next(value));
|
} catch (e) {
|
reject(e);
|
}
|
};
|
var rejected = (value) => {
|
try {
|
step(generator.throw(value));
|
} catch (e) {
|
reject(e);
|
}
|
};
|
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
step((generator = generator.apply(__this, __arguments)).next());
|
});
|
};
|
let ConstrainedInputComponent = class extends BaseElement {
|
constructor() {
|
super();
|
this.min = 0;
|
this.max = 99999999999;
|
this.value = 1;
|
this.step = 1;
|
this.noMinMaxCheck = false;
|
this.decimals = 0;
|
this.decimalDivider = ".";
|
this.unit = "error";
|
this.unitLength = 0;
|
this.hideUnusedUnitContainer = false;
|
this.hideUnusedUnitContainerWhenDisabled = false;
|
this.showIncreaseDecrease = false;
|
this.poolRepeatedButtonClicks = false;
|
this.timeoutms = 500;
|
this._finalizeClickPromise = void 0;
|
this.buttonTimeout = void 0;
|
this.timeoutAddClicks = 0;
|
this.finalizingClick = false;
|
this.modificationIntervalTimeout = 150;
|
this.modificationInterval = void 0;
|
this.modificationTimeout = void 0;
|
}
|
set FinalizeClickPromise(finalizePromise) {
|
this._finalizeClickPromise = finalizePromise;
|
}
|
pooledButtonClick(addClickModification_) {
|
return __async(this, null, function* () {
|
if (this.finalizingClick) {
|
return;
|
}
|
const finalizeClick = () => __async(this, null, function* () {
|
this.finalizingClick = true;
|
if (this.timeoutAddClicks == 0)
|
return;
|
const modifications = this.timeoutAddClicks * this.step;
|
this.final_value = this.getDisplayValue(this.value + modifications);
|
if (this._finalizeClickPromise != void 0) {
|
yield this._finalizeClickPromise;
|
}
|
this.finalizingClick = false;
|
this._finalizeClickPromise = void 0;
|
});
|
if (this.poolRepeatedButtonClicks == false) {
|
this.timeoutAddClicks = addClickModification_;
|
yield finalizeClick();
|
this.timeoutAddClicks = 0;
|
return;
|
}
|
this.display_value = this.constrainValue(this.display_value + addClickModification_ * this.step);
|
this.timeoutAddClicks += addClickModification_;
|
if (this.buttonTimeout) {
|
clearTimeout(this.buttonTimeout);
|
this.buttonTimeout = void 0;
|
}
|
this.buttonTimeout = setTimeout(() => __async(this, null, function* () {
|
if (this.buttonTimeout) {
|
clearTimeout(this.buttonTimeout);
|
this.buttonTimeout = void 0;
|
yield finalizeClick();
|
this.timeoutAddClicks = 0;
|
}
|
}), this.timeoutms);
|
});
|
}
|
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_;
|
}
|
get display_value() {
|
if (this.input == void 0)
|
return this.value;
|
return this.getNoUnitValue(this.input.value);
|
}
|
set display_value(value_) {
|
if (this.input == void 0)
|
return;
|
this.input.value = this.getDisplayValue(value_);
|
}
|
set final_value(value_) {
|
if (this.input == void 0)
|
return;
|
if (value_ == "NaN" || value_ == "") {
|
this.display_value = this.value;
|
return;
|
}
|
this.value = this.getNoUnitValue(value_);
|
if (this.noMinMaxCheck == false) {
|
this.value = this.constrainValue(this.value);
|
}
|
this.display_value = this.value;
|
this.dispatchEvent(new CustomEvent("change", {
|
bubbles: true,
|
detail: {
|
min: this.min,
|
max: this.max,
|
value: this.value
|
}
|
}));
|
}
|
change(e) {
|
if (this.input == void 0)
|
return;
|
this.final_value = this.input.value;
|
}
|
increase() {
|
if (this.input == void 0)
|
return;
|
this.pooledButtonClick(1);
|
}
|
decrease() {
|
if (this.input == void 0)
|
return;
|
this.pooledButtonClick(-1);
|
}
|
recursiveInterval(interval) {
|
clearTimeout(this.modificationInterval);
|
this.modificationInterval = setTimeout(() => {
|
interval();
|
if (this.modificationIntervalTimeout > 60) {
|
this.modificationIntervalTimeout -= 10;
|
}
|
this.recursiveInterval(interval);
|
}, this.modificationIntervalTimeout);
|
}
|
mousedown(interval) {
|
if (this.modificationTimeout == void 0) {
|
this.modificationTimeout = setTimeout(() => {
|
this.recursiveInterval(() => {
|
interval();
|
});
|
}, 250);
|
}
|
}
|
mousedownIncrease() {
|
this.mousedown(() => {
|
this.display_value = this.constrainValue(this.display_value + 1 * this.step);
|
});
|
}
|
mousedownDecrease() {
|
this.mousedown(() => {
|
this.display_value = this.constrainValue(this.display_value + -1 * this.step);
|
});
|
}
|
mouseupIncrease() {
|
if (this.modificationInterval == void 0 && this.modificationTimeout != void 0) {
|
clearTimeout(this.modificationTimeout);
|
this.modificationTimeout = void 0;
|
this.increase();
|
return;
|
}
|
clearInterval(this.modificationInterval);
|
this.modificationInterval = void 0;
|
this.final_value = this.input ? this.input.value : this.getDisplayValue(this.value);
|
this.modificationIntervalTimeout = 150;
|
}
|
mouseupDecrease() {
|
if (this.modificationInterval == void 0) {
|
clearTimeout(this.modificationTimeout);
|
this.modificationTimeout = void 0;
|
this.decrease();
|
return;
|
}
|
clearInterval(this.modificationInterval);
|
this.modificationInterval = void 0;
|
this.final_value = this.input ? this.input.value : this.getDisplayValue(this.value);
|
this.modificationIntervalTimeout = 150;
|
}
|
get unitifier() {
|
switch (this.unit) {
|
case "cm":
|
return 0.1;
|
case "m":
|
return 1e-3;
|
case "mm":
|
default:
|
return 1;
|
}
|
}
|
get unitremover() {
|
switch (this.unit) {
|
case "cm":
|
return 10;
|
case "m":
|
return 1e3;
|
case "mm":
|
default:
|
return 1;
|
}
|
}
|
getNoUnitValue(value) {
|
const valueString = value.replace(",", ".");
|
return this.decimals > 0 ? parseFloat(valueString) * this.unitremover : parseInt(valueString) * this.unitremover;
|
}
|
getDisplayValue(value) {
|
const result = (value * this.unitifier).toFixed(this.decimals);
|
return result.replace(".", this.decimalDivider);
|
}
|
markFocus() {
|
this.classList.add("focused");
|
}
|
unMarkFocus() {
|
this.classList.remove("focused");
|
}
|
GetInput() {
|
let unitLengthToUse = this.unitLength;
|
if (this.unitLength == 0) {
|
unitLengthToUse = this.unit.length;
|
}
|
const disableInput = this.min === this.max;
|
const hideUnitContainer = (this.hideUnusedUnitContainer || this.hideUnusedUnitContainerWhenDisabled && disableInput) && this.unit == "error";
|
if (disableInput) {
|
this.classList.add("disabled");
|
} else {
|
this.classList.remove("disabled");
|
}
|
this.style.setProperty("--auto-constrained-input-max-unit-length", unitLengthToUse.toFixed(0) + "em");
|
return x`
|
<div class="input-container">
|
<input @focus=${this.markFocus}
|
@blur=${this.unMarkFocus}
|
@change=${this.change}
|
value="${this.getDisplayValue(this.value)}"
|
min="${this.getDisplayValue(this.min)}"
|
max="${this.getDisplayValue(this.max)}"
|
step="${this.step}"
|
placeholder="${this.getDisplayValue(this.min)} - ${this.getDisplayValue(this.max)}"
|
?disabled="${disableInput}"
|
/>
|
${hideUnitContainer ? x`` : x`<span class="unit-container${this.unit == "error" ? " number-unit" : ""}"><fv-label>${this.unit}</fv-label></span>`}
|
</div>
|
`;
|
}
|
GetIncreaseDecrease() {
|
if (this.showIncreaseDecrease) {
|
return x`
|
<button class="button increase" @mousedown="${this.mousedownIncrease}" @mouseup="${this.mouseupIncrease}">
|
<slot name="increase"></slot>
|
</button>
|
<button class="button decrease" @mousedown="${this.mousedownDecrease}" @mouseup="${this.mouseupDecrease}">
|
<slot name="decrease"></slot>
|
</button>
|
`;
|
}
|
return x``;
|
}
|
render() {
|
return x`
|
<div class="input-increase-decrease">
|
${this.GetInput()}
|
${this.GetIncreaseDecrease()}
|
</div>
|
`;
|
}
|
};
|
ConstrainedInputComponent.styles = [
|
__superStaticGet(ConstrainedInputComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], ConstrainedInputComponent.prototype, "min", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], ConstrainedInputComponent.prototype, "max", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], ConstrainedInputComponent.prototype, "value", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], ConstrainedInputComponent.prototype, "step", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "no-min-max-check" })
|
], ConstrainedInputComponent.prototype, "noMinMaxCheck", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true, attribute: "decimals" })
|
], ConstrainedInputComponent.prototype, "decimals", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "decimal-divider" })
|
], ConstrainedInputComponent.prototype, "decimalDivider", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "unit" })
|
], ConstrainedInputComponent.prototype, "unit", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true, attribute: "unit-length" })
|
], ConstrainedInputComponent.prototype, "unitLength", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "hide-unused-unit-container" })
|
], ConstrainedInputComponent.prototype, "hideUnusedUnitContainer", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "hide-unused-unit-container-when-disabled" })
|
], ConstrainedInputComponent.prototype, "hideUnusedUnitContainerWhenDisabled", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "show-increase-decrease" })
|
], ConstrainedInputComponent.prototype, "showIncreaseDecrease", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "pool-repeated-button-clicks" })
|
], ConstrainedInputComponent.prototype, "poolRepeatedButtonClicks", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true })
|
], ConstrainedInputComponent.prototype, "timeoutms", 2);
|
__decorateClass([
|
i$1("input")
|
], ConstrainedInputComponent.prototype, "input", 2);
|
ConstrainedInputComponent = __decorateClass([
|
e("fv-constrained-input")
|
], ConstrainedInputComponent);
|
|
export { ConstrainedInputComponent };
|
