{"version":3,"file":"CAbEgi8O.js","sources":["../../../../../../../app/services/calc-service.ts","../../../../../../../app/constants/calculator.ts","../../../../../../../app/pages/steel-coverage-calculator.vue"],"sourcesContent":["import { post } from \"./api-client\";\r\nimport type { Types, MemberList, MemberInfo } from '@/types/models/store/estimation-view-model';\r\n\r\nexport default class CalcService {\r\n    estimatorBaseUrl = '';\r\n\r\n    constructor(estimatorUrl: string) {\r\n        this.estimatorBaseUrl = estimatorUrl;\r\n    }\r\n\r\n    async getTypes() {\r\n        return post<Types>(`${this.estimatorBaseUrl}/data/listtypes`);\r\n    }\r\n\r\n    async getMembersList(additionalValue: number) {\r\n        return post<MemberList>(`${this.estimatorBaseUrl}/data/listmembers`, { \"Shape\": additionalValue });\r\n    }\r\n\r\n    async getMember(memberId: number, typeId: number, sides: number) {\r\n        return post<MemberInfo>(`${this.estimatorBaseUrl}/data/memberinfo`, {\r\n            \"MemberId\": memberId,\r\n            \"TypeId\": typeId,\r\n            \"Sides\": sides\r\n        });\r\n    }\r\n}","export const EstimatorBaseURL = 'https://estimateservice.flameoffcoatings.com';\r\n\r\nexport enum MemberType {\r\n    Columns = 1,\r\n    BeamsRestrained = 2,\r\n    BeamsUnrestrained = 3,\r\n    Tees = 4,\r\n    Channels = 5,\r\n    HSSRound = 6,\r\n    HSSSquare = 7,\r\n    HSSRectangular = 8,\r\n    EqualAngles = 9,\r\n    UnequalAngles = 10,\r\n    Pipes = 11,\r\n    VariableCrossSectionColumn = 12,\r\n    VariableCrossSectionBeam = 13\r\n}\r\n\r\nexport enum Exposure {\r\n    ThreeSidedColumns = 3,\r\n    FourSidedColumns = 4\r\n}","<template>\r\n    <div class=\"container\">\r\n        <div class=\"section-header calculator\">\r\n            <div class=\"section-text h1\">Steel Coverage Calculator</div>\r\n        </div>\r\n\r\n        <div id=\"calculator\" class=\"calculator\">\r\n            <div v-if=\"isLoadedMembersList\">\r\n                <BNav tabs class=\"nav-tabs-generic nav-tabs-sticky\">\r\n                    <BNavItem v-for=\"(type, index) in memberTypeList\" :class=\"showSelectedMember(type.Key)\" @click.prevent=\"initMembersListData(type.Key)\" :key=\"`key_${index}`\" href=\"#sizes-and-result\">\r\n                        <nuxt-icon class=\"icon\" v-if=\"isColumn(type.Key)\" name=\"wcolumnFilled\" alt=\"\" height=\"18\" width=\"18\" />\r\n                        <nuxt-icon class=\"icon\" v-if=\"isRound(type.Key)\" name=\"roundFilled\" alt=\"\" height=\"18\" width=\"18\" />\r\n                        <nuxt-icon class=\"icon\" v-if=\"isSquare(type.Key)\" name=\"squareFilled\" alt=\"\" height=\"18\" width=\"18\" />\r\n                        <nuxt-icon class=\"icon\" v-if=\"isRectangle(type.Key)\" name=\"rectangleFilled\" alt=\"\" height=\"18\" width=\"18\" />\r\n                        <nuxt-icon class=\"icon\" v-if=\"isChannel(type.Key)\" name=\"channelFilled\" alt=\"\" height=\"18\" width=\"18\" />\r\n                        <nuxt-icon class=\"icon\" v-if=\"isAngle(type.Key)\" name=\"anglesFilled\" alt=\"\" height=\"18\" width=\"18\" />\r\n                        <span class=\"title\">{{ type.Title }}</span>\r\n                    </BNavItem>\r\n                </BNav>\r\n\r\n                <div role=\"tabpanel\" class=\"tab-pane\" id=\"sizes-and-result\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-6\">\r\n                            <div class=\"sizes\">\r\n                                <h2>Sizes</h2>\r\n                                <ul class=\"columns\">\r\n                                    <li :class=\"{ active: member.MemberId === selectedMemberId }\" v-for=\"member in memberListPage\" :key=\"member.MemberId\">\r\n                                        <a href=\"#\" @click.prevent=\"initMemberId(member.MemberId)\">{{ member.Designation }}</a>\r\n                                    </li>\r\n                                </ul>\r\n                                <div class=\"d-flex justify-content-center mt-5\">\r\n                                    <BPagination v-model=\"currentPage\"\r\n                                                 :total-rows=\"membersList.length\"\r\n                                                 :per-page=\"defaultPageSize\"\r\n                                                 :hide-goto-end-buttons=\"true\"\r\n                                                 :hide-ellipsis=\"true\" />\r\n                                </div>\r\n                                <div v-if=\"isRound(selectedMemberType)\" class=\"round-info mb-3\">0.625 = 5/8, 0.500 = 1/2, 0.375 = 3/8, 0.313 = 5/16, 0.250 = 1/4, 0.188 = 3/16, 0.125 = 1/8</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-lg-6\">\r\n                            <div class=\"result\">\r\n                                <h2>Results <span class=\"small-header\" v-show=\"showResults\">({{ designation }})</span></h2>\r\n                                <div class=\"top-section\">\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-6\">\r\n                                            <div :class=\"iconClass()\">\r\n                                                <nuxt-icon class=\"icon\" v-show=\"isColumn(memberTypeId)\" name=\"wcolumn\" height=\"215\" width=\"215\" filled />\r\n                                                <nuxt-icon class=\"icon\" v-show=\"isRound(memberTypeId)\" name=\"round\" height=\"215\" width=\"215\" filled />\r\n                                                <nuxt-icon class=\"icon\" v-show=\"isSquare(memberTypeId)\" name=\"square\" height=\"215\" width=\"215\" filled />\r\n                                                <nuxt-icon class=\"icon\" v-show=\"isRectangle(memberTypeId)\" name=\"rectangle\" height=\"215\" width=\"215\" filled />\r\n                                                <nuxt-icon class=\"icon\" v-show=\"isChannel(memberTypeId)\" name=\"channel\" height=\"215\" width=\"215\" filled />\r\n                                                <nuxt-icon class=\"icon\" v-show=\"isAngle(memberTypeId)\" name=\"angles\" height=\"215\" width=\"215\" filled />\r\n\r\n                                                <div class=\"metric horizontal width\" v-show=\"wide\"><span title=\"Width\">{{ wide }}</span></div>\r\n                                                <div class=\"metric vertical depth\" v-show=\"depth\"><span title=\"Depth\">{{ depth }}</span></div>\r\n                                                <div class=\"metric vertical thickness thickness-flange\" v-show=\"thicknessFlange\"><span title=\"Flange Thickness\">{{ thicknessFlange }}</span></div>\r\n                                                <div class=\"metric horizontal thickness thickness-web\" v-show=\"thicknessWeb\"><span title=\"Web Thickness\">{{ thicknessWeb }}</span></div>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-6\" v-show=\"showResults\">\r\n                                            <div class=\"data-wrap\">\r\n                                                <span>{{ ratio }}</span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"bottom-section\">\r\n                                    <BTableSimple hover responsive stripped>\r\n                                        <BThead>\r\n                                            <BTr>\r\n                                                <BTh>Fire Rating (min)</BTh>\r\n                                                <BTh>Dry Film Thickness (Mils)</BTh>\r\n                                                <BTh>Gallons / Linear Foot *</BTh>\r\n                                                <BTh>Sq Foot / Gallon</BTh>\r\n                                                <BTh>Number of Coats **</BTh>\r\n                                            </BTr>\r\n                                        </BThead>\r\n                                        <BTbody v-if=\"showResults\">\r\n                                            <BTr v-for=\"r in DFTs\">\r\n                                                <BTd>{{ r.FireRating }}</BTd>\r\n                                                <BTd v-if=\"round(r.Dft) > 0\">{{ round(r.Dft) }}</BTd>\r\n                                                <BTd v-if=\"round(r.Dft) > 0\">{{ round(r.GallonsPerFoot) }}</BTd>\r\n                                                <BTd v-if=\"round(r.Dft) > 0\">{{ round(r.SqFeetPerGallon) }}</BTd>\r\n                                                <BTd v-if=\"round(r.Dft) > 0\">{{ r.NumberOfCoats }}</BTd>\r\n                                                <BTd v-if=\"round(r.Dft) == 0\"></BTd>\r\n                                                <BTd v-if=\"round(r.Dft) == 0\" colspan=\"3\">Not rated</BTd>\r\n                                            </BTr>\r\n                                        </BTbody>\r\n                                        <BTbody v-else>\r\n                                            <BTr>\r\n                                                <BTd colspan=\"5\" class=\"text-center\">Select steel size to show results</BTd>\r\n                                            </BTr>\r\n                                        </BTbody>\r\n                                    </BTableSimple>\r\n\r\n                                    <div class=\"table-th-desc\">\r\n                                        <p>* Volume of product required to cover 1 foot long steel member at specified DFT.</p>\r\n                                        <p>** Based on 35 Mils Wet Film Thickness per coat.</p>\r\n                                    </div>\r\n                                    <ul class=\"list-unstyled list-inline file-section\">\r\n                                        <li class=\"list-inline-item\">\r\n                                            <a href=\"/files/FlameOFF-Submittal-Specification-Steel.pdf\" target=\"_blank\" class=\"file-card\">\r\n                                                <span class=\"title\">Structural Steel Submittal Spec</span>\r\n                                                <span class=\"file-type\">\r\n                                                    <nuxt-icon name=\"pdfFileType\" filled />\r\n                                                </span>\r\n                                            </a>\r\n                                        </li>\r\n                                        <li class=\"list-inline-item\">\r\n                                            <a href=\"/files/FlameOFF-ApplicationGuide.pdf\" target=\"_blank\" class=\"file-card\">\r\n                                                <span class=\"title\">Application Guide</span>\r\n                                                <span class=\"file-type\">\r\n                                                    <nuxt-icon name=\"pdfFileType\" filled />\r\n                                                </span>\r\n                                            </a>\r\n                                        </li>\r\n                                    </ul>\r\n                                    <div class=\"py-4\">\r\n                                        <small>\r\n                                            Don't know what the ASTM sizes of your steel are? Use this helpful\r\n                                            <NuxtLink to=\"/steel-dimensions-table\">steel dimensions table</NuxtLink> to understand the\r\n                                            characteristics of your structural steel.\r\n                                        </small>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"text-center mb-3\" v-else>Please wait, loading data...</div>\r\n        </div>\r\n\r\n        <BAlert variant=\"info\" :model-value=\"true\">\r\n            Please try our Android and iOS version of FlameOFF Estimator, which allows estimating the required volume of Fire Barrier Paint for the whole project rather then for separate structure elements.\r\n            <div class=\"d-flex justify-content-md-center mt-3 flex-column flex-md-row gap-4\">\r\n                <a id=\"play_google_calc\" href=\"https://play.google.com/store/apps/details?id=com.flameoff.estimationV3\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">\r\n                    <NuxtImg src=\"/images/google-play.webp\" alt=\"Google Play\" width=\"193\" height=\"58\" />\r\n                </a>\r\n                <a id=\"apple_apps_calc\" href=\"https://apps.apple.com/us/app/flameoff-estimator/id6467631953\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">\r\n                    <NuxtImg src=\"/images/apple-store.webp\" alt=\"Apple App Store\" width=\"193\" height=\"58\" />\r\n                </a>\r\n            </div>\r\n        </BAlert>\r\n\r\n        <div class=\"section-header calculator\">\r\n            <div class=\"section-text\">Disclaimer</div>\r\n        </div>\r\n\r\n        <div class=\"row\">\r\n            <div class=\"col-12\">\r\n                <p class=\"text-justify h6\">\r\n                    The FlameOff® Steel Coverage Calculator is intended to provide the user with an\r\n                    approximate amount of product needed for a project. Product requirements will\r\n                    vary according to factors such as application method, surface condition, ambient\r\n                    temperature, air humidity and many other factors. Although FlameOff® team is applying\r\n                    the best efforts to provide a reliable and truthful estimation of DFT coverage needed,\r\n                    it should be used as a guide only. The final decision about required DFT, fire ratings\r\n                    needed, and an amount of product required to achieve needed fire protection of your\r\n                    project is made between your Building Official and your Fire Marshall, based on thorough\r\n                    review of FlameOff® Full-Scale Fire Testing reports from Accredited Fire Laboratories,\r\n                    which can be provided to FlameOff® clients on request.\r\n                </p>\r\n                <p class=\"text-justify h6\">\r\n                    All information which you might obtain from this Steel Coverage Calculator is intended for use by you as a\r\n                    guide only, it is not an offer, and has no legal effect on your project. This is estimation only and the resulting\r\n                    calculations do not constitute an offer. The figures and formulae used within this calculator may change at any time without notice.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\n    import { MemberType, Exposure } from '@/constants/calculator';\r\n    import type { MemberTypeList, Member, Dft } from '@/types/models/store/estimation-view-model';\r\n    import { CalcService, settingsService } from '@/services';\r\n\r\n    const currentPage = ref(1);\r\n    const exposure = ref(1);\r\n    const defaultPageSize = ref(75);\r\n    const memberTypeList = ref<MemberTypeList[]>([]);\r\n    const membersList = ref<Member[]>([]);\r\n    const selectedMemberType = ref(MemberType.Columns);\r\n    const selectedMemberTypeName = ref('');\r\n    const selectedExposure = ref(Exposure.FourSidedColumns);\r\n    const selectedMemberId = ref<Nullable<number>>(null);\r\n    const isRestrained = ref(true);\r\n    const isLoadedMembersList = ref(false);\r\n    const showResults = ref(false);\r\n    const ratio = ref('');\r\n    const designation = ref('');\r\n    const memberName = ref('');\r\n    const heatedPerimeter = ref<Nullable<number>>(null);\r\n    const DFTs = ref<Dft[]>([]);\r\n    const memberTypeId = ref(MemberType.Columns);\r\n    const memberId = ref<Nullable<number>>(null);\r\n    const exposureId = ref<Nullable<number>>(null);\r\n    const depth = ref<Nullable<number>>(null);\r\n    const thicknessFlange = ref<Nullable<number>>(null);\r\n    const thicknessWeb = ref<Nullable<number>>(null);\r\n    const wide = ref<Nullable<number>>(null);\r\n    const letterOrder = ref<{ [key: string]: number }>({ \"W\": 1, \"S\": 2, \"M\": 3, \"HP\": 4, \"C\": 5, \"MC\": 6 })\r\n\r\n    const memberListPage = computed(() => {\r\n        return [...membersList.value].splice((currentPage.value - 1) * defaultPageSize.value, defaultPageSize.value);\r\n    });\r\n\r\n    let calculatorService: CalcService;\r\n\r\n    onMounted(async () => {\r\n        await initData();\r\n    });\r\n\r\n    async function initData() {\r\n        let estimatorBaseUrl = await settingsService.getEstimatorBaseUrl();\r\n\r\n        calculatorService = new CalcService(estimatorBaseUrl);\r\n\r\n        const res = await calculatorService.getTypes();\r\n\r\n        if (res) {\r\n            memberTypeList.value = res.MemberTypeList.filter((x: any) => [MemberType.Columns, MemberType.BeamsRestrained, MemberType.BeamsUnrestrained, MemberType.Channels, MemberType.HSSRound, MemberType.HSSSquare, MemberType.HSSRectangular].includes(x.Key));\r\n\r\n            const firstMember = memberTypeList.value[0];\r\n            await initMembersListData(firstMember.Key);\r\n\r\n            isLoadedMembersList.value = true;\r\n        }\r\n    }\r\n\r\n    async function initMembersListData(memberType: number) {\r\n        reset();\r\n\r\n        const type = memberType ? memberType : selectedMemberType.value;\r\n        selectedMemberType.value = type;\r\n        selectedMemberId.value = null;\r\n\r\n        const item = memberTypeList.value.find((x: any) => x.Key === memberType)!;\r\n        const res = await calculatorService.getMembersList(item.Shape);\r\n\r\n        if (res) {\r\n            membersList.value = res.Items;\r\n\r\n            membersList.value.sort((a, b) => {\r\n                const firstItemLetter = a.Designation.match(/^[a-zA-Z]+/);\r\n                const secondItemLetter = b.Designation.match(/^[a-zA-Z]+/);\r\n\r\n                if (firstItemLetter && secondItemLetter) {\r\n                    const firstItemOrder = letterOrder.value[firstItemLetter[0]];\r\n                    const secondItemOrder = letterOrder.value[secondItemLetter[0]];\r\n\r\n                    if (firstItemOrder !== secondItemOrder)\r\n                        return firstItemOrder - secondItemOrder;\r\n                }\r\n\r\n                const [numA1, numA2] = extractNumbers(a.Designation);\r\n                const [numB1, numB2] = extractNumbers(b.Designation);\r\n\r\n                if (numA1 !== numB1)\r\n                    return numA1 - numB1;\r\n\r\n                return numA2 - numB2;\r\n            });\r\n        }\r\n\r\n        selectedExposure.value = item.DefaultExposure;\r\n    }\r\n\r\n    function extractNumbers(designation: string) {\r\n        const match = designation.match(/(\\d+(\\.\\d+)?)x(\\d+(\\.\\d+)?)/);\r\n\r\n        if (!match)\r\n            return [0, 0];\r\n\r\n        return [parseFloat(match[1]), parseFloat(match[3])];\r\n    }\r\n\r\n    function initMemberId(memberId: number) {\r\n        selectedMemberId.value = memberId;\r\n        memberTypeId.value = selectedMemberType.value;\r\n        exposureId.value = selectedExposure.value;\r\n    }\r\n\r\n    function updateResultParams() {\r\n        memberId.value = selectedMemberId.value;\r\n        memberTypeId.value = selectedMemberType.value;\r\n        exposureId.value = selectedExposure.value;\r\n    }\r\n\r\n    function showSelectedMember(value: number) {\r\n        return value == selectedMemberType.value ? 'active' : '';\r\n    }\r\n\r\n    function reset() {\r\n        currentPage.value = 1;\r\n        ratio.value = '';\r\n        heatedPerimeter.value = null;\r\n        designation.value = '';\r\n        DFTs.value = [];\r\n\r\n        depth.value = null;\r\n        thicknessFlange.value = null;\r\n        thicknessWeb.value = null;\r\n        wide.value = null;\r\n\r\n        showResults.value = false;\r\n    }\r\n\r\n    function round(value: number) {\r\n        return Math.round(value * 100) / 100;\r\n    }\r\n\r\n    async function initMember() {\r\n        if (!memberId.value || !exposureId.value) {\r\n            reset();\r\n            return;\r\n        }\r\n\r\n        const res = await calculatorService.getMember(memberId.value, memberTypeId.value!, selectedExposure.value);\r\n\r\n        if (res) {\r\n            ratio.value = getRatio(res);\r\n            designation.value = res.Designation;\r\n            DFTs.value = res.Dfts;\r\n\r\n            const dim = res.Dimensions;\r\n\r\n            depth.value = dim.Depth;\r\n            thicknessFlange.value = dim.ThicknessFlange;\r\n            thicknessWeb.value = dim.ThicknessWeb;\r\n            wide.value = dim.Wide;\r\n\r\n            showResults.value = true;\r\n        } else {\r\n            reset();\r\n        }\r\n    }\r\n\r\n    function iconClass() {\r\n        return {\r\n            'icon-wrap': true,\r\n            'icon-column': isColumn(memberTypeId.value),\r\n            'icon-round': isRound(memberTypeId.value),\r\n            'icon-square': isSquare(memberTypeId.value),\r\n            'icon-rectangle': isRectangle(memberTypeId.value),\r\n            'icon-channel': isChannel(memberTypeId.value),\r\n            'icon-angle': isAngle(memberTypeId.value)\r\n        };\r\n    }\r\n\r\n    function getRatio(member: any) {\r\n        const ratioType = member.Description.includes('HSS') ? 'A/P' : 'W/D';\r\n        const ratioValue = ratioType == 'A/P' ? member.Ap : member.Wd;\r\n        return ratioType + ' ratio: ' + ratioValue;\r\n    }\r\n\r\n    function isColumn(type?: MemberType) {\r\n        return type === MemberType.Columns || type === MemberType.BeamsRestrained || type === MemberType.BeamsUnrestrained;\r\n    }\r\n\r\n    function isRound(type?: MemberType) {\r\n        return type === MemberType.HSSRound;\r\n    }\r\n\r\n    function isSquare(type?: MemberType) {\r\n        return type === MemberType.HSSSquare;\r\n    }\r\n\r\n    function isRectangle(type?: MemberType) {\r\n        return type === MemberType.HSSRectangular;\r\n    }\r\n\r\n    function isChannel(type?: MemberType) {\r\n        return type === MemberType.Channels;\r\n    }\r\n\r\n    function isAngle(type?: MemberType) {\r\n        return type === MemberType.EqualAngles || type === MemberType.UnequalAngles;\r\n    }\r\n\r\n    watch(selectedMemberId, () => {\r\n        updateResultParams();\r\n    });\r\n\r\n    watch(selectedMemberType, () => {\r\n        updateResultParams();\r\n    });\r\n\r\n    watch(selectedExposure, () => {\r\n        updateResultParams();\r\n    });\r\n\r\n    watch(isRestrained, () => {\r\n        initMembersListData(selectedMemberType.value);\r\n    });\r\n\r\n    watch(memberId, () => {\r\n        initMember();\r\n    });\r\n\r\n    watch(exposureId, () => {\r\n        initMember();\r\n    });\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n    @import '@/assets/styles/bootstrap/common';\r\n    @import 'bootstrap/scss/_tables';\r\n    @import \"bootstrap/scss/alert\";\r\n\r\n    @import '@/assets/styles/_mixins';\r\n    @import '@/assets/styles/_tabs';\r\n    @import '@/assets/styles/_file-card';\r\n\r\n    .calculator {\r\n        color: #333c4e !important;\r\n\r\n        a {\r\n            cursor: pointer;\r\n        }\r\n\r\n        .nav-link {\r\n            position: relative;\r\n            padding-left: 20px;\r\n\r\n            .icon {\r\n                position: absolute;\r\n                display: inline-block;\r\n                left: 0;\r\n                fill: #333c4e;\r\n                width: 13px;\r\n                height: 13px;\r\n            }\r\n\r\n            .title {\r\n                padding-left: 20px;\r\n                vertical-align: text-top;\r\n            }\r\n        }\r\n\r\n        .header {\r\n            @include font-roboto-regular(32px);\r\n            color: #354150;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        @include media-breakpoint-down(lg) {\r\n            h2 {\r\n                text-align: center;\r\n            }\r\n        }\r\n\r\n        .sizes {\r\n            .restrained {\r\n                margin: 15px 0 10px 0;\r\n            }\r\n\r\n            ul.columns {\r\n                columns: 4;\r\n                -webkit-columns: 4;\r\n                -moz-columns: 4;\r\n                padding: 0;\r\n\r\n                @media (max-width: 500px) {\r\n                    columns: 3;\r\n                    -webkit-columns: 3;\r\n                    -moz-columns: 3;\r\n                }\r\n\r\n                li {\r\n                    list-style: none;\r\n\r\n                    a {\r\n                        color: #333c4e;\r\n                        display: inline-block;\r\n                        font-size: 15px;\r\n                        padding: 3px 6px;\r\n                        border: solid 1px transparent;\r\n                        border-radius: 2px;\r\n                        text-decoration: none;\r\n                        white-space: nowrap;\r\n                        font-size: 14px;\r\n\r\n                        @media (max-width: 350px) {\r\n                            font-size: 13px;\r\n                        }\r\n\r\n                        &:hover {\r\n                            border-color: #e7e7e7;\r\n                        }\r\n                    }\r\n\r\n                    &.active a {\r\n                        border-color: $highlight-color;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .round-info {\r\n                font-size: 15px;\r\n            }\r\n        }\r\n\r\n        .result {\r\n            @include media-breakpoint-up(xl) {\r\n                margin-left: 30px;\r\n            }\r\n\r\n            .small-header {\r\n                @include font-roboto-regular(24px);\r\n            }\r\n\r\n            .top-section {\r\n                margin-bottom: 30px;\r\n\r\n                .icon-wrap {\r\n                    position: relative;\r\n                    margin-top: 30px;\r\n                    height: 215px;\r\n                    width: 215px;\r\n\r\n                    @include media-breakpoint-down(lg) {\r\n                        margin-left: auto;\r\n                        margin-right: auto;\r\n                    }\r\n\r\n                    svg {\r\n                        fill: #f9f9f9;\r\n                        stroke: #000;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                    }\r\n\r\n                    .metric {\r\n                        position: absolute;\r\n                        top: 0;\r\n                        left: 0;\r\n                        display: block;\r\n                        text-align: center;\r\n\r\n                        span {\r\n                            position: relative;\r\n                            display: inline-block;\r\n                            background: #fff;\r\n                            z-index: 1;\r\n                        }\r\n\r\n                        &:after {\r\n                            content: \" \";\r\n                            position: absolute;\r\n                            top: 0;\r\n                            left: 0;\r\n                            background: $highlight-color;\r\n                        }\r\n\r\n                        &.horizontal {\r\n                            width: 100%;\r\n\r\n                            span {\r\n                                top: -12px;\r\n                                padding: 0 7px;\r\n                            }\r\n\r\n                            &:after {\r\n                                width: 100%;\r\n                                height: 1px;\r\n                            }\r\n                        }\r\n\r\n                        &.vertical {\r\n                            width: 30px;\r\n                            height: 100%;\r\n\r\n                            span {\r\n                                width: 36px;\r\n                                top: calc(50% - 12px);\r\n                                left: calc(50% - 18px);\r\n                                padding: 0 0 2px 0;\r\n                            }\r\n\r\n                            &:after {\r\n                                width: 1px;\r\n                                left: 50%;\r\n                                height: 100%;\r\n                            }\r\n                        }\r\n\r\n                        &.width {\r\n                            top: -15px;\r\n                            left: 3px;\r\n                            width: calc(100% - 3px);\r\n                        }\r\n\r\n                        &.depth {\r\n                            left: auto;\r\n\r\n                            &:after {\r\n                                top: 3px;\r\n                                height: calc(100% - 6px);\r\n                            }\r\n                        }\r\n\r\n                        &.thickness {\r\n                            width: auto;\r\n                            height: auto;\r\n\r\n                            &.thickness-flange {\r\n                                top: 3px;\r\n                                left: 33px;\r\n\r\n                                span {\r\n                                    top: 25px;\r\n                                }\r\n\r\n                                &:after {\r\n                                    height: 20px;\r\n                                }\r\n                            }\r\n\r\n                            &.thickness-web {\r\n                                top: 150px;\r\n\r\n                                span {\r\n                                    left: 22px;\r\n                                }\r\n\r\n                                &:after {\r\n                                    width: 19px;\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    &.icon-column .metric {\r\n                        &.width {\r\n                            top: -15px;\r\n                            left: 18px;\r\n                            width: calc(100% - 36px);\r\n                        }\r\n\r\n                        &.depth {\r\n                            right: -15px;\r\n                        }\r\n\r\n                        &.thickness-web {\r\n                            left: 98px;\r\n                        }\r\n                    }\r\n\r\n                    &.icon-round .metric {\r\n                        &.thickness-web {\r\n                            top: 106px;\r\n                            left: 3px;\r\n\r\n                            span {\r\n                                left: 25px;\r\n                            }\r\n\r\n                            &:after {\r\n                                width: 21px;\r\n                            }\r\n                        }\r\n\r\n                        &.depth, &.thickness-flange {\r\n                            display: none;\r\n                        }\r\n                    }\r\n\r\n                    &.icon-square .metric {\r\n                        &.depth {\r\n                            right: -30px;\r\n                        }\r\n\r\n                        &.thickness-flange {\r\n                            display: none;\r\n                        }\r\n\r\n                        &.thickness-web {\r\n                            left: 3px;\r\n                        }\r\n                    }\r\n\r\n                    &.icon-rectangle .metric {\r\n                        &.width {\r\n                            left: 36px;\r\n                            width: calc(100% - 72px);\r\n                        }\r\n\r\n                        &.depth {\r\n                            right: 2px;\r\n                        }\r\n\r\n                        &.thickness-flange {\r\n                            display: none;\r\n                            left: 70px;\r\n                        }\r\n\r\n                        &.thickness-web {\r\n                            left: 37px;\r\n                        }\r\n                    }\r\n\r\n                    &.icon-channel .metric {\r\n                        &.width {\r\n                            left: 61px;\r\n                            width: calc(100% - 119px);\r\n                        }\r\n\r\n                        &.depth {\r\n                            right: 26px;\r\n                        }\r\n\r\n                        &.thickness-flange {\r\n                            left: 100px;\r\n                        }\r\n\r\n                        &.thickness-web {\r\n                            left: 62px;\r\n                        }\r\n                    }\r\n\r\n                    &.icon-angle .metric {\r\n                        &.depth {\r\n                            right: -30px;\r\n                        }\r\n\r\n                        &.thickness-flange {\r\n                            display: none;\r\n                            left: auto;\r\n                            right: 40px;\r\n                            top: auto;\r\n                            bottom: -2px;\r\n\r\n                            span {\r\n                                top: -27px;\r\n                            }\r\n                        }\r\n\r\n                        &.thickness-web {\r\n                            left: 4px;\r\n                            top: 50px;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            .data-wrap {\r\n                margin-top: 30px;\r\n                margin-left: 20px;\r\n\r\n                @include media-breakpoint-down(lg) {\r\n                    text-align: center;\r\n                    margin-left: 0;\r\n                }\r\n            }\r\n        }\r\n\r\n        .bottom-section {\r\n            table {\r\n                display: block;\r\n\r\n                th {\r\n                    font-size: 16px;\r\n                    vertical-align: top;\r\n                }\r\n            }\r\n\r\n            .table-th-desc {\r\n                padding-bottom: 40px;\r\n                font-size: 14px;\r\n\r\n                p {\r\n                    margin: 0;\r\n                }\r\n            }\r\n        }\r\n    }\r\n</style>\r\n\r\n<style lang=\"scss\">\r\n    @import '@/assets/styles/bootstrap/common';\r\n    @import 'bootstrap/scss/_pagination';\r\n\r\n    .page-item.active .page-link {\r\n        z-index: 3;\r\n        color: #fff !important;\r\n        background-color: #B40404;\r\n        border-color: #B40404;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .page-link {\r\n        color: #333c4e !important;\r\n        cursor: pointer;\r\n    }\r\n</style>"],"names":["CalcService","estimatorUrl","__publicField","post","additionalValue","memberId","typeId","sides","MemberType","Exposure","_hoisted_24","_hoisted_26","_hoisted_27","_hoisted_28","_hoisted_29","_hoisted_30","_hoisted_31","_hoisted_32","_hoisted_33","_hoisted_34","_hoisted_35","_hoisted_36","_hoisted_37","_hoisted_38","_hoisted_39","_hoisted_40","_sfc_main","_defineComponent","__props","currentPage","ref","defaultPageSize","memberTypeList","membersList","selectedMemberType","selectedExposure","selectedMemberId","isRestrained","isLoadedMembersList","showResults","ratio","designation","heatedPerimeter","DFTs","memberTypeId","exposureId","depth","thicknessFlange","thicknessWeb","wide","letterOrder","memberListPage","computed","calculatorService","onMounted","initData","estimatorBaseUrl","settingsService","res","x","firstMember","initMembersListData","memberType","reset","type","item","a","b","firstItemLetter","secondItemLetter","firstItemOrder","secondItemOrder","numA1","numA2","extractNumbers","numB1","numB2","designation2","match","initMemberId","memberId2","updateResultParams","showSelectedMember","value"],"mappings":"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"}