1"use strict";(self.webpackChunkwebpack=self.webpackChunkwebpack||[]).push([[7252],{10886:function(t,e,n){n.d(e,{C_:function(){return c},Fi:function(){return d},OP:function(){return l},cn:function(){return r},er:function(){return o},go:function(){return a},iF:function(){return i},us:function(){return h}});class a{constructor(t,e){this.dataSheet=t,this.fileName=e}}class s{constructor(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null;this.watermarkFormId=n,this.skipAuthentication=t,this.skipWatermarking=e,this.watermarkFormSubmissionId=a,this.eventCategory=s}}class i extends s{constructor(t,e,n){super(e,n,arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,arguments.length>5&&void 0!==arguments[5]?arguments[5]:null),this.packageId=t}}class l extends s{constructor(t,e,n,a,s,i){let l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:null,c=arguments.length>9&&void 0!==arguments[9]?arguments[9]:null,o=arguments.length>10&&void 0!==arguments[10]?arguments[10]:null;super(s,i,arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,arguments.length>7&&void 0!==arguments[7]?arguments[7]:null),this.documentList=t,this.entityName=a,this.dataSheetInfos=n,this.documentPacks=e,this.encodedPreFilledWatermarkLines=l,this.eventCategory=c,this.customDocumentList=o}}class c{constructor(t,e){this.documentPackRequest=t,this.authDeniedCallback=e}}class o{}o.documentPackageDownloadRequested="DOWNLOAD_DOCUMENT_PACKAGE_REQUESTED",o.documentPackageDownloadRequestHandled="DOWNLOAD_DOCUMENT_PACKAGE_REQUEST_HANDLED",o.documentPackageCreationRequested="DOWNLOAD_DOCUMENT_PACKAGE_CREATION",o.documentPackageCreationRequestedHandled="DOWNLOAD_DOCUMENT_PACKAGE_CREATION_HANDLED",o.authenticationRequested="DOWNLOAD_DOCUMENT_AUTHENTICATION_REQUESTED",o.emptyResultReceived="DOWNLOAD_EMPTY_RESULT",o.watermarkingInputRequested="DOWNLOAD_DOCUMENT_WATERMARKING_INPUT_REQUESTED",o.watermarkingSingleDocumentInputRequested="DOWNLOAD_SINGLE_DOCUMENT_WATERMARKING_INPUT_REQUESTED",o.downloadLimitationReached="DOWNLOAD_LIMITATION_REACHED",o.failedRequest="DOWNLOAD_CENTER_FAILED_REQUEST",o.exportJobRequested="EXPORT_JOB_REQUESTED",o.createPdfDocumentRequested="DOWNLOAD_CREATE_PDF_REQUESTED",o.createPdfDocumentRequestHandled="DOWNLOAD_CREATE_PDF_REQUEST_HANDLED";class r{constructor(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:()=>{},a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:()=>{};this.formCompleted=n,this.skipWatermarkingCallback=a,this.popupUrl=t,this.documentPackRequest=e}}class d{constructor(t,e){this.popupUrl=t,this.assetId=e}}class h{constructor(t,e){this.job=t,this.toasterElement=e}}},17252:function(t,e,n){n.r(e),n.d(e,{SystemCalculation:function(){return V}});var a=n(2272),s=n(26070),i=n(70392),l=n.n(i);var c=n(66721);class o extends c.m{constructor(t,e,n,a,s,i,l,c,o,r,d,h,p){super(),this.stepIndex=n,this.stepData=e,this.handler=t,this.shouldBeShown=a,this.category=s,this.systemId=i,this.systemTitle=l,this.systemImageUrl=c,this.showPricingInformation=o,this.currencySymbol=r,this.cultureName=h,o&&(this.currencyNumberFormat=new Intl.NumberFormat(h,{style:"currency",currency:d}),this.percentageNumberFormat=new Intl.NumberFormat(h,{style:"percent",maximumFractionDigits:2})),this.hideVariantInformation=p}onInit(){this.reInitCompsOnDomChangeFor(this.element),this.shouldBeShown&&this.showStep()}hideStep(){this.alpineInstance.shouldBeShown=!1,this.handler.modifyActionButton(!1),this.handler.disableNextButton(!1)}showStep(){this.alpineInstance.shouldBeShown=!0,this.handler.modifyModalHeaderData(this.stepData)}renderPreStepHtml(){const t=`getDataStep${this.stepIndex}`;return window[t]=this.getData(),`\n <div class="o-flex-col-grow" x-data="${t}" x-html="renderStep()" x-show="shouldBeShown">\n \x3c!-- html for step --\x3e\n </div>\n `}getLabelFormattedWithCurrency(t){return t&&this.currencySymbol?t.replace("{0}",this.currencySymbol):t}getFormattedPrice(t){if(!this.currencyNumberFormat)return"";let e=isNaN(t)?0:t;return this.currencyNumberFormat.format(e)}getFormattedPercentage(t){if(!this.percentageNumberFormat)return"";let e=isNaN(t)?0:t;return this.percentageNumberFormat.format(e/100)}}class r{}r.CalculationConfigurationStep="CalculationConfigurationStep",r.ProductsCalculationStep="ProductsCalculationStep",r.CalculationOverviewStep="CalculationOverviewStep",r.SaveCalculationStep="SaveCalculationStep";class d{}d.ShowAdaptConfig="ShowAdaptConfig",d.SubmitDownload="SubmitDownload",d.SubmitCalculationConfiguration="SubmitCalculationConfiguration",d.SaveCalculation="SaveCalculation",d.DispatchSelectedParts="set-syscal-selected-parts",d.DispatchCarbonImpactIsEnabled="set-syscal-carbon-impact-is-enabled",d.DispatchAreaChecked="set-syscal-is-area-checked",d.DispatchWidthIsEnabled="set-syscal-width-is-enabled",d.DispatchWidth="set-syscal-width",d.DispatchHeightIsEnabled="set-syscal-height-is-enabled",d.DispatchHeight="set-syscal-height",d.DispatchAreaIsEnabled="set-syscal-area-is-enabled",d.DispatchArea="set-syscal-area",d.DispatchWasteIsEnabled="set-syscal-waste-is-enabled",d.DispatchWaste="set-syscal-waste",d.DispatchHangerSpanIsEnabled="set-syscal-hanger-span-is-enabled",d.DispatchHangerSpan="set-syscal-hanger-span",d.DispatchHangerSpanUnit="set-syscal-hanger-span-unit";class h{}h.Width="width",h.Height="height",h.Area="surface",h.HangerSpan="hangerSpan",h.Waste="waste";class p{}p.Decimal=".";const u={numberWithDecimal:/^(?!.*\..*\.)[0-9.]*$/,numberOnly:/^[0-9]*$/};var m=n(93973),g=n.n(m),v=n(79234),b=n(8136),I=n(87644);class y extends o{constructor(){super(...arguments),this.stepType=r.CalculationConfigurationStep,this.disableNextButton=!0}onInit(){super.onInit(),l().subscribe(d.ShowAdaptConfig,((t,e)=>{this.alpineInstance.selectedParts=this.alpineInstance.tempSelectedParts,this.showAdaptConfig(e)})),l().subscribe(d.SubmitCalculationConfiguration,(()=>{if(this.handler.isAdaptConfigShow)return this.handler.modifyActionButton(!1),void this.handler.modifyNextButtonLabel(this.stepData.next);this.isErrorSurfaceAreaInputs(this.alpineInstance.selectedVariant)||this.getCalculationValue()})),l().subscribe(I._.ActionButtonClicked,(()=>{b.ZP.onSingleCalculationInteraction({eventAction:"customise_cancel",eventLabel:"N/A"})}))}showStep(){super.showStep(),this.handler.modifyNextButtonLabel(this.stepData.next),this.handler.modifyModalHeaderData(this.stepData),this.alpineInstance.selectedVariant||this.handler.disableNextButton(!0),1!=this.alpineInstance.variants.length||this.alpineInstance.selectedVariant||(this.alpineInstance.selectedVariant=this.alpineInstance.variants[0].id,this.onChangeVariant(this.alpineInstance.variants[0].id))}renderStep(){return'\n \n <div class="c-sys-config-basic" x-show="!adaptConfigStepShouldShow">\n \n <div class="c-sys-calc-media">\n <div class="c-sys-calc-media__img"><img x-bind:src="getImgUrl(selectedVariant)" class="a-image" alt="Photo" height="64" width="64" loading="lazy"></div>\n <div class="c-sys-calc-media__content">\n <div class="c-sys-calc-media__title" x-text="systemTitle"></div>\n <div class="c-sys-calc-media__data" x-text="category"></div>\n </div>\n </div>\n\n\n <div class="c-sys-config__body" x-data>\n <div class="c-sys-config__inner">\n <div class="o-grid">\n <template x-if="!hideVariantInformation">\n <div class="o-grid__cell u-1/1 u-1/2@tablet c-sys-config__inner-item ">\n \n <div class="c-select-dropdown">\n <div class="c-select-dropdown__title" x-text="labels.systemConfiguration"></div>\n <div class="c-select-dropdown__body">\n <details class="c-select-dropdown__details" data-component-class="DropdownSummary">\n <summary class="c-select-dropdown__summary">\n <div class="c-select-dropdown__value">\n <input class="c-select-dropdown__input" type="radio" id="systemCalcBasicConfigContent-variant" disabled x-model="selectedVariant" checked>\n <div class="c-select-dropdown__value--text" x-text="labels.systemConfigurationPlaceholder"></div>\n </div>\n\n <template x-for="v in variants">\n <div class="c-select-dropdown__value">\n <input class="c-select-dropdown__input" type="radio"\n x-bind:id="v.id" x-bind:value="v.id"\n x-model="selectedVariant"\n x-on:change="onChangeVariant(selectedVariant)"\n />\n <div class="c-select-dropdown__value--text" x-text="v.name"></div>\n </div>\n </template>\n\n <svg class="c-svg c-svg--arrow" width="25" height="25" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_arrow_down_v2"></use>\n </svg>\n </summary>\n <div class="c-select-dropdown__content">\n <label for="systemCalcBasicConfigContent-variant" hidden data-close="true" class="c-select-dropdown__item js-select-item" tabindex="1" x-text="labels.systemConfigurationPlaceholder"></label>\n <template x-for="v in variants">\n <label x-bind:for="v.id" data-close="true" class="c-select-dropdown__item js-select-item" tabindex="1" x-text="v.name"></label>\n </template>\n </div>\n </details>\n </div>\n </div>\n \n </div>\n </template>\n <div class="o-grid__cell u-1/1 u-1/2@tablet c-sys-config__inner-item ">\n \n <div class="c-textbox" x-subscribe>\n <label for="Description" class="c-textbox__label">\n <strong x-text="labels.description"></strong> <span x-text="`(${labels.optional})`"></span>\n </label>\n <input class="c-textbox__input" name="Description" id="Description" type="text" x-bind:placeholder="labels.descriptionPlaceholder"\n x-on:change="$dispatch(\'set-syscal-description\', $event.target.value)" />\n </div>\n \n </div>\n </div>\n </div>\n <div class="c-sys-config__inner">\n <div class="o-grid">\n <div class="o-grid__cell u-1/1 u-1/2@tablet c-sys-config__inner-item c-sys-config__inner-item--group">\n \n <template x-if="showAreaInput && showWidthInput">\n <div class="c-choice-switch-wrapper" x-bind:disabled="!selectedVariant">\n <div class="c-choice-switch-title" x-text="labels.surfaceArea"></div>\n <div class="c-choice-switch">\n <div class="c-choice-switch__item">\n <input class="c-choice-switch__input" type="radio" id="wxh" name="surfaceAreaMeasureUnit" value="wxh"\n x-bind:checked="!isAreaChecked"\n x-on:change="onChangeMeasureType($event.target.value)"\n >\n <label class="c-choice-switch__label" for="wxh" x-text="labels.wxH"></label>\n </div>\n <div class="c-choice-switch__item">\n <input class="c-choice-switch__input" type="radio" id="area" name="surfaceAreaMeasureUnit" value="m2"\n x-bind:checked="isAreaChecked"\n x-on:change="onChangeMeasureType($event.target.value)"\n >\n <label class="c-choice-switch__label" for="area" x-text="labels.area"></label>\n </div>\n </div>\n </div>\n </template>\n\n <div class="c-textbox-wrapper">\n <template x-if="showWidthInput">\n <div class="c-textbox c-textbox--small" x-bind:disabled="!selectedVariant" x-show="!isAreaChecked">\n <label for="width" class="c-textbox__label">\n <strong x-text="labels.width + \'*\'"></strong>\n </label>\n <input class="c-textbox__input" name="width" id="width" type="text"\n x-bind:value="width"\n x-bind:placeholder="selectedVariant ? getInputMeasureUnit(selectedVariant, \'width\') : \'m\'"\n x-bind:aria-invalid="isEmptyWidthInput || isInvalidWidthInput"\n x-on:keyup="onChangeSurfaceAreaInput($event, $event.target.value, \'width\')"\n >\n </div>\n </template>\n\n <template x-if="showAreaInput">\n <div class="c-textbox c-textbox--small" x-bind:disabled="!selectedVariant" x-show="isAreaChecked">\n <label for="area" class="c-textbox__label">\n <strong x-text="labels.area + \'*\'"></strong>\n </label>\n <input class="c-textbox__input" name="area" id="area" type="text"\n x-bind:value="area"\n x-bind:placeholder="selectedVariant ? `${getInputMeasureUnit(selectedVariant, \'surface\') || \'m\'}2` : \'m2\'"\n x-bind:aria-invalid="isEmptySurfaceInput || isInvalidSurfaceInput"\n x-on:keyup="onChangeSurfaceAreaInput($event, $event.target.value, \'surface\')"\n >\n </div>\n </template>\n\n <template x-if="showWidthInput">
1\n <span class="c-textbox-connector" x-bind:disabled="!selectedVariant" x-bind:class="isAreaChecked && \'u-opt-0\'">x</span>\n </template>\n\n <template x-if="showHeightInput">\n <div class="c-textbox c-textbox--small" x-bind:disabled="!selectedVariant">\n <label for="height" class="c-textbox__label">\n <template x-if="selectedVariant">\n <strong x-text="`${labels.height} ${getVariantMaxHeight(selectedVariant, labels.maxHeight)}*`"></strong>\n </template>\n <template x-if="!selectedVariant">\n <strong x-text="labels.height + \'*\'"></strong>\n </template>\n </label>\n <input class="c-textbox__input" name="height" id="height" type="text"\n x-bind:value="height"\n x-bind:placeholder="selectedVariant ? getInputMeasureUnit(selectedVariant, \'height\') : \'m\'"\n x-bind:aria-invalid="isInvalidHeightInput || isEmptyHeightInput"\n x-on:keyup="onChangeSurfaceAreaInput($event, $event.target.value, \'height\')"\n >\n </div>\n </template>\n \x3c!-- <div class="c-textbox__msg c-textbox__msg--group" x-html="renderErrorMessage()"></div> --\x3e\n </div>\n\n <template x-if="showHangerSpanInput">\n <div class="c-textbox c-textbox--small" x-bind:disabled="!selectedVariant">\n <label for="hanger-span" class="c-textbox__label">\n <strong x-text="labels.hangerSpan + \'*\'"></strong>\n <span data-component-class="Tooltip" data-position="top" role="button" tabindex="0" class="is-collapsed">\n <svg class="c-svg" width="13" height="13" role="img" aria-labelledby="forward" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline"></use>\n </svg>\n <span class="js-tooltip-content" hidden x-html="getHangerSpanTooltipContent(selectedVariant)"></span>\n </span>\n </label>\n <input class="c-textbox__input" name="Hanger span" id="hanger-span" type="text"\n x-bind:aria-invalid="isEmptyHangerSpanInput || isInvalidHangerSpanInput"\n x-on:keyup="onChangeSurfaceAreaInput($event, $event.target.value, \'hangerSpan\')"\n x-bind:placeholder="selectedVariant ? getInputMeasureUnit(selectedVariant, \'hangerSpan\') : \'m\'">\n </div>\n </template>\n \n </div>\n <template x-if="showWasteInput">\n <div class="o-grid__cell u-1/1 u-1/2@tablet c-sys-config__inner-item c-sys-config__inner-item--group">\n <div class="c-textbox c-textbox--small" x-bind:disabled="!selectedVariant">\n <label for="waste" class="c-textbox__label">\n <strong x-text="labels.waste + \'(%)*\'"></strong>\n <span data-component-class="Tooltip" data-position="top" role="button" tabindex="0" class="is-collapsed">\n <svg class="c-svg" width="13" height="13" role="img" aria-labelledby="forward" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline"></use>\n </svg>\n <span class="js-tooltip-content" hidden x-html="getWasteTooltipContent()"></span>\n </span>\n </label>\n <input class="c-textbox__input" name="Waste" id="waste" type="text" placeholder="%"\n x-model="waste"\n x-bind:aria-invalid="isInvalidWasteInput || isEmptyWasteInput"\n x-on:keyup="onChangeSurfaceAreaInput($event, $event.target.value, \'waste\')">\n </div>\n </div>\n </template>\n </div>\n </div>\n\n <ul class="c-sys-config-inner-item__msg" x-html="renderErrorMessage()"></ul>\n\n \n <template x-if="selectedVariant && getSelectedVariantDefaultConfig(selectedVariant).length && adaptConfigCouldEnable">\n <div class="c-sys-config__cta">\n <button class="c-btn c-btn--secondary" type="button"\n x-on:click="adaptConfigStepShouldShow = showAdaptConfig(true)">
1\n <span class="c-btn__icon"><svg width="18" height="18" viewBox="0 0 18 18"><use xlink:href="/etex/images/svg/svg-symbols.svg#gear"></use></svg></span>\n <span class="c-btn__label" x-text="labels?.customiseSystem"></span>\n </button>\n </div>\n </template>\n\n </div>\n </div>\n \n \n <div class="c-sys-config" x-show="adaptConfigStepShouldShow"\n @set-syscal-description.window="description = $event.detail">\n \n <div class="c-sys-calc-media c-sys-calc-media--card">\n <div class="c-sys-calc-media__img"><img x-bind:src="getImgUrl(selectedVariant)" class="a-image " alt="Photo" height="222" width="222" loading="lazy"></div>\n <div class="c-sys-calc-media__content">\n <div class="c-sys-calc-media__title" x-text="systemTitle"></div>\n <div class="c-sys-calc-media__data" x-text="category"></div>\n <div class="c-sys-calc-media__data" x-html="description"></div>\n <div class="c-sys-calc-media__data" x-show="!hideVariantInformation" x-html="getSelectedVariantNameById(selectedVariant)"></div>\n </div>\n </div>\n\n\n <div class="c-sys-config__body" x-data="{defaultSelectedParts: getDefaultSelectedParts(selectedVariant)}">\n \n <template x-if="selectedVariant && getSelectedVariantCategories(selectedVariant).length && getDefaultSelectedParts(selectedVariant).length"\n x-for="cat in getSelectedVariantCategories(selectedVariant)"\n ">\n <template x-if="typeof cat !== \'undefined\' && cat && categoryShouldShow(cat) && cat.subCategories">\n <div class="c-sys-config__inner">\n <div class="c-sys-config__title" x-text="getCalculationTranslation(cat.name)"></div>\n <div class="o-grid">\n <template x-if="cat.subCategories" x-for="c in cat.subCategories">\n <template x-if="typeof c !== \'undefined\' && c.parts && c.parts.length >= 2">\n <div class="o-grid__cell u-1/1 u-1/2@tablet c-sys-config__inner-item">\n <div class="c-select-dropdown">\n <div class="c-select-dropdown__title" x-text="getCalculationTranslation(c.name)"></div>\n <div class="c-select-dropdown__body">\n <details class="c-select-dropdown__details" data-component-class="DropdownSummary">\n <summary class="c-select-dropdown__summary">\n <template x-for="part in c.parts">\n <div class="c-select-dropdown__value">\n <input class="c-select-dropdown__input" type="radio" x-bind:id="part.id" x-bind:name="part.id"\n x-bind:checked="tempSelectedParts.some(p => p.id === part.id)"\n >\n <div class="c-select-dropdown__value--text" x-text="part.name"></div>\n </div>\n </template>\n <svg class="c-svg c-svg--arrow" width="25" height="25" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_arrow_down_v2"></use>\n </svg>\n </summary>\n <div class="c-select-dropdown__content">\n <template x-for="part in c.parts">\n <label for="part.id" data-close="true" class="c-select-dropdown__item js-select-item" tabindex="1" x-text="part.name"\n x-on:click="onChangeSelectedPart(tempSelectedParts, part);"\n >\n </label>\n </template>\n </div>\n </details>\n </div>\n </div>\n </div>\n </template>\n </template>\n </div>\n </div>\n </template>\n </template>\n\n \n <div class="c-sys-calc__cta">\n <button type="button" class="c-btn" x-on:click="resetSelectedParts(selectedVariant)" x-text="labels?.resetToDefaults"></button>\n </div>\n \n </div>\n </div>\n\n '}reset(){this.alpineInstance.category=this.category,this.alpineInstance.systemTitle=this.systemTitle,this.alpineInstance.systemImageUrl=this.systemImageUrl,this.alpineInstance.labels=this.stepData.labels,this.alpineInstance.description="",this.alpineInstance.selectedVariant="",this.alpineInstance.selectedParts=[],this.alpineInstance.tempSelectedParts=[],this.alpineInstance.isAreaChecked=!1,this.alpineInstance.adaptC
1onfigStepShouldShow=!1,this.alpineInstance.adaptConfigCouldEnable=!1,this.alpineInstance.maxHeightValue="",this.alpineInstance.height="",this.alpineInstance.waste=this.stepData.defaultWaste,this.alpineInstance.hangerSpan="",this.alpineInstance.maxHangerSpanValue="",this.alpineInstance.width="",this.alpineInstance.area="",this.clearErrorMessage(),this.handler.disableNextButton(!0)}showAdaptConfig(t){return this.handler.isAdaptConfigShow=t,this.alpineInstance.adaptConfigStepShouldShow=t,1==t?(this.handler.modifyModalHeaderData({title:this.stepData.adaptConfigurationLabels.title,subTitle:this.stepData.adaptConfigurationLabels.subtitle,instructions:this.stepData.adaptConfigurationLabels.instructions}),this.handler.modifyActionButton(!0,this.stepData.adaptConfigurationLabels.cancel,"Cancel"),this.handler.modifyNextButtonLabel(this.stepData.adaptConfigurationLabels.apply),this.handler.modifyNextButtonType(""),b.ZP.onSingleCalculationInteraction({eventAction:"customise_open",eventLabel:"N/A"})):(this.handler.modifyModalHeaderData({title:this.stepData.title,subTitle:this.stepData.subTitle,instructions:this.stepData.instructions}),this.alpineInstance.tempSelectedParts=this.alpineInstance.selectedParts,this.handler.modifyActionButton(!1),this.handler.modifyNextButtonLabel(this.stepData.next),this.handler.modifyNextButtonType("Chevron")),t}onChangeVariant(t){this.alpineInstance.adaptConfigCouldEnable=this.checkAdaptConfigCouldEnable(t),this.clearErrorMessage();const e=this.getSelectedVariantById(t);this.alpineInstance.maxHeightValue=e.maxHeight,this.alpineInstance.maxHangerSpanValue=e.maxHangerSpan}clearErrorMessage(){this.alpineInstance.isEmptyWidthInput=!1,this.alpineInstance.isEmptySurfaceInput=!1,this.alpineInstance.isEmptyHeightInput=!1,this.alpineInstance.isInvalidHeightInput=!1,this.alpineInstance.isEmptyHangerSpanInput=!1,this.alpineInstance.isInvalidHangerSpanInput=!1}getSelectedVariantById(t){return this.stepData.variants.find((e=>e.id===t))}getSelectedVariantCategories(t){const e=this.getSelectedVariantById(t);if(!e)return[];const n=[];return e.categories&&Array.prototype.push.apply(n,e.categories),n}getSelectedVariantDefaultConfig(t){const e=this.getSelectedVariantById(t);if(!e)return[];const n=[];return e.categories&&e.categories.forEach((t=>Array.prototype.push.apply(n,t.subCategories))),n}getVariantMaxHeight(t,e){const n=this.getSelectedVariantById(t);return n&&null!==n.maxHeight&&null!==n.maxHeightUnit?`(${e.replace("{0}",n.maxHeight)} ${n.maxHeightUnit})`:""}isErrorSurfaceAreaInputs(t){if(null===this.stepData.inputs||0===this.stepData.inputs.length)return!0;const e=this.getSelectedVariantById(t),n=this.validateHangerSpan(e),a=this.validateHeightInput(e),s=this.validateWasteInput(),i=this.validateAreaInput(),l=this.validateWidthInput();return!(n&&a&&s&&i&&l)}validateHeightInput(t){let e=!0;return this.alpineInstance.showHeightInput?this.alpineInstance.height?t.maxHeight?this.alpineInstance.isEmptyHeightInput||u.numberWithDecimal.test(this.alpineInstance.height)&&!(parseFloat(this.alpineInstance.height)>parseFloat(t.maxHeight.replace(",",".")))?e:(this.alpineInstance.isInvalidHeightInput=!0,!1):(this.alpineInstance.isInvalidHeightInput=!1,e):(this.alpineInstance.isEmptyHeightInput=!0,this.alpineInstance.isInvalidHeightInput=!1,!1):e}validateWidthInput(){let t=!0;return this.alpineInstance.isAreaChecked||!this.alpineInstance.showWidthInput?(this.alpineInstance.isEmptyWidthInput=!1,t):(this.alpineInstance.width||(this.alpineInstance.isEmptyWidthInput=!0),this.alpineInstance.isInvalidWidthInput=!u.numberWithDecimal.test(this.alpineInstance.width),!this.alpineInstance.isEmptyWidthInput&&!this.alpineInstance.isInvalidWidthInput&&t)}validateAreaInput(){let t=!0;return this.alpineInstance.isAreaChecked?(this.alpineInstance.isEmptyWidthInput=!1,this.alpineInstance.showAreaInput&&!this.alpineInstance.area&&(this.alpineInstance.isEmptySurfaceInput=!0),this.alpineInstance.isInvalidSurfaceInput=!u.numberWithDecimal.test(this.alpineInstance.area),!this.alpineInstance.isEmptySurfaceInput&&!this.alpineInstance.isInvalidSurfaceInput&&t):(this.alpineInstance.isEmptySurfaceInput=!1,t)}validateHangerSpan(t){let e=!0;return this.alpineInstance.showHangerSpanInput?(this.alpineInstance.hangerSpan||(this.alpineInstance.isEmptyHangerSpanInput=!0,this.alpineInstance.isInvalidHangerSpanInput=!1),t.maxHangerSpan&&(this.alpineInstance.isEmptyHangerSpanInput||u.numberWithDecimal.test(this.alpineInstance.hangerSpan)&&!(parseFloat(this.alpineInstance.hangerSpan)>parseFloat(t.maxHangerSpan.replace(",","."))))||(this.alpineInstance.isInvalidHangerSpanInput=!0),!this.alpineInstance.isEmptyHangerSpanInput&&!this.alpineInstance.isInvalidHangerSpanInput&&e):(this.alpineInstance.isEmptyHangerSpanInput=!1,this.alpineInstance.isInvalidHangerSpanInput=!1,e)}validateWasteInput(){return this.alpineInstance.showWasteInput&&this.alpineInstance.waste&&!u.numberOnly.test(this.alpineInstance.waste)?this.alpineInstance.isInvalidWasteInput=!0:this.alpineInstance.isInvalidWasteInput=!1,!this.alpineInstance.isInvalidWasteInput&&!this.alpineInstance.isEmptyWasteInput}getImgUrl(t){const e=this.getSelectedVariantById(t);return e&&e.imageUrl?e.imageUrl:this.alpineInstance.systemImageUrl}getInputMeasureUnit(t,e){const n=this.getSelectedVariantById(t);return n?e===h.Area||e===h.Width||e===h.Height?n.maxHeightUnit:e===h.HangerSpan?n.maxHangerSpanUnit:"":""}getVariantMeasureUnit(t){const e=this.getSelectedVariantById(t);return e?e.maxHeightUnit:""}checkAdaptConfigCouldEnable(t){this.handler.disableNextButton(!1);const e=this.getSelectedVariantDefaultConfig(t);return this.alpineInstance.selectedParts=this.alpineInstance.getDefaultSelectedParts(t),this.alpineInstance.tempSelectedParts=this.alpineInstance.getDefaultSelectedParts(t),!!e.s
1ome((t=>t.parts.length>1))}resetSelectedParts(t){this.alpineInstance.tempSelectedParts=this.getDefaultSelectedParts(t)}getDefaultSelectedParts(t){const e=this.getSelectedVariantDefaultConfig(t),n=[];return e.forEach((t=>{t.parts&&n.push(t.parts[0])})),n}renderSelectedPart(t,e){return t&&0!==t.length?t[e].name:null}renderSelectedVariantDefaultParts(t){return t?t[0]?t[0].name:"/":null}getEmptyVariantConfig(t){if(!t||0===t.length)return[];const e=t[0],n=[];return e.categories.forEach((t=>Array.prototype.push.apply(n,t.subCategories))),n}formatVariableValueToApi(t){return t.toString().replace(p.Decimal,",")}categoryShouldShow(t){return!!t&&(!!t.subCategories&&t.subCategories.some((t=>t.parts&&t.parts.length>=2)))}onChangeSelectedPart(t,e){if(t.some((t=>t.id===e.id)))return;let n=t.findIndex((t=>t.id.split("|")[0]===e.id.split("|")[0]));const a=[...t];a[n]=e,this.alpineInstance.tempSelectedParts=a}onChangeMeasureType(t){this.alpineInstance.isEmptySurfaceInput=!1,this.alpineInstance.isInvalidSurfaceInput=!1,this.alpineInstance.isEmptyWidthInput=!1,this.alpineInstance.isInvalidWidthInput=!1,this.alpineInstance.isEmptyHeightInput=!1,this.alpineInstance.isInvalidHeightInput=!1,this.alpineInstance.isEmptyHangerSpanInput=!1,this.alpineInstance.isInvalidHangerSpanInput=!1,this.alpineInstance.isInvalidWasteInput=!1,this.alpineInstance.isAreaChecked="wxh"!==t,this.dispatchEvent(d.DispatchAreaChecked,this.alpineInstance.isAreaChecked)}onChangeSurfaceAreaInput(t,e,n){if("Tab"===t.key)return;e=e.replace(/,/g,".").replace(/[^0-9.]/g,"");const a=t.target;let s=0;if(e&&(s=n===h.Waste?Math.abs(+e)<100?Math.abs(+e):100:Math.abs(+e)),a.value=e,this.alpineInstance.isAreaChecked||n!==h.Width?this.alpineInstance.isEmptyWidthInput=!1:(this.alpineInstance.isEmptyWidthInput=!e.length,this.alpineInstance.width=e,this.alpineInstance.isInvalidWidthInput=!u.numberWithDecimal.test(this.alpineInstance.width)),this.alpineInstance.isAreaChecked&&n===h.Area?(this.alpineInstance.isEmptySurfaceInput=!e.length,this.alpineInstance.area=e,this.alpineInstance.isInvalidSurfaceInput=!u.numberWithDecimal.test(this.alpineInstance.area)):this.alpineInstance.isEmptySurfaceInput=!1,n===h.Height&&(this.alpineInstance.isEmptyHeightInput=!e.length,this.alpineInstance.height=e,this.alpineInstance.maxHeightValue&&(this.alpineInstance.isInvalidHeightInput=!(!e||e&&parseFloat(e)<=parseFloat(this.alpineInstance.maxHeightValue.replace(",",".")))),this.alpineInstance.isInvalidHeightInput=!u.numberWithDecimal.test(this.alpineInstance.height)),n===h.Waste){const n=t.target,a=e?Math.abs(+e)<=100?Math.abs(+e):100:"";n.value=a.toString(),this.alpineInstance.waste=a.toString(),e?(this.alpineInstance.isEmptyWasteInput=!1,this.alpineInstance.isInvalidWasteInput=!u.numberOnly.test(this.alpineInstance.waste)):this.alpineInstance.isEmptyWasteInput=!0}n===h.HangerSpan&&(this.alpineInstance.isEmptyHangerSpanInput=!e.length,this.alpineInstance.hangerSpan=e,this.alpineInstance.maxHangerSpanValue?this.alpineInstance.isInvalidHangerSpanInput=!(!e.length||e&&parseFloat(e)<=parseFloat(this.alpineInstance.maxHangerSpanValue.replace(",","."))):this.alpineInstance.isInvalidHangerSpanInput=!u.numberWithDecimal.test(this.alpineInstance.hangerSpan),this.alpineInstance.isInvalidHangerSpanInput=!u.numberWithDecimal.test(this.alpineInstance.hangerSpan))}renderErrorMessage(){let t="";return(this.alpineInstance.isInvalidHangerSpanInput||this.alpineInstance.isInvalidSurfaceInput||this.alpineInstance.isInvalidWidthInput||this.alpineInstance.isInvalidHeightInput||this.alpineInstance.isInvalidWasteInput)&&(t=`<li>${this.stepData.labels.invalidNumberMessage}. </li>`),this.alpineInstance.showAreaInput&&this.alpineInstance.isAreaChecked&&this.alpineInstance.isEmptySurfaceInput&&(t+=`<li>${this.stepData.labels.areaRequiredMessage}. </li>`),this.alpineInstance.showWidthInput&&!this.alpineInstance.isAreaChecked&&this.alpineInstance.isEmptyWidthInput&&(t+=`<li>${this.stepData.labels.widthRequiredMessage}. </li>`),this.alpineInstance.showHeightInput&&(this.alpineInstance.isEmptyHeightInput?t+=`<li>${this.stepData.labels.heightRequiredMessage}. </li>`:this.alpineInstance.isInvalidHeightInput&&(t+=`<li>${this.stepData.labels.maxHeightErrorMessage}. </li>`)),this.alpineInstance.showWasteInput&&(this.alpineInstance.isEmptyWasteInput?t+=`<li>${this.stepData.labels.wasteRequiredMessage}. </li>`:this.alpineInstance.isInvalidHangerSpanInput&&(t+=`<li>${this.stepData.labels.maxHangerSpanErrorMessage}. </li>`)),this.alpineInstance.showHangerSpanInput&&this.alpineInstance.isEmptyHangerSpanInput&&(t+=`<li>${this.stepData.labels.hangerSpanRequiredMessage}. </li>`),t}showCarbonImpact(){var t=this.getSelectedVariantById(this.alpineInstance.selectedVariant);return!(!t||!t.carbonImpact)}getCalculationValue(){this.dispatchEvent(d.DispatchWidthIsEnabled,this.alpineInstance.showWidthInput),this.dispatchEvent(d.DispatchHeightIsEnabled,this.alpineInstance.showHeightInput),this.dispatchEvent(d.DispatchAreaIsEnabled,this.alpineInstance.showAreaInput),this.dispatchEvent(d.DispatchWasteIsEnabled,this.alpineInstance.showWasteInput),this.dispatchEvent(d.DispatchHangerSpanIsEnabled,this.alpineInstance.showHangerSpanInput),this.dispatchEvent(d.DispatchCarbonImpactIsEnabled,this.showCarbonImpact()),this.dispatchEvent("set-syscal-variant",this.get
1SelectedVariantById(this.alpineInstance.selectedVariant)),this.dispatchEvent("set-syscal-measure-unit",this.getVariantMeasureUnit(this.alpineInstance.selectedVariant));let t=isNaN(parseFloat(this.alpineInstance.width))?0:parseFloat(this.alpineInstance.width),e=isNaN(parseFloat(this.alpineInstance.height))?0:parseFloat(this.alpineInstance.height),n=isNaN(parseFloat(this.alpineInstance.area))?0:parseFloat(this.alpineInstance.area),a=isNaN(parseFloat(this.alpineInstance.waste))?0:parseFloat(this.alpineInstance.waste),s=isNaN(parseFloat(this.alpineInstance.hangerSpan))?0:parseFloat(this.alpineInstance.hangerSpan);this.alpineInstance.isAreaChecked?0!==e&&(t=n/e):n=t*e;let i={};if(this.alpineInstance.showWidthInput){let e=this.getInputKey(h.Width);null!==e&&(i[e]=this.formatVariableValueToApi(t))}if(this.alpineInstance.showHeightInput){let t=this.getInputKey(h.Height);null!==t&&(i[t]=this.formatVariableValueToApi(e))}if(this.alpineInstance.showAreaInput){let t=this.getInputKey(h.Area);null!==t&&(i[t]=this.formatVariableValueToApi(n))}if(this.alpineInstance.showWasteInput){let t=this.getInputKey(h.Waste);if(null!==t){let e=1+a/100;i[t]=this.formatVariableValueToApi(e),this.dispatchEvent(d.DispatchWaste,a)}}if(this.alpineInstance.showHangerSpanInput){let t=this.getInputKey(h.HangerSpan);null!==t&&(i[t]=this.formatVariableValueToApi(s))}let l={systemvariant:this.alpineInstance.selectedVariant},c=JSON.stringify(l),o=this.alpineInstance.selectedParts.map((t=>({identifier:t.id,formula:t.value,variablesJsonString:JSON.stringify(this.stepData.variables),inputsJsonString:JSON.stringify(i),lookupEntitiesJsonString:c}))),r=new(g())(this.stepData.getCalculationValueUrl),p=new v.o(r.toString(),o,!1);this.handler.showSpinner(),this.ajaxWrapper.doFetch(p).then((i=>{200===i.status&&i.clone().json().then((i=>{let l=[];this.alpineInstance.selectedParts.map((t=>{let e=Object.assign({},t),n=i.find((e=>e.identifier===t.id));e.value=n&&n.value?n.value.toString():"0",l.push(e)})),this.dispatchEvent(d.DispatchWidth,t),this.dispatchEvent(d.DispatchHeight,e),this.dispatchEvent(d.DispatchArea,n),this.dispatchEvent(d.DispatchWaste,a),this.dispatchEvent(d.DispatchHangerSpan,s),this.dispatchEvent(d.DispatchHangerSpanUnit,this.getSelectedVariantById(this.alpineInstance.selectedVariant).maxHangerSpanUnit),this.dispatchEvent(d.DispatchSelectedParts,l),this.handler.goToNextStep()}))})).finally((()=>{this.handler.hideSpinner()}))}getHangerSpanTooltipContent(t){const e=this.getSelectedVariantById(t);return e&&null!==e.maxHangerSpan&&null!==e.maxHangerSpanUnit?`\n <div class="c-sys-calc-tooltip">\n ${this.stepData.labels.hangerSpanTooltip.replace("{0}",e.maxHangerSpan)} ${e.maxHangerSpanUnit}\n </div>\n `:`\n <div class="c-sys-calc-tooltip">\n ${this.stepData.labels.hangerSpanTooltip.replace("{0}","")}\n </div>\n `}getWasteTooltipContent(){return`\n <div class="c-sys-calc-tooltip">\n ${this.stepData.labels.wasteTooltip}\n </div>\n `}checkInputEnable(t){return null!==this.stepData.inputs&&Array.isArray(this.stepData.inputs)&&this.stepData.inputs.map((t=>t.toLowerCase())).includes(t.toLowerCase())}getInputKey(t){if(null==this.stepData.inputs||!Array.isArray(this.stepData.inputs))return null;for(let e=0;e<this.stepData.inputs.length;e++)if(this.stepData.inputs[e].toLowerCase()===t.toLowerCase())return this.stepData.inputs[e]}getCalculationTranslation(t){if(null!=this.stepData.translations){if(null!=this.stepData.translations[t])return this.stepData.translations[t];if(null!=this.stepData.translations[t.toLowerCase()])return this.stepData.translations[t.toLowerCase()]}return t}getDataImplement(){return{category:this.category,systemId:this.systemId,systemTitle:this.systemTitle,systemImageUrl:this.systemImageUrl,stepType:this.stepType,shouldBeShown:!0,labels:this.stepData.labels,description:"",variants:this.stepData.variants,selectedVariant:"",hideVariantInformation:this.hideVariantInformation,config:null,isInvalidSurfaceInput:!1,isInvalidWidthInput:!1,isAreaChecked:!1,showAreaInput:this.checkInputEnable(h.Area),area:"",isEmptySurfaceInput:!1,showWidthInput:this.checkInputEnable(h.Width),width:"",isEmptyWidthInput:!1,showHeightInput:this.checkInputEnable(h.Height),height:"",maxHeightValue:"",isEmptyHeightInput:!1,isInvalidHeightInput:!1,showHangerSpanInput:this.checkInputEnable(h.HangerSpan),hangerSpan:"",maxHangerSpanValue:"",isEmptyHangerSpanInput:!1,isInvalidHangerSpanInput:!1,showWasteInput:this.checkInputEnable(h.Waste),waste:this.stepData.defaultWaste,isEmptyWasteInput:!1,isInvalidWasteInput:!1,defaultSelectedParts:[],selectedParts:[],tempSelectedParts:[],emptyVariantConfig:this.getEmptyVariantConfig(this.stepData.variants),adaptConfigStepShouldShow:!1,adaptConfigCouldEnable:!1,showStep:()=>this.showStep(),hideStep:()=>this.hideStep(),onChangeVariant:t=>this.onChangeVariant(t),onChangeMeasureType:t=>this.onChangeMeasureType(t),onChangeSurfaceAreaInput:(t,e,n)=>this.onChangeSurfaceAreaInput(t,e,n),getHangerSpanTooltipContent:t=>this.getHangerSpanTooltipContent(t),getWasteTooltipContent:()=>this.getWasteTooltipContent(),getSelectedVariantNameById:t=>
1t&&this.getSelectedVariantById(t).name||"",getCalculationTranslation:t=>this.getCalculationTranslation(t),getImgUrl:t=>this.getImgUrl(t),getInputMeasureUnit:(t,e)=>this.getInputMeasureUnit(t,e),getVariantMeasureUnit:t=>this.getVariantMeasureUnit(t),getVariantMaxHeight:(t,e)=>this.getVariantMaxHeight(t,e),resetSelectedParts:t=>this.resetSelectedParts(t),checkAdaptConfigCouldEnable:t=>this.checkAdaptConfigCouldEnable(t),showAdaptConfig:t=>this.showAdaptConfig(t),onChangeSelectedPart:(t,e)=>this.onChangeSelectedPart(t,e),renderSelectedPart:(t,e)=>this.renderSelectedPart(t,e),renderSelectedVariantDefaultParts:t=>this.renderSelectedVariantDefaultParts(t),categoryShouldShow:t=>this.categoryShouldShow(t),getEmptyVariantConfig:t=>this.getEmptyVariantConfig(t),getSelectedVariantDefaultConfig:t=>this.getSelectedVariantDefaultConfig(t),getDefaultSelectedParts:t=>this.getDefaultSelectedParts(t),getSelectedVariantCategories:t=>this.getSelectedVariantCategories(t),renderErrorMessage:()=>this.renderErrorMessage(),renderPreStepHtml:()=>this.renderPreStepHtml(),renderStep:()=>this.renderStep(),reset:()=>this.reset()}}}class x extends o{constructor(){super(...arguments),this.stepType=r.ProductsCalculationStep}onInit(){super.onInit()}showStep(){super.showStep(),this.handler.modifyBackButtonLabel(this.stepData.back),this.handler.modifyNextButtonLabel(this.stepData.next),this.handler.modifyNextButtonType("Chevron"),this.dispatchEvent("set-syscal-prod-calc-labels",this.stepData.labels),this.showPricingInformation&&this.initializeCalculationPrices()}renderStep(){return'\n <div class="c-sys-prod-calc"\n @set-syscal-variant.window="variant = $event.detail"\n @set-syscal-description.window="description = $event.detail"\n @set-syscal-area.window="area = $event.detail"\n @set-syscal-measure-unit.window="unit = $event.detail"\n @set-syscal-selected-parts.window="products = $event.detail"\n @set-syscal-waste-is-enabled.window="showWaste = $event.detail"\n @set-syscal-waste.window="waste = $event.detail"\n @set-syscal-carbon-impact-is-enabled.window="showCarbonImpact = $event.detail"\n @set-syscal-calculationTotalPrice.window="calculationTotalPrice = $event.detail"\n >\n \n\t<div class="c-sys-calc-media">\n\t\t <div class="c-sys-calc-media__content">\n <template x-if="!hideVariantInformation">\n\t\t\t <div class="c-sys-calc-media__data" x-text="variant?.name"></div>\n </template>\n <template x-if="hideVariantInformation">\n\t\t\t <div class="c-sys-calc-media__data" x-text="systemTitle"></div>\n </template>\n\t\t </div>\n\t</div>\n\t<div class="c-sys-calc-info">\n\t\t<div class="c-sys-calc-info__item">\n\t\t\t<div class="c-sys-calc-info-inner">\n\t\t\t\t<div class="c-sys-calc-info-inner__label" x-text="labels.category"></div>\n\t\t\t\t<div class="c-sys-calc-info-inner__value u-truncate-multiline" x-text="category"></div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class="c-sys-calc-info__item">\n\t\t\t<div class="c-sys-calc-info-inner">\n\t\t\t\t<div class="c-sys-calc-info-inner__label" x-text="labels.description"></div>\n\t\t\t\t<div class="c-sys-calc-info-inner__value u-truncate-multiline" x-text="description ? description : \'/\'"></div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class="c-sys-calc-info__item">\n\t\t\t<div class="c-sys-calc-info-inner">\n\t\t\t\t<div class="c-sys-calc-info-inner__label" x-text="labels.surface"></div>\n\t\t\t\t<div class="c-sys-calc-info-inner__value u-truncate-multiline" x-html="getArea().replace(\'null\', \'m\')"></div>\n\t\t\t</div>\n\t\t</div>\n\t\t<template x-if="showWaste">\n <div class="c-sys-calc-info__item">\n <div class="c-sys-calc-info-inner">\n <div class="c-sys-calc-info-inner__label" x-text="labels.waste"></div>\n <div class="c-sys-calc-info-inner__value u-truncate-multiline" x-html="getWaste()"></div>\n </div>\n </div>\n\t\t</template>\n <template x-if="showCarbonImpact">\n\t\t <div class="c-sys-calc-info__item">\n\t\t\t <svg width="34" height="34"><use xlink:href="/etex/images/svg/svg-symbols.svg#icon_sys_calc_co2"></use></svg>\n\t\t\t <div class="c-sys-calc-info-inner">\n\t\t\t\t <div class="c-sys-calc-info-inner__label">\n\t\t\t\t\t <span x-text="labels.carbonImpact"></span>\n\t\t\t\t\t <span data-component-class="Tooltip" data-position="top" role="button" tabindex="0" class="is-collapsed">\n\t\t\t\t\t\t <svg class="c-svg" width="13" height="13" role="img" aria-labelledby="forward" focusable="false">\n\t\t\t\t\t\t\t <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline"></use>\n\t\t\t\t\t\t </svg>\n\t\t\t\t\t\t <span class="js-tooltip-content" hidden x-html="getTooltipContent(labels.carbonImpactTooltip)"></span>\n\t\t\t\t\t </span>
1\n\t\t\t\t </div>\n\t\t\t\t <div class="c-sys-calc-info-inner__value u-truncate-multiline" x-html="getCarbonImpact()"></div>\n\t\t\t </div>\n\t\t </div>\n </template>\n <template x-if="showPricingInformation">\n <div class="c-sys-calc-info__item">\n \t\t\t<div class="c-sys-calc-info-inner">\n \t\t\t\t<div class="c-sys-calc-info-inner__label" x-text="getLabelFormattedWithCurrency(labels.calculationTotalPrice)">\n \t\t\t\t</div>\n \t\t\t\t<div class="c-sys-calc-info-inner__value u-truncate-multiline" x-text="getFormattedPrice(calculationTotalPrice)"></div>\n \t\t\t</div>\n \t\t</div>\n </template>\n\t</div>\n\n \n\t<div class="c-sys-calc-table c-filter-list__list u-width-full">\n <div data-component-class="Spinner ResponsiveTable MultipleSelector">\n\t\t <div class="js-spinner">\n <div class="o-table c-table c-table--responsive c-table--responsive-v2 c-table--reporter">\n <button type="button" class="c-table-control c-table-control--right js-table-control-right u-hidden" aria-label="Next">\n\t\t\t <span class="c-table-control__indicator"></span>\n\t\t\t </button>\n <div class="c-table-v2__inner js-responsive-table-wrapper">\n\t\t <table class="js-responsive-table c-table--calculation">\n\t\t\t <thead>\n\t\t\t\t <tr>\n <th class="c-table__heading-v2 is-last js-responsive-column" scope="col" data-sticky="true" style="--table__heading-v2-sticky--left: 0px;">\n\t\t\t \t\t\t <button type="button" class="c-table-control c-table-control--left js-table-control-left u-hidden" aria-label="Previous">\n\t\t\t \t\t\t <span class="c-table-control__indicator"></span>\n\t\t\t \t\t\t </button>\n\t\t\t \t\t\t <div class="c-table__heading-v2-inner" x-text="labels.name"></div>\n\t\t\t \t\t\t </th>\n\t\t\t\t\t <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner" x-text="labels.category"></div>\n\t\t\t\t\t </th>\n\t\t\t\t\t <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner" x-text="labels.amount"></div>\n\t\t\t\t\t </th>\n\t\t\t\t\t <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner" x-text="labels.unit"></div>\n\t\t\t\t\t </th>\n <template x-if="showPricingInformation">\n <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner">\n <span x-text="getLabelFormattedWithCurrency(labels.unitPrice)"></span>\n <span class="u-txt-hide is-collapsed" data-component-class="Tooltip" data-position="top" role="button" tabindex="0">\n\t <svg class="c-svg " width="13" height="13" role="img" focusable="false">\n\t\t <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline"></use>\n\t </svg>\n\t <span class="js-tooltip-content" hidden x-html="getTooltipContent(labels.unitPriceTooltip)""></span>\n </span>\n </div>\n\t\t\t\t\t </th>\n </template>\n <template x-if="showPricingInformation">\n <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner" x-text="labels.discountPercentage"></div>\n\t\t\t\t\t </th>\n </template>\n <template x-if="showPricingInformation">\n <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner" x-text="getLabelFormattedWithCurrency(labels.totalPrice)"></div>\n\t\t\t\t\t </th>\n </template>\n\t\t\t\t </tr>\n\t\t\t </thead>\n\n\t\t\t <tbody>\n\t\t\t\t <template x-for="p in products">\n\t\t\t\t\t <tr class="c-table__row js-table-row">\n\t\t\t\t\t\t <td class="c-table__cell c-table__cell-v2 c-table__cell--bold is-last" data-sticky="true" x-bind:data-label="labels.name">\n\t\t\t\t\t\t\t <div class="c-table__cell-v2-inner" x-text="p.name"></div>\n\t\t\t\t\t\t </td>\n\t\t\t\t\t\t <td class="c-table__cell c-table__cell-v2" x-bind:data-label="labels.category">\n\t\t\t\t\t\t\t <div class="c-table__cell-v2-inner" x-text="getCalculationTranslation(p.category)"></div>\n\t\t\t\t\t\t </td>\n\t\t\t\t\t\t <td class="c-table__cell c-table__cell-v2" x-bind:data-label="labels.amount">\n\t\t\t\t\t\t\t <div class="c-table__cell-v2-inner" x-text="renderProductValue(p.value)"></div>\n\t\t\t\t\t\t </td>\n\t\t\t\t\t\t <td class="c-table__cell c-table__cell-v2" x-bind:data-label="labels.unit">\n\t\t\t\t\t\t\t <div class="c-table__cell-v2-inner" x-text="p.uom ?? \'/\'"></div>\n\t\t\t\t\t\t </td>\n <template x-if="showPricingInformation">\n <td class="c-table__cell c-table__cell-v2 c-table__cell--input c-table__cell--currency" x-bind:data-label="getLabelFormattedWithCurrency(labels.unitPrice)">
1\n <span class="c-table__cell-v2-inner"> \n\t\t\t \t\t\t <input type="text" placeholder="0.00"\n x-bind:value="p.unitPrice"\n x-on:keyup="onChangeUnitPriceInput($event, $event.target.value, p)">\n\t\t\t \t\t\t <span class="c-table__cell-unit" x-text="currencySymbol"></span>\n\t\t\t \t\t\t </span>\n\t\t\t\t\t\t </td>\n </template>\n <template x-if="showPricingInformation">\n <td class="c-table__cell c-table__cell-v2 c-table__cell--input c-table__cell--percent" x-bind:data-label="labels.discountPercentage"> \n\t\t\t \t\t\t <span class="c-table__cell-v2-inner"> \n\t\t\t \t\t\t <input type="text" placeholder="0"\n x-bind:value="p.discountPercentage"\n x-on:keyup="onChangeDiscountPercentageInput($event, $event.target.value, p)">\n\t\t\t \t\t\t <span class="c-table__cell-unit">%</span>\n\t\t\t \t\t\t </span>\n\t\t\t \t\t\t </td>\n </template>\n <template x-if="showPricingInformation">\n <td class="c-table__cell c-table__cell-v2 c-table__cell--bold" x-bind:data-label="getLabelFormattedWithCurrency(labels.totalPrice)"> \n\t\t\t \t\t\t <span class="c-table__cell-v2-inner" x-text="getFormattedPrice(p.totalPrice)"></span>\n\t\t\t \t\t\t </td>\n </template>\n\t\t\t\t\t </tr>\n\t\t\t\t </template>\n\t\t\t </tbody>\n\t\t </table>\n </div>\n </div>\n </div>\n </div>\n\t</div>\n\n </div>\n '}reset(){this.alpineInstance.description="",this.alpineInstance.showCarbonImpact=!1,this.alpineInstance.variant=null,this.alpineInstance.area="0"}getArea(){return`${this.alpineInstance.area}${this.alpineInstance.unit}<sup>2</sup>`}getWaste(){return`${this.alpineInstance.waste}%`}getCarbonImpact(){return`${this.alpineInstance.variant.carbonImpact} ${this.alpineInstance.variant.carbonImpactUnit}`}getTooltipContent(t){return t?`\n <div class="c-sys-calc-tooltip">\n ${t}\n </div>\n `:""}renderProductValue(t){return t?/([,.])\w+/g.test(t)?parseFloat(t).toFixed(2).toString():t:"/"}getCalculationTranslation(t){if(null!=this.stepData.translations){if(null!=this.stepData.translations[t])return this.stepData.translations[t];if(null!=this.stepData.translations[t.toLowerCase()])return this.stepData.translations[t.toLowerCase()]}return t}initializeCalculationPrices(){this.alpineInstance.products.forEach((t=>{this.calculateProductPrice(t)})),this.calculateCalculationTotalPrice()}onChangeDiscountPercentageInput(t,e,n){if("Tab"===t.key)return;e=e.replace(/,/g,".").replace(/[^0-9.]/g,"");const a=t.target;let s=0;e&&(s=Math.abs(+e)<100?Math.abs(+e):100),a.value=e,n.discountPercentage=s,this.updateProductPriceCalculation(n)}onChangeUnitPriceInput(t,e,n){if("Tab"===t.key)return;const a=(e=e.replace(/,/g,".").replace(/[^0-9.]/g,"")).split(".");a.length>2&&(e=a[0]+"."+a.slice(1).join(""));const s=t.target;let i=0;e&&(i=parseFloat(e)),s.value=e,n.unitPrice=i,this.updateProductPriceCalculation(n)}updateProductPriceCalculation(t){this.calculateProductPrice(t),this.calculateCalculationTotalPrice()}calculateProductPrice(t){let e=isNaN(t.unitPrice)?0:t.unitPrice,n=isNaN(t.discountPercentage)?0:t.discountPercentage,a=isNaN(parseFloat(t.value))?0:parseFloat(t.value),s=a*e-a*e*n/100;t.totalPrice=s}calculateCalculationTotalPrice(){var t=0;
1this.alpineInstance.products.forEach((e=>{let n=isNaN(e.totalPrice)?0:e.totalPrice;t+=n})),this.alpineInstance.calculationTotalPrice=t,this.dispatchEvent("set-syscal-calculation-total-price",t)}getDataImplement(){return{category:this.category,systemId:this.systemId,systemTitle:this.systemTitle,systemImageUrl:this.systemImageUrl,stepType:this.stepType,shouldBeShown:this.shouldBeShown,labels:this.stepData.labels,variant:null,hideVariantInformation:this.hideVariantInformation,description:"",showArea:!1,area:"0",showWaste:!1,waste:"0",unit:"",showCarbonImpact:!1,products:[],showPricingInformation:this.showPricingInformation,currencySymbol:this.currencySymbol,cultureName:this.cultureName,calculationTotalPrice:0,renderProductValue:t=>this.renderProductValue(t),getArea:()=>this.getArea(),getWaste:()=>this.getWaste(),getCarbonImpact:()=>this.getCarbonImpact(),getTooltipContent:t=>this.getTooltipContent(t),getCalculationTranslation:t=>this.getCalculationTranslation(t),getLabelFormattedWithCurrency:t=>this.getLabelFormattedWithCurrency(t),onChangeUnitPriceInput:(t,e,n)=>this.onChangeUnitPriceInput(t,e,n),onChangeDiscountPercentageInput:(t,e,n)=>this.onChangeDiscountPercentageInput(t,e,n),getFormattedPrice:t=>this.getFormattedPrice(t),showStep:()=>this.showStep(),hideStep:()=>this.hideStep(),renderPreStepHtml:()=>this.renderPreStepHtml(),renderStep:()=>this.renderStep(),reset:()=>this.reset()}}}var f=n(83491),_=n(77370),w=n(10886);class S extends o{constructor(){super(...arguments),this.stepType=r.CalculationOverviewStep}onInit(){super.onInit(),l().subscribe(d.SubmitDownload,(()=>[this.submitDownload()]))}showStep(){super.showStep(),this.handler.modifyBackButtonLabel(this.stepData.back);let t=this.stepData.downloadUrl&&this.stepData.downloadUrl.length>0;this.stepIndex===this.handler.totalSteps?(this.handler.modifyActionButton(!1),t?(this.handler.modifyNextButtonLabel(this.stepData.labels.download),this.handler.modifyNextButtonType("Download")):this.handler.modifyNextButton(!0)):(this.handler.modifyActionButton(t,this.stepData.labels.download,"Download"),this.handler.modifyNextButtonLabel(this.stepData.labels.save),this.handler.modifyNextButtonType("Chevron"))}renderStep(){return'\n <div class="c-sys-calc-overview"\n @set-syscal-variant.window="variant = $event.detail"\n @set-syscal-description.window="description = $event.detail"\n @set-syscal-is-area-checked.window="isAreaChecked = $event.detail"\n\n @set-syscal-width-is-enabled.window="showWidth = $event.detail"\n @set-syscal-width.window="width = $event.detail"\n\n @set-syscal-height-is-enabled.window="showHeight = $event.detail"\n @set-syscal-height.window="height = $event.detail"\n\n @set-syscal-area-is-enabled.window="showArea = $event.detail"\n @set-syscal-area.window="area = $event.detail"\n\n @set-syscal-hanger-span-is-enabled.window="showHangerSpan = $event.detail"\n @set-syscal-hanger-span.window="hangerSpan = $event.detail"\n @set-syscal-hanger-span-unit.window="hangerSpanUnit = $event.detail"\n\n @set-syscal-waste-is-enabled.window="showWaste = $event.detail"\n @set-syscal-waste.window="waste = $event.detail"\n\n @set-syscal-carbon-impact-is-enabled.window="showCarbonImpact = $event.detail"\n\n @set-syscal-measure-unit.window="unit = $event.detail"\n @set-syscal-selected-parts.window="products = $event.detail"\n\n @set-syscal-calculation-total-price.window="calculationTotalPrice = $event.detail"\n >\n \n <div class="c-sys-calc-media">\n <div class="c-sys-calc-media__img"><img x-bind:src="getImgUrl()" class="a-image" alt="Photo" height="64" width="64" loading="lazy"></div>\n <div class="c-sys-calc-media__content">\n <div class="c-sys-calc-media__title" x-text="systemTitle"></div>\n <div class="c-sys-calc-media__data" x-text="renderDataSummaryText()"></div>\n </div>\n </div>\n\n \n<div class="c-sys-calc-info">\n\t<div class="c-sys-calc-info__item">\n\t\t<div class="c-sys-calc-info-inner">\n\t\t\t<div class="c-sys-calc-info-inner__label" x-text="labels?.dimension"></div>\n\t\t\t<div class="c-sys-calc-info-inner__value u-truncate-multiline" x-html="getArea().replace(\'null\', \'m\')"></div>\n\t\t</div>\n\t</div>\n\n <template x-if="!hideVariantInformation">\n <div class="c-sys-calc-info__item">\n\t\t <div class="c-sys-calc-info-inner">\n\t\t\t <div class="c-sys-calc-info-inner__label" x-text="labels?.configOfSystem"></div>\n\t\t\t <div class="c-sys-calc-info-inner__value u-truncate-multiline" x-text="variant?.name"></div>
1\n\t\t </div>\n\t </div>\n </template>\n\n <template x-if="showWaste">\n <div class="c-sys-calc-info__item">\n <div class="c-sys-calc-info-inner">\n <div class="c-sys-calc-info-inner__label" x-text="labels?.waste"></div>\n <div class="c-sys-calc-info-inner__value u-truncate-multiline" x-html="getWaste()"></div>\n </div>\n </div>\n </template>\n\n <template x-if="showCarbonImpact">\n\t <div class="c-sys-calc-info__item">\n\t\t <svg width="34" height="34"><use xlink:href="/etex/images/svg/svg-symbols.svg#icon_sys_calc_co2"></use></svg>\n\t\t <div class="c-sys-calc-info-inner">\n\t\t\t <div class="c-sys-calc-info-inner__label">\n\t\t\t\t <span x-text="labels?.carbonImpact"></span>\n\t\t\t\t <span data-component-class="Tooltip" data-position="top" role="button" tabindex="0" class="is-collapsed">\n\t\t\t\t\t <svg class="c-svg" width="13" height="13" role="img" aria-labelledby="forward" focusable="false">\n\t\t\t\t\t\t <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline"></use>\n\t\t\t\t\t </svg>\n\t\t\t\t\t <span class="js-tooltip-content" hidden x-html="getTooltipContent(labels.carbonImpactTooltip)"></span>\n\t\t\t\t </span>\n\t\t\t </div>\n\t\t\t <div class="c-sys-calc-info-inner__value u-truncate-multiline" x-html="getCarbonImpact()"></div>\n\t\t </div>\n\t </div>\n </template>\n\n <template x-if="showPricingInformation">\n <div class="c-sys-calc-info__item">\n \t\t<div class="c-sys-calc-info-inner">\n \t\t\t<div class="c-sys-calc-info-inner__label" x-text="getLabelFormattedWithCurrency(labels.calculationTotalPrice)">\n \t\t\t</div>\n \t\t\t<div class="c-sys-calc-info-inner__value u-truncate-multiline" x-html="getFormattedPrice(calculationTotalPrice)"></div>\n \t\t</div>\n \t</div>\n </template>\n</div>\n\n \n<div class="c-sys-calc-table-heading" x-text="`${labels?.products} (${products.length})`"></div>\n<div class="c-sys-calc-table c-filter-list__list u-width-full">\n <div data-component-class="Spinner ResponsiveTable MultipleSelector">\n \t<div class="js-spinner">\n \t\t<div class="o-table c-table c-table--responsive c-table--responsive-v2 c-table--reporter">\n \t\t\t<button type="button" class="c-table-control c-table-control--right js-table-control-right u-hidden" aria-label="Next">\n \t\t\t <span class="c-table-control__indicator"></span>\n \t\t\t</button>\n \t\t\t<div class="c-table-v2__inner js-responsive-table-wrapper">\n\t <table class="js-responsive-table c-table--calculation">\n\t\t <thead>\n\t\t\t <tr>\n\t\t\t\t <th class="c-table__heading-v2 is-last js-responsive-column" scope="col" data-sticky="true" style="--table__heading-v2-sticky--left: 0px;">\n <button type="button" class="c-table-control c-table-control--left js-table-control-left u-hidden" aria-label="Previous">\n \t\t\t <span class="c-table-control__indicator"></span>\n \t\t\t </button>\n <div class="c-table__heading-v2-inner" x-text="labels?.name"></div>\n\t\t\t\t </th>\n\t\t\t\t <th class="c-table__heading-v2 js-responsive-column" scope="col">\n \t\t\t <div class="c-table__heading-v2-inner" x-text="labels?.category"></div>\n\t\t\t\t </th>\n\t\t\t\t <th class="c-table__heading-v2 js-responsive-column" scope="col">\n \t\t\t <div class="c-table__heading-v2-inner" x-text="labels?.amount"></div>\n\t\t\t\t </th>\n\t\t\t\t <th class="c-table__heading-v2 js-responsive-column" scope="col">\n \t\t\t <div class="c-table__heading-v2-inner" x-text="labels?.unit"></div>\n\t\t\t\t </th>\n <template x-if="showPricingInformation">\n <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner">
1\n <span x-text="getLabelFormattedWithCurrency(labels.unitPrice)"></span>\n <span class="u-txt-hide is-collapsed" data-component-class="Tooltip" data-position="top" role="button" tabindex="0">\n\t <svg class="c-svg " width="13" height="13" role="img" focusable="false">\n\t\t <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline"></use>\n\t </svg>\n\t <span class="js-tooltip-content" hidden x-html="getTooltipContent(labels.unitPriceTooltip)""></span>\n </span>\n </div>\n\t\t\t\t\t </th>\n </template>\n <template x-if="showPricingInformation">\n <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner" x-text="labels?.discountPercentage"></div>\n\t\t\t\t\t </th>\n </template>\n <template x-if="showPricingInformation">\n <th class="c-table__heading-v2 js-responsive-column" scope="col">\n\t\t\t\t\t\t <div class="c-table__heading-v2-inner" x-text="getLabelFormattedWithCurrency(labels?.totalPrice)"></div>\n\t\t\t\t\t </th>\n </template>\n\t\t\t </tr>\n\t\t </thead>\n\n\t\t <tbody>\n\t\t\t <template x-for="(p, index) in products">\n\t\t\t\t <tr class="c-table__row js-table-row" :hidden="index >= 3">\n <td class="c-table__cell c-table__cell-v2 c-table__cell--bold is-last" data-sticky="true" x-bind:data-label="labels?.name" style="--table__cell-v2-sticky--left: 0px;"> \n\t\t\t\t\t\t <span class="c-table__cell-v2-inner" x-text="p.name"></div>\n\t\t\t\t\t </td>\n\t\t\t\t\t <td class="c-table__cell c-table__cell-v2" x-bind:data-label="labels?.category">\n\t\t\t\t\t\t <span class="c-table__cell-v2-inner" x-text="getCalculationTranslation(p.category)"></span>\n\t\t\t\t\t </td>\n\t\t\t\t\t <td class="c-table__cell c-table__cell-v2" x-bind:data-label="labels?.amount">\n\t\t\t\t\t\t <span class="c-table__cell-v2-inner" x-text="p.value? parseFloat(p.value).toFixed(2) : \'/\'"></span>\n\t\t\t\t\t </td>\n\t\t\t\t\t <td class="c-table__cell c-table__cell-v2" x-bind:data-label="labels?.unit">\n\t\t\t\t\t\t <span class="c-table__cell-v2-inner" x-text="p.uom ?? \'/\'"></span>\n\t\t\t\t\t </td>\n <template x-if="showPricingInformation">\n <td class="c-table__cell c-table__cell-v2" x-bind:data-label="getLabelFormattedWithCurrency(labels?.unitPrice)">\n <span class="c-table__cell-v2-inner" x-text="getFormattedPrice(p.unitPrice)"></span>\n\t\t\t\t\t\t </td>\n </template>\n <template x-if="showPricingInformation">\n <td class="c-table__cell c-table__cell-v2" x-bind:data-label="labels?.discountPercentage"> \n\t\t\t \t\t <span class="c-table__cell-v2-inner" x-text="getFormattedPercentage(p.discountPercentage)"></span>\n\t\t\t \t </td>\n </template>\n <template x-if="showPricingInformation">\n <td class="c-table__cell c-table__cell-v2 c-table__cell--bold" x-bind:data-label="getLabelFormattedWithCurrency(labels?.totalPrice)">
1 \n\t\t\t \t\t <span class="c-table__cell-v2-inner" x-text="getFormattedPrice(p.totalPrice)"></span>\n\t\t\t \t </td>\n </template>\n\t\t\t\t </tr>\n\t\t\t </template>\n\t\t </tbody>\n\t </table>\n </div>\n </div>\n </div>\n </div>\n</div>\n<div class="c-sys-calc__cta" x-bind:hidden="products.length <= 3">\n\t<button class="c-btn js-view-all-btn" type="button" x-on:click="toggleOverviewTable(true)">\n\t\t<span class="c-btn__label" x-text="labels?.viewAll">View all</span>\n\t\t<span class="c-btn__icon"><svg class="c-svg"><use xlink:href="/etex/images/svg/svg-symbols.svg#icon_arrow_down_thicker"></use></svg></span>\n\t</button>\n</div>\n\n \n <template x-if="attachments.length > 0">\n <div class="c-sys-calc-attachment-heading">\n <div class="c-sys-calc-attachment-title" x-text="labels?.attachments">Attachments</div>\n <div class="c-sys-calc__cta">\n <button class="c-btn" type="button" data-a11y-dialog-show="modal-downloadAll-systemCalcOverviewDownloadAll" id="sys-calc-download-all-documents-button" x-on:click="downloadAllAttachments()">\n <span class="c-btn__icon">\n <svg class="c-svg " width="10" height="20" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_download"></use>\n </svg>\n </span>\n <span class="c-btn__label" x-text="labels?.attachmentsDownloadAll + \' (\' + attachments.length + \')\'">Download All</span>\n </button>\n </div>\n </div>\n </template>\n\n <template x-if="attachments.length > 0 && isViewAllAttachment">\n <ul class="c-sys-calc-attachment-list"\n x-bind:class="{\'o-grid\' : attachments.length>7}"\n x-bind:style="attachments.length>7 && {marginLeft: \'-20px\'}">\n <template x-for="(item, index) in attachments">\n <li class="c-sys-calc-attachment-item" x-bind:class="{\'o-grid__cell u-1/1 u-1/2@tablet\' : attachments.length > 7 , \'disabled\' : item.isLocked == true }">\n <template x-if="item.isLocked == true">\n <div class="c-sys-calc-attachment-item__content is-collapsed" data-component-class="Tooltip" data-position="top-start" data-tooltip-mobile="true" data-max-width="none" data-interactive="true" role="button" tabindex="0">\n <svg class="c-svg" width="13" height="17" role="img" aria-labelledby="forward" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#pdf"></use>\n </svg>\n <span class="u-truncate-multiline u-truncate-multiline--2"><strong x-text="item.category"></strong> - <span x-text="item.title"></span></span>\n <span class="js-tooltip-content" hidden x-html="getLockDocumentTooltipContent()"></span>\n </div>\n </template>\n <template x-if="item.isLocked == false && item.canDirectDownload == false">\n <a class="c-sys-calc-attachment-item__link" x-on:click="downloadAttachFile(item.id, item.title)">\n <svg class="c-svg " width="14" height="18" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#pdf"></use>\n </svg>\n <div class="u-truncate-multiline u-truncate-multiline--2"><strong x-text="item.category"></strong> - <span x-text="item.title"></span></div>\n </a>\n </template>\n <template x-if="item.canDirectDownload == true">\n <a class="c-sys-calc-attachment-item__link" x-bind:href="item.url" target="_blank">\n <svg class="c-svg " width="14" height="18" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#pdf"></use>\n </svg>\n <div class="u-truncate-multiline u-truncate-multiline--2"><strong x-text="item.category"></strong> - <span x-text="item.title"></span></div>\n </a>\n </template>\n </li>\n </template>\n </ul>\n </template>\n\n <template x-if="attachments.length > 0 && !isViewAllAttachment">\n <ul class="c-sys-calc-attachment-list">\n <template x-for="(item, index) in attachments">\n <template x-if="index < 3 && item">\n <li class="c-sys-calc-attachment-item" x-bind:class="{\'disabled\' : item.isLocked
1== true}">\n <template x-if="item.isLocked == true">\n <div class="c-sys-calc-attachment-item__content is-collapsed" data-component-class="Tooltip" data-position="top-start" data-tooltip-mobile="true" data-max-width="none" data-interactive="true" role="button" tabindex="0">\n <svg class="c-svg" width="13" height="17" role="img" aria-labelledby="forward" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#pdf"></use>\n </svg>\n <span class="u-truncate-multiline u-truncate-multiline--2"><strong x-text="item.category"></strong> - <span x-text="item.title"></span></span>\n <span class="js-tooltip-content" hidden x-html="getLockDocumentTooltipContent()"></span>\n </div>\n </template>\n <template x-if="item.isLocked == false && item.canDirectDownload == false">\n <a class="c-sys-calc-attachment-item__link" x-on:click="downloadAttachFile(item.id, item.title)">\n <svg class="c-svg " width="14" height="18" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#pdf"></use>\n </svg>\n <div class="u-truncate-multiline u-truncate-multiline--2"><strong x-text="item.category"></strong> - <span x-text="item.title"></span></div>\n </a>\n </template>\n <template x-if="item.canDirectDownload == true">\n <a class="c-sys-calc-attachment-item__link" x-bind:href="item.url" target="_blank">\n <svg class="c-svg " width="14" height="18" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#pdf"></use>\n </svg>\n <div class="u-truncate-multiline u-truncate-multiline--2"><strong x-text="item.category"></strong> - <span x-text="item.title"></span></div>\n </a>\n </template>\n </li>\n </template>\n </template>\n </ul>\n </template>\n\n <template x-if="attachments.length > 3">\n <div class="c-sys-calc__cta" x-bind:class="{\'c-sys-calc__cta--arrow-up\' : isViewAllAttachment}">\n <button class="c-btn js-view-all-btn" type="button" x-on:click="toggleViewAllAttachment()">\n <span class="c-btn__label" x-text="getAttachmentListToggleButtonText()"></span>\n <span class="c-btn__icon"><svg class="c-svg"><use xlink:href="/etex/images/svg/svg-symbols.svg#icon_arrow_down_thicker"></use></svg></span>\n </button>\n </div>\n </template>\n\n </div>\n '}reset(){this.toggleOverviewTable(!1),this.alpineInstance.description="",this.alpineInstance.showCarbonImpact=!1,this.alpineInstance.variant=null,this.alpineInstance.area="0"}getImgUrl(){return null!==this.alpineInstance.variant&&null!=this.alpineInstance.variant.imageUrl&&this.alpineInstance.variant.imageUrl.length>0?this.alpineInstance.variant.imageUrl:this.alpineInstance.systemImageUrl}getArea(){return`${this.alpineInstance.area}${this.alpineInstance.unit}<sup>2</sup>`}getWaste(){return`${this.alpineInstance.waste}%`}getCarbonImpact(){return`${this.alpineInstance.variant.carbonImpact} ${this.alpineInstance.variant.carbonImpactUnit}`}toggleOverviewTable(t){const e=this.element.querySelectorAll(".js-table-row"),n=this.element.querySelector(".js-view-all-btn");if(t)return e.forEach((t=>t.removeAttribute("hidden"))),n.setAttribute("hidden","true"),n.parentElement.classList.add("u-hidden"),void b.ZP.onSingleCalculationInteraction({eventAction:"view_all",eventLabel:"N/A"});e.forEach(((t,e)=>{e<3||t.setAttribute("hidden","true")})),n.removeAttribute("hidden"),n.parentElement.classList.remove("u-hidden")}renderDataSummaryText(){let t=this.alpineInstance.category;return this.alpineInstance.variant&&!this.hideVariantInformation&&(t+=` - ${this.alpineInstance.variant.name}`),this.alpineInstance.description&&(t+=` - ${this.alpineInstance.description}`),t}getTooltipContent(t){return t?`\n <div class="c-sys-calc-tooltip">\n ${t}\n </div>\n `:""}getLockDocumentTooltipContent(){return this.alpineInstance.signInUrl&&this.stepData.labels.signIn?`<div class="c-sys-calc-tooltip">\n <a href="${this.alpineInstance.signInUrl}" target="_self" rel="nofollow">${this.stepData.labels.signIn}</a>
1\n <span>${this.stepData.labels.toAccessThisDocument}</span>\n <button class="c-btn c-btn--icon js-close-tooltip" aria-label="close tooltip">\n <svg class="c-svg " width="8" height="8" role="img" focusable="false">\n <use xlink:href="/etex/images/svg/svg-symbols.svg#icon_close"></use>\n </svg>\n </button>\n </div>`:""}submitDownload(){const t=this.alpineInstance.products.map((t=>({productName:t.name,productType:t.category,quantity:t.value,unit:t.uom,unitPrice:this.getFormattedPrice(t.unitPrice),discount:this.getFormattedPercentage(t.discountPercentage),totalPrice:this.getFormattedPrice(t.totalPrice)})));var e=new(g())(this.stepData.downloadUrl),n={type:this.alpineInstance.category,description:this.alpineInstance.description,totalPrice:this.getFormattedPrice(this.alpineInstance.calculationTotalPrice),waste:this.alpineInstance.waste,area:this.alpineInstance.area,width:this.alpineInstance.width,height:this.alpineInstance.height,areaUnit:this.alpineInstance.unit,carbonImpact:this.alpineInstance.variant.carbonImpact,carbonImpactUnit:this.alpineInstance.variant.carbonImpactUnit,unit:this.alpineInstance.unit,configuration:this.alpineInstance.hideVariantInformation?null:this.alpineInstance.variant.name,systemName:this.alpineInstance.systemTitle,products:t},a=new v.o(e.toString(),n,!1);this.handler.showSpinner(),this.ajaxWrapper.doFetch(a).then((t=>{200===t.status&&t.clone().blob().then((t=>{let e=`${this.alpineInstance.systemTitle}.pdf`,n=new File([t],e,{type:"application/pdf"});b.ZP.onSingleCalculationInteraction({eventAction:"download",eventLabel:e});var a=document.createElement("a");a.target="_blank",a.download=e;let s=window.URL||window.webkitURL,i=s.createObjectURL(n);a.href=i,document.body.appendChild(a),a.click(),document.body.removeChild(a),s.revokeObjectURL(i)}))})).finally((()=>{this.handler.hideSpinner()}))}getPdfSelectionInfo(){let t=[];if(this.alpineInstance.isAreaChecked)t.push(`${this.stepData.labels.area} ${this.getArea()}`),this.alpineInstance.showHeight&&t.push(`${this.stepData.labels.height} ${this.alpineInstance.height}${this.alpineInstance.unit}`);else{let e=`${this.stepData.labels.wxH} `;this.alpineInstance.showWidth&&(e+=this.alpineInstance.width),this.alpineInstance.showHeight?e+=` x ${this.alpineInstance.height}${this.alpineInstance.unit}`:e+=`${this.alpineInstance.unit}`,t.push(e)}this.alpineInstance.showWaste&&t.push(`${this.stepData.labels.waste} ${this.alpineInstance.waste}%`),this.alpineInstance.showHangerSpan&&t.push(`${this.stepData.labels.hangerSpan} ${this.alpineInstance.hangerSpan}${this.alpineInstance.hangerSpanUnit}`);let e=t.join(" - ");return e.length>0?`${this.alpineInstance.variant.name} (${e})`:this.alpineInstance.variant.name}getCalculationTranslation(t){if(null!=this.stepData.translations){if(null!=this.stepData.translations[t])return this.stepData.translations[t];if(null!=this.stepData.translations[t.toLowerCase()])return this.stepData.translations[t.toLowerCase()]}return t}getAttachmentListToggleButtonText(){return this.alpineInstance.isViewAllAttachment?this.stepData.labels.viewLess:this.stepData.labels.viewAll}downloadAllAttachments(){let t=this.stepData.attachmentsDownloadAllUrl+"&calAttachments=true&ts="+(new Date).getTime(),e=new v.o(t,null,!1);e.headers={"X-RelationshipType":"DirectlyRelatedToEntity"},this.handler.showSpinner(),this.ajaxWrapper.doFetch(e).then((t=>{t.clone().text().then((t=>{var e=new f.E(t),n=new _.b(e.getComponentUpdate("DataSheetInfos").json,e.getComponentUpdate("CategorySelectionDialog").json,e.getComponentUpdate("CategorySelectionDialog").content,null,"calculator");l().publish(_.a.categorySelectionRequested,n)}))})).finally((()=>{this.handler.hideSpinner()}))}downloadAttachFile(t,e){null!==e&&""!==e||(e=this.alpineInstance.systemTitle),l().publish(w.er.documentPackageCreationRequested,new w.OP([t],[],null,e,!1,!1))}toggleViewAllAttachment(){this.alpineInstance.isViewAllAttachment=!this.alpineInstance.isViewAllAttachment,b.ZP.onSingleCalculationInteraction({eventAction:"view_all",eventLabel:"N/A"})}getDataImplement(){return{category:this.category,systemId:this.systemId,systemTitle:this.systemTitle,systemImageUrl:this.systemImageUrl,stepType:this.stepType,shouldBeShown:this.shouldBeShown,labels:this.stepData.labels,isAreaChecked:!1,showWidth:!1,width:"",showHeight:!1,height:"",showArea:!1,area:"0",unit:"",showWaste:!1,waste:"0",showHangerSpan:!1,hangerSpan:"",hangerSpanUnit:"",showCarbonImpact:!1,variant:null,hideVariantInformation:this.hideVariantInformation,description:"",products:[],attachments:this.stepData.attachments,signInUrl:this.stepData.signInUrl,isViewAllAttachment:!1,showPricingInformation:this.showPricingInformation,currencySymbol:this.currencySymbol,cultureName:this.cultureName,calculationTotalPrice:0,toggleViewAllAttachment:()=>this.toggleViewAllAttachment(),getImgUrl:()=>this.getImgUrl(),getArea:()=>this.getArea(),downloadAllAttachments:()=>this.downloadAllAttachments(),downloadAttachFile:(t,e)=>this.downloadAttachFile(t,e),getWaste:()=>this.getWaste(),getCarbonImpact:()=>this.getCarbonImpact(),getAttachmentListToggleButtonText:()=>this.getAttachmentListToggleButtonText(),toggleOverviewTable:t=>this.toggleOverviewTable(t),renderDataSummaryText:()=>this.renderDataSummaryText(),getTooltipContent:t=>this.getTooltipContent(t),getLockDocumentTooltipContent:()=>this.getLockDocumentTooltipContent(),getCalculationTranslation:t=>this.getCalculationTranslation(t),getFormattedPrice:t=>this.getFormattedPrice(t),getFormattedPercentage:t=>this.getFormattedPercentage(t),getLabelFormattedWithCurrency:t=>this.getLabelFormattedWithCurrency(t),showStep:()=>this.showStep(),hideStep:()=>this.hideStep(),renderPreStepHtml:()=>this.renderPreStepHtml(),renderStep:()=>this.renderStep(),reset:()=>this.reset()}}}var C=n(33876),D=n(93672);const P="#ConfirmSavedCalcDialog",T=".js-create-project-btn",A="[data-js='create-project-dialog']";class E extends o{constructor(t,e,n,a,s,i,l,c,o,d,h,p,u,m){super(t,e,n,a,s,i,l,c,d,h,p,u,m),this.stepType=r.SaveCalculationStep,this.selectedProject="",this.brandContext=o}onInit(){super.onInit(),this.initProjectData(),l().subscribe(d.SaveCalculation,(()=>
1[this.saveCalculation()]))}showStep(){super.showStep(),this.confirmSavedDialogElement=document.querySelector(P),this.bindCreateProject(),this.handler.modifyBackButtonLabel(this.stepData.back),this.handler.modifyActionButton(!1),this.handler.modifyNextButtonLabel(this.stepData.labels.save),this.handler.modifyNextButtonType(""),this.handler.disableNextButton(!0)}renderStep(){return'\n <div class="c-sys-calc-save"\n @set-syscal-area-is-enabled.window="showArea = $event.detail"\n @set-syscal-area.window="area = $event.detail"\n @set-syscal-description.window="description = $event.detail"\n @set-syscal-height.window="height = $event.detail"\n @set-syscal-is-area-checked.window="isAreaChecked = $event.detail"\n @set-syscal-measure-unit.window="unit = $event.detail"\n @set-syscal-selected-parts.window="products = $event.detail"\n @set-syscal-variant.window="variant = $event.detail"\n @set-syscal-waste.window="waste = $event.detail"\n @set-syscal-width.window="width = $event.detail"\n @set-syscal-calculation-total-price.window="calculationTotalPrice = $event.detail"\n >\n \n<form class="o-form">\n <div class="o-form__inner">\n <div class="o-field o-field--mw-420 u-margin-bottom">\n <label for="calcName" class="o-field__label" x-text="labels?.calculationName"></label>\n <input type="text" id="calcName" class="o-field__input" x-bind:placeholder="labels?.calculationNamePlaceholder"\n x-model="calculationName" x-on:keyup="checkEnableSaveButton()"/>\n </div>\n </div>\n <div class="o-form__label u-margin-bottom-small" x-text="labels?.whereToSave"></div>\n <template x-if="projectsEnabled">\n <fieldset class="o-form__fieldset o-form__fieldset--border">\n <legend class="u-sr" x-text="labels?.project">></legend>\n <div class="o-form__fieldset-inner">\n <div class="o-field o-field--checkbox o-field--checkbox-check">\n <input type="checkbox" name="ProjectAccount" id="ProjectAccount" class="o-field__input"\n x-on:change="checkEnableSaveButton()" x-model="saveToProject" />\n <label for="ProjectAccount" class="o-field__label" x-text="labels?.projectSubTitle"></label>\n <div class="o-field__tooltip" data-position="right" data-max-width="320px" data-theme="c-tippy-light"\n data-tippy-size="jumbo" data-tooltip-mobile="true" data-component-class="Tooltip" role="button"\n aria-label="more info">\n <svg class="c-svg" width="17" height="17" role="img" focusable="false">\n <use\n xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline">\n </use>\n </svg>\n <span class="c-tooltip__content js-tooltip-content" x-text="labels?.projectToolTip"></span>\n </div>\n </div>\n <div class="o-field o-field--select" x-show="saveToProject">\n <label class="o-field__label" for="project" x-text="labels?.project"></label>\n <div class="o-field__inner">\n <select id="project" x-model="selectedProject" x-on:change="checkEnableSaveButton()">\n <option selected disabled value="" x-text="labels?.projectPlaceHolder"></option>\n <template x-for="project in projects" :key="project.Identifier">\n <option x-bind:value="project.Identifier" x-text="project.Name"></option>\n </template>\n </select>\n </div>\n </div>\n <div>\n <button class="c-btn c-btn--link js-create-project-btn" type="button" id="systemCalcSaveContent" data-a11y-dialog-show="modal-createProjects">\n <span class="c-btn__icon"><svg class="c-svg" width="22" height="24">\n <use\n xlink:href="/etex/images/svg/svg-symbols.svg#icon_create">\n </use>\n </svg></span>\n <span class="c-btn__label" x-text="labels?.createProject"></span>\n </button>\n </div>\n </div>\n </fieldset>\n </template>\n <template x-if="favoritesEnabled">\n <fieldset class="o-form__fieldset o-form__fieldset--border">\n <legend class="u-sr" x-text="labels?.favorites"></legend>\n <div class="o-form__fieldset-inner">\n <div class="o-field o-field--checkbox o-field--checkbox-check">\n <input type="checkbox" name="Favorites" id="Favorites" class="o-field__input"\n x-on:change="checkEnableSaveButton()" x-model="saveToFavorites" />\n <label for="Favorites" class="o-field__label" x-text="labels?.favorites"></label>\n <div class="o-field__tooltip" data-position="right" data-max-width="320px" data-theme="c-tippy-light"\n data-tippy-size="jumbo" data-tooltip-mobile="true" data-component-class="Tooltip" role="button"\n aria-label="more info">\n <svg class="c-svg" width="17" height="17" role="img" focusable="false">\n <use\n xlink:href="/etex/images/svg/svg-symbols.svg#icon_info-outline">\n </use>\n </svg>
1\n <span class="c-tooltip__content js-tooltip-content" x-text="labels?.favoritesToolTip"></span>\n </div>\n </div>\n </div>\n </fieldset>\n </template>\n</form>\n\n </div>\n '}reset(){this.alpineInstance.saveToProject=!1,this.alpineInstance.selectedProject="",this.alpineInstance.saveToFavorites=!1}checkEnableSaveButton(){null!=this.alpineInstance.calculationName&&""!==this.alpineInstance.calculationName.trim()&&(!this.alpineInstance.saveToProject||this.alpineInstance.selectedProject)&&(this.alpineInstance.saveToProject&&this.alpineInstance.selectedProject||this.alpineInstance.saveToFavorites)?this.handler.disableNextButton(!1):this.handler.disableNextButton(!0)}getDataImplement(){return{category:this.category,systemId:this.systemId,systemTitle:this.systemTitle,systemImageUrl:this.systemImageUrl,stepType:this.stepType,shouldBeShown:this.shouldBeShown,labels:this.stepData.labels,showStep:()=>this.showStep(),hideStep:()=>this.hideStep(),renderPreStepHtml:()=>this.renderPreStepHtml(),renderStep:()=>this.renderStep(),reset:()=>this.reset(),projects:this.projects,selectedProject:this.selectedProject,projectsEnabled:this.stepData.projectsEnabled,favoritesEnabled:this.stepData.favoritesEnabled,calculationName:"",products:[],variant:null,hideVariantInformation:this.hideVariantInformation,saveToProject:!1,saveToFavorites:!1,checkEnableSaveButton:()=>this.checkEnableSaveButton(),calculationTotalPrice:0,description:null,area:null,waste:null,unit:null,height:null,width:null}}initProjectData(){var t=new v.o("/api/reporter-app/fireprotectionprojects/current",null,!1);t.method="GET",this.brandContext&&(t.headers={"x-brand":this.brandContext}),this.ajaxWrapper.doFetch(t).then((t=>{t.clone().json().then((t=>{this.alpineInstance.projects=t}))}))}saveCalculation(){var t=new(g())(this.stepData.saveUrl),e={type:this.alpineInstance.category,description:this.alpineInstance.description,waste:this.alpineInstance.waste.toString(),area:this.alpineInstance.area,height:this.alpineInstance.height,width:this.alpineInstance.width,carbonImpact:this.alpineInstance.variant.carbonImpact,carbonImpactUnit:this.alpineInstance.variant.carbonImpactUnit,unit:this.alpineInstance.unit,configuration:this.alpineInstance.variant.name,systemName:this.alpineInstance.systemTitle,products:this.alpineInstance.products,currencySymbol:null,totalPrice:null,hideVariantInformation:this.hideVariantInformation};this.showPricingInformation&&(e.totalPrice=this.alpineInstance.calculationTotalPrice,e.currencySymbol=this.currencySymbol);var n={calculationName:this.alpineInstance.calculationName,system:this.alpineInstance.systemId,variant:this.alpineInstance.variant.id,products:this.alpineInstance.products.map((t=>{let{id:e}=t;return e})),data:e,projectIdentifier:this.alpineInstance.saveToProject?this.alpineInstance.selectedProject:null,saveToFavorites:this.alpineInstance.saveToFavorites},a=new v.o(t.toString(),n,!1);this.handler.showSpinner(),this.ajaxWrapper.doFetch(a).then((t=>{200===t.status&&t.clone().text().then((t=>{this.handleConfirmSavedModal(t)}))})).finally((()=>{this.handler.hideSpinner()}))}handleConfirmSavedModal(t){this.confirmSavedDialogElement.innerHTML=t,this.confirmSavedDialog?this.confirmSavedDialog.reInit():this.confirmSavedDialog=new C.Vq(this.confirmSavedDialogElement),this.confirmSavedDialog.show(),this.handler.modal.hideModal()}bindCreateProject(){const t=this.element.querySelector(T);t&&(t.addEventListener("click",(()=>{const t=document.querySelector(A);if(this.createProjectDialog){let e=this.createProjectDialog.destroy();this.createProjectDialog=e.create(t)}else this.createProjectDialog=new D.Z(t);this.createProjectDialog.show()})),window.addEventListener("ProjectCreated",(t=>{const e=t.detail;var n=new H(e);this.createProjectDialog&&this.createProjectDialog.hide(),this.alpineInstance.projects.push(n),this.alpineInstance.selectedProject=n.identifier,this.alpineInstance.saveToProject=!0,this.alpineInstance.checkEnableSaveButton()})),window.addEventListener("ProjectCreateCancelled",(t=>{this.createProjectDialog&&this.createProjectDialog.hide()})))}}class H{constructor(t){this.Identifier=t.identifier,this.identifier=t.identifier,this.Name=t.name,this.name=t.name}}class k extends s.y{constructor(t,e){super(t,e),this.currentStep=1,this.resultsUrl="/",this.breadCrumbs=[],this.allSteps=[],this.modalName=t,this.isAdaptConfigShow=!1}initAlpine(t,e,n){super.initAlpine(t,e),this.totalSteps=n.totalStep,this.breadCrumbs=n.breadcrumbs,this.category=n.category,this.systemId=n.systemId,this.systemTitle=n.systemTitle,this.systemImageUrl=n.systemImageUrl,this.brandContext=n.brandContext,this.showPricingInformation=n.showPricingInformation,this.currencySymbol=n.currencySymbol,this.isoCurrencySymbol=n.isoCurrencySymbol,this.cultureName=n.cultureName,this.hideVariantInformation=n.hideVariantInformation,this.modifyModalTotalSteps(this.totalSteps),this.modifyModalBreadCrumbs(this.breadCrumbs),this.modifyHideStepLabelsMobile(!1),this.modifyNextButtonType("Chevron"),this.initSteps(n.allSteps),this.modifyModalProgressBar()}initSteps(t){let e=this.currentStep;t.forEach((t=>{let n=this.determineStepType(t,e);this.renderStep(n),this.allSteps.push(n),e++}))}renderStep(t){this.stepContainer.insertAdjacentHTML("beforeend",t.renderPreStepHtml())}submitStep(){if(this.isAdaptConfigShow)return l().publish(d.ShowAdaptConfig,!1),void b.ZP.onSingleCalculationInteraction({eventAction:"customize_apply",eventLabel:"N/A"});let t=this.allSteps[this.currentStep-1];t.stepType===r.CalculationConfigurationStep&&l().publish(d.SubmitCalculationConfiguration),t.stepType===r.ProductsCalculationStep&&this.goToNextStep(),t.stepType===r.CalculationOverviewStep&&(this.currentStep==this.totalSteps?l().publish(d.SubmitDownload):(this.goToNextStep(),b.ZP.onSingleCalculationInteraction({eventAction:"save_calculation",eventLabel:"overview"}
1))),t.stepType===r.SaveCalculationStep&&(l().publish(d.SaveCalculation),b.ZP.onSingleCalculationInteraction({eventAction:"save_calculation",eventLabel:"confirm"}))}goToNextStep(){let t=this.allSteps[this.currentStep-1];this.currentStep+1>this.totalSteps||(t.hideStep(),this.currentStep++,t=this.allSteps[this.currentStep-1],t.showStep(),this.modifyModalCurrentStep(this.currentStep),this.modifyModalProgressBar(),b.ZP.onSingleCalculationInteraction({eventAction:"next_step",eventLabel:this.breadCrumbs[this.breadCrumbs.length-1]}))}loadStep(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.allSteps[this.currentStep-1];n.hideStep(),this.currentStep=t+1,n=this.allSteps[t],n.showStep(),this.modifyModalCurrentStep(this.currentStep),this.modifyModalProgressBar(),e||b.ZP.onSingleCalculationInteraction({eventAction:"go_back",eventLabel:this.breadCrumbs[this.breadCrumbs.length-1]})}determineStepType(t,e){let n=e===this.currentStep;return t.type===r.CalculationConfigurationStep?new y(this,t,e,n,this.category,this.systemId,this.systemTitle,this.systemImageUrl,this.showPricingInformation,this.currencySymbol,this.isoCurrencySymbol,this.cultureName,this.hideVariantInformation):t.type===r.ProductsCalculationStep?new x(this,t,e,n,this.category,this.systemId,this.systemTitle,this.systemImageUrl,this.showPricingInformation,this.currencySymbol,this.isoCurrencySymbol,this.cultureName,this.hideVariantInformation):t.type===r.CalculationOverviewStep?new S(this,t,e,n,this.category,this.systemId,this.systemTitle,this.systemImageUrl,this.showPricingInformation,this.currencySymbol,this.isoCurrencySymbol,this.cultureName,this.hideVariantInformation):t.type===r.SaveCalculationStep?new E(this,t,e,n,this.category,this.systemId,this.systemTitle,this.systemImageUrl,this.brandContext,this.showPricingInformation,this.currencySymbol,this.isoCurrencySymbol,this.cultureName,this.hideVariantInformation):null}submitAction(){let t=this.allSteps[this.currentStep-1];t.stepType===r.CalculationConfigurationStep&&(l().publish(d.ShowAdaptConfig,!1),b.ZP.onSingleCalculationInteraction({eventAction:"customise_cancel",eventLabel:"N/A"})),t.stepType===r.CalculationOverviewStep&&l().publish(d.SubmitDownload)}reset(){this.allSteps.forEach((t=>{t.reset()})),this.loadStep(0,!0),this.modifyNextButtonType("Chevron"),b.ZP.onSingleCalculationInteraction({eventLabel:"single system",eventAction:"close"})}}class V extends a.V{constructor(t,e){super(),this.modalName=t,this.modal=e}onInit(){this.stepHandler.initAlpine(this.getXref("StepContainer"),this.ajaxWrapper,this.parm)}getDataImplement(){return this.stepHandler=new k(this.modalName,this.modal),{stepHandler:this.stepHandler}}}},26070:function(t,e,n){n.d(e,{y:function(){return l}});var a=n(70392),s=n.n(a),i=n(87644);class l{constructor(t,e){this.disableNextButton=t=>{this.modal.stepHandler.disableNextButton(t)},this.buildEventName=t=>`${this.modalName}:${t}`,this.modalName=t,this.modal=e}initAlpine(t,e,n){this.ajaxWrapper=e,this.stepContainer=t,s().subscribe(this.buildEventName(i._.LoadStep),((t,e)=>{this.loadStep(e)})),s().subscribe(this.buildEventName(i._.SubmitStep),(()=>{this.submitStep(),this.modal.stepHandler.submitStep})),s().subscribe(this.buildEventName(i._.ActionButtonClicked),(()=>{this.submitAction()})),s().subscribe(this.buildEventName(i._.Reset),(()=>{this.reset()}))}modifyModalHeaderData(t){this.modal.stepHandler.modifyHeaderData(t)}modifyModalProgressBar(){this.modal.stepHandler.modifyProgressBar()}modifyModalCurrentStep(t){this.modal.stepHandler.modifyCurrentStep(t)}modifyCurrentStepLabel(t){this.modal.stepHandler.modifyCurrentStepLabel(t)}modifyModalTotalSteps(t){this.modal.stepHandler.modifyTotalSteps(t)}modifyModalBreadCrumbs(t){this.modal.stepHandler.modifyBreadCrumbs(t)}modifyNextButton(t){this.modal.stepHandler.modifyNextButton(t)}modifyNextButtonLabel(t){this.modal.stepHandler.modifyNextButtonLabel(t)}modifyNextButtonType(t){this.modal.stepHandler.modifyNextButtonType(t)}modifyBackButtonLabel(t){this.modal.stepHandler.modifyBackButtonLabel(t)}modifyActionButton(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;this.modal.stepHandler.modifyActionButton(t,e,n)}modifyHideStepLabelsMobile(t){this.modal.stepHandler.modifyHideStepLabelsMobile(t)}showSpinner(){this.modal.showSpinner()}hideSpinner(){this.modal.hideSpinner()}}},87644:function(t,e,n){n.d(e,{_:function(){return a}});class a{}a.LoadStep="ProgressModalLoadStep",a.SubmitStep="ProgressModalSubmitStep",a.ActionButtonClicked="ProgressModalActionButtonClicked",a.Reset="ProgressModalReset"},83491:function(t,e,n){n.d(e,{E:function(){return i}});var a=n(47277),s=n.n(a);class i{constructor(t){this.rawResponse=t,this.response=s()(t)}getComponentUpdate(t){var e=this.response.filter("[data-component="+t+"]");return e.length?{content:e.html().trim(),json:s().parseJSON(e.find("script[type='json']")[0].innerHTML)}:null}getChildComponentUpdate(t){var e=this.response.find("[data-component="+t+"]");return e.length?{content:e[0].innerHTML,json:s().parseJSON(this.response.find("script")[0].innerHTML)}:null}}},66721:function(t,e,n){n.d(e,{m:function(){return i}});var a=n(79234),s=n(68442);class i{constructor(){this.importAndCompInitter=s.Z.getInstance()}
1getData(){const t=this,e={init(){t.alpineInstance=this,t.element=this.$root,t.refs=this.$refs,t.dispatch=this.$dispatch,t.watch=this.$watch,t.nextTick=this.$nextTick,t.ajaxWrapper=new a.F(this.$root,!0),t.initParm(),t.onInit()}},n=this.getDataImplement();return Object.assign(e,n)}getXref(t){return this.refs[t]}dispatchEvent(t,e){this.dispatch(t,e)}watchProp(t,e){this.watch(t,e)}onNextTick(t){this.nextTick(t)}initParm(){}reInitCompsOnDomChangeFor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.element,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=new MutationObserver((a=>{this.importAndCompInitter.initAllPossibleCompsForContainer(t),e&&n.disconnect()}));n.observe(t,{childList:!0,subtree:!0})}}},2272:function(t,e,n){n.d(e,{V:function(){return s}});var a=n(66721);class s extends a.m{constructor(){super()}initParm(){this.parm=this.getClientData()}getClientData(){var t=this.element.attributes[s.CLIENT_DATA_ATTRIBUTE],e=null;if(t)try{e=JSON.parse(t.value)}catch(n){e=t}return e}}s.CLIENT_DATA_ATTRIBUTE="data-component-parm"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.