{"version":3,"file":"index.3601b967.js","sources":["../../../../composables/crg_helper.ts","../../../../components/chemical-resistance-guide/CRGuideWrapper.vue","../../../../pages/chemical-resistance-guide/index.vue"],"sourcesContent":["export const useChemicalResistanceGuideHelper = () => {\n  const getHtml = (lang: string = 'en'): string => {\n    if (lang === 'de') {\n      return html('de')\n    }\n    return html('en')\n  }\n\n  return {\n    getHtml\n  }\n}\n\nconst html = (lang: string): string => {\n  return `\n<div id=\"fstApp\" class=\"wrapper\">\n<link rel=\"stylesheet\" href=\"https://fst-resistanceguide.azurewebsites.net/css/style.css?v=1.03\" />\n<div vue=\"app\" data-locale=\"${lang}\">\n    <crguide class=\"crguide fb-tool\" v-cloak inline-template\n        getmaterial-api=\"https://fst-resistanceguide.azurewebsites.net/api/Material/Get\"\n        getmedia-api=\"https://fst-resistanceguide.azurewebsites.net/api/Medium/Get\"\n        getreactions-api=\"https://fst-resistanceguide.azurewebsites.net/api/MaterialReactions/GetMaterialReactions\"\n        contactrequesturl=\"https://resistanceguide.fst.com/en/contact\"\n    >\n        <div>\n            <div class=\"fb-tool__selection\">\n\n                <div class=\"fb-tool__selection__selector fb-tool__selection__selector--media crguide__selection__selector--media\">\n                    <div class=\"fb-tool__selection__selector__header\">\n                        <h2>{{ $t(\"message.selectMedium\") }}</h2>\n                        <button class=\"btn btn--secondary cs-button cs-button--image\" v-on:click.prevent=\"toggleMediaSelectionViewMobile\">\n                        </button>\n                    </div>\n\n                    <ul v-cloak class=\"fb-tool__selection__taglist cs-taglist block md:hidden\" v-show=\"selectedMediaIds.length > 0\">\n                        <li v-for=\"medium in media\" :key=\"medium.MediumId\" v-if=\"medium.Selected === true\">\n                            <span class=\"tag\" v-on:click=\"medium.Selected = false\">\n                                {{medium.MediumName}}&nbsp;&times;\n                            </span>\n                        </li>\n                        <li class=\"cs-taglist__action\" v-show=\"selectedMediaIds.length > 0\"><a href=\"#\" v-on:click.prevent=\"deselectMedia\">{{ $t(\"message.clearAll\") }}</a></li>\n                    </ul>\n\n                    <div class=\"fb-tool__modalcontainer\" v-bind:class=\"{ 'fb-tool__modalcontainer--show' : showMediaSelectionMobile}\">\n                        <div class=\"fb-tool__selection__body\">\n                            <div class=\"fb-tool__selection__body__top\">\n                                <span>{{ $t(\"message.selectMedium\") }}</span>\n                                <div class=\"searchbox-wrapper\">\n                                    <div class=\"fb-tool__action__search search\">\n                                        <input type=\"text\" v-bind:placeholder=\"$t('message.search') + '&hellip;'\" v-model=\"mediumSearch\">\n\n                                    </div>\n                                </div>\n                            </div>\n\n                            <ul class=\"fb-tool__selection__body__taglist cs-taglist\">\n                                <li v-for=\"medium in media\" :key=\"medium.MediumId\" v-if=\"medium.Selected === true\">\n                                    <span class=\"tag\" v-on:click=\"medium.Selected = false\">\n                                        {{medium.MediumName}}&nbsp;&times;\n                                    </span>\n                                </li>\n                                <li class=\"cs-taglist__action hidden md:block\"><a href=\"#\" v-on:click.prevent=\"deselectMedia\">{{ $t(\"message.deselectAll\") }}</a></li>\n                            </ul>\n\n                            <ul class=\"fb-tool__selection__body__list selectList\">\n                                <li v-for=\"filteredMedium in filteredMedia\" :key=\"filteredMedium.MediumId\" v-bind:class=\"{ 'selected' : filteredMedium.Selected}\">\n                                    <label>\n                                        <input type=\"checkbox\" v-model=\"filteredMedium.Selected\">\n                                        <span>{{filteredMedium.MediumName}}</span>\n                                    </label>\n                                </li>\n                            </ul>\n                            <div class=\"fb-tool__selection__body__action block md:hidden\">\n                                <button v-on:click.prevent=\"toggleMediaSelectionViewMobile\">{{ $t(\"message.apply\") }}</button>\n                                <a href=\"#\" v-on:click.prevent=\"deselectMedia\" v-bind:class=\"{ 'disabled' : selectedMediaIds.length === 0}\">{{ $t(\"message.deselectAll\") }}</a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"fb-tool__selection__selector fb-tool__selection__selector--material crguide__selection__selector--material\">\n                    <div class=\"fb-tool__selection__selector__header\">\n                        <h2>{{ $t(\"message.selectMaterial\") }}</h2>\n                        <button class=\"btn btn--secondary cs-button cs-button--image\" v-on:click.prevent=\"toggleMaterialSelectionViewMobile\">\n                        </button>\n                    </div>\n\n                    <ul v-cloak class=\"fb-tool__selection__taglist cs-taglist block md:hidden\" v-show=\"selectedMaterialIds.length > 0\">\n                        <li v-for=\"material in materials\" :key=\"material.MaterialId\" v-if=\"material.Selected === true\">\n                            <span class=\"tag\" v-on:click=\"material.Selected = false\">\n                                {{material.MaterialShortName}}&nbsp;&times;\n                            </span>\n                        </li>\n                        <li class=\"cs-taglist__action\" v-show=\"selectedMaterialIds.length > 0\"><a href=\"#\" v-on:click.prevent=\"deselectMaterial\">{{ $t(\"message.deselectAll\") }}</a></li>\n                    </ul>\n\n                    <div class=\"fb-tool__modalcontainer\" v-bind:class=\"{ 'fb-tool__modalcontainer--show' : showMaterialSelectionMobile}\">\n                        <div class=\"fb-tool__selection__body\">\n                            <div class=\"fb-tool__selection__body__top\">\n                                <span>{{ $t(\"message.selectMaterial\") }}</span>\n                            </div>\n                            <ul class=\"fb-tool__selection__body__taglist cs-taglist\">\n                                <li v-for=\"material in materials\" :key=\"material.MaterialId\" v-if=\"material.Selected === true\">\n                                    <span class=\"tag\" v-on:click=\"material.Selected = false\">\n                                        {{material.MaterialShortName}}&nbsp;&times;\n                                    </span>\n                                </li>\n                                <li class=\"cs-taglist__action hidden md:block\"><a href=\"#\" v-on:click.prevent=\"toggleSelectMaterials\">{{ $t(\"message.selectOrDeselectAll\") }}</a></li>\n                            </ul>\n\n                            <ul class=\"fb-tool__selection__body__list selectList\">\n                                <li v-for=\"material in materials\" :key=\"material.MaterialId\"  v-bind:class=\"{ 'selected' : material.Selected}\">\n                                    <label>\n                                        <input type=\"checkbox\" v-model=\"material.Selected\">\n                                        <span><b>{{material.MaterialShortName}}</b> {{material.MaterialName}}</span>\n                                    </label>\n                                </li>\n                            </ul>\n                            <div class=\"fb-tool__selection__body__action block md:hidden\">\n                                <button v-on:click.prevent=\"toggleMaterialSelectionViewMobile\">{{ $t(\"message.apply\") }}</button>\n                                <a href=\"#\" v-on:click.prevent=\"toggleSelectMaterials\">{{ $t(\"message.selectOrDeselectAll\") }}</a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"fb-tool__result\">\n                <h3>{{ $t(\"message.yourRequest\") }}</h3>\n                <div class=\"fb-tool__result__wrapper\">\n                    <table class=\"fb-tool__result__table\">\n                        <thead>\n\n                            <tr>\n                                <th class=\"column--fixed\">{{ $t(\"message.medium\") }}</th>\n                                <th class=\"column--small\">°C</th>\n                                <th v-for=\"mfrId in materialsFromReactions\" :key=\"mfrId\">\n                                    {{getMaterialById(mfrId).MaterialShortName}}\n                                </th>\n                            </tr>\n\n                        </thead>\n\n                        <tbody>\n\n                            <tr v-for=\"react in reactions\" :key=\"react.MaterialReactionId\">\n                                <td class=\"column--fixed\" v-bind:data-mediumid=\"react.MediumId\">{{getMediumById(react.MediumId).MediumName}}</td>\n                                <td class=\"column--small\">{{react.Temperature}}</td>\n                                <td v-for=\"mr in react.MaterialReactions\" :key=\"mr.MaterialId\">\n                                    <reaction-label\n                                        v-bind:reaction-type=\"mr.Reaction\"\n                                        v-on:mouseenter.native=\"onReactionLabelMouseEnter(mr.Reaction, $event)\"\n                                        v-on:mouseleave.native=\"onReactionLabelMouseLeave($event)\"\n                                        ></reaction-label>\n                                </td>\n                            </tr>\n\n                        </tbody>\n                    </table>\n\n                </div>\n                <div class=\"fb-tool__result__message\" v-show=\"selectedReactionType !== 0\">\n                    <reaction-hint v-bind:reaction-type=\"selectedReactionType\" v-on:close=\"closeReactionHint\">\n                        <div class=\"cs-alignRight cs-mt10\">\n                            <a class=\"btn btn--secondary cs-button cs-inlineBlock\" href=\"#\" v-on:click.prevent=\"sendContactRequest\">{{ $t(\"message.contactUs\") }}</a>\n                        </div>\n                    </reaction-hint>\n                </div>\n            </div>\n\n            <tool-legend/>\n        </div>\n    </crguide>\n</div>\n</div>\n`\n}\n","<template>\n  <div\n    class=\"crg-container\"\n    ref=\"crgContainer\"\n  />\n</template>\n\n<script setup>\nimport {useChemicalResistanceGuideHelper} from '~/composables/crg_helper.ts'\nconst {getHtml} = useChemicalResistanceGuideHelper()\n\nconst i18n = useI18n()\nconst crgContainer = ref(null)\n\nonMounted(async () => {\n  crgContainer.value.innerHTML = getHtml(i18n.locale.value)\n  await loadScript('https://fst-resistanceguide.azurewebsites.net/js/main.js?v=1.0.2')\n})\n\nconst loadScript = (src) => {\n  return new Promise((resolve, reject) => {\n    const script = document.createElement('script')\n    script.src = src\n    script.onload = resolve\n    script.onerror = reject\n    document.head.appendChild(script)\n  })\n}\n</script>\n\n<style lang=\"scss\">\n@import \"@/assets/scss/components/chemical-resistance-guide\";\n</style>\n","<template>\n  <div class=\"chemical-resistance-guide\">\n    <div class=\"chemical-resistance-guide__headline\">\n      {{ i18n.tv('headline', 'chemicalResistanceGuide') }}\n    </div>\n    <div class=\"chemical-resistance-guide__sub-headline\">\n      {{ i18n.tv('subHeadline', 'chemicalResistanceGuide') }}\n    </div>\n    <div class=\"chemical-resistance-guide__text\">\n      <Markdown :text=\"i18n.tv('text', 'chemicalResistanceGuide')\" />\n    </div>\n    <div class=\"chemical-resistance-guide__content\">\n      <CRGuideWrapper />\n    </div>\n    <div class=\"chemical-resistance-guide__footer\">\n      {{ i18n.tv('footer', 'chemicalResistanceGuide') }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport CRGuideWrapper from '~/components/chemical-resistance-guide/CRGuideWrapper.vue'\nimport useI18nExtended from '~/composables/usei18nExtended'\nimport useBreadcrumb from '~/composables/useBreadcrumb'\nconst i18n = useI18nExtended()\nuseBreadcrumb([\n  {\n    label: i18n.tv('title', 'chemicalResistanceGuide'),\n    path: '/chemical-resistance-guide'\n  }\n])\n</script>\n\n<style lang=\"scss\">\n.chemical-resistance-guide {\n  padding: 2rem 2rem 12.5rem;\n\n  &__headline {\n    font-size: 2.25rem;\n    color: $color__primary;\n    margin-bottom: 1rem;\n  }\n\n  &__sub-headline {\n    font-size: 1.375rem;\n    margin-bottom: 1rem;\n  }\n\n  &__text {\n    font-size: 0.938rem;\n    font-weight: normal;\n    margin-bottom: 1rem;\n  }\n\n  &__content {\n    padding: 1rem 2rem;\n  }\n\n  &__footer {\n    font-size: 0.938rem;\n    font-weight: normal;\n    border-top: .0625rem solid $color__primary;\n    margin-bottom: 1rem;\n    padding-top: 1rem;\n    margin-top: 1rem;\n  }\n}\n</style>\n"],"names":["useChemicalResistanceGuideHelper","lang","html","getHtml","i18n","useI18n","crgContainer","ref","onMounted","loadScript","src","resolve","reject","script","useI18nExtended","useBreadcrumb"],"mappings":"iRAAO,MAAMA,EAAmC,KAQvC,CACL,QARc,CAACC,EAAe,OAErBC,EADLD,IAAS,KACC,KAEF,IAFM,CAMlB,GAIEC,EAAQD,GACL;AAAA;AAAA;AAAA,8BAGqBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;4CCR9B,KAAM,CAAC,QAAAE,CAAO,EAAIH,EAAiC,EAE7CI,EAAOC,EAAQ,EACfC,EAAeC,EAAI,IAAI,EAE7BC,EAAU,SAAY,CACpBF,EAAa,MAAM,UAAYH,EAAQC,EAAK,OAAO,KAAK,EACxD,MAAMK,EAAW,kEAAkE,CACrF,CAAC,EAED,MAAMA,EAAcC,GACX,IAAI,QAAQ,CAACC,EAASC,IAAW,CACtC,MAAMC,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,IAAMH,EACbG,EAAO,OAASF,EAChBE,EAAO,QAAUD,EACjB,SAAS,KAAK,YAAYC,CAAM,CACpC,CAAG,kZCFH,MAAMT,EAAOU,IACC,OAAAC,EAAA,CACZ,CACE,MAAOX,EAAK,GAAG,QAAS,yBAAyB,EACjD,KAAM,4BACR,CAAA,CACD"}