{"version":3,"file":"public-modal-mixin.d2f90c45.js","sources":["../../../resources/js/modules/PublicModal/components/PublicModalView.vue","../../../resources/js/modules/PublicModal/shared/mixins/public-modal-mixin.js"],"sourcesContent":["<template>\n    <div @click=\"handleOverlayClick\" :class=\"{ 'public-modal-overlay': !flat }\">\n        <div\n            ref=\"view\"\n            :data-id=\"_uid\"\n            class=\"public-modal-view custom-scroll\"\n            :class=\"[{ 'public-modal-view_flat': flat, 'public-modal-view_large': isLarge() }, modalType]\"\n        >\n            <div class=\"public-modal-view__loader\" v-if=\"loading\">\n                <SpinLoader color=\"#15A06E\" :width=\"40\" :stroke-width=\"4\" />\n            </div>\n            <div\n                class=\"public-modal-view-content\"\n                :class=\"{ 'public-modal-view-content_disabled': loading, 'public-modal-view-content_flat': flat }\"\n            >\n                <template v-if=\"!withoutClose\">\n                    <CloseButtonLg v-if=\"largeCloseButton\" @close=\"$emit('close')\" />\n                    <CloseButtonSm v-else @close=\"$emit('close')\" />\n                </template>\n\n                <slot></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport CloseButtonSm from \"@components/Buttons/CloseButtonSm\"\nimport SpinLoader from \"@components/Loaders/SpinLoader\"\nimport CloseButtonLg from \"@components/Buttons/CloseButtonLg\"\n\nexport default {\n    props: {\n        loading: {\n            type: Boolean,\n            default: false\n        },\n        flat: {\n            type: Boolean,\n            default: false\n        },\n        withoutClose: {\n            type: Boolean,\n            default: false\n        },\n        largeCloseButton: {\n            type: Boolean,\n            default: false\n        },\n        modalType: {\n            type: String,\n            default: \"modal-registration\"\n        },\n        stepKey: {\n            type: String,\n            default: \"\"\n        }\n    },\n    name: \"PublicModalView\",\n    components: { CloseButtonLg, SpinLoader, CloseButtonSm },\n    mounted() {\n        const el = document.querySelector(`[data-id='${this._uid}']`)\n\n        if (el) {\n            const observer = new MutationObserver(() => {\n                this.$forceUpdate()\n            })\n\n            observer.observe(el, { attributes: true, childList: true, subtree: true })\n        }\n    },\n    methods: {\n        isLarge() {\n            const el = document.querySelector(`[data-id='${this._uid}']`)\n            if (el) {\n                return el.getBoundingClientRect().height > window.innerHeight - 120\n            }\n\n            return false\n        },\n        handleOverlayClick(event) {\n            if (this.withoutClose) {\n                return\n            }\n            if (event.target !== event.currentTarget) {\n                return\n            }\n            const selection = window.getSelection()\n\n            if (\n                selection &&\n                selection.type === \"Range\" &&\n                selection.anchorNode &&\n                selection.anchorNode.parentNode.closest(\".public-modal-view-content\")\n            ) {\n                return\n            }\n            this.$emit(\"close\")\n        }\n    },\n    watch: {\n        stepKey() {\n            setTimeout(() => {\n                this.$forceUpdate()\n            })\n        }\n    }\n}\n</script>\n\n<style lang=\"sass\">\n.public-modal-view\n    .error\n        color: #DD4141\n        margin-top: 5px\n.hidden-field\n    opacity: 0\n    height: 0\n    padding: 0\n    margin: 0\n    position: absolute\n.public-modal-overlay\n    position: fixed\n    top: 0\n    left: 0\n    right: 0\n    bottom: 0\n    z-index: 10000000\n    backdrop-filter: blur(6px)\n    @supports not (backdrop-filter: blur(6px))\n        background: rgba(40, 40, 40, 0.53)\n    @supports (backdrop-filter: blur(6px))\n        backdrop-filter: blur(6px)\n.mb-8\n    margin-bottom: 8px\n.mt-16\n    margin-top: 16px\n.mb-30\n    margin-bottom: 30px\n.mt-30\n    margin-top: 30px\n.mb-6\n    margin-bottom: 6px\n.mt-6\n    margin-top: 6px\n.mb-20\n    margin-bottom: 20px\n.mt-10\n    margin-top: 10px\n.mt-2\n    margin-top: 2px\n.authorization-flow\n    min-height: 224px\n</style>\n\n<style scoped lang=\"sass\">\n.public-modal-view\n    max-width: 440px\n    width: 100%\n    position: absolute\n    top: 120px\n    left: 50%\n    transform: translateX(-50%)\n    background: #fff\n    z-index: 5\n    box-shadow: 0 4px 10px rgba(128, 158, 191, 0.15)\n    border-radius: 10px\n    &_large\n        transform: translate(-50%, -50%)\n        top: 50%\n        max-height: calc(100vh - 3%)\n        overflow-y: auto\n    @media (max-height: 660px)\n        transform: translate(-50%, -50%)\n        top: 50%\n        max-height: calc(100vh - 3%)\n        overflow-y: auto\n    @media (max-width: 480px)\n        left: 5%\n        width: 90%\n        transform: translateY(-50%)\n        top: 50%\n        max-height: calc(100vh - 12%)\n        overflow-y: auto\n    &__loader\n        position: absolute\n        top: 50%\n        left: 50%\n        transform: translate(-50%, -50%)\n        z-index: 5\n    &_flat\n        position: relative !important\n        box-shadow: none !important\n        transform: none !important\n        top: 0 !important\n        left: 0 !important\n        max-width: none !important\n        border-radius: 0 !important\n        width: 100% !important\n    &.modal-locale\n        max-width: 580px\n        @media (max-width: 620px)\n            left: 3%\n            width: 94%\n            transform: translateY(-50%)\n            top: 50%\n            max-height: calc(100vh - 3%)\n        @media (max-width: 480px)\n            &::v-deep\n                .tooltip-close\n                    svg\n                        width: 14px\n                        height: 14px\n        .public-modal-view-content\n            padding: 40px 24px\n            @media (max-width: 620px)\n                padding: 40px 20px\n            @media (max-width: 480px)\n                padding: 20px 10px\n\n.public-modal-view-content\n    padding: 35px 24px 30px 24px\n    position: relative\n    @media (max-width: 480px)\n        padding: 35px 14px 30px 14px\n    &_disabled\n        pointer-events: none\n        opacity: .4\n    .tooltip-close\n        position: absolute\n        top: 10px\n        right: 10px\n    &_flat\n        padding: 0\n</style>\n","export default {\n    props: {\n        visible: {\n            type: Boolean,\n            default: false,\n            required: false\n        },\n        flat: {\n            type: Boolean,\n            default: false,\n            required: false\n        }\n    },\n    data() {\n        return {\n            isModalVisible: false,\n            canBeClosed: false\n        }\n    },\n    methods: {\n        toggleModalVisibility() {\n            this.isModalVisible = !this.isModalVisible\n        },\n        toggleBluredContent(val) {\n            const blured = document.querySelectorAll(\".blured-content\")\n            if (!blured.length) {\n                return\n            }\n            blured.forEach(b => {\n                if (val) {\n                    b.classList.remove(\"blured\")\n                    if (!this.visible) {\n                        b.removeEventListener(\"click\", this.bluredHandler)\n                    }\n                } else {\n                    b.classList.add(\"blured\")\n                    if (!this.visible) {\n                        b.addEventListener(\"click\", this.bluredHandler)\n                    }\n                }\n            })\n        },\n        bluredHandler(event) {\n            if (!event.target.hasAttribute(\"data-default-auth-handler\")) {\n                this.hideModal()\n            }\n        },\n        isPassword() {\n            return (\n                this.fields.length &&\n                this.fields[0].type === \"password\" &&\n                this.fields[1] &&\n                this.fields[1].type === \"password_confirmation\"\n            )\n        },\n        hideModal() {\n            if (this.canBeClosed) {\n                this.isModalVisible = false\n            }\n        },\n        openModal() {\n            this.isModalVisible = true\n            this.closeDropdown()\n        },\n        closeDropdown() {\n            document.querySelectorAll(\".header__menu_item_dropdown\").forEach(item => {\n                item.parentElement.classList.remove(\"active\")\n            })\n            document.body.classList.remove(\"open-menu\")\n\n            if (document.querySelector(\".header__menu\")) {\n                document.querySelector(\".header__menu\").classList.remove(\"open\")\n                document.querySelector(\".header__menu\").classList.remove(\"open-child\")\n            }\n        }\n    },\n    watch: {\n        isModalVisible(val) {\n            if (!this.flat) {\n                //this.toggleBluredContent(!val)\n            }\n\n            if (val) {\n                setTimeout(() => {\n                    this.canBeClosed = true\n                }, 1000)\n            } else {\n                this.canBeClosed = false\n            }\n\n            this.$forceUpdate()\n        }\n    }\n}\n"],"names":["_sfc_main","CloseButtonLg","SpinLoader","CloseButtonSm","el","event","selection","PublicModalMixin","val","blured","b","item"],"mappings":"mIA+BA,MAAAA,EAAA,CACA,MAAA,CACA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,KAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,aAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,iBAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,UAAA,CACA,KAAA,OACA,QAAA,oBACA,EACA,QAAA,CACA,KAAA,OACA,QAAA,EACA,CACA,EACA,KAAA,kBACA,WAAA,CAAA,cAAAC,EAAA,WAAAC,EAAA,cAAAC,CAAA,EACA,SAAA,CACA,MAAAC,EAAA,SAAA,cAAA,aAAA,KAAA,IAAA,IAAA,EAEAA,GACA,IAAA,iBAAA,IAAA,CACA,KAAA,aAAA,CACA,CAAA,EAEA,QAAAA,EAAA,CAAA,WAAA,GAAA,UAAA,GAAA,QAAA,GAAA,CAEA,EACA,QAAA,CACA,SAAA,CACA,MAAAA,EAAA,SAAA,cAAA,aAAA,KAAA,IAAA,IAAA,EACA,OAAAA,EACAA,EAAA,sBAAA,EAAA,OAAA,OAAA,YAAA,IAGA,EACA,EACA,mBAAAC,EAAA,CAIA,GAHA,KAAA,cAGAA,EAAA,SAAAA,EAAA,cACA,OAEA,MAAAC,EAAA,OAAA,aAAA,EAGAA,GACAA,EAAA,OAAA,SACAA,EAAA,YACAA,EAAA,WAAA,WAAA,QAAA,4BAAA,GAIA,KAAA,MAAA,OAAA,CACA,CACA,EACA,MAAA,CACA,SAAA,CACA,WAAA,IAAA,CACA,KAAA,aAAA,CACA,CAAA,CACA,CACA,CACA,w2BC3GAC,EAAA,CACA,MAAA,CACA,QAAA,CACA,KAAA,QACA,QAAA,GACA,SAAA,EACA,EACA,KAAA,CACA,KAAA,QACA,QAAA,GACA,SAAA,EACA,CACA,EACA,MAAA,CACA,MAAA,CACA,eAAA,GACA,YAAA,EACA,CACA,EACA,QAAA,CACA,uBAAA,CACA,KAAA,eAAA,CAAA,KAAA,cACA,EACA,oBAAAC,EAAA,CACA,MAAAC,EAAA,SAAA,iBAAA,iBAAA,EACAA,EAAA,QAGAA,EAAA,QAAAC,GAAA,CACAF,GACAE,EAAA,UAAA,OAAA,QAAA,EACA,KAAA,SACAA,EAAA,oBAAA,QAAA,KAAA,aAAA,IAGAA,EAAA,UAAA,IAAA,QAAA,EACA,KAAA,SACAA,EAAA,iBAAA,QAAA,KAAA,aAAA,EAGA,CAAA,CACA,EACA,cAAAL,EAAA,CACAA,EAAA,OAAA,aAAA,2BAAA,GACA,KAAA,UAAA,CAEA,EACA,YAAA,CACA,OACA,KAAA,OAAA,QACA,KAAA,OAAA,CAAA,EAAA,OAAA,YACA,KAAA,OAAA,CAAA,GACA,KAAA,OAAA,CAAA,EAAA,OAAA,uBAEA,EACA,WAAA,CACA,KAAA,cACA,KAAA,eAAA,GAEA,EACA,WAAA,CACA,KAAA,eAAA,GACA,KAAA,cAAA,CACA,EACA,eAAA,CACA,SAAA,iBAAA,6BAAA,EAAA,QAAAM,GAAA,CACAA,EAAA,cAAA,UAAA,OAAA,QAAA,CACA,CAAA,EACA,SAAA,KAAA,UAAA,OAAA,WAAA,EAEA,SAAA,cAAA,eAAA,IACA,SAAA,cAAA,eAAA,EAAA,UAAA,OAAA,MAAA,EACA,SAAA,cAAA,eAAA,EAAA,UAAA,OAAA,YAAA,EAEA,CACA,EACA,MAAA,CACA,eAAAH,EAAA,CACA,KAAA,KAIAA,EACA,WAAA,IAAA,CACA,KAAA,YAAA,EACA,EAAA,GAAA,EAEA,KAAA,YAAA,GAGA,KAAA,aAAA,CACA,CACA,CACA"}