import { i, r, x } from './query-assigned-elements-fea1f631.js';
|
import { e } from './custom-element-30fc6381.js';
|
import { n } from './base.component-813fc7cf.js';
|
import { i as i$1 } from './query-1c86d710.js';
|
import { BaseMaskElement } from './mask.component.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}@media (width >= 980px){:host{padding:0}}:host{display:flex!important;flex-direction:row;height:100%;max-width:var(--step-based-mask-max-width,915px);width:100%}:host .content-container{display:flex;flex-direction:column;height:100%;width:var(--step-based-mask-width,min-content)}:host .content-container>.text{line-height:2rem}:host .content-container h1{margin-bottom:52px;margin-left:22px}:host .content-container .step-button-container{display:flex;white-space:nowrap}:host .content-container .step-button-container>fv-step{height:20px;margin:20px;text-align:center}:host .content-container .step-content{display:flex}:host .content-container .step-content>fv-flex-container{display:flex;flex-wrap:wrap;margin:27px;width:100%}:host .content-container .step-content>fv-flex-container>div{width:100%}:host .info-container{flex:1;flex-basis:min-content;width:300px}`;
|
|
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 StepBasedMaskComponent = class extends BaseMaskElement {
|
constructor() {
|
super();
|
this.mask = "step-based-mask";
|
this._disableInfoContainer = false;
|
this._noTitle = false;
|
this._renderImageBase64 = "";
|
this.image = "";
|
this.onceSuccessful = false;
|
this.getTemplatePromise = void 0;
|
}
|
show(showModal_) {
|
super.show(showModal_);
|
const modal = this.parentElement;
|
if (this._cloudIDComponent) {
|
modal == null ? void 0 : modal.setLoading(true);
|
this._cloudIDComponent.updateData().then(() => {
|
modal == null ? void 0 : modal.setLoading(false);
|
});
|
}
|
if (this._openCloudIDComponent) {
|
this._openCloudIDComponent.removeAttribute("loading");
|
}
|
const stepid = this.maskData["step-id"];
|
if (stepid && this._steps) {
|
this._steps.activate(stepid);
|
}
|
}
|
firstUpdated(_changedProperties) {
|
super.firstUpdated(_changedProperties);
|
}
|
updated(_changedProperties) {
|
if (this.onceSuccessful == false) {
|
if (this._dataProtectionCheckbox && this._dataProcLink) {
|
if (this._dataProtectionCheckbox) {
|
this._dataProtectionCheckbox.onChange = () => {
|
this.dataProtectionCheck();
|
};
|
}
|
if (this.getTemplatePromise == void 0) {
|
this.getTemplatePromise = TemplateLoaderService.getTemplateConfig("privacy-link");
|
if (this.getTemplatePromise) {
|
this.getTemplatePromise.then((privacyLink) => {
|
if (privacyLink && this._dataProcLink) {
|
this._dataProcLink.setAttribute("href", privacyLink.value);
|
this.onceSuccessful = true;
|
}
|
});
|
}
|
}
|
}
|
}
|
super.updated(_changedProperties);
|
}
|
dataProtectionCheck() {
|
if (this._dataProtectionCheckbox && this._shareSubmitButton) {
|
if (this._dataProtectionCheckbox.checked && this._shareSubmitButton) {
|
this._shareSubmitButton.disabled = false;
|
} else {
|
this._shareSubmitButton.disabled = true;
|
}
|
}
|
}
|
shareByMail() {
|
if (this._cloudIDComponent && this._shareMailInput && this._shareMessageInput) {
|
if (this._shareSubmitButton) {
|
this._shareSubmitButton.disabled = true;
|
if (this._cloudIDComponent.CloudID.length > 0 && this._shareMailInput.value.length > 0) {
|
window.MailerService.shareByMail(this._shareMailInput.value, this._shareMessageInput.value, this._cloudIDComponent.CloudID);
|
this._shareMailInput.value = "";
|
this._shareMessageInput.value = "";
|
}
|
}
|
}
|
}
|
renderEmailSubmit() {
|
if (this._renderImageEmail && this._renderImageSend) {
|
if (/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(this._renderImageEmail.value.trim())) {
|
this._renderImageSend.removeAttribute("disabled");
|
} else {
|
this._renderImageSend.setAttribute("disabled", "");
|
}
|
}
|
}
|
sendRenderingEmail() {
|
if (this._renderImageEmail && this._renderImageSend) {
|
this._renderImageSend.addEventListener("click", () => __async(this, null, function* () {
|
var _a;
|
window.MailerService.sendConfiguratedMail("Aus konfig lesen", "de", [{ key: "to", value: (_a = this._renderImageEmail) == null ? void 0 : _a.value }], [{ filename: "rendering.jpg", path: this._renderImageBase64, cid: "" }]);
|
}));
|
this._renderImageSend.setAttribute("disabled", "");
|
}
|
}
|
createStep(templateId, txtid, index) {
|
return x`<fv-step template-id="${templateId}" ${this.maskData["step-id"] == templateId ? "active" : ""} text="${txtid}" index="${index}"></fv-step>`;
|
}
|
render() {
|
const targetSelectors = {
|
"0": { "element": { "name": "fv-flex-container", "selector": ".download" } },
|
"1": { "element": { "name": "fv-flex-container", "selector": ".link" } },
|
"2": { "element": { "name": "fv-flex-container", "selector": ".planning" } },
|
"3": { "element": { "name": "fv-flex-container", "selector": ".dealer" } },
|
"4": { "element": { "name": "fv-flex-container", "selector": ".rendering" } }
|
};
|
let totalStepCount = 0;
|
return x`
|
<div class="content-container">
|
|
${this._noTitle ? "" : x`<h1><slot name="main-titel" i18n="remember">Merken</slot></h1>`}
|
|
<fv-steps class="step-button-container" step-target-selectors="${JSON.stringify(targetSelectors)}">
|
${this.createStep("download-step", "20244", totalStepCount++)}
|
${this.createStep("link-step", "send_link", totalStepCount++)}
|
${this.createStep("planning-step", "25019", totalStepCount++)}
|
${this.createStep("dealer-step", "fv.terms.request", totalStepCount++)}
|
${this.createStep("rendering-step", "fv.konfigurator.optionen.toolbar.rendering", totalStepCount++)}
|
</fv-steps>
|
|
<div class="step-content">
|
<fv-flex-container class="download" template-id="download-step">
|
<div class="container column">
|
<fv-download></fv-download>
|
</div>
|
</fv-flex-container>
|
|
<fv-flex-container class="link" template-id="link-step">
|
<div class="container column">
|
<fv-label class="header space after" i18n="send_link">Link senden</fv-label>
|
<fv-label class="space after" template-id="link-text"></fv-label>
|
</div>
|
<div class="container column">
|
<div class="fluid space-after">
|
<fv-label class="space after" i18n="25029">E-Mail*</fv-label>
|
<fv-input id="share-mail-input" @change="${this.dataProtectionCheck}" i18n-placeholder="25029" placeholder="E-Mail*">
|
</fv-input>
|
</div>
|
<div class="fluid">
|
<fv-label class="space after" i18n="1528">Name*</fv-label>
|
<fv-input id="share-mail-input" i18n-placeholder="7156" placeholder="Name*">
|
</fv-input>
|
</div>
|
</div>
|
<div class="container column">
|
<fv-label class="space after" i18n="your_message">Ihre Nachricht</fv-label>
|
<fv-text-box id="share-message-text" i18n-placeholder="your_message" placeholder="Ihre Nachricht"></fv-text-box>
|
</div>
|
<div class="container column">
|
<fv-checkbox id="data-protection-checkbox">
|
<span><span i18n="i_have_read">Ich habe die</span> <a id="data-Proc-Link" target="_blank" href="#" i18n="privacy_policy">Datenschutzerklärung</a> <span i18n="and_agree_with_this">gelesen und stimme dieser zu.</span></span>
|
</fv-checkbox>
|
</div>
|
<div class="container row reverse">
|
<fv-button id="share-submit" i18n="20116" @click="${this.shareByMail}" disabled>Senden</fv-button>
|
</div>
|
</fv-flex-container>
|
|
<fv-flex-container class="planning" class="active" template-id="planning-step">
|
<div class="container column">
|
<fv-label class="header space after" i18n="25019"><!--Planungsnummer--></fv-label>
|
<fv-label class="space after" i18n="fv.modal.planning_number.text"></fv-label>
|
</div>
|
<div class="container column">
|
<fv-cloud-id readonly></fv-cloud-id>
|
</div>
|
<div class="container column">
|
<fv-cloud-id class="open-cloud-id"></fv-cloud-id>
|
</div>
|
</fv-flex-container>
|
|
<fv-flex-container class="dealer" template-id="dealer-step">
|
<div class="container column">
|
<fv-label class="header space after" i18n="fv.terms.request">Anfrage</fv-label>
|
<fv-label class="space after" template-id="dealer-text"></fv-label>
|
</div>
|
<!-- <fv-search-dealer></fv-search-dealer>-->
|
<fv-request active></fv-request>
|
<fv-message></fv-message>
|
</fv-flex-container>
|
|
<fv-flex-container class="rendering" template-id="rendering-step">
|
<div class="container column">
|
<fv-label class="header space after" i18n="fv.konfigurator.optionen.toolbar.rendering">Rendering</fv-label>
|
<fv-input id="send-render-image-input" i18n-placeholder="25029" @change="${this.renderEmailSubmit}" placeholder="E-Mail-Adresse">
|
<fv-button id="send-render-image" i18n="20116" @click="${this.sendRenderingEmail}" disabled>Senden</fv-button>
|
</fv-input>
|
<div id="render-image" class="renderImage"></div>
|
</div>
|
</fv-flex-container>
|
</div>
|
</div>
|
${!this._disableInfoContainer ? x`<div class="info-container">
|
<h1><slot name="side-titel" i18n="your_selection">Ihre Auswahl</slot></h1>
|
<div class="text"><slot name="side-text"></slot></div>
|
<div class="current-scene-image" style="background-image: url('${this.image}')"></div>
|
</div>` : ""}
|
`;
|
}
|
};
|
StepBasedMaskComponent.styles = [
|
__superStaticGet(StepBasedMaskComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "disable-info" })
|
], StepBasedMaskComponent.prototype, "_disableInfoContainer", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "no-title" })
|
], StepBasedMaskComponent.prototype, "_noTitle", 2);
|
__decorateClass([
|
i$1("#share-submit")
|
], StepBasedMaskComponent.prototype, "_shareSubmitButton", 2);
|
__decorateClass([
|
i$1("#data-protection-checkbox")
|
], StepBasedMaskComponent.prototype, "_dataProtectionCheckbox", 2);
|
__decorateClass([
|
i$1("#data-Proc-Link")
|
], StepBasedMaskComponent.prototype, "_dataProcLink", 2);
|
__decorateClass([
|
i$1("#share-mail-input")
|
], StepBasedMaskComponent.prototype, "_shareMailInput", 2);
|
__decorateClass([
|
i$1("#share-message-text")
|
], StepBasedMaskComponent.prototype, "_shareMessageInput", 2);
|
__decorateClass([
|
i$1("#send-render-image")
|
], StepBasedMaskComponent.prototype, "_renderImageSend", 2);
|
__decorateClass([
|
i$1("#send-render-image-input")
|
], StepBasedMaskComponent.prototype, "_renderImageEmail", 2);
|
__decorateClass([
|
i$1("fv-steps")
|
], StepBasedMaskComponent.prototype, "_steps", 2);
|
__decorateClass([
|
i$1("fv-cloud-id[readonly]")
|
], StepBasedMaskComponent.prototype, "_cloudIDComponent", 2);
|
__decorateClass([
|
i$1(".open-cloud-id")
|
], StepBasedMaskComponent.prototype, "_openCloudIDComponent", 2);
|
__decorateClass([
|
n()
|
], StepBasedMaskComponent.prototype, "image", 2);
|
StepBasedMaskComponent = __decorateClass([
|
e("fv-step-based-mask")
|
], StepBasedMaskComponent);
|
|
export { StepBasedMaskComponent };
|
