import { i, r, x } from './query-assigned-elements-fea1f631.js';
|
import { BaseMaskElement } from './mask.component.js';
|
import { e as e$1 } from './custom-element-30fc6381.js';
|
import { n } from './base.component-813fc7cf.js';
|
import { i as i$1 } from './query-1c86d710.js';
|
import { e } from './query-all-828de4b2.js';
|
import './notice-carousel.components.js';
|
import '@dh-software/furnview-icons';
|
import './class-map-a0fb5d87.js';
|
import './notice-utils.js';
|
import './notice-accordion-item.component.js';
|
import './style.helper.js';
|
import './accordion.component.js';
|
import './accordion-item.component.js';
|
import './event.handler.model.js';
|
import './image.service.js';
|
import './accordion-layer.component.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}@media (width >= 980px){:host>.content>.request-header{font-size:35px;line-height:42px;margin:40px 0;text-align:center}:host>.content .request-content{grid-template-columns:1fr .5fr;grid-template-rows:1fr;margin:0 0 0 130px}:host>.content .request-carousel{display:flex}:host>.content .request-carousel fv-notice-carousel{margin:auto}:host>.content .request-form>label{font-size:20px}:host>.content .request-form .request-form-content{flex:1}:host>.content .request-form .request-form-content .row{flex:1;flex-direction:row;gap:20px}:host>.content .request-form .bottom-row{flex:0.5}}@media (width <= 980px){:host{font-size:14px;line-height:12px}:host>.content>.request-header{font-size:20px;line-height:26px;margin:0 10px;text-align:center}:host>.content .request-content{grid-template-columns:1fr;grid-template-rows:auto auto}:host>.content .request-form{margin:0 10px}:host>.content .request-form>label{font-size:16px}:host>.content .request-form .request-form-content{flex:none}:host>.content .request-form .request-form-content .row{flex:none;flex-direction:column}:host>.content .request-form .request-form-content .row.inline{flex:1;flex-direction:row;gap:20px}:host>.content .request-form .request-form-content .column{margin-bottom:10px}:host>.content .request-form .bottom-row{flex:none}}:host{display:none}:host>.footer{border-top:1px solid #bfbfbf;display:flex;justify-content:end}:host>.footer fv-button{--fv-button-host-margin:11px;--button-margin:auto;--button-span-margin:auto}:host>.footer fv-button::part(button){display:flex;place-items:center}:host>.content{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;justify-content:center;line-height:25px;overflow-x:hidden;overflow-y:auto}:host>.content .request-content{display:grid}:host>.content .request-form{display:flex;flex-direction:column}:host>.content .request-form .request-form-content{display:flex;flex-direction:column}:host>.content .request-form .request-form-content .row{display:flex;margin:auto 0}:host>.content .request-form .request-form-content .row .column{display:flex;flex:1;flex-direction:column}:host>.content .request-form .request-form-content .row .column>*{margin:auto 0}:host>.content .request-form>label{margin:15px 0}:host>.content .request-form .bottom-row{display:flex;flex:0.5;flex-direction:column}:host>.content .request-form .bottom-row fv-checkbox{margin:auto 0}:host>.content .request-form .bottom-row fv-button{margin:auto 0;width:min-content}:host>.content .request-form .bottom-row fv-button i{display:flex;margin-right:16px}:host([active]){display:grid;grid-template-rows:1fr 60px}:host([prevent-notice-carousel])>.content .request-content{grid-template-columns:1fr;margin-right:130px}`;
|
|
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 RequestModalComponent = class extends BaseMaskElement {
|
constructor() {
|
super();
|
this.privacyPolicy = "#";
|
this.name = "";
|
this.surname = "";
|
this.street = "";
|
this.town = "";
|
this.postCode = "";
|
this.email = "";
|
this.policySelected = false;
|
this.preventNoticeCarousel = false;
|
this.hideNoticeCarouselPrice = false;
|
this.noticeValues = [];
|
this.mask = "customer-request-modal";
|
this.templateName = "";
|
}
|
show() {
|
super.show();
|
if (this.noticeCarousel && this.noticeValues && this.noticeValues.length > 0) {
|
this.noticeCarousel.noticeValues = this.noticeValues;
|
this.noticeCarousel.updateItems(this.maskData.onlyCurrent);
|
}
|
}
|
hide(closeModal = false) {
|
var _a;
|
super.hide(closeModal);
|
(_a = this.noticeCarousel) == null ? void 0 : _a.requestResetOfCurrentItem();
|
}
|
onSubmit() {
|
return __async(this, null, function* () {
|
var _a, _b, _c;
|
yield RequestHelperService.fetchConfiguration();
|
const parameters = (_b = (_a = this.noticeCarousel) == null ? void 0 : _a.items) == null ? void 0 : _b.map((item) => {
|
return { id: item.id, image: item.image, price: item.price, programName: item.programName };
|
});
|
const customMailService = window.ConstructionService && window.ConstructionService.CustomMailService ? window.ConstructionService.CustomMailService : void 0;
|
parameters == null ? void 0 : parameters.forEach((param) => {
|
const values = [
|
{
|
key: "PRICE",
|
value: param.price
|
},
|
{
|
key: "CODE",
|
value: param.id
|
},
|
{
|
key: "name",
|
value: this.name
|
},
|
{
|
key: "surname",
|
value: this.surname
|
},
|
{
|
key: "email",
|
value: this.email
|
},
|
{
|
key: "street",
|
value: this.street
|
},
|
{
|
key: "town",
|
value: this.town
|
},
|
{
|
key: "postCode",
|
value: this.postCode
|
},
|
{
|
key: "PNG_STRING",
|
value: param.image
|
},
|
{
|
key: "category",
|
value: window.selectedProgram ? window.selectedProgram.category : window.g_article.level1
|
},
|
{
|
key: "model",
|
value: window.selectedProgram ? window.selectedProgram.level : window.g_article.level2 ? window.g_article.level2 : window.g_article.level1
|
}
|
];
|
window.dispatchEvent(new CustomEvent("onSendMail", {
|
detail: {
|
name: this.templateName,
|
values,
|
cloudIds: [param.id],
|
customMailService: customMailService ? customMailService : void 0,
|
to: this.email,
|
buyingGroup: window.g_configuration.furnplan_article_url_configurator_verband
|
}
|
}));
|
});
|
(_c = this.noticeCarousel) == null ? void 0 : _c.requestResetOfCurrentItem();
|
});
|
}
|
onPolicyCheckboxClicked(e) {
|
e.cancelBubble = true;
|
e.stopPropagation();
|
}
|
valuesChanged(e) {
|
var _a, _b, _c, _d, _e, _f;
|
this.name = ((_a = this.nameInput) == null ? void 0 : _a.value) || "";
|
this.surname = ((_b = this.surnameInput) == null ? void 0 : _b.value) || "";
|
this.email = ((_c = this.emailInput) == null ? void 0 : _c.value) || "";
|
this.street = ((_d = this.streetInput) == null ? void 0 : _d.value) || "";
|
this.town = ((_e = this.townInput) == null ? void 0 : _e.value) || "";
|
this.postCode = ((_f = this.postCodeInput) == null ? void 0 : _f.value) || "";
|
if (this.submitButtons && this.submitButtons.length > 0) {
|
this.submitButtons.forEach((submitButton) => {
|
var _a2;
|
submitButton.disabled = !this.validate() || !((_a2 = this.policyCheckbox) == null ? void 0 : _a2.checked);
|
});
|
}
|
this.requestUpdate();
|
}
|
validate() {
|
if (this.name && this.surname && this.email && /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(this.email)) {
|
return true;
|
}
|
return false;
|
}
|
firstUpdated(_changedProperties) {
|
super.firstUpdated(_changedProperties);
|
if (this.policyCheckbox)
|
this.policyCheckbox.onChange = (e, component) => {
|
if (this.submitButtons && this.submitButtons.length > 0) {
|
this.submitButtons.forEach((submitButton) => {
|
var _a;
|
submitButton.disabled = !this.validate() || !((_a = this.policyCheckbox) == null ? void 0 : _a.checked);
|
});
|
}
|
this.requestUpdate();
|
};
|
}
|
build(content = x``) {
|
return x`
|
<div class="content">
|
|
<div class="request-header">
|
<span>
|
<span i18n="fv.modal.finish.header">Ihre Wunschplanung</span>
|
</span>
|
</div>
|
<div class="request-content">
|
<div class="request-form">
|
<label i18n="fv.modal.finish.form.title">Konfiguration und Artikelliste per E-Mail
|
senden</label>
|
<div class="request-form-content">
|
<div class="row">
|
<div class="column">
|
<label>Name*</label>
|
<fv-input id="nameInput" @change="${this.valuesChanged}"
|
.value="${this.name}"></fv-input>
|
</div>
|
<div class="column">
|
<label>Vorname*</label>
|
<fv-input id="surnameInput" @change="${this.valuesChanged}"
|
.value="${this.surname}"></fv-input>
|
</div>
|
</div>
|
<div class="row">
|
<div class="column">
|
<label>E-Mail*</label>
|
<fv-input id="emailInput" @change="${this.valuesChanged}"
|
.value="${this.email}"></fv-input>
|
</div>
|
</div>
|
<div class="row">
|
<div class="column">
|
<label>Straße</label>
|
<fv-input id="streetInput" @change="${this.valuesChanged}"
|
.value="${this.street}"></fv-input>
|
</div>
|
</div>
|
<div class="row inline">
|
<div class="column">
|
<label>PLZ</label>
|
<fv-input id="postCodeInput" @change="${this.valuesChanged}"
|
.value="${this.postCode}"></fv-input>
|
</div>
|
<div class="column">
|
<label>Ort</label>
|
<fv-input id="townInput" @change="${this.valuesChanged}"
|
.value="${this.town}"></fv-input>
|
</div>
|
</div>
|
</div>
|
<div class="bottom-row">
|
<fv-checkbox id="policyCheckbox" .checked="${this.policySelected}"
|
@click="${this.onPolicyCheckboxClicked}">
|
<span i18n="fv.modal.finish.checkbox.prefix">Ich habe die </span><a
|
i18n="fv.modal.finish.checkbox.policy" href="${this.privacyPolicy}" target="_blank">Datenschutzerklärung</a><span
|
i18n="fv.modal.finish.checkbox.suffix"> gelesen und stimme dieser zu.</span>
|
</fv-checkbox>
|
<fv-button part="submit_button" class="submitButton bordered only-desktop" disabled
|
@click="${this.onSubmit}"><i
|
class="fv-icon-arrow mirrored"></i><span i18n="fv.modal.finish.button">Senden</span>
|
</fv-button>
|
</div>
|
|
</div>
|
${this.preventNoticeCarousel ? x`` : x`
|
<div class="request-carousel">
|
<fv-notice-carousel ?hide-price="${this.hideNoticeCarouselPrice}"></fv-notice-carousel>
|
</div>
|
`}
|
</div>
|
</div>
|
<div class="only-mobile footer">
|
<fv-button part="submit_button" class="submitButton bordered" disabled @click="${this.onSubmit}"><i
|
class="fv-icon-arrow mirrored"></i><span i18n="fv.modal.finish.button">Senden</span>
|
</fv-button>
|
</div>
|
`;
|
}
|
};
|
RequestModalComponent.styles = [
|
__superStaticGet(RequestModalComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
i$1("fv-notice-carousel")
|
], RequestModalComponent.prototype, "noticeCarousel", 2);
|
__decorateClass([
|
i$1("#policyCheckbox")
|
], RequestModalComponent.prototype, "policyCheckbox", 2);
|
__decorateClass([
|
e(".submitButton")
|
], RequestModalComponent.prototype, "submitButtons", 2);
|
__decorateClass([
|
i$1("#nameInput")
|
], RequestModalComponent.prototype, "nameInput", 2);
|
__decorateClass([
|
i$1("#surnameInput")
|
], RequestModalComponent.prototype, "surnameInput", 2);
|
__decorateClass([
|
i$1("#streetInput")
|
], RequestModalComponent.prototype, "streetInput", 2);
|
__decorateClass([
|
i$1("#townInput")
|
], RequestModalComponent.prototype, "townInput", 2);
|
__decorateClass([
|
i$1("#postCodeInput")
|
], RequestModalComponent.prototype, "postCodeInput", 2);
|
__decorateClass([
|
i$1("#emailInput")
|
], RequestModalComponent.prototype, "emailInput", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestModalComponent.prototype, "privacyPolicy", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestModalComponent.prototype, "name", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestModalComponent.prototype, "surname", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestModalComponent.prototype, "street", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestModalComponent.prototype, "town", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestModalComponent.prototype, "postCode", 2);
|
__decorateClass([
|
n({ type: String })
|
], RequestModalComponent.prototype, "email", 2);
|
__decorateClass([
|
n({ type: Boolean })
|
], RequestModalComponent.prototype, "policySelected", 2);
|
__decorateClass([
|
n({ type: Boolean, attribute: "prevent-notice-carousel", reflect: true })
|
], RequestModalComponent.prototype, "preventNoticeCarousel", 2);
|
__decorateClass([
|
n({ type: Boolean, attribute: "hide-notice-carousel-price", reflect: true })
|
], RequestModalComponent.prototype, "hideNoticeCarouselPrice", 2);
|
__decorateClass([
|
n()
|
], RequestModalComponent.prototype, "noticeValues", 2);
|
__decorateClass([
|
n()
|
], RequestModalComponent.prototype, "templateName", 2);
|
RequestModalComponent = __decorateClass([
|
e$1("fv-request-modal-mask")
|
], RequestModalComponent);
|
|
export { RequestModalComponent };
|
