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 './dealer.component.js';
|
import './message.component.js';
|
import './search-dealer.component.js';
|
import './input.component.js';
|
import './button.component.js';
|
import './label.component.js';
|
import './text-box.component.js';
|
import './checkbox.component.js';
|
import { CloudIdService } from './cloud-id.service.js';
|
import '@dh-software/furnview-icons';
|
import './common-8a4d61f3.js';
|
import './class-map-a0fb5d87.js';
|
import './style.helper.js';
|
import './query-1c86d710.js';
|
import './sass.default-d943b107.js';
|
import './list-box.component.js';
|
import './base-input.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{display:none}:host .container{gap:1rem;margin:25px 0}:host .fluid.space-after{margin-right:unset}:host([active]){display:block}`;
|
|
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 RequestComponent = class extends BaseElement {
|
constructor() {
|
super();
|
this.active = false;
|
this.name = "";
|
this.address = "";
|
this.privacyLink = "#";
|
this.templateName = "request-mail";
|
this.sendCopy = false;
|
this.onSubmit = (e, nameValueList) => __async(this, null, function* () {
|
const email = nameValueList["email"] || void 0;
|
if (!email) {
|
return;
|
}
|
const cloudId = yield CloudIdService.getCloudId();
|
nameValueList["cloudId"] = cloudId;
|
yield RequestHelperService.fetchConfiguration();
|
const customMailService = window.ConstructionService && window.ConstructionService.CustomMailService ? window.ConstructionService.CustomMailService : void 0;
|
window.dispatchEvent(new CustomEvent("onSendMail", {
|
detail: {
|
name: this.templateName,
|
values: Object.entries(nameValueList).map((x) => {
|
return { key: x[0], value: x[1] };
|
}),
|
cloudIds: [cloudId],
|
customMailService: customMailService ? customMailService : void 0,
|
to: this.sendCopy ? email : "",
|
buyingGroup: window.g_configuration.furnplan_article_url_configurator_verband
|
}
|
}));
|
});
|
}
|
onMessageClickDefault() {
|
const dealerComponent = this.renderRoot.querySelector("fv-dealer");
|
const searchDealerComponent = this.parentNode ? this.parentNode.querySelector("fv-search-dealer") : null;
|
const messageComponent = this.parentNode ? this.parentNode.querySelector("fv-message") : null;
|
const divElements = this.parentNode ? this.parentNode.querySelectorAll("div") : null;
|
this.renderRoot.querySelector("fv-button");
|
if (messageComponent) {
|
if (divElements) {
|
divElements.forEach((value) => {
|
value.classList.remove("hidden");
|
});
|
}
|
this.reset();
|
messageComponent.active = false;
|
if (dealerComponent && searchDealerComponent) {
|
searchDealerComponent.active = true;
|
} else {
|
this.active = true;
|
}
|
}
|
}
|
render() {
|
const fvDealer = this.name && this.address;
|
return x`
|
<div class="container row">
|
<div class="fluid">
|
<fv-labeled-input name="surname" i18n-placeholder="20322" placeholder="Vorname">
|
</fv-labeled-input>
|
</div>
|
<div class="fluid space-after">
|
<fv-labeled-input name="name" i18n-placeholder="20323" placeholder="Nachname">
|
</fv-labeled-input>
|
</div>
|
</div>
|
<div class="container row">
|
<div class="fluid">
|
<fv-labeled-input name="phone" i18n-placeholder="20381" placeholder="Telefon">
|
</fv-labeled-input>
|
</div>
|
<div class="fluid space-after">
|
<fv-labeled-input name="email" i18n-placeholder="email_mandatory" placeholder="E-Mail*" required>
|
</fv-labeled-input>
|
</div>
|
</div>
|
${fvDealer ? x`` : x`<div class="container row">
|
<div class="fluid space-after">
|
<fv-labeled-input name="postcode" i18n-placeholder="postal_code_mandatory" placeholder="Postleitzahl*" required></fv-labeled-input>
|
</div>
|
<div class="fluid"></div>
|
</div>`}
|
<div class="container column">
|
<fv-labeled-input inputTag="fv-text-box" name="message" i18n-placeholder="your_message" placeholder="Ihre Nachricht"></fv-labeled-input>
|
</div>
|
|
<div class="container column">
|
<fv-checkbox>
|
<span><span i18n="i_have_read">Ich habe die</span> <a target="_blank" i18n="privacy_policy" .href="${this.privacyLink}"> Datenschutzerklärung</a> <span i18n="and_agree_with_this"> gelesen und stimme dieser zu.</span></span>
|
</fv-checkbox>
|
</div>
|
|
<div>
|
${fvDealer ? x`<fv-dealer name="${this.name}" address="${this.address}" i18n="send_inquiry" disabled>Anfrage absenden</fv-dealer>` : x`<fv-button i18n="send_inquiry" disabled>Anfrage absenden</fv-button>`}
|
</div>
|
`;
|
}
|
firstUpdated() {
|
if (this.shadowRoot) {
|
const dealerComponent = this.shadowRoot.querySelector("fv-dealer");
|
const submitButton = this.shadowRoot.querySelector("fv-button");
|
const inputBoxes = this.shadowRoot.querySelectorAll("fv-labeled-input");
|
const requiredInputBoxes = this.shadowRoot.querySelectorAll("fv-labeled-input[required]");
|
const messageBox = this.shadowRoot.querySelector("fv-labeled-input[name='message']");
|
const checkboxComponent = this.shadowRoot.querySelector("fv-checkbox");
|
const validateData = () => {
|
if (dealerComponent)
|
dealerComponent.disabled = true;
|
else if (submitButton)
|
submitButton.disabled = true;
|
if (checkboxComponent.checked) {
|
for (let i = 0; i < requiredInputBoxes.length; i++) {
|
const requiredInput = requiredInputBoxes[i];
|
if (requiredInput.value.trim().length === 0) {
|
break;
|
}
|
if (i + 1 === requiredInputBoxes.length) {
|
if (dealerComponent)
|
dealerComponent.disabled = false;
|
else if (submitButton)
|
submitButton.disabled = false;
|
}
|
}
|
}
|
};
|
checkboxComponent.onChange = (e, component) => {
|
validateData();
|
};
|
requiredInputBoxes.forEach((input) => {
|
input.onChange = (e, component) => {
|
validateData();
|
};
|
});
|
const submitFunction = (e) => __async(this, null, function* () {
|
if (checkboxComponent && checkboxComponent.checked) {
|
this.active = false;
|
const messageComponent = this.parentNode ? this.parentNode.querySelector("fv-message") : null;
|
const nameValueList = {};
|
inputBoxes.forEach((value) => {
|
if (value.name)
|
nameValueList[value.name] = value.value;
|
});
|
if (messageBox.name)
|
nameValueList[messageBox.name] = messageBox.value;
|
yield this.onSubmit(e, nameValueList);
|
if (messageComponent) {
|
const divElements = this.parentNode ? this.parentNode.querySelectorAll("div") : null;
|
if (divElements) {
|
divElements.forEach((value) => {
|
value.classList.add("hidden");
|
});
|
}
|
messageComponent.active = true;
|
messageComponent.onClick = (e2) => {
|
const handler = this.onmessageclick || this.onMessageClick;
|
this.onMessageClickDefault();
|
if (handler) {
|
handler.call(this, e2);
|
}
|
this.dispatchEvent(new CustomEvent("messageclick"));
|
};
|
}
|
}
|
});
|
if (dealerComponent)
|
dealerComponent.onClick = submitFunction;
|
else if (submitButton)
|
submitButton.addEventListener("click", submitFunction);
|
}
|
}
|
reset() {
|
if (this.shadowRoot) {
|
const dealerComponent = this.shadowRoot.querySelector("fv-dealer");
|
const submitButton = this.shadowRoot.querySelector("fv-button");
|
const inputBoxes = this.shadowRoot.querySelectorAll("fv-labeled-input");
|
const checkboxComponent = this.shadowRoot.querySelector("fv-checkbox");
|
checkboxComponent.checked = false;
|
inputBoxes.forEach((input) => {
|
input.value = "";
|
});
|
if (submitButton)
|
submitButton.disabled = true;
|
if (dealerComponent)
|
dealerComponent.disabled = true;
|
}
|
}
|
};
|
RequestComponent.styles = [
|
__superStaticGet(RequestComponent, "styles") || [],
|
i`
|
${r(css_248z)}
|
`
|
];
|
__decorateClass([
|
n({ type: Boolean, reflect: true })
|
], RequestComponent.prototype, "active", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestComponent.prototype, "name", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestComponent.prototype, "address", 2);
|
__decorateClass([
|
n({ type: String, reflect: true })
|
], RequestComponent.prototype, "privacyLink", 2);
|
__decorateClass([
|
n({ type: String, reflect: true })
|
], RequestComponent.prototype, "templateName", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true })
|
], RequestComponent.prototype, "sendCopy", 2);
|
__decorateClass([
|
n()
|
], RequestComponent.prototype, "onSubmit", 2);
|
RequestComponent = __decorateClass([
|
e("fv-request")
|
], RequestComponent);
|
|
export { RequestComponent };
|
