{"version":3,"file":"NotificationsModal.d6c46137.js","sources":["../../../resources/js/common/components/Notifications/SubMenu.vue","../../../resources/js/common/icons/DollarSignIcon.vue","../../../resources/js/common/icons/MessageIcon.vue","../../../resources/js/common/icons/AttentionIcon.vue","../../../resources/js/common/icons/ClockIcon.vue","../../../resources/js/common/icons/PercentIcon.vue","../../../resources/js/common/icons/User2Icon.vue","../../../resources/js/common/components/Notifications/NotificationIcon.vue","../../../resources/js/common/components/Notifications/NotificationItemActions.vue","../../../resources/js/common/components/Notifications/NotificationItem.vue","../../../resources/images/portal/bell-rotated.svg","../../../resources/js/common/components/Notifications/NotificationsModal.vue"],"sourcesContent":["<template>\n    <div\n        v-click-outside=\"closeSubmenu\"\n        class=\"dropdown-menu\"\n        :class=\"[{ 'dropdown-menu_visible': isSubmenuOpen && !isDisabledToMove }, !isSubmenuOpen && blockClass]\"\n    >\n        <button class=\"dropdown-menu__btn flex-center\" :class=\"btnClass\" @click=\"isSubmenuOpen = !isSubmenuOpen\">\n            <DotsMenuIcon />\n        </button>\n\n        <ul v-if=\"isSubmenuOpen\" class=\"dropdown-menu__list\" :class=\"listClass\">\n            <li\n                class=\"dropdown-menu__list-item flex-al-i-c\"\n                :class=\"{ disabled: isMarkDisabled }\"\n                @click=\"\n                    closeSubmenu()\n                    markItem()\n                \"\n            >\n                {{ markItemTitle ? markItemTitle : t(\"notifications.submenu.mark_all_as_read\") }}\n            </li>\n\n            <li\n                class=\"dropdown-menu__list-item flex-al-i-c\"\n                :class=\"{ disabled: isDeletionDisabled }\"\n                @click=\"\n                    closeSubmenu()\n                    deleteItem()\n                \"\n            >\n                {{ deleteItemTitle ? deleteItemTitle : t(\"notifications.submenu.delete_all_from_list\") }}\n            </li>\n        </ul>\n    </div>\n</template>\n\n<script>\nimport ClickOutside from \"vue-click-outside\"\nimport keyTranslator from \"@mixins/keyTranslator\"\nimport DotsMenuIcon from \"@icons/DotsMenuIcon.vue\"\n\nexport default {\n    name: \"SubMenu\",\n    components: { DotsMenuIcon },\n    props: {\n        btnClass: {\n            type: Array,\n            default: () => []\n        },\n        blockClass: {\n            type: Array,\n            default: () => []\n        },\n        listClass: {\n            type: Array,\n            default: () => []\n        },\n        svgWidth: {\n            type: Number,\n            default: null\n        },\n        svgHeight: {\n            type: Number,\n            default: null\n        },\n        markItemTitle: {\n            type: String,\n            default: \"\"\n        },\n        deleteItemTitle: {\n            type: String,\n            default: \"\"\n        },\n        isMarkDisabled: {\n            type: Boolean,\n            default: false\n        },\n        isDeletionDisabled: {\n            type: Boolean,\n            default: false\n        },\n        isDisabledToMove: {\n            type: Boolean,\n            default: false\n        },\n        langsKeys: {\n            type: Object,\n            default: () => {}\n        }\n    },\n    data() {\n        return {\n            isSubmenuOpen: null\n        }\n    },\n    directives: {\n        ClickOutside\n    },\n    mixins: [keyTranslator],\n    methods: {\n        closeSubmenu() {\n            setTimeout(() => (this.isSubmenuOpen = false), 10)\n        },\n        markItem() {\n            this.$emit(\"markItem\")\n        },\n        deleteItem() {\n            this.$emit(\"deleteItem\")\n        }\n    },\n    watch: {\n        isSubmenuOpen(val) {\n            this.$emit(val ? \"open\" : \"close\")\n        }\n    }\n}\n</script>\n<style lang=\"sass\" scoped>\n.dropdown-menu\n    position: relative\n    &__btn\n        width: 18px\n        height: 18px\n    &::v-deep\n        svg\n            fill: #000\n    &__list\n        position: absolute\n        right: 0\n        top: 0\n        z-index: 5\n        background: #fff\n        box-shadow: 0px 2px 5px rgb(128 158 191 / 25%)\n    &__list-item\n        font-size: 14px\n        font-weight: 500\n        width: 300px\n        padding-left: 15px\n        color: #52565C\n        cursor: pointer\n        min-height: 39px\n        transition: .2s\n        &:hover\n            background: #F2F7FF\n</style>\n","\n<template>\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n            d=\"M12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6H12.75ZM11.25 8C11.25 8.41421 11.5858 8.75 12 8.75C12.4142 8.75 12.75 8.41421 12.75 8H11.25ZM12.75 16C12.75 15.5858 12.4142 15.25 12 15.25C11.5858 15.25 11.25 15.5858 11.25 16H12.75ZM11.25 18C11.25 18.4142 11.5858 18.75 12 18.75C12.4142 18.75 12.75 18.4142 12.75 18H11.25ZM15 8.75C15.4142 8.75 15.75 8.41421 15.75 8C15.75 7.58579 15.4142 7.25 15 7.25V8.75ZM11 8V7.25V8ZM13 16V15.25V16ZM9 15.25C8.58579 15.25 8.25 15.5858 8.25 16C8.25 16.4142 8.58579 16.75 9 16.75V15.25ZM13 12V11.25V12ZM11 12V11.25V12ZM10.2346 8.15224L9.94762 7.45933L10.2346 8.15224ZM9.15224 9.23463L8.45933 8.94762L9.15224 9.23463ZM9.15224 10.7654L8.45933 11.0524L9.15224 10.7654ZM9.58579 11.4142L10.1161 10.8839L9.58579 11.4142ZM10.2346 11.8478L9.94762 12.5407L10.2346 11.8478ZM13.7654 15.8478L14.0524 16.5407L13.7654 15.8478ZM14.8478 14.7654L15.5407 15.0524L14.8478 14.7654ZM14.8478 13.2346L15.5407 12.9476V12.9476L14.8478 13.2346ZM14.4142 12.5858L13.8839 13.1161L14.4142 12.5858ZM13.7654 12.1522L14.0524 11.4593L13.7654 12.1522ZM20.25 12C20.25 16.5563 16.5563 20.25 12 20.25V21.75C17.3848 21.75 21.75 17.3848 21.75 12H20.25ZM12 20.25C7.44365 20.25 3.75 16.5563 3.75 12H2.25C2.25 17.3848 6.61522 21.75 12 21.75V20.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75V2.25C6.61522 2.25 2.25 6.61522 2.25 12H3.75ZM12 3.75C16.5563 3.75 20.25 7.44365 20.25 12H21.75C21.75 6.61522 17.3848 2.25 12 2.25V3.75ZM11.25 6V8H12.75V6H11.25ZM11.25 16V18H12.75V16H11.25ZM15 7.25H11V8.75H15V7.25ZM13 15.25H9V16.75H13V15.25ZM13 11.25H11V12.75H13V11.25ZM11 7.25C10.6389 7.25 10.2813 7.32113 9.94762 7.45933L10.5216 8.84515C10.6733 8.78233 10.8358 8.75 11 8.75V7.25ZM9.94762 7.45933C9.61397 7.59753 9.31082 7.8001 9.05546 8.05546L10.1161 9.11612C10.2322 9.00004 10.37 8.90797 10.5216 8.84515L9.94762 7.45933ZM9.05546 8.05546C8.8001 8.31082 8.59753 8.61397 8.45933 8.94762L9.84515 9.52165C9.90797 9.36999 10 9.23219 10.1161 9.11612L9.05546 8.05546ZM8.45933 8.94762C8.32113 9.28127 8.25 9.63887 8.25 10H9.75C9.75 9.83585 9.78233 9.6733 9.84515 9.52165L8.45933 8.94762ZM8.25 10C8.25 10.3611 8.32113 10.7187 8.45933 11.0524L9.84515 10.4784C9.78233 10.3267 9.75 10.1642 9.75 10H8.25ZM8.45933 11.0524C8.59753 11.386 8.8001 11.6892 9.05546 11.9445L10.1161 10.8839C10 10.7678 9.90797 10.63 9.84515 10.4784L8.45933 11.0524ZM9.05546 11.9445C9.31082 12.1999 9.61398 12.4025 9.94762 12.5407L10.5216 11.1549C10.37 11.092 10.2322 11 10.1161 10.8839L9.05546 11.9445ZM9.94762 12.5407C10.2813 12.6789 10.6389 12.75 11 12.75V11.25C10.8358 11.25 10.6733 11.2177 10.5216 11.1549L9.94762 12.5407ZM13 16.75C13.3611 16.75 13.7187 16.6789 14.0524 16.5407L13.4784 15.1549C13.3267 15.2177 13.1642 15.25 13 15.25V16.75ZM14.0524 16.5407C14.386 16.4025 14.6892 16.1999 14.9445 15.9445L13.8839 14.8839C13.7678 15 13.63 15.092 13.4784 15.1549L14.0524 16.5407ZM14.9445 15.9445C15.1999 15.6892 15.4025 15.386 15.5407 15.0524L14.1549 14.4784C14.092 14.63 14 14.7678 13.8839 14.8839L14.9445 15.9445ZM15.5407 15.0524C15.6789 14.7187 15.75 14.3611 15.75 14H14.25C14.25 14.1642 14.2177 14.3267 14.1549 14.4784L15.5407 15.0524ZM15.75 14C15.75 13.6389 15.6789 13.2813 15.5407 12.9476L14.1549 13.5216C14.2177 13.6733 14.25 13.8358 14.25 14H15.75ZM15.5407 12.9476C15.4025 12.614 15.1999 12.3108 14.9445 12.0555L13.8839 13.1161C14 13.2322 14.092 13.37 14.1549 13.5216L15.5407 12.9476ZM14.9445 12.0555C14.6892 11.8001 14.386 11.5975 14.0524 11.4593L13.4784 12.8451C13.63 12.908 13.7678 13 13.8839 13.1161L14.9445 12.0555ZM14.0524 11.4593C13.7187 11.3211 13.3611 11.25 13 11.25V12.75C13.1642 12.75 13.3267 12.7823 13.4784 12.8451L14.0524 11.4593Z\"\n            fill=\"#3E4755\"\n        />\n    </svg>\n</template>\n<script>\nexport default {\n    name: \"DollarSignIcon\"\n}\n</script>\n","\n<template>\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n            d=\"M7.5 11.5H7.51M11.5 11.5H11.51M15.5 11.5H15.51M3.00003 11.5C2.99659 12.8199 3.30496 14.1219 3.90003 15.3C4.6056 16.7118 5.69028 17.8992 7.03258 18.7293C8.37488 19.5594 9.92179 19.9994 11.5 20C12.8199 20.0035 14.1219 19.6951 15.3 19.1L21 21L19.1 15.3C19.6951 14.1219 20.0035 12.8199 20 11.5C19.9994 9.92179 19.5594 8.37488 18.7293 7.03258C17.8992 5.69028 16.7118 4.6056 15.3 3.90003C14.1219 3.30496 12.8199 2.99659 11.5 3.00003H11C8.91568 3.11502 6.94699 3.99479 5.47089 5.47089C3.99479 6.94699 3.11502 8.91568 3.00003 11V11.5Z\"\n            stroke=\"#3E4755\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n        />\n    </svg>\n</template>\n<script>\nexport default {\n    name: \"MessageIcon\"\n}\n</script>\n","<template>\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n            d=\"M12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7H12.75ZM11.25 14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14H11.25ZM12.75 16.99C12.75 16.5758 12.4142 16.24 12 16.24C11.5858 16.24 11.25 16.5758 11.25 16.99H12.75ZM11.25 17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17H11.25ZM11.25 7V14H12.75V7H11.25ZM11.25 16.99V17H12.75V16.99H11.25ZM20.25 12C20.25 16.5563 16.5563 20.25 12 20.25V21.75C17.3848 21.75 21.75 17.3848 21.75 12H20.25ZM12 20.25C7.44365 20.25 3.75 16.5563 3.75 12H2.25C2.25 17.3848 6.61522 21.75 12 21.75V20.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75V2.25C6.61522 2.25 2.25 6.61522 2.25 12H3.75ZM12 3.75C16.5563 3.75 20.25 7.44365 20.25 12H21.75C21.75 6.61522 17.3848 2.25 12 2.25V3.75Z\"\n            fill=\"\"\n        />\n    </svg>\n</template>\n\n<script>\nexport default {\n    name: \"AttentionIcon\"\n}\n</script>\n\n<style scoped lang=\"sass\">\n\n</style>\n","\n<template>\n    <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        :fill=\"noColor ? null : '#3E4755'\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path\n            d=\"M10 10H9.25C9.25 10.1989 9.32902 10.3897 9.46967 10.5303L10 10ZM10.75 5C10.75 4.58579 10.4142 4.25 10 4.25C9.58579 4.25 9.25 4.58579 9.25 5H10.75ZM12.4697 13.5303C12.7626 13.8232 13.2374 13.8232 13.5303 13.5303C13.8232 13.2374 13.8232 12.7626 13.5303 12.4697L12.4697 13.5303ZM18.25 10C18.25 14.5563 14.5563 18.25 10 18.25V19.75C15.3848 19.75 19.75 15.3848 19.75 10H18.25ZM10 18.25C5.44365 18.25 1.75 14.5563 1.75 10H0.25C0.25 15.3848 4.61522 19.75 10 19.75V18.25ZM1.75 10C1.75 5.44365 5.44365 1.75 10 1.75V0.25C4.61522 0.25 0.25 4.61522 0.25 10H1.75ZM10 1.75C14.5563 1.75 18.25 5.44365 18.25 10H19.75C19.75 4.61522 15.3848 0.25 10 0.25V1.75ZM10.75 10V5H9.25V10H10.75ZM9.46967 10.5303L12.4697 13.5303L13.5303 12.4697L10.5303 9.46967L9.46967 10.5303Z\"\n        />\n    </svg>\n</template>\n<script>\nexport default {\n    name: \"ClockIcon\",\n    props: {\n        noColor: {\n            type: Boolean,\n            default: false\n        }\n    }\n}\n</script>\n\n","<template>\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n            d=\"M7.46967 15.4697C7.17678 15.7626 7.17678 16.2374 7.46967 16.5303C7.76256 16.8232 8.23744 16.8232 8.53033 16.5303L7.46967 15.4697ZM16.5303 8.53033C16.8232 8.23744 16.8232 7.76256 16.5303 7.46967C16.2374 7.17678 15.7626 7.17678 15.4697 7.46967L16.5303 8.53033ZM20.25 12C20.25 16.5563 16.5563 20.25 12 20.25V21.75C17.3848 21.75 21.75 17.3848 21.75 12H20.25ZM12 20.25C7.44365 20.25 3.75 16.5563 3.75 12H2.25C2.25 17.3848 6.61522 21.75 12 21.75V20.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75V2.25C6.61522 2.25 2.25 6.61522 2.25 12H3.75ZM12 3.75C16.5563 3.75 20.25 7.44365 20.25 12H21.75C21.75 6.61522 17.3848 2.25 12 2.25V3.75ZM10.25 9C10.25 9.69036 9.69036 10.25 9 10.25V11.75C10.5188 11.75 11.75 10.5188 11.75 9H10.25ZM9 10.25C8.30964 10.25 7.75 9.69036 7.75 9H6.25C6.25 10.5188 7.48122 11.75 9 11.75V10.25ZM7.75 9C7.75 8.30964 8.30964 7.75 9 7.75V6.25C7.48122 6.25 6.25 7.48122 6.25 9H7.75ZM9 7.75C9.69036 7.75 10.25 8.30964 10.25 9H11.75C11.75 7.48122 10.5188 6.25 9 6.25V7.75ZM16.25 15C16.25 15.6904 15.6904 16.25 15 16.25V17.75C16.5188 17.75 17.75 16.5188 17.75 15H16.25ZM15 16.25C14.3096 16.25 13.75 15.6904 13.75 15H12.25C12.25 16.5188 13.4812 17.75 15 17.75V16.25ZM13.75 15C13.75 14.3096 14.3096 13.75 15 13.75V12.25C13.4812 12.25 12.25 13.4812 12.25 15H13.75ZM15 13.75C15.6904 13.75 16.25 14.3096 16.25 15H17.75C17.75 13.4812 16.5188 12.25 15 12.25V13.75ZM8.53033 16.5303L16.5303 8.53033L15.4697 7.46967L7.46967 15.4697L8.53033 16.5303Z\"\n            fill=\"\"\n        />\n    </svg>\n</template>\n\n<script>\nexport default {\n    name: \"PercentIcon\"\n}\n</script>\n\n<style scoped lang=\"sass\">\n\n</style>\n","\n<template>\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"#3E4755\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n            d=\"M7.2767 12H10.7233V10.5H7.2767V12ZM10.7233 12C11.8426 12 12.75 12.9074 12.75 14.0267H14.25C14.25 12.079 12.671 10.5 10.7233 10.5V12ZM7.2767 10.5C5.32896 10.5 3.75 12.079 3.75 14.0267H5.25C5.25 12.9074 6.15739 12 7.2767 12V10.5ZM10.5 6.75C10.5 7.57843 9.82843 8.25 9 8.25V9.75C10.6569 9.75 12 8.40685 12 6.75H10.5ZM9 8.25C8.17157 8.25 7.5 7.57843 7.5 6.75H6C6 8.40685 7.34315 9.75 9 9.75V8.25ZM7.5 6.75C7.5 5.92157 8.17157 5.25 9 5.25V3.75C7.34315 3.75 6 5.09315 6 6.75H7.5ZM9 5.25C9.82843 5.25 10.5 5.92157 10.5 6.75H12C12 5.09315 10.6569 3.75 9 3.75V5.25ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3Z\"\n        />\n    </svg>\n</template>\n<script>\nexport default {\n    name: \"User2Icon\"\n}\n</script>\n","<template>\n    <div class=\"notification-icon flex-center\" :class=\"[`notification-icon_${getIconClass()}`, additionalClass]\">\n        <component :is=\"getIconName()\"></component>\n    </div>\n</template>\n\n<script>\n// icon: [\"color|slug\"]\nimport DollarSignIcon from \"@icons/DollarSignIcon.vue\"\nimport MessageIcon from \"@icons/MessageIcon.vue\"\nimport AttentionIcon from \"@icons/AttentionIcon.vue\"\nimport ClockIcon from \"@icons/ClockIcon.vue\"\nimport PercentIcon from \"@icons/PercentIcon.vue\"\nimport User2Icon from \"@icons/User2Icon.vue\"\nimport CheckIcon from \"@icons/CheckIcon.vue\"\nimport EditIcon from \"@icons/EditIcon.vue\"\nimport CloseIcon from \"@icons/CloseIcon.vue\"\nimport WhiteBoardIcon from \"@icons/WhiteBoardIcon.vue\"\n\nconst mapSlugsToIcons = {\n    paid: [\"msg|new_sale\"],\n    msg: [\n        \"msg|new_comment_for_course\",\n        \"msg|replay_to_comment_in_product\",\n        \"msg|new_comment_for_course_quiz\",\n        \"system|offer_payment_refund\",\n        \"system|offer_payment_chargeback\"\n    ],\n    attention: [\n        \"system|exceeding_tariff_limits_for_3_days\",\n        \"system|exceeding_tariff_limits_for_2_days\",\n        \"system|closing_course_in_3_days\",\n        \"msg|access_to_course_is_closed\",\n        \"system|waiting_tariff_payment\"\n    ],\n    clock: [\"error|end_trial_period\"],\n    percent: [\"system|platform_commission\"],\n    user: [\"success|contact_accepted_invite\"],\n    check: [\n        \"success|course_approved_by_moderator\",\n        \"success|successful_tariff_payment\",\n        \"success|new_module_is_available_on_course\",\n        \"success|new_lesson_is_available_on_course\",\n        \"success|course_is_open\",\n        \"success|successful_offer_payment\",\n        \"success|contact_import_in_progress\",\n        \"success|contact_import_complete\",\n        \"success|quiz_approval\"\n    ],\n    close: [\n        \"revision|course_returned_for_revision\",\n        \"error|unsuccessful_offer_payment\",\n        \"error|unsuccessful_tariff_payment\",\n        \"error|set_read_only_subscription\"\n    ],\n    pencil: [\n        \"revision|student_completed_quiz\",\n        \"revision|contact_import_need_review\",\n        \"revision|student_completed_quiz_auto\"\n    ],\n    edit: [\"revision|student_completed_test\"]\n}\n\nconst iconsToComponent = {\n    paid: DollarSignIcon,\n    msg: MessageIcon,\n    attention: AttentionIcon,\n    clock: ClockIcon,\n    percent: PercentIcon,\n    user: User2Icon,\n    check: CheckIcon,\n    edit: EditIcon,\n    close: CloseIcon,\n    pencil: WhiteBoardIcon\n}\n\nexport default {\n    name: \"NotificationIcon\",\n    props: {\n        additionalClass: {\n            type: String,\n            default: \"\"\n        },\n        type: {\n            type: Object,\n            default: () => {},\n            required: true\n        }\n    },\n    methods: {\n        getIconName() {\n            for (let [icon, slugs] of Object.entries(mapSlugsToIcons)) {\n                if (slugs.map(slug => slug.split(\"|\")[1]).includes(this.type.slug)) {\n                    return iconsToComponent[icon]\n                }\n            }\n        },\n        getIconClass() {\n            for (let slugs of Object.values(mapSlugsToIcons)) {\n                let need = \"\"\n\n                slugs.find(slug => {\n                    const [module, text] = slug.split(\"|\")\n                    if (text === this.type.slug) {\n                        need = module\n                    }\n                })\n\n                if (need) {\n                    return need\n                }\n            }\n        }\n    }\n}\n</script>\n\n","<template>\n    <div class=\"notification-item-actions\">\n        <div\n            :class=\"{ disabled: markDisabled }\"\n            @click=\"$emit('mark')\"\n            class=\"notification-item-action notification-item-action_mark\"\n        >\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M20.5304 7.53033C20.8233 7.23744 20.8233 6.76256 20.5304 6.46967C20.2375 6.17678 19.7626 6.17678 19.4697 6.46967L20.5304 7.53033ZM9.0001 18L8.46978 18.5303C8.76267 18.8232 9.23754 18.8232 9.53043 18.5303L9.0001 18ZM4.53032 12.4697C4.23742 12.1768 3.76255 12.1768 3.46966 12.4697C3.17677 12.7626 3.17678 13.2374 3.46968 13.5303L4.53032 12.4697ZM19.4697 6.46967L8.46977 17.4696L9.53043 18.5303L20.5304 7.53033L19.4697 6.46967ZM3.46968 13.5303L8.46978 18.5303L9.53043 17.4696L4.53032 12.4697L3.46968 13.5303Z\"\n                    fill=\"#3E4755\"\n                />\n            </svg>\n        </div>\n        <div @click=\"$emit('delete')\" class=\"notification-item-action notification-item-action_delete\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M18.75 6C18.75 5.58579 18.4142 5.25 18 5.25C17.5858 5.25 17.25 5.58579 17.25 6H18.75ZM6.75 6C6.75 5.58579 6.41421 5.25 6 5.25C5.58579 5.25 5.25 5.58579 5.25 6H6.75ZM14.25 6C14.25 6.41421 14.5858 6.75 15 6.75C15.4142 6.75 15.75 6.41421 15.75 6H14.25ZM8.25 6C8.25 6.41421 8.58579 6.75 9 6.75C9.41421 6.75 9.75 6.41421 9.75 6H8.25ZM4 5.25C3.58579 5.25 3.25 5.58579 3.25 6C3.25 6.41421 3.58579 6.75 4 6.75V5.25ZM20 6.75C20.4142 6.75 20.75 6.41421 20.75 6C20.75 5.58579 20.4142 5.25 20 5.25V6.75ZM17.25 6V18H18.75V6H17.25ZM16 19.25H8V20.75H16V19.25ZM6.75 18V6H5.25V18H6.75ZM8 19.25C7.30964 19.25 6.75 18.6904 6.75 18H5.25C5.25 19.5188 6.48122 20.75 8 20.75V19.25ZM17.25 18C17.25 18.6904 16.6904 19.25 16 19.25V20.75C17.5188 20.75 18.75 19.5188 18.75 18H17.25ZM15.75 6V5H14.25V6H15.75ZM13 2.25H11V3.75H13V2.25ZM8.25 5V6H9.75V5H8.25ZM11 2.25C9.48122 2.25 8.25 3.48122 8.25 5H9.75C9.75 4.30964 10.3096 3.75 11 3.75V2.25ZM15.75 5C15.75 3.48122 14.5188 2.25 13 2.25V3.75C13.6904 3.75 14.25 4.30964 14.25 5H15.75ZM4 6.75H20V5.25H4V6.75Z\"\n                    fill=\"#DD4141\"\n                />\n            </svg>\n        </div>\n    </div>\n</template>\n\n<script>\nexport default {\n    props: {\n        markDisabled: {\n            type: Boolean,\n            default: false,\n            required: false\n        }\n    },\n    name: \"NotificationItemActions\"\n}\n</script>\n\n","<template>\n    <div\n        @mouseenter=\"hovered = true\"\n        @mouseleave=\"hovered = false\"\n        class=\"notification\"\n        :class=\"{ notification_new: isNew }\"\n    >\n        <div class=\"notification__wrapper flex-al-i-c\">\n            <div class=\"notification__avatar-wrapper\">\n                <UserAvatar\n                    v-if=\"item.creator\"\n                    :name=\"item.creator.name\"\n                    :avatar=\"item.creator.avatar_url || ''\"\n                    additionalClass=\"notification__avatar\"\n                />\n\n                <NotificationIcon :type=\"item.type\" :additionalClass=\"'notification__avatar-icon'\" />\n            </div>\n\n            <div class=\"notification__content\">\n                <p\n                    v-if=\"item.link\"\n                    class=\"notification__title\"\n                    @click=\"markItem\"\n                    v-html=\"linkedTitle(item.link, item.text, item.target)\"\n                ></p>\n                <p v-else class=\"notification__title\" v-html=\"item.text\"></p>\n\n                <p class=\"notification__date courses__item__preview\">\n                    {{ item.created_at | formatDateFromNow }}\n\n                    <!-- Tooltip -->\n                    <span class=\"courses__item-preview-tooltip tooltip-text notification__date-tooltip\">\n                        {{ item.created_at | formatDateWithTime }}\n                    </span>\n                </p>\n            </div>\n\n            <NotificationItemActions\n                :mark-disabled=\"item.is_read\"\n                v-if=\"hovered\"\n                @mark=\"markItem\"\n                @delete=\"deleteItem\"\n            />\n        </div>\n    </div>\n</template>\n\n<script>\nimport UserAvatar from \"@components/UserAvatar\"\nimport NotificationIcon from \"./NotificationIcon\"\nimport formatDateFromNow from \"@mixins/formatDate\"\nimport formatDateWithTime from \"@mixins/formatDate\"\nimport keyTranslator from \"@mixins/keyTranslator\"\nimport NotificationItemActions from \"@components/Notifications/NotificationItemActions\"\n\nexport default {\n    name: \"NotificationItem\",\n    components: {\n        NotificationItemActions,\n        UserAvatar,\n        NotificationIcon\n    },\n    props: {\n        item: {\n            type: Object,\n            default: () => {}\n        },\n        isNew: {\n            type: Boolean,\n            default: false\n        },\n        dataLength: {\n            type: Number,\n            default: 0\n        },\n        langsKeys: {\n            type: Object,\n            default: () => {}\n        }\n    },\n    mixins: [formatDateFromNow, formatDateWithTime, keyTranslator],\n    data() {\n        return {\n            hovered: false\n        }\n    },\n    methods: {\n        markItem() {\n            // this.$emit(\"markItem\", this.item.id)\n        },\n        deleteItem() {\n            this.$emit(\"deleteItem\", this.item.id)\n        },\n        linkedTitle(link, text, target) {\n            return `<a target=\"${target}\" href=\"${link}\" class=\"notification__link\">${text}</a>`\n        }\n    }\n}\n</script>\n","export default \"__VITE_ASSET__42edc9e4__\"","<template>\n    <div v-click-outside=\"closeModal\" class=\"notifications\">\n        <button type=\"button\" class=\"notifications__btn flex-center\" @click=\"handleModal\">\n            <transition name=\"fade\">\n                <svg alt=\"bell\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n                    <path\n                        d=\"M2.33331 13.1667L1.66249 12.8313C1.54625 13.0637 1.55867 13.3399 1.69532 13.561C1.83198 13.7821 2.07338 13.9167 2.33331 13.9167V13.1667ZM15.6666 13.1667V13.9167C15.9266 13.9167 16.168 13.7821 16.3046 13.561C16.4413 13.3399 16.4537 13.0637 16.3375 12.8313L15.6666 13.1667ZM4.74998 6.5C4.74998 4.15279 6.65277 2.25 8.99998 2.25V0.75C5.82434 0.75 3.24998 3.32436 3.24998 6.5H4.74998ZM8.99998 2.25C11.3472 2.25 13.25 4.15279 13.25 6.5H14.75C14.75 3.32436 12.1756 0.75 8.99998 0.75V2.25ZM3.24998 6.5C3.24998 8.05323 2.85932 9.6336 2.45513 10.8462C2.25454 11.448 2.05402 11.9491 1.90437 12.2983C1.82963 12.4727 1.76779 12.6087 1.72529 12.6998C1.70405 12.7453 1.68765 12.7796 1.67691 12.8017C1.67154 12.8128 1.66759 12.8209 1.66515 12.8259C1.66393 12.8283 1.66309 12.83 1.66265 12.8309C1.66242 12.8314 1.6623 12.8316 1.66227 12.8317C1.66226 12.8317 1.66227 12.8317 1.66231 12.8316C1.66232 12.8316 1.66237 12.8315 1.66238 12.8315C1.66243 12.8314 1.66249 12.8313 2.33331 13.1667C3.00413 13.5021 3.00421 13.5019 3.00428 13.5018C3.00432 13.5017 3.0044 13.5015 3.00447 13.5014C3.00461 13.5011 3.00477 13.5008 3.00496 13.5004C3.00534 13.4997 3.00582 13.4987 3.0064 13.4975C3.00755 13.4952 3.0091 13.4921 3.01104 13.4881C3.01491 13.4803 3.02031 13.4692 3.02715 13.4551C3.04082 13.4268 3.06024 13.3862 3.08456 13.3341C3.13321 13.2299 3.20158 13.0794 3.28309 12.8892C3.44594 12.5092 3.66209 11.9687 3.87816 11.3205C4.3073 10.0331 4.74998 8.28011 4.74998 6.5H3.24998ZM2.33331 13.9167H15.6666V12.4167H2.33331V13.9167ZM15.6666 13.1667C16.3375 12.8313 16.3375 12.8314 16.3376 12.8315C16.3376 12.8315 16.3376 12.8316 16.3377 12.8316C16.3377 12.8317 16.3377 12.8317 16.3377 12.8317C16.3377 12.8316 16.3375 12.8314 16.3373 12.8309C16.3369 12.83 16.336 12.8283 16.3348 12.8259C16.3324 12.8209 16.3284 12.8128 16.323 12.8017C16.3123 12.7796 16.2959 12.7453 16.2747 12.6998C16.2322 12.6087 16.1703 12.4727 16.0956 12.2983C15.9459 11.9491 15.7454 11.448 15.5448 10.8462C15.1406 9.6336 14.75 8.05323 14.75 6.5H13.25C13.25 8.28011 13.6927 10.0331 14.1218 11.3205C14.3379 11.9687 14.554 12.5092 14.7169 12.8892C14.7984 13.0794 14.8667 13.2299 14.9154 13.3341C14.9397 13.3862 14.9591 13.4268 14.9728 13.4551C14.9796 13.4692 14.9851 13.4803 14.9889 13.4881C14.9909 13.4921 14.9924 13.4952 14.9936 13.4975C14.9941 13.4987 14.9946 13.4997 14.995 13.5004C14.9952 13.5008 14.9953 13.5011 14.9955 13.5014C14.9956 13.5015 14.9956 13.5017 14.9957 13.5018C14.9958 13.5019 14.9958 13.5021 15.6666 13.1667ZM10.75 14C10.75 14.9665 9.96648 15.75 8.99998 15.75V17.25C10.7949 17.25 12.25 15.7949 12.25 14H10.75ZM8.99998 15.75C8.03348 15.75 7.24998 14.9665 7.24998 14H5.74998C5.74998 15.7949 7.20505 17.25 8.99998 17.25V15.75ZM7.24998 14V13.1667H5.74998V14H7.24998ZM12.25 14V13.1667H10.75V14H12.25Z\"\n                        fill=\"#3E4755\"\n                    />\n                </svg>\n            </transition>\n\n            <transition name=\"scale\">\n                <span\n                    v-if=\"data && newNotificationsCount\"\n                    class=\"notifications__quantity flex-center\"\n                    :class=\"{ notifications__quantity_large: newNotificationsCount >= 100 }\"\n                >\n                    {{ newNotificationsCount | countNew }}\n                </span>\n            </transition>\n        </button>\n\n        <transition name=\"fade-up\">\n            <div\n                v-if=\"isModalOpen\"\n                id=\"notificationsContainer\"\n                class=\"notifications__container\"\n                :class=\"{ notifications__container_blured: blured }\"\n            >\n                <div class=\"notifications__header\">\n                    <p class=\"notifications__header-title\">\n                        {{ t(\"notifications.notifications\") }}\n\n                        <!-- Show notifications q-ty if more than 99 -->\n                        <span v-if=\"newNotificationsCount\" class=\"notifications__items-q-ty\">\n                            {{ newNotificationsCount }}\n                        </span>\n                    </p>\n\n                    <SubMenu\n                        :btnClass=\"['dropdown-menu__btn_24']\"\n                        :svgWidth=\"3\"\n                        :svgHeight=\"15\"\n                        :isMarkDisabled=\"newNotificationsCount === 0\"\n                        :isDeletionDisabled=\"!data || (data && !data.length)\"\n                        :isDisabledToMove=\"true\"\n                        :langsKeys=\"langsKeys\"\n                        @markItem=\"markAllAsRead\"\n                        @open=\"blured = true\"\n                        @close=\"blured = false\"\n                        @deleteItem=\"deleteAll\"\n                    />\n                </div>\n\n                <div\n                    id=\"notifications\"\n                    class=\"notifications__content relative\"\n                    :class=\"{ notifications__content_scroll: data && data.length >= 5 }\"\n                    style=\"overflow: hidden\"\n                    :key=\"data.length\"\n                >\n                    <!-- Container while data is loading-->\n                    <transition name=\"fade\">\n                        <div v-show=\"loadingData\" class=\"notifications__loader absolute flex-center\">\n                            <LoaderBlock />\n                        </div>\n                    </transition>\n\n                    <div class=\"notifications__scroll-content custom-scroll relative\">\n                        <!-- Container with no data -->\n                        <div\n                            v-if=\"areAllDataDeleted || (data && !data.length)\"\n                            class=\"notifications__no-data flex-center\"\n                        >\n                            <img\n                                class=\"notifications__no-data-img\"\n                                src=\"@images/portal/bell-rotated.svg\"\n                                alt=\"No new notifications\"\n                            />\n\n                            <p class=\"notifications__no-data-title\">{{ t(\"notifications.no_notifications\") }}</p>\n                        </div>\n\n                        <div\n                            v-else-if=\"!areAllDataDeleted && data && data.length\"\n                            class=\"notifications__items\"\n                            :class=\"{ 'notifications__items_pb-10': !areAllDataDeleted && data && data.length < 5 }\"\n                        >\n                            <!-- List with notifications -->\n                            <div v-for=\"item of data\" :key=\"item.id\">\n                                <NotificationItem\n                                    v-if=\"!item.deleted\"\n                                    :item=\"item\"\n                                    :dataLength=\"data.length\"\n                                    :isNew=\"!item['is_read']\"\n                                    :langsKeys=\"langsKeys\"\n                                    @markItem=\"markItemAsRead($event)\"\n                                    @deleteItem=\"deleteItem($event)\"\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\nimport axios from \"~axios\"\nimport ClickOutside from \"vue-click-outside\"\nimport SubMenu from \"./SubMenu\"\nimport NotificationItem from \"./NotificationItem\"\nimport LoaderBlock from \"@components/Loaders/LoaderBlock\"\nimport keyTranslator from \"@mixins/keyTranslator\"\nimport { EventBus, EventsList } from \"~events\"\nimport { Debouncer } from \"@helpers\"\n\nexport default {\n    name: \"NotificationsModal\",\n    components: {\n        SubMenu,\n        NotificationItem,\n        LoaderBlock\n    },\n    data: () => ({\n        pageLoader: false,\n        isModalOpen: false,\n        data: [],\n        newNotificationsCount: null,\n        scroll: null,\n        loadingData: false,\n        areAllDataDeleted: false,\n        langsKeys: null,\n        blured: false,\n        localApiPrefix: null,\n        debouncer: new Debouncer()\n    }),\n    props: {\n        isOnPublic: {\n            type: Boolean,\n            default: false\n        },\n        apiPrefix: {\n            type: String,\n            default: \"\"\n        }\n    },\n    directives: {\n        ClickOutside\n    },\n    mixins: [keyTranslator],\n    filters: {\n        countNew(count) {\n            return count < 100 ? count : \"99+\"\n        }\n    },\n    watch: {\n        data: {\n            handler(val) {\n                if (val) this.countNewNotifications()\n            }\n        },\n        $route() {\n            this.debouncer.exec(() => {\n                this.shadowDataGetting()\n            }, 5000)\n        }\n    },\n    methods: {\n        getData() {\n            if (!this.loadingData) this.loadingData = true\n            this.areAllDataDeleted = false\n\n            axios.get(`/notifications/user`).then(async response => {\n                this.data = response.data.data\n\n                if (this.data.length === 0) {\n                    this.areAllDataDeleted = true\n                }\n                this.data.forEach(item => item.deleted === false)\n\n                this.loadingData = false\n\n                this.countNewNotifications()\n            })\n        },\n        shadowDataGetting() {\n            this.data.forEach((item, index) => {\n                if (item.deleted) this.data.splice(index, 1)\n            })\n\n            axios.get(`/notifications/user`).then(async response => {\n                const newData = response.data.data\n\n                // *** Check if new notifications data is different from the old\n                if (!this.data.length || (newData && newData.length && this.data.length !== newData.length)) {\n                    let newNotifications = []\n\n                    // *** Find new items\n                    newData.forEach(item => {\n                        if (this.data.every(dataItem => item.id !== dataItem.id)) {\n                            item.deleted = false\n                            newNotifications = [item, ...newNotifications]\n                        }\n                    })\n\n                    // *** Adding new items to the list\n                    this.data = [...newNotifications.reverse(), ...this.data]\n                    // *** Recount notifications quantity\n                    this.countNewNotifications()\n                }\n\n                this.loadingData = false\n            })\n        },\n        handleModal() {\n            this.isModalOpen = !this.isModalOpen\n\n            this.blured = false\n\n            if (window.innerWidth < 640 && this.isModalOpen) {\n                EventBus.$emit(EventsList.BLUR_MAIN_CONTENT, true)\n            } else if (!this.isModalOpen) {\n                EventBus.$emit(EventsList.BLUR_MAIN_CONTENT, false)\n            }\n        },\n        closeModal(ev) {\n            if (ev && ev.target && ev.target.classList.contains(\"course__header_btn-login\")) {\n                return\n            }\n\n            this.blured = false\n\n            if (this.isModalOpen) {\n                this.isModalOpen = false\n                EventBus.$emit(EventsList.BLUR_MAIN_CONTENT, false)\n            }\n        },\n        mobileSetCount() {\n            if (window.innerWidth > 640) return\n            const elems = document.querySelectorAll(\"[data-notify-count]\")\n            for (let i = 0; elems.length > i; i++) {\n                elems[i].innerHTML = this.newNotificationsCount < 100 ? this.newNotificationsCount : \"99+\"\n                // elems[i].innerHTML = this.newNotificationsCount\n            }\n        },\n        countNewNotifications() {\n            this.newNotificationsCount = 0\n\n            if (this.data && this.data.length) {\n                this.data.map(el => {\n                    if (!el.is_read) this.newNotificationsCount++\n                    return el\n                })\n            }\n            this.mobileSetCount()\n        },\n        markItemAsRead(id) {\n            this.loadingData = true\n\n            axios.put(`/notifications/${id}/read`).then(() => {\n                this.getData()\n            })\n        },\n        markAllAsRead() {\n            this.loadingData = true\n\n            axios.put(`/notifications/user/read/all`).then(() => {\n                this.getData()\n            })\n        },\n        deleteItemLocally(id) {\n            id\n                ? this.data.forEach(item => {\n                      if (item.id === id) {\n                          item.deleted = true\n                          item.is_read = true\n                      }\n                  })\n                : (this.data = [])\n\n            this.countNewNotifications()\n            this.loadingData = false\n        },\n        deleteItem(id) {\n            this.loadingData = true\n\n            axios.delete(`/notifications/${id}`).then(() => {\n                this.deleteItemLocally(id)\n            })\n        },\n        deleteAll() {\n            this.loadingData = true\n\n            axios.delete(`/notifications/user/all`).then(() => {\n                this.deleteItemLocally()\n            })\n        }\n    },\n    created() {\n        // axios.defaults.baseURL === this.apiPrefix ? (this.localApiPrefix = \"\") : (this.localApiPrefix = this.apiPrefix)\n\n        setTimeout(async () => {\n            if (this.isOnPublic) {\n                // Get langs keys\n                await axios\n                    .get(window.cached_routes[\"translation-groups\"], {\n                        params: {\n                            groups: \"notifications\",\n                            lang: window.app_current_locale\n                        },\n                        headers: { \"X-Language\": window.app_current_locale }\n                    })\n                    .then(response => {\n                        this.langsKeys = response.data\n\n                        this.getData()\n                    })\n            } else {\n                await this.getData()\n                this.langsKeys = this.langs\n            }\n        }, 500)\n    }\n}\n</script>\n<style lang=\"sass\">\n$mainFont: Lato, sans-serif\n$additionalFont: Ubuntu, serif\n$accent-color: #FF7439\n\n.flex-al-i-c\n    display: flex\n    align-items: center\n\n.notifications\n    position: relative\n    &__scroll-content\n        max-height: 415px\n        overflow: auto\n    @media screen and ( max-width: 640px )\n        position: static\n        z-index: 5555\n        .expert__nav-md__overflow\n            display: block\n            pointer-events: none\n    &__btn\n        position: relative\n        width: 25px\n        height: 25px\n        background-color: #FCFCFD\n        border-radius: 100px\n        box-shadow: 0px 2px 5px rgba(128, 158, 191, 0.25)\n        cursor: pointer\n        svg\n            path\n                transition: .2s\n                fill: #52565C\n        &:hover\n            svg\n                path\n                    fill: #3965FF !important\n    &__quantity\n        position: absolute\n        width: 16px\n        height: 16px\n        transform-origin: bottom left\n        background: #DD4141\n        top: -3px\n        right: -3px\n        font-style: normal\n        font-weight: 700\n        font-size: 10px\n        line-height: 15px\n        color: #fff\n        border-radius: 50%\n        transition: .3s\n        &_large\n            font-size: 7px\n            width: 17px\n            height: 17px\n            top: -4px\n            right: -4px\n\n    &__container\n        position: absolute\n        top: 35px\n        right: -5px\n        width: 400px\n        z-index: 30\n        background: #fff\n        border-radius: 10px\n        box-shadow: 0 10px 40px rgba(128, 158, 191, 0.2)\n        &_blured\n            .notifications__header-title, .notifications__items, .dropdown-menu__btn, .notifications__no-data\n                filter: blur(1px)\n                cursor: default\n        @media screen and ( max-width: 640px )\n            width: 94%\n            top: 65px\n            right: unset\n            left: 3%\n            z-index: 11\n    &__header\n        display: flex\n        justify-content: space-between\n        align-items: center\n        padding: 0 31px 0 20px\n        min-height: 63px\n        box-sizing: border-box\n    &__header-title\n        font-family: $additionalFont\n        font-weight: 500\n        font-size: 15px\n        position: relative\n        line-height: 19.5px\n    &__items\n        &_pb-10\n            padding-bottom: 10px\n\n    .notifications__items-q-ty\n        font-weight: 600\n        font-family: \"Lato\", sans-serif\n        font-size: 15px\n        background-color: #FF7439\n        color: #ffffff\n        border-radius: 100px\n        width: 45px\n        position: absolute\n        display: flex\n        align-items: center\n        right: calc(-50% - 4px)\n        top: -3px\n        justify-content: center\n        height: 26px\n\n    &__content\n        font-family: $mainFont\n        font-style: normal\n        font-weight: 400\n        font-size: 14px\n        line-height: 130%\n        color: #000\n\n    &__no-data\n        flex-direction: column\n        padding-bottom: 20px\n        font-size: 18px\n        font-weight: 700\n        color: #52565C\n        font-family: $mainFont\n    &__loader\n        min-height: 165px\n        height: 100%\n        left: 0\n        width: 100%\n        z-index: 1000\n        background: rgb(255, 255, 255, 0.8)\n    &__no-data-img\n        position: relative\n        top: -5px\n        min-height: 127px\n    &__no-data-title\n        position: relative\n        top: -10px\n        text-align: center\n\n    .notification\n        .notification-item-actions\n            position: absolute\n            right: 15px\n        &_new\n            background: #F2F7FF\n        &__wrapper\n            padding: 10px 10px 10px 14px\n        &__avatar-wrapper\n            position: relative\n            margin-right: 22px\n            width: 28px\n        &__avatar\n            font-size: 1.5rem\n            margin-bottom: 0\n            min-width: 46px\n            width: 46px\n            height: 46px\n            overflow: hidden\n            border-radius: 50%\n            img\n                width: 100%\n                height: 100%\n                object-fit: cover\n        &__avatar-icon\n            position: absolute\n            right: -5px\n            bottom: -5px\n            box-shadow: 0px 1px 3px rgba(126, 161, 217, 0.3)\n        &__content\n            position: relative\n            width: 100%\n            top: 5px\n            display: flex\n            flex-direction: column\n            justify-content: space-between\n            min-height: 50px\n            max-height: 75px\n            font-family: $mainFont\n            font-weight: 400\n            font-size: 14px\n            color: #000\n            line-height: 130%\n            box-sizing: border-box\n        &__title\n            display: -webkit-box\n            color: #52565C\n            font-size: 13px\n            line-height: 15.6px\n            -webkit-line-clamp: 2\n            -webkit-box-orient: vertical\n            overflow: hidden\n        &__date\n            width: fit-content\n            font-weight: 500\n            font-size: 10px\n            color: #52565C\n            cursor: default\n        &__date-tooltip\n            font-family: $mainFont\n            font-weight: 300\n            font-size: 12px\n            line-height: 130%\n            color: #000\n            transform: translate(-50%, 50%)\n\n        &__link\n            display: block\n            transition: color 0.2s\n            &:hover\n                color: $accent-color\n    .simplebar-scrollbar\n        &::before\n            width: 4px\n\n.notification\n    .notification-item-actions\n        position: absolute\n        right: 15px\n    &_new\n        background: #F2F7FF\n    &__wrapper\n        padding: 10px 10px 10px 14px\n    &__avatar-wrapper\n        position: relative\n        margin-right: 22px\n        width: 28px\n    &__avatar\n        font-size: 1.5rem\n        margin-bottom: 0\n        min-width: 46px\n        width: 46px\n        height: 46px\n    &__avatar-icon\n        position: absolute\n        right: -5px\n        bottom: -5px\n        box-shadow: 0px 1px 3px rgba(126, 161, 217, 0.3)\n    &__content\n        position: relative\n        width: 100%\n        top: 5px\n        display: flex\n        flex-direction: column\n        justify-content: space-between\n        min-height: 50px\n        max-height: 75px\n        font-family: $mainFont\n        font-weight: 400\n        font-size: 14px\n        color: #000\n        line-height: 130%\n        box-sizing: border-box\n    &__title\n        display: -webkit-box\n        color: #52565C\n        font-size: 13px\n        line-height: 15.6px\n        -webkit-line-clamp: 2\n        -webkit-box-orient: vertical\n        overflow: hidden\n    &__date\n        width: fit-content\n        font-weight: 500\n        font-size: 10px\n        color: #52565C\n        cursor: default\n    &__date-tooltip\n        font-family: $mainFont\n        font-weight: 300\n        font-size: 12px\n        line-height: 130%\n        color: #000\n        transform: translate(-50%, 50%)\n\n    &__link\n        display: block\n        transition: color 0.2s\n        &:hover\n            color: $accent-color\n    .simplebar-scrollbar\n        &::before\n            width: 4px\n</style>\n"],"names":["_sfc_main","DotsMenuIcon","ClickOutside","keyTranslator","val","mapSlugsToIcons","iconsToComponent","DollarSignIcon","MessageIcon","AttentionIcon","ClockIcon","PercentIcon","User2Icon","CheckIcon","EditIcon","CloseIcon","WhiteBoardIcon","icon","slugs","slug","need","module","text","NotificationItemActions","UserAvatar","NotificationIcon","formatDateFromNow","formatDateWithTime","link","target","__$_require_61a40aa6__","SubMenu","NotificationItem","LoaderBlock","Debouncer","count","axios","response","__async","item","index","newData","newNotifications","dataItem","EventBus","EventsList","ev","elems","i","el","id"],"mappings":"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"}