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 { ConfiguratorFormBaseElement } from './configurator.form.base.element.component.js';
|
import { EventHandlerDispatchEvent } from './event.handler.model.js';
|
import { SceneHelperService } from './scene-helper.service.js';
|
import '@dh-software/furnview-icons';
|
import './query-1c86d710.js';
|
|
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{color:var(--configurator-form-txt-color,unset);display:flex;flex-direction:column;gap:var(--configurator-form-element-gap,unset);padding:var(--configurator-form-padding-top,0) var(--configurator-form-padding-right,0) var(--configurator-form-padding-bottom,0) var(--configurator-form-padding-left,0)}:host .input-form-element{display:flex;flex-direction:row;overflow:var(--configurator-form-input-form-element-overflow,hidden)}:host .form-container,:host .wrapper-container{display:flex;flex-direction:column;gap:var(--configurator-form-form-container-element-gap,var(--configurator-form-element-gap,unset));overflow:var(--configurator-form-form-container-overflow,hidden);transition:height var(--configurator-form-form-toggle-animation-duration,.75s)}:host .form-container .form,:host .form-container .wrapper,:host .wrapper-container .form,:host .wrapper-container .wrapper{display:flex;flex-direction:column;gap:var(--configurator-form-form-element-gap,var(--configurator-form-element-gap,unset));height:fit-content;padding:var(--configurator-form-form-padding-top,0) var(--configurator-form-form-padding-right,0) var(--configurator-form-form-padding-bottom,0) var(--configurator-form-form-padding-left,0)}:host .form-container .closed,:host .wrapper-container .closed{overflow:hidden;padding:0}:host .form-container .form-title,:host .form-container .wrapper-title,:host .wrapper-container .form-title,:host .wrapper-container .wrapper-title{cursor:pointer;display:flex;width:fit-content}:host .form-container .toggle-icon,:host .wrapper-container .toggle-icon{font-size:.95em;width:3em}:host(.hide-empty.empty){display:none}`;
|
|
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 ConfiguratorFormComponent = class extends BaseElement {
|
constructor() {
|
super();
|
this.formElements = [];
|
this.refresh = false;
|
this.decimalDivider = ".";
|
this.floatDigits = 2;
|
this.valueInfoTimeout = 3500;
|
this.preventViewRecenter = false;
|
this.events = {};
|
this.configuratorTitle = {};
|
this.numberGroupTitles = false;
|
this.groupsToSkipNumbering = [];
|
this.groupsToIgnore = new Array();
|
this.groupTitleToggles = false;
|
this.groupTitleTogglesStartClosed = false;
|
this.formElementWrapperTogglesStartClosed = false;
|
this.groupTitleToggleOpenIcon = "fv-icon-eye-2";
|
this.groupTitleToggleClosedIcon = "fv-icon-eye-closed";
|
this.updateEvents = [];
|
this.forceReadGroupsOnRefresh = false;
|
this.highlightElementOnGroupFormEdit = false;
|
this.preventRefresh = false;
|
this.preventRegenAll = false;
|
this.refreshOnHideStateChange = false;
|
this._formIsBeingHidden = false;
|
this.formContainerClosedStates = {};
|
this.formContainerPreviousHeights = {};
|
this._groupTitleClickActive = false;
|
ConfiguratorFormComponent.ReadGroups(this.preventRefresh, this.preventRegenAll);
|
ConfiguratorFormComponent.AllElements.push(this);
|
this.addEventListener("configurator-form-update-highlight", (event) => __async(this, null, function* () {
|
var _a;
|
if (this.highlightElementOnGroupFormEdit && ((_a = event.detail) == null ? void 0 : _a.ii)) {
|
yield SceneHelperService.updateHighlightBox(event.detail.ii);
|
}
|
}));
|
EventFactoryService.LastPOLoaded.register(() => {
|
this.UpdateAll();
|
});
|
EventFactoryService.RefreshPropertyPanel.register(() => {
|
this.UpdateAll();
|
});
|
EventFactoryService.SendEvent.register((eventId_) => {
|
if (eventId_ == 55665533) {
|
this.UpdateAll();
|
}
|
});
|
this.addEventListener("openscenebuttonpage", (e) => __async(this, null, function* () {
|
if (e.detail) {
|
window.dispatchEvent(new EventHandlerDispatchEvent({
|
async: false,
|
events: [e.detail.value]
|
}));
|
}
|
}));
|
this.addEventListener("closescenebuttonpage", (e) => __async(this, null, function* () {
|
if (e.detail) {
|
const detail = e.detail;
|
for (const group of detail.owners) {
|
yield ConfiguratorApi.SetApiData({
|
groups: [{
|
name: group,
|
modifications: [detail.value]
|
}],
|
"prevent-regen-all": this.preventRegenAll
|
});
|
}
|
}
|
}));
|
this.addHideStateUpdatedEventListener((value) => __async(this, null, function* () {
|
if (value) {
|
if (this.events.hide) {
|
window.dispatchEvent(new EventHandlerDispatchEvent({
|
async: false,
|
events: this.events.hide
|
}));
|
}
|
} else {
|
if (this.events.show) {
|
window.dispatchEvent(new EventHandlerDispatchEvent({
|
async: false,
|
events: this.events.show
|
}));
|
}
|
}
|
if (this.refreshOnHideStateChange) {
|
yield ConfiguratorFormComponent.Refresh("", this, true, this.preventRefresh, this.preventRegenAll);
|
yield this.updateComplete;
|
return;
|
}
|
this.requestUpdate();
|
yield this.updateComplete;
|
}));
|
}
|
getAnimationDurationMs() {
|
let result = getComputedStyle(this).getPropertyValue("--configurator-form-form-toggle-animation-duration");
|
if (result == "") {
|
result = "0.75s";
|
}
|
return parseFloat(result) * (/\ds$/.test(result) ? 1e3 : 1);
|
}
|
static ReadGroups(preventRefresh_, preventRegenAll_) {
|
return __async(this, null, function* () {
|
yield CommunicationInterfaceService.IsAppReady;
|
ConfiguratorFormComponent._data = yield ConfiguratorApi.GetApiData(preventRefresh_, preventRegenAll_);
|
const result = Object.keys(ConfiguratorFormComponent._data);
|
if (result) {
|
ConfiguratorFormComponent._groups = result;
|
}
|
});
|
}
|
static get Data() {
|
return ConfiguratorFormComponent._data;
|
}
|
static get Groups() {
|
return ConfiguratorFormComponent._groups;
|
}
|
getConfiguratorTitle(group) {
|
if (this.configuratorTitle.specific != void 0) {
|
const specificEntry = this.configuratorTitle.specific[group];
|
if (specificEntry != void 0) {
|
return specificEntry.length > 0 ? specificEntry : void 0;
|
}
|
}
|
return this.configuratorTitle.default;
|
}
|
triggerUpdateEvents() {
|
if (this.updateEvents && this.updateEvents.length > 0) {
|
window.dispatchEvent(new EventHandlerDispatchEvent({
|
async: false,
|
events: this.updateEvents
|
}));
|
}
|
}
|
UpdateAll() {
|
return __async(this, arguments, function* (data = void 0, noFormRender = false, skip = []) {
|
if (data) {
|
if (JSON.stringify(ConfiguratorFormComponent._data) == JSON.stringify(data)) {
|
return;
|
}
|
if (!this.forceReadGroupsOnRefresh) {
|
ConfiguratorFormComponent._refreshing = true;
|
ConfiguratorFormComponent._data = data;
|
const result = Object.keys(ConfiguratorFormComponent._data);
|
if (result) {
|
ConfiguratorFormComponent._groups = result;
|
}
|
}
|
}
|
const readGroups = data == void 0 || this.forceReadGroupsOnRefresh;
|
yield ConfiguratorFormComponent.Refresh("true", this, readGroups, this.preventRefresh, this.preventRegenAll, noFormRender, skip);
|
yield this.updateComplete;
|
this.triggerUpdateEvents();
|
});
|
}
|
static CreateFormElement(formElement, group, form, slotName) {
|
if (formElement.name) {
|
const targetFormElementData = ConfiguratorFormBaseElement.GetRecursiveFromGroup(ConfiguratorFormComponent._data[group], formElement.name);
|
if (targetFormElementData.type === "") {
|
return x``;
|
}
|
}
|
if (formElement.names) {
|
for (const name2 of formElement.names) {
|
const targetFormElementData = ConfiguratorFormBaseElement.GetRecursiveFromGroup(ConfiguratorFormComponent._data[group], name2);
|
if (targetFormElementData.type === "") {
|
return x``;
|
}
|
}
|
}
|
const container = document.createElement("div");
|
container.classList.add("input-form-element");
|
if (slotName != void 0) {
|
container.slot = slotName;
|
}
|
let name = formElement.name ? formElement.name : "";
|
if (formElement.names != void 0) {
|
for (const elementName of formElement.names) {
|
name += elementName;
|
name += "-";
|
}
|
name = name.substring(0, name.length - 1);
|
}
|
const component = document.createElement(formElement.tag);
|
component.id = "id-" + name;
|
component.name = formElement.name ? formElement.name : "";
|
component.names = formElement.names ? formElement.names : [];
|
component.group = group;
|
component.InitData(ConfiguratorFormComponent._data, form);
|
component.decimalDivider = form.decimalDivider;
|
component.floatDigits = form.floatDigits;
|
component.valueInfoTimeout = form.valueInfoTimeout;
|
if (formElement.attributes) {
|
const attributes = Object.keys(formElement.attributes);
|
for (const attribute of attributes) {
|
const attributeValue = formElement.attributes[attribute];
|
if (typeof attributeValue === "boolean" && attributeValue)
|
component.setAttribute(attribute, "");
|
else if (typeof attributeValue === "boolean" && !attributeValue)
|
component.removeAttribute(attribute);
|
else if (typeof attributeValue === "object")
|
component.setAttribute(attribute, JSON.stringify(attributeValue));
|
else
|
component.setAttribute(attribute, attributeValue);
|
}
|
}
|
if (formElement.styleVars) {
|
const vars = Object.keys(formElement.styleVars);
|
for (const variable of vars) {
|
component.style.setProperty(variable, formElement.styleVars[variable]);
|
}
|
}
|
if (component == void 0 || component.Refresh == void 0) {
|
console.error("configurator.form.component> No component!");
|
}
|
if (form.refresh)
|
component.Refresh(ConfiguratorFormComponent._data, form.preventViewRecenter);
|
container.appendChild(component);
|
const slot = document.createElement("slot");
|
slot.name = "slot-" + name;
|
container.appendChild(slot);
|
return x`${container}`;
|
}
|
getGroupNumberingText(group, numberedGroups) {
|
const groupIndex = numberedGroups.indexOf(group);
|
if (groupIndex < 0)
|
return x``;
|
return x` ${groupIndex + 1}`;
|
}
|
savePreviousFormHeight(group, height) {
|
if (this.hideElement || this.isPartOfHiddenSubtree()) {
|
return;
|
}
|
this.formContainerPreviousHeights[group] = height;
|
}
|
clearFormHeights(prefix, group) {
|
const formContainer = this.renderRoot.querySelector("." + prefix + "-container-" + group);
|
if (formContainer) {
|
formContainer.style.height = "";
|
}
|
}
|
updateFormHeights(prefix, group, startClosedState) {
|
const formContainer = this.renderRoot.querySelector("." + prefix + "-container-" + group);
|
if (formContainer) {
|
if (this.formContainerClosedStates[group] == void 0) {
|
this.formContainerClosedStates[group] = startClosedState;
|
}
|
if (this.groupTitleToggles) {
|
let height = 0;
|
const formToToggleButton = this.renderRoot.querySelector("." + prefix + "-title-" + group);
|
if (formToToggleButton) {
|
height += formToToggleButton.offsetHeight;
|
}
|
const formToToggle = this.renderRoot.querySelector("." + prefix + "-" + group);
|
if (formToToggle) {
|
height += formToToggle.offsetHeight;
|
}
|
if (formToToggleButton) {
|
const computedStyle = getComputedStyle(formContainer);
|
const gap = parseInt(computedStyle.rowGap);
|
height += gap;
|
}
|
if (this.formContainerClosedStates[group] && formToToggleButton) {
|
height = formToToggleButton.offsetHeight;
|
}
|
const previousHeight = this.formContainerPreviousHeights[group];
|
if (this._formIsBeingHidden && previousHeight !== void 0) {
|
height = previousHeight;
|
}
|
formContainer.style.height = height + "px";
|
this.savePreviousFormHeight(group, height);
|
}
|
}
|
}
|
toggleIcon(target, iconList) {
|
const icons = iconList.split(" ");
|
for (const icon of icons) {
|
target.classList.toggle(icon);
|
}
|
}
|
get groupTitleClickActive() {
|
return this._groupTitleClickActive;
|
}
|
set groupTitleClickActive(value_) {
|
if (this._groupTitleClickActive != value_) {
|
this._groupTitleClickActive = value_;
|
this.triggerUpdateEvents();
|
}
|
}
|
groupTitleClicked(prefix, group, parentPrefix = "", parentGroup = "") {
|
if (ConfiguratorFormComponent._refreshing)
|
return;
|
if (this.groupTitleClickActive)
|
return;
|
this.groupTitleClickActive = true;
|
if (this.groupTitleToggles) {
|
const formToToggleButton = this.renderRoot.querySelector("." + prefix + "-title-" + group);
|
if (formToToggleButton == void 0) {
|
this.groupTitleClickActive = false;
|
return;
|
}
|
const icon = formToToggleButton.querySelector(".toggle-icon");
|
if (icon == void 0) {
|
this.groupTitleClickActive = false;
|
return;
|
}
|
const formContainer = this.renderRoot.querySelector("." + prefix + "-container-" + group);
|
if (formContainer == void 0) {
|
this.groupTitleClickActive = false;
|
return;
|
}
|
this.toggleIcon(icon, this.groupTitleToggleOpenIcon);
|
this.toggleIcon(icon, this.groupTitleToggleClosedIcon);
|
let closed = false;
|
const formToToggle = this.renderRoot.querySelector("." + prefix + "-" + group);
|
if (formToToggle) {
|
if (formToToggle.classList.contains("closed")) {
|
formToToggle.classList.remove("closed");
|
} else {
|
closed = true;
|
}
|
}
|
const parentFormContainer = this.renderRoot.querySelector("." + parentPrefix + "-container-" + parentGroup);
|
const timeout = this.getAnimationDurationMs();
|
if (!closed) {
|
this.formContainerClosedStates[group] = false;
|
formContainer.style.height = "";
|
let parentOffsetHeight = 0;
|
if (parentFormContainer) {
|
const old = parentFormContainer.offsetHeight;
|
parentFormContainer.style.height = "";
|
parentOffsetHeight = parentFormContainer.offsetHeight;
|
parentFormContainer.style.height = old + "px";
|
this.savePreviousFormHeight(parentGroup, old);
|
}
|
const offsetHeight = formContainer.offsetHeight;
|
formContainer.style.height = formToToggleButton.offsetHeight + "px";
|
this.savePreviousFormHeight(group, formToToggleButton.offsetHeight);
|
setTimeout(() => {
|
formContainer.style.height = offsetHeight + "px";
|
this.savePreviousFormHeight(group, offsetHeight);
|
if (parentFormContainer) {
|
parentFormContainer.style.height = parentOffsetHeight + "px";
|
this.savePreviousFormHeight(parentGroup, parentOffsetHeight);
|
}
|
setTimeout(() => {
|
this.groupTitleClickActive = false;
|
}, timeout);
|
}, 1);
|
} else if (closed) {
|
formContainer.style.height = formToToggleButton.offsetHeight + "px";
|
this.savePreviousFormHeight(group, formToToggleButton.offsetHeight);
|
this.formContainerClosedStates[group] = true;
|
}
|
if (closed) {
|
setTimeout(() => {
|
if (formToToggle) {
|
formToToggle.classList.add("closed");
|
}
|
if (parentFormContainer) {
|
const old = parentFormContainer.offsetHeight;
|
parentFormContainer.style.height = "";
|
const parentOffsetHeight = parentFormContainer.offsetHeight;
|
parentFormContainer.style.height = old + "px";
|
this.savePreviousFormHeight(parentGroup, old);
|
setTimeout(() => {
|
parentFormContainer.style.height = parentOffsetHeight + "px";
|
this.groupTitleClickActive = false;
|
this.savePreviousFormHeight(parentGroup, parentOffsetHeight);
|
}, 1);
|
} else {
|
this.groupTitleClickActive = false;
|
}
|
}, timeout);
|
}
|
}
|
}
|
createFormWrapperOrElement(data, group) {
|
if (data.tag) {
|
return ConfiguratorFormComponent.CreateFormElement(data, group, this);
|
}
|
const wrapperData = data;
|
if (wrapperData.elements.length > 0) {
|
let containsValid = false;
|
for (const element of wrapperData.elements) {
|
if (element.name) {
|
const targetFormElementData = ConfiguratorFormBaseElement.GetRecursiveFromGroup(ConfiguratorFormComponent._data[group], element.name);
|
if (targetFormElementData.type !== "") {
|
containsValid = true;
|
}
|
continue;
|
}
|
if (element.names) {
|
for (const name of element.names) {
|
const targetFormElementData = ConfiguratorFormBaseElement.GetRecursiveFromGroup(ConfiguratorFormComponent._data[group], name);
|
if (targetFormElementData.type !== "") {
|
containsValid = true;
|
}
|
}
|
}
|
}
|
if (containsValid) {
|
if (this.formElementWrapperTogglesStartClosed) {
|
if (this.formContainerClosedStates[group + "-" + wrapperData.title] == void 0) {
|
this.formContainerClosedStates[group + "-" + wrapperData.title] = true;
|
}
|
}
|
return x`
|
<div class="wrapper-container wrapper-container-${group}-${wrapperData.title}">
|
<div class="wrapper-title wrapper-title-${group}-${wrapperData.title}" @click="${() => this.groupTitleClicked("wrapper", group + "-" + wrapperData.title, "form", group)}">
|
<fv-label class="custom" i18n="${wrapperData.title}">${wrapperData.title}</fv-label>
|
${this.groupTitleToggles ? x`<div class="toggle-icon ${this.determineToggleIcon(group + "-" + wrapperData.title)}"></div>` : ""}
|
</div>
|
<div class="wrapper wrapper-${group}-${wrapperData.title}">
|
${wrapperData.elements.map((data_) => this.createFormWrapperOrElement(data_, group))}
|
</div>
|
</div>
|
`;
|
}
|
}
|
return x``;
|
}
|
determineToggleIcon(group) {
|
if (this.formContainerClosedStates[group]) {
|
return this.groupTitleToggleClosedIcon;
|
}
|
return this.groupTitleToggleOpenIcon;
|
}
|
createFormElements(group, numberedGroups) {
|
if (this.groupsToIgnore.includes(group)) {
|
return x``;
|
}
|
if (this.groupTitleTogglesStartClosed) {
|
if (this.formContainerClosedStates[group] == void 0) {
|
this.formContainerClosedStates[group] = true;
|
}
|
}
|
const data = ConfiguratorFormComponent.Data[group];
|
return x`
|
<div class="form-container form-container-${group}"
|
@mouseenter="${() => this.onMouseEnterFromContainer(data)}"
|
@mouseleave="${() => this.onMouseLeaveFormContainer(data)}">
|
${this.getConfiguratorTitle(group) ? x`<fv-label class="custom form-title form-title-${group}" @click="${() => this.groupTitleClicked("form", group)}">${this.getConfiguratorTitle(group)}${this.getGroupNumberingText(group, numberedGroups)}${this.groupTitleToggles ? x`<div class="toggle-icon ${this.determineToggleIcon(group)}"></div>` : ""}</fv-label>` : x``}
|
<div class="form form-${group}">
|
${this.formElements.map((data2) => this.createFormWrapperOrElement(data2, group))}
|
</div>
|
</div>
|
`;
|
}
|
onMouseEnterFromContainer(group) {
|
return __async(this, null, function* () {
|
if (this.highlightElementOnGroupFormEdit && (group == null ? void 0 : group["lo-owned"]) && (group == null ? void 0 : group["instance-ident"])) {
|
yield SceneHelperService.addHighlightBox(group == null ? void 0 : group["instance-ident"]);
|
}
|
});
|
}
|
onMouseLeaveFormContainer(group) {
|
return __async(this, null, function* () {
|
if (this.highlightElementOnGroupFormEdit && (group == null ? void 0 : group["lo-owned"]) && (group == null ? void 0 : group["instance-ident"])) {
|
yield SceneHelperService.removeHighlightBox(group == null ? void 0 : group["instance-ident"]);
|
}
|
});
|
}
|
updated(changedProperties) {
|
super.updated(changedProperties);
|
this.classList.remove("empty");
|
if (this.shadowRoot) {
|
if (this.shadowRoot.children.length == 0) {
|
this.classList.add("empty");
|
}
|
}
|
for (const group of ConfiguratorFormComponent._groups) {
|
if (this.groupTitleTogglesStartClosed && this.formContainerClosedStates[group] == void 0 || this.formContainerClosedStates[group]) {
|
const formToToggle = this.renderRoot.querySelector(".form-" + group);
|
formToToggle.classList.add("closed");
|
}
|
for (const formElement of this.formElements) {
|
if (this.formElementWrapperTogglesStartClosed && this.formContainerClosedStates[group + "-" + formElement.title] == void 0 || this.formContainerClosedStates[group + "-" + formElement.title]) {
|
if (formElement.title) {
|
const wrapperToToggle = this.renderRoot.querySelector(".wrapper-" + group + "-" + formElement.title);
|
if (wrapperToToggle) {
|
wrapperToToggle.classList.add("closed");
|
}
|
}
|
}
|
}
|
}
|
setTimeout(() => {
|
for (const group of ConfiguratorFormComponent._groups) {
|
for (const formElement of this.formElements) {
|
if (formElement.title) {
|
this.updateFormHeights("wrapper", group + "-" + formElement.title, this.formElementWrapperTogglesStartClosed);
|
}
|
}
|
this.updateFormHeights("form", group, this.groupTitleTogglesStartClosed);
|
}
|
this._formIsBeingHidden = false;
|
if (this.hideElement == false && this.isPartOfHiddenSubtree() == false) {
|
setTimeout(() => {
|
this.triggerUpdateEvents();
|
}, this.getAnimationDurationMs());
|
}
|
}, 1);
|
}
|
render() {
|
if (this.formElements.length < 1)
|
return x`no formElements defined!`;
|
if (ConfiguratorFormComponent._groups.length < 1) {
|
console.warn("configurator.form> Keine Gruppen definiert!");
|
return x``;
|
}
|
const numberedGroups = new Array();
|
if (this.numberGroupTitles) {
|
for (const group of ConfiguratorFormComponent._groups) {
|
if (this.groupsToIgnore.includes(group))
|
continue;
|
if (!this.groupsToSkipNumbering.includes(group)) {
|
numberedGroups.push(group);
|
}
|
}
|
}
|
return x`
|
${ConfiguratorFormComponent._groups.map((group) => this.createFormElements(group, numberedGroups))}
|
`;
|
}
|
static Refresh(_0, _1) {
|
return __async(this, arguments, function* (check, caller_, readGroups = true, preventRefresh_ = false, preventRegenAll_ = false, preventFormRender_ = false, configratorElementsToSkip = []) {
|
if (check == void 0)
|
return;
|
ConfiguratorFormComponent._refreshing = true;
|
if (readGroups) {
|
const previousData = ConfiguratorFormComponent._data;
|
yield ConfiguratorFormComponent.ReadGroups(preventRefresh_, preventRegenAll_);
|
if (JSON.stringify(ConfiguratorFormComponent._data) == JSON.stringify(previousData)) {
|
caller_.refresh = false;
|
ConfiguratorFormComponent._refreshing = false;
|
return;
|
}
|
}
|
if (!preventFormRender_) {
|
ConfiguratorFormComponent.AllElements.forEach((form) => {
|
form.requestUpdate();
|
});
|
}
|
ConfiguratorFormBaseElement.GetAll().forEach((element) => {
|
if (configratorElementsToSkip.includes(element))
|
return;
|
element.Refresh(ConfiguratorFormComponent._data, caller_.preventViewRecenter);
|
});
|
ConfiguratorFormComponent._refreshing = false;
|
});
|
}
|
static RefreshOld(check, caller_, readGroups = true, preventRefresh_ = false, preventRegenAll_ = false) {
|
return __async(this, null, function* () {
|
if (check != void 0) {
|
ConfiguratorFormComponent._refreshing = true;
|
if (readGroups) {
|
const previousData = ConfiguratorFormComponent._data;
|
yield ConfiguratorFormComponent.ReadGroups(preventRefresh_, preventRegenAll_);
|
if (JSON.stringify(ConfiguratorFormComponent._data) == JSON.stringify(previousData)) {
|
caller_.refresh = false;
|
ConfiguratorFormComponent._refreshing = false;
|
return;
|
}
|
}
|
ConfiguratorFormComponent.AllElements.forEach((form) => {
|
form.requestUpdate();
|
});
|
ConfiguratorFormBaseElement.GetAll().forEach((element) => {
|
element.Refresh(ConfiguratorFormComponent._data, caller_.preventViewRecenter);
|
});
|
caller_.refresh = false;
|
ConfiguratorFormComponent._refreshing = false;
|
}
|
});
|
}
|
attributeChangedCallback(name, _old, value) {
|
super.attributeChangedCallback(name, _old, value);
|
if (name === "refresh") {
|
ConfiguratorFormComponent.Refresh(value, this, false, this.preventRefresh, this.preventRegenAll);
|
}
|
}
|
};
|
ConfiguratorFormComponent.styles = [
|
__superStaticGet(ConfiguratorFormComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
ConfiguratorFormComponent._groups = [];
|
ConfiguratorFormComponent._data = {};
|
ConfiguratorFormComponent.AllElements = [];
|
ConfiguratorFormComponent._refreshing = false;
|
__decorateClass([
|
n({ type: Array, attribute: "form-elements", reflect: true })
|
], ConfiguratorFormComponent.prototype, "formElements", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true })
|
], ConfiguratorFormComponent.prototype, "refresh", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "decimal-divider" })
|
], ConfiguratorFormComponent.prototype, "decimalDivider", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true, attribute: "float-digits" })
|
], ConfiguratorFormComponent.prototype, "floatDigits", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true, attribute: "value-info-timeout" })
|
], ConfiguratorFormComponent.prototype, "valueInfoTimeout", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "prevent-view-recenter" })
|
], ConfiguratorFormComponent.prototype, "preventViewRecenter", 2);
|
__decorateClass([
|
n({ type: Object, reflect: true, attribute: "events" })
|
], ConfiguratorFormComponent.prototype, "events", 2);
|
__decorateClass([
|
n({ type: Object, reflect: true, attribute: "configurator-title" })
|
], ConfiguratorFormComponent.prototype, "configuratorTitle", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "number-group-titles" })
|
], ConfiguratorFormComponent.prototype, "numberGroupTitles", 2);
|
__decorateClass([
|
n({ type: Array, reflect: true, attribute: "groups-to-skip-numbering" })
|
], ConfiguratorFormComponent.prototype, "groupsToSkipNumbering", 2);
|
__decorateClass([
|
n({ type: Array, reflect: true, attribute: "groups-to-ignore" })
|
], ConfiguratorFormComponent.prototype, "groupsToIgnore", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "group-title-toggles" })
|
], ConfiguratorFormComponent.prototype, "groupTitleToggles", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "group-title-toggles-start-closed" })
|
], ConfiguratorFormComponent.prototype, "groupTitleTogglesStartClosed", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "form-elements-wrapper-toggles-start-closed" })
|
], ConfiguratorFormComponent.prototype, "formElementWrapperTogglesStartClosed", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "group-title-toggle-open-icon" })
|
], ConfiguratorFormComponent.prototype, "groupTitleToggleOpenIcon", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "group-title-toggle-closed-icon" })
|
], ConfiguratorFormComponent.prototype, "groupTitleToggleClosedIcon", 2);
|
__decorateClass([
|
n({ type: Array, reflect: true, attribute: "update-events" })
|
], ConfiguratorFormComponent.prototype, "updateEvents", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "force-read-groups-on-refresh" })
|
], ConfiguratorFormComponent.prototype, "forceReadGroupsOnRefresh", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "highlight-element-on-group-form-edit" })
|
], ConfiguratorFormComponent.prototype, "highlightElementOnGroupFormEdit", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "prevent-refresh" })
|
], ConfiguratorFormComponent.prototype, "preventRefresh", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "prevent-regen-all" })
|
], ConfiguratorFormComponent.prototype, "preventRegenAll", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "refresh-on-hide-state-change" })
|
], ConfiguratorFormComponent.prototype, "refreshOnHideStateChange", 2);
|
ConfiguratorFormComponent = __decorateClass([
|
e("fv-configurator-form")
|
], ConfiguratorFormComponent);
|
|
export { ConfiguratorFormComponent };
|
