import { i, r, x } from './query-assigned-elements-fea1f631.js';
|
import { e as e$1 } from './custom-element-30fc6381.js';
|
import { i as i$1 } from './query-1c86d710.js';
|
import { e } from './query-all-828de4b2.js';
|
import { BaseMaskElement } from './mask.component.js';
|
import './base.component-813fc7cf.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([active]){align-items:center;display:flex;flex-direction:column;justify-content:center}:host .mask-container{align-items:center;background:var(--mask-container-background,transparent);box-shadow:var(--mask-container-box-shadow,none);color:var(--mask-container-text-color,inherit);display:flex;flex-direction:column;font-size:var(--mask-font-size,inherit);height:var(--request-appointment-mask-container-height,fit-content);justify-content:center;line-height:var(--mask-font-size,inherit);max-width:var(--mask-container-max-width,none);padding:var(--mask-container-padding-top,none) var(--mask-container-padding-right,none) var(--mask-container-padding-bottom,none) var(--mask-container-padding-left,none);width:var(--request-appointment-mask-container-width,fit-content)}:host .mask-container .text{padding-bottom:var(--request-appointment-mask-text-container-padding-bottom,0);text-align:var(--mask-text-align,start);width:var(--request-appointment-mask-text-container-width,100%)}:host .mask-container .content-container{display:grid;gap:2px;grid-template-columns:auto auto;width:var(--request-appointment-mask-content-container-width,100%)}:host .mask-container .content-container .name{grid-column:1}:host .mask-container .content-container .first-name{grid-column:2}:host .mask-container .content-container .email{grid-column:1}:host .mask-container .content-container .phone{grid-column:2}:host .mask-container .content-container .plz{grid-column:1}:host .mask-container .content-container .place{grid-column:2}:host .mask-container .message{margin-top:2px;min-height:100px;min-width:calc(100% - 34px);outline:var(--input-outer-outline,1px solid var(--bordered-color,red));padding:var(--input-padding,4px 15px 0 15px)}:host .mask-container .send-button-container{cursor:pointer;margin-top:20px;position:relative;width:fit-content}:host .mask-container .send-button-container .send-button{background-color:var(--mask-button-color,inherit);box-shadow:var(--mask-button-box-shadow,none);color:var(--mask-button-text-color,inherit);cursor:pointer;display:flex;font-size:var(--mask-button-font-size,var(--mask-font-size,inherit));font-weight:var(--mask-font-weight,inherit);padding:var(--mask-button-padding,unset);position:relative;width:fit-content}:host .mask-container .send-button-container .send-button span{border:0;color:var(--mask-button-text-color,inherit);display:flex;font-size:var(--mask-button-font-size,var(--mask-font-size,inherit));font-weight:var(--mask-font-weight,inherit);margin:0;padding:0;width:fit-content}:host .mask-container .send-button-container .send-button span .loader-slot.hidden{display:none}:host .mask-container .send-button-container .send-button .send-button-text-animation-container{position:relative;width:fit-content}:host .mask-container .send-button-container .send-button .send-button-text-animation-container .send-button-text{justify-content:center;left:0;position:absolute;width:100%!important}:host .mask-container .send-button-container .send-button .send-button-text-animation-container .send-button-text-send-space{color:var(--mask-button-color,inherit)!important}:host .mask-container .send-button-container .send-button-send-text-container{height:100%;left:0;position:absolute;top:0;width:100%;z-index:9}:host .mask-container .send-button-container .send-button-send-text-container .animation-container{height:100%;position:relative;width:100%}:host .mask-container .send-button-container .send-button-send-text-container .animation-container span{border:0;color:var(--mask-button-text-color,inherit);display:flex;font-size:var(--mask-button-font-size,var(--mask-font-size,inherit));font-weight:var(--mask-font-weight,inherit);margin:0;padding:0;width:fit-content}:host .mask-container .send-button-container .send-button-send-text-container .animation-container span.send-button-text-send{align-items:center;animation:text-transition var(--request-appointment-mask-animation-duration,1s);background-color:var(--mask-button-color,inherit);display:flex;height:100%;justify-content:center;overflow:hidden;position:absolute;width:100%;z-index:9}:host .mask-container .send-button-container .checkmark{align-items:center;border:0;color:var(--mask-button-text-color,inherit);display:flex;font-size:var(--mask-button-font-size,var(--mask-font-size,inherit));font-weight:var(--mask-font-weight,inherit);height:100%;justify-content:center;margin:0;padding:0;position:absolute;right:var(--request-appointment-mask-checkmark-space-right,0);top:0;width:fit-content;z-index:9}:host .mask-container .send-button-container .checkmark.hidden{display:none}:host .mask-container .send-button-container .checkmark .checkmark-svg{height:var(--request-appointment-mask-checkmark-size,.75em);padding-left:var(--request-appointment-mask-checkmark-space-left,0);width:var(--request-appointment-mask-checkmark-size,.75em)}:host .mask-container .send-button-container .checkmark .checkmark-svg path{fill:var(--request-appointment-mask-checkmark-fill,none);stroke:var(--request-appointment-mask-checkmark-color,#7ac142);stroke-width:var(--request-appointment-mask-checkmark-stroke-width,4);stroke-dasharray:var(--request-appointment-mask-checkmark-stroke-dasharray,23);stroke-dashoffset:var(--request-appointment-mask-checkmark-stroke-dashoffset,23);stroke-linecap:var(--request-appointment-mask-checkmark-linecap,round);stroke-linejoin:var(--request-appointment-mask-checkmark-linejoin,round);animation:draw-checkmark var(--request-appointment-mask-animation-duration,1s) linear var(--request-appointment-mask-checkmark-direction,forwards)}:host .mask-container .send-button-container.send .send-button-send-text-container .animation-container .send-button-text-send{background-color:var(--request-appointment-mask-send-button-color,var(--mask-button-color,inherit))!important;color:var(--request-appointment-mask-send-text-color,var(--mask-button-color,inherit))!important}@keyframes text-transition{0%{width:0}to{width:100%}}@keyframes draw-checkmark{0%{stroke:var(--request-appointment-mask-checkmark-color,#7ac142);stroke-dashoffset:var(--request-appointment-mask-checkmark-stroke-dashoffset,23)}40%{stroke:var(--request-appointment-mask-checkmark-color,#7ac142)}to{stroke:var(--request-appointment-mask-send-text-color,var(--mask-button-color,inherit));stroke-dashoffset:0}}`;
|
|
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 RequestAppointmentComponent = class extends BaseMaskElement {
|
constructor() {
|
super();
|
this.mask = "request-appointment";
|
this.emailRegex = "[-A-Za-z0-9!#$%&'*+/=?^_`{|}~]+(?:\\.[-A-Za-z0-9!#$%&'*+/=?^_`{|}~]+)*@(?:[A-Za-z0-9](?:[-A-Za-z0-9]*[A-Za-z0-9])?\\.)+[A-Za-z0-9](?:[-A-Za-z0-9]*[A-Za-z0-9])?";
|
this.phoneInputRegex = "^[0-9\\+\\-\\\\(\\(0\\))\\ ]+$";
|
this.zipRegex = "^[0-9]{5}$";
|
this.zipInputRegex = "^[0-9]{0,5}$";
|
this.addEventListener("validating-input-updated", () => {
|
this.send = false;
|
});
|
this.addHideStateUpdatedEventListener((value) => {
|
if (value == false && this.shadowRoot) {
|
const firstInput = this.shadowRoot.querySelector("fv-validating-input");
|
firstInput.focus();
|
}
|
});
|
}
|
removeClassEach(classstr, list) {
|
list == null ? void 0 : list.forEach((node) => {
|
node.classList.remove(classstr);
|
});
|
}
|
addClassEach(classstr, list) {
|
list == null ? void 0 : list.forEach((node) => {
|
node.classList.add(classstr);
|
});
|
}
|
set send(value) {
|
var _a, _b, _c, _d;
|
if (value) {
|
(_a = this.buttonTextSend) == null ? void 0 : _a.classList.remove("hidden");
|
this.removeClassEach("hidden", this.checkmarks);
|
(_b = this.buttonContainer) == null ? void 0 : _b.classList.add("send");
|
} else {
|
(_c = this.buttonTextSend) == null ? void 0 : _c.classList.add("hidden");
|
this.addClassEach("hidden", this.checkmarks);
|
(_d = this.buttonContainer) == null ? void 0 : _d.classList.remove("send");
|
}
|
}
|
sendMail() {
|
return __async(this, null, function* () {
|
var _a, _b, _c;
|
(_a = this.loaderSlot) == null ? void 0 : _a.classList.remove("hidden");
|
if (this.nameInput && this.firstNameInput && this.emailInput && this.phoneInput && this.zipInput && this.messageTextArea) {
|
if (this.nameInput.valid && this.firstNameInput.valid && this.emailInput.valid && this.phoneInput.valid && this.zipInput.valid) {
|
const pdf = yield CommunicationMessageService.printPDF();
|
const values = [
|
{ key: "lastName", value: this.nameInput.value },
|
{ key: "firstName", value: this.firstNameInput.value },
|
{ key: "email", value: this.emailInput.value },
|
{ key: "phone", value: this.phoneInput.value },
|
{ key: "zip", value: this.zipInput.value },
|
{ key: "cloudId", value: pdf.cloudId },
|
{ key: "message", value: this.messageTextArea.value }
|
];
|
const url = new URL(window.location.href);
|
const language = url.searchParams.has("lang") ? url.searchParams.get("lang") : "de";
|
window.MailerService.sendConfiguratedMail("anfrage", language, values);
|
(_b = this.loaderSlot) == null ? void 0 : _b.classList.add("hidden");
|
this.send = true;
|
return;
|
}
|
}
|
(_c = this.loaderSlot) == null ? void 0 : _c.classList.add("hidden");
|
});
|
}
|
createInput(json) {
|
return x`
|
<fv-validating-input
|
?required=${json.required}
|
class="${json.className ? json.className : ""}"
|
i18n-placeholder="${json.placeholderI18n}"
|
input-validation="${json.inputValidation}"
|
result-validation="${json.resultValidation}"
|
i18n-empty-information-text="${json.emptyInformationI18n}"
|
i18n-invalid-information-text="${json.invalidInformationI18n}">
|
</fv-validating-input>
|
`;
|
}
|
createSendButton() {
|
const isSendText = LocalesModel.translate("share.link.per.mail.mask.send.button.text.send");
|
const text = LocalesModel.translate("send_inquiry");
|
return x`
|
<div @click="${this.sendMail}" class="send-button-container">
|
<div class="send-button">
|
<span class="send-button-text-animation-container">
|
<span class="send-button-text-send-space">${isSendText.length > text.length ? isSendText : text}</span>
|
<span class="send-button-text" i18n="send_inquiry">${text}</span>
|
</span>
|
<span><slot class="loader-slot hidden" name="loader"></slot></span>
|
</div>
|
<div class="send-button-send-text-container">
|
<div class="animation-container">
|
<span class="send-button-text-send hidden" i18n="share.link.per.mail.mask.send.button.text.send">${isSendText}</span>
|
</div>
|
</div>
|
<div class="checkmark hidden">
|
<svg class="checkmark-svg" viewBox="0 0 24 24">
|
<path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none"/>
|
</svg>
|
</div>
|
</div>
|
`;
|
}
|
render() {
|
return this.build(x`
|
<div class="mask-container">
|
<div class="text" i18n="fv.make.an.appointment"></div>
|
<div class="content-container">
|
${this.createInput({ className: "name", placeholderI18n: "1528", required: true, emptyInformationI18n: "1621" })}
|
${this.createInput({ className: "first-name", placeholderI18n: "20322", required: true, emptyInformationI18n: "1621" })}
|
${this.createInput({ className: "email", placeholderI18n: "fv.email.homeviewer.send_request_customer.email", required: true, resultValidation: this.emailRegex, emptyInformationI18n: "1621", invalidInformationI18n: "fv.invalid.input" })}
|
${this.createInput({ className: "phone", placeholderI18n: "fv.email.contactPhone", required: false, resultValidation: void 0, inputValidation: this.phoneInputRegex, invalidInformationI18n: "fv.invalid.input" })}
|
${this.createInput({ className: "zip", placeholderI18n: "25026", required: true, resultValidation: this.zipRegex, inputValidation: this.zipInputRegex, invalidInformationI18n: "fv.invalid.input", emptyInformationI18n: "1621" })}
|
${this.createInput({ className: "place", placeholderI18n: "25027", required: false })}
|
</div>
|
<textarea class="message" i18n-placeholder="your_message"></textarea>
|
${this.createSendButton()}
|
</div>
|
`);
|
}
|
show() {
|
super.show();
|
this.send = false;
|
}
|
};
|
RequestAppointmentComponent.styles = [
|
__superStaticGet(RequestAppointmentComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
i$1(".name")
|
], RequestAppointmentComponent.prototype, "nameInput", 2);
|
__decorateClass([
|
i$1(".first-name")
|
], RequestAppointmentComponent.prototype, "firstNameInput", 2);
|
__decorateClass([
|
i$1(".email")
|
], RequestAppointmentComponent.prototype, "emailInput", 2);
|
__decorateClass([
|
i$1(".phone")
|
], RequestAppointmentComponent.prototype, "phoneInput", 2);
|
__decorateClass([
|
i$1(".zip")
|
], RequestAppointmentComponent.prototype, "zipInput", 2);
|
__decorateClass([
|
i$1(".place")
|
], RequestAppointmentComponent.prototype, "placeInput", 2);
|
__decorateClass([
|
i$1(".message")
|
], RequestAppointmentComponent.prototype, "messageTextArea", 2);
|
__decorateClass([
|
i$1(".send-button-container")
|
], RequestAppointmentComponent.prototype, "buttonContainer", 2);
|
__decorateClass([
|
i$1(".send-button-text-send")
|
], RequestAppointmentComponent.prototype, "buttonTextSend", 2);
|
__decorateClass([
|
e(".checkmark")
|
], RequestAppointmentComponent.prototype, "checkmarks", 2);
|
__decorateClass([
|
i$1(".loader-slot")
|
], RequestAppointmentComponent.prototype, "loaderSlot", 2);
|
RequestAppointmentComponent = __decorateClass([
|
e$1("fv-request-appointment")
|
], RequestAppointmentComponent);
|
|
export { RequestAppointmentComponent };
|
