Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/monitoring-campaigns/sequence/campaign-banner.min.js
!function(){"use strict";var n='/*\n* Configuration\n* IMPORTANT NOTE: DO NOT change the section order. The order matters for overrides\n*/\n/*\n---------------------------------------------------------\nBootstrap Functions - DO NOT change anything in here\n---------------------------------------------------------\n*/\n/*\n----------------------------------------------------------------------------\nCustom Bootstrap SCSS Variable Overides - Override bootstrap SCSS Variables\n----------------------------------------------------------------------------\n*/\n/*\n* Color Overrides\n*/\n/*\n* Body\n* Settings for the `<body>` element.\n*/\n/*\n* Font Overrides\n*/\n/*\n* Spacer Overrides\n*/\n/*\n* Spacer variables\n*/\n/*\n* Border widths\n*/\n/*\n* Border radius\n*/\n/*\n* Spinner\n*/\n/*\n* Toasts\n*/\n/*\n-----------------------------------------------------------\nBootstrap Variables - DO NOT change anything in here\n-----------------------------------------------------------\n*/\n/*\n-----------------------------------------------------------\nBootstrap Maps - DO NOT change anything in here\n-----------------------------------------------------------\n*/\n/*\n-----------------------------------------------------------\nBootstrap Mixins - DO NOT change anything in here\n-----------------------------------------------------------\n*/\n/*\n----------------------------------------------------------------------------\nCustom Bootstrap Map Overrides - Override bootstrap SCSS Maps\n----------------------------------------------------------------------------\n*/\n/*\n-----------------------------------------------------------\nBootstrap Utilities - DO NOT change anything in here\n-----------------------------------------------------------\n*/\n/*\n----------------------------------------------------------------------\nCustom Bootstrap utilities Overrides - Override bootstrap utilities\n----------------------------------------------------------------------\n*/\n/*\n-------------------------------------------------------------------\ncPanel Jupiter Custom Variables - Variables unrelated to Bootstrap\n\nNote:\nVariables should follow the `$component-state-property-size` formula for\nconsistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n-------------------------------------------------------------------\n*/\n/*\n-------------------------------------------------------------------\ncPanel Jupiter Custom Mixins - Mixins unrelated to Bootstrap\n-------------------------------------------------------------------\n*/\n/*\n-------------------------------------------------------------------\ncPanel Jupiter Custom Utilites - Utilities unrelated to Bootstrap\n-------------------------------------------------------------------\n*/\n.btn {\n --cp-btn-padding-x: 0.75rem;\n --cp-btn-padding-y: 0.375rem;\n --cp-btn-font-family: ;\n --cp-btn-font-size: 1rem;\n --cp-btn-font-weight: 400;\n --cp-btn-line-height: 1.5;\n --cp-btn-color: var(--cp-body-color);\n --cp-btn-bg: transparent;\n --cp-btn-border-width: var(--cp-border-width);\n --cp-btn-border-color: transparent;\n --cp-btn-border-radius: var(--cp-border-radius);\n --cp-btn-hover-border-color: transparent;\n --cp-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);\n --cp-btn-disabled-opacity: 0.65;\n --cp-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cp-btn-focus-shadow-rgb), .5);\n display: inline-block;\n padding: var(--cp-btn-padding-y) var(--cp-btn-padding-x);\n font-family: var(--cp-btn-font-family);\n font-size: var(--cp-btn-font-size);\n font-weight: var(--cp-btn-font-weight);\n line-height: var(--cp-btn-line-height);\n color: var(--cp-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--cp-btn-border-width) solid var(--cp-btn-border-color);\n border-radius: var(--cp-btn-border-radius);\n background-color: var(--cp-btn-bg);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .btn {\n transition: none;\n }\n}\n\n.btn:hover {\n color: var(--cp-btn-hover-color);\n background-color: var(--cp-btn-hover-bg);\n border-color: var(--cp-btn-hover-border-color);\n}\n\n.btn-check + .btn:hover {\n color: var(--cp-btn-color);\n background-color: var(--cp-btn-bg);\n border-color: var(--cp-btn-border-color);\n}\n\n.btn:focus-visible {\n color: var(--cp-btn-hover-color);\n background-color: var(--cp-btn-hover-bg);\n border-color: var(--cp-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--cp-btn-focus-box-shadow);\n}\n\n.btn-check:focus-visible + .btn {\n border-color: var(--cp-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--cp-btn-focus-box-shadow);\n}\n\n.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {\n color: var(--cp-btn-active-color);\n background-color: var(--cp-btn-active-bg);\n border-color: var(--cp-btn-active-border-color);\n}\n\n.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {\n box-shadow: var(--cp-btn-focus-box-shadow);\n}\n\n.btn-check:checked:focus-visible + .btn {\n box-shadow: var(--cp-btn-focus-box-shadow);\n}\n\n.btn:disabled, .btn.disabled, fieldset:disabled .btn {\n color: var(--cp-btn-disabled-color);\n pointer-events: none;\n background-color: var(--cp-btn-disabled-bg);\n border-color: var(--cp-btn-disabled-border-color);\n opacity: var(--cp-btn-disabled-opacity);\n}\n\n.btn-primary {\n --cp-btn-color: #fff;\n --cp-btn-bg: #003da6;\n --cp-btn-border-color: #003da6;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #00348d;\n --cp-btn-hover-border-color: #003185;\n --cp-btn-focus-shadow-rgb: 38, 90, 179;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #003185;\n --cp-btn-active-border-color: #002e7d;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #fff;\n --cp-btn-disabled-bg: #003da6;\n --cp-btn-disabled-border-color: #003da6;\n}\n\n.btn-success {\n --cp-btn-color: #fff;\n --cp-btn-bg: #198754;\n --cp-btn-border-color: #198754;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #157347;\n --cp-btn-hover-border-color: #146c43;\n --cp-btn-focus-shadow-rgb: 60, 153, 110;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #146c43;\n --cp-btn-active-border-color: #13653f;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #fff;\n --cp-btn-disabled-bg: #198754;\n --cp-btn-disabled-border-color: #198754;\n}\n\n.btn-info {\n --cp-btn-color: #000;\n --cp-btn-bg: #0dcaf0;\n --cp-btn-border-color: #0dcaf0;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #31d2f2;\n --cp-btn-hover-border-color: #25cff2;\n --cp-btn-focus-shadow-rgb: 11, 172, 204;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #3dd5f3;\n --cp-btn-active-border-color: #25cff2;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #000;\n --cp-btn-disabled-bg: #0dcaf0;\n --cp-btn-disabled-border-color: #0dcaf0;\n}\n\n.btn-warning {\n --cp-btn-color: #000;\n --cp-btn-bg: #ffc107;\n --cp-btn-border-color: #ffc107;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #ffca2c;\n --cp-btn-hover-border-color: #ffc720;\n --cp-btn-focus-shadow-rgb: 217, 164, 6;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #ffcd39;\n --cp-btn-active-border-color: #ffc720;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #000;\n --cp-btn-disabled-bg: #ffc107;\n --cp-btn-disabled-border-color: #ffc107;\n}\n\n.btn-danger {\n --cp-btn-color: #fff;\n --cp-btn-bg: #dc3545;\n --cp-btn-border-color: #dc3545;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #bb2d3b;\n --cp-btn-hover-border-color: #b02a37;\n --cp-btn-focus-shadow-rgb: 225, 83, 97;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #b02a37;\n --cp-btn-active-border-color: #a52834;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #fff;\n --cp-btn-disabled-bg: #dc3545;\n --cp-btn-disabled-border-color: #dc3545;\n}\n\n.btn-light {\n --cp-btn-color: #000;\n --cp-btn-bg: #fafafa;\n --cp-btn-border-color: #fafafa;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #d5d5d5;\n --cp-btn-hover-border-color: #c8c8c8;\n --cp-btn-focus-shadow-rgb: 213, 213, 213;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #c8c8c8;\n --cp-btn-active-border-color: #bcbcbc;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #000;\n --cp-btn-disabled-bg: #fafafa;\n --cp-btn-disabled-border-color: #fafafa;\n}\n\n.btn-dark {\n --cp-btn-color: #fff;\n --cp-btn-bg: #243746;\n --cp-btn-border-color: #243746;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #455562;\n --cp-btn-hover-border-color: #3a4b59;\n --cp-btn-focus-shadow-rgb: 69, 85, 98;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #505f6b;\n --cp-btn-active-border-color: #3a4b59;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #fff;\n --cp-btn-disabled-bg: #243746;\n --cp-btn-disabled-border-color: #243746;\n}\n\n.btn-accent {\n --cp-btn-color: #000;\n --cp-btn-bg: #de5c2e;\n --cp-btn-border-color: #de5c2e;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #e3744d;\n --cp-btn-hover-border-color: #e16c43;\n --cp-btn-focus-shadow-rgb: 189, 78, 39;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #e57d58;\n --cp-btn-active-border-color: #e16c43;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #000;\n --cp-btn-disabled-bg: #de5c2e;\n --cp-btn-disabled-border-color: #de5c2e;\n}\n\n.btn-tertiary {\n --cp-btn-color: #fff;\n --cp-btn-bg: #202654;\n --cp-btn-border-color: #202654;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #1b2047;\n --cp-btn-hover-border-color: #1a1e43;\n --cp-btn-focus-shadow-rgb: 65, 71, 110;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #1a1e43;\n --cp-btn-active-border-color: #181d3f;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #fff;\n --cp-btn-disabled-bg: #202654;\n --cp-btn-disabled-border-color: #202654;\n}\n\n.btn-outline-primary {\n --cp-btn-color: #003da6;\n --cp-btn-border-color: #003da6;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #003da6;\n --cp-btn-hover-border-color: #003da6;\n --cp-btn-focus-shadow-rgb: 0, 61, 166;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #003da6;\n --cp-btn-active-border-color: #003da6;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #003da6;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #003da6;\n --cp-gradient: none;\n}\n\n.btn-outline-success {\n --cp-btn-color: #198754;\n --cp-btn-border-color: #198754;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #198754;\n --cp-btn-hover-border-color: #198754;\n --cp-btn-focus-shadow-rgb: 25, 135, 84;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #198754;\n --cp-btn-active-border-color: #198754;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #198754;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #198754;\n --cp-gradient: none;\n}\n\n.btn-outline-info {\n --cp-btn-color: #0dcaf0;\n --cp-btn-border-color: #0dcaf0;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #0dcaf0;\n --cp-btn-hover-border-color: #0dcaf0;\n --cp-btn-focus-shadow-rgb: 13, 202, 240;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #0dcaf0;\n --cp-btn-active-border-color: #0dcaf0;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #0dcaf0;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #0dcaf0;\n --cp-gradient: none;\n}\n\n.btn-outline-warning {\n --cp-btn-color: #ffc107;\n --cp-btn-border-color: #ffc107;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #ffc107;\n --cp-btn-hover-border-color: #ffc107;\n --cp-btn-focus-shadow-rgb: 255, 193, 7;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #ffc107;\n --cp-btn-active-border-color: #ffc107;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #ffc107;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #ffc107;\n --cp-gradient: none;\n}\n\n.btn-outline-danger {\n --cp-btn-color: #dc3545;\n --cp-btn-border-color: #dc3545;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #dc3545;\n --cp-btn-hover-border-color: #dc3545;\n --cp-btn-focus-shadow-rgb: 220, 53, 69;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #dc3545;\n --cp-btn-active-border-color: #dc3545;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #dc3545;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #dc3545;\n --cp-gradient: none;\n}\n\n.btn-outline-light {\n --cp-btn-color: #fafafa;\n --cp-btn-border-color: #fafafa;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #fafafa;\n --cp-btn-hover-border-color: #fafafa;\n --cp-btn-focus-shadow-rgb: 250, 250, 250;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #fafafa;\n --cp-btn-active-border-color: #fafafa;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #fafafa;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #fafafa;\n --cp-gradient: none;\n}\n\n.btn-outline-dark {\n --cp-btn-color: #243746;\n --cp-btn-border-color: #243746;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #243746;\n --cp-btn-hover-border-color: #243746;\n --cp-btn-focus-shadow-rgb: 36, 55, 70;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #243746;\n --cp-btn-active-border-color: #243746;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #243746;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #243746;\n --cp-gradient: none;\n}\n\n.btn-outline-accent {\n --cp-btn-color: #de5c2e;\n --cp-btn-border-color: #de5c2e;\n --cp-btn-hover-color: #000;\n --cp-btn-hover-bg: #de5c2e;\n --cp-btn-hover-border-color: #de5c2e;\n --cp-btn-focus-shadow-rgb: 222, 92, 46;\n --cp-btn-active-color: #000;\n --cp-btn-active-bg: #de5c2e;\n --cp-btn-active-border-color: #de5c2e;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #de5c2e;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #de5c2e;\n --cp-gradient: none;\n}\n\n.btn-outline-tertiary {\n --cp-btn-color: #202654;\n --cp-btn-border-color: #202654;\n --cp-btn-hover-color: #fff;\n --cp-btn-hover-bg: #202654;\n --cp-btn-hover-border-color: #202654;\n --cp-btn-focus-shadow-rgb: 32, 38, 84;\n --cp-btn-active-color: #fff;\n --cp-btn-active-bg: #202654;\n --cp-btn-active-border-color: #202654;\n --cp-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --cp-btn-disabled-color: #202654;\n --cp-btn-disabled-bg: transparent;\n --cp-btn-disabled-border-color: #202654;\n --cp-gradient: none;\n}\n\n.btn-link, .btn.icon-btn-link {\n --cp-btn-font-weight: 400;\n --cp-btn-color: var(--cp-link-color);\n --cp-btn-bg: transparent;\n --cp-btn-border-color: transparent;\n --cp-btn-hover-color: var(--cp-link-hover-color);\n --cp-btn-hover-border-color: transparent;\n --cp-btn-active-color: var(--cp-link-hover-color);\n --cp-btn-active-border-color: transparent;\n --cp-btn-disabled-color: #6d7983;\n --cp-btn-disabled-border-color: transparent;\n --cp-btn-box-shadow: 0 0 0 #000;\n --cp-btn-focus-shadow-rgb: 38, 90, 179;\n text-decoration: underline;\n}\n\n.btn-link:focus-visible, .btn.icon-btn-link:focus-visible {\n color: var(--cp-btn-color);\n}\n\n.btn-link:hover, .btn.icon-btn-link:hover {\n color: var(--cp-btn-hover-color);\n}\n\n.btn-lg {\n --cp-btn-padding-y: 0.5rem;\n --cp-btn-padding-x: 1rem;\n --cp-btn-font-size: 1.25rem;\n --cp-btn-border-radius: var(--cp-border-radius-lg);\n}\n\n.btn-sm {\n --cp-btn-padding-y: 0.25rem;\n --cp-btn-padding-x: 0.5rem;\n --cp-btn-font-size: 0.875rem;\n --cp-btn-border-radius: var(--cp-border-radius-sm);\n}\n\n.btn {\n min-width: 160px;\n}\n\n.btn.btn-round {\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n cursor: pointer;\n padding: var(--cp-spacer-2);\n border-radius: 100%;\n border: 1px solid var(--cp-tertiary, #202654);\n width: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\n background: var(--cp-component-bg, #fff);\n color: var(--cp-tertiary, #202654);\n}\n\n.btn.btn-round:hover, .btn.btn-round:focus, .btn.btn-round:active {\n background: var(--cp-tertiary, #202654);\n color: #fff;\n}\n\n.btn.btn-link, .btn.icon-btn-link {\n min-width: initial;\n}\n\n.btn.btn-shrink {\n min-width: unset;\n}\n\n.btn.icon-btn-link {\n /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n}\n\n.btn .ri-lg {\n font-size: 1.3333em;\n line-height: 0.75em;\n vertical-align: -0.18em;\n}\n\n.btn-sm .ri-sm {\n vertical-align: -1px;\n}\n\n.btn.disabled,\n.btn[disabled] {\n pointer-events: all;\n cursor: not-allowed;\n}\n\n.icon-btn-link-text {\n text-decoration: underline;\n text-wrap: nowrap;\n}\n\n[dir="ltr"] .icon-btn-link-text {\n padding-left: var(--cp-spacer-1);\n}\n\n[dir="rtl"] .icon-btn-link-text {\n padding-right: var(--cp-spacer-1);\n}\n\n.card {\n --cp-card-spacer-y: 1rem;\n --cp-card-spacer-x: 1rem;\n --cp-card-title-spacer-y: 0.5rem;\n --cp-card-title-color: ;\n --cp-card-subtitle-color: ;\n --cp-card-border-width: var(--cp-border-width);\n --cp-card-border-color: var(--cp-border-color-translucent);\n --cp-card-border-radius: var(--cp-border-radius);\n --cp-card-box-shadow: ;\n --cp-card-inner-border-radius: calc(var(--cp-border-radius) - (var(--cp-border-width)));\n --cp-card-cap-padding-y: 0.5rem;\n --cp-card-cap-padding-x: 1rem;\n --cp-card-cap-bg: rgba(var(--cp-body-color-rgb), 0.03);\n --cp-card-cap-color: ;\n --cp-card-height: ;\n --cp-card-color: ;\n --cp-card-bg: var(--cp-body-bg);\n --cp-card-img-overlay-padding: 1rem;\n --cp-card-group-margin: 0.75rem;\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n height: var(--cp-card-height);\n color: var(--cp-body-color);\n word-wrap: break-word;\n background-color: var(--cp-card-bg);\n background-clip: border-box;\n border: var(--cp-card-border-width) solid var(--cp-card-border-color);\n border-radius: var(--cp-card-border-radius);\n}\n\n.card > hr {\n margin-right: 0;\n margin-left: 0;\n}\n\n.card > .list-group {\n border-top: inherit;\n border-bottom: inherit;\n}\n\n.card > .list-group:first-child {\n border-top-width: 0;\n border-top-left-radius: var(--cp-card-inner-border-radius);\n border-top-right-radius: var(--cp-card-inner-border-radius);\n}\n\n.card > .list-group:last-child {\n border-bottom-width: 0;\n border-bottom-right-radius: var(--cp-card-inner-border-radius);\n border-bottom-left-radius: var(--cp-card-inner-border-radius);\n}\n\n.card > .card-header + .list-group,\n.card > .list-group + .card-footer {\n border-top: 0;\n}\n\n.card-body {\n flex: 1 1 auto;\n padding: var(--cp-card-spacer-y) var(--cp-card-spacer-x);\n color: var(--cp-card-color);\n}\n\n.card-title {\n margin-bottom: var(--cp-card-title-spacer-y);\n color: var(--cp-card-title-color);\n}\n\n.card-subtitle {\n margin-top: calc(-0.5 * var(--cp-card-title-spacer-y));\n margin-bottom: 0;\n color: var(--cp-card-subtitle-color);\n}\n\n.card-text:last-child {\n margin-bottom: 0;\n}\n\n[dir="ltr"] .card-link + .card-link {\n margin-left: var(--cp-card-spacer-x);\n}\n\n[dir="rtl"] .card-link + .card-link {\n margin-right: var(--cp-card-spacer-x);\n}\n\n.card-header {\n padding: var(--cp-card-cap-padding-y) var(--cp-card-cap-padding-x);\n margin-bottom: 0;\n color: var(--cp-card-cap-color);\n background-color: var(--cp-card-cap-bg);\n border-bottom: var(--cp-card-border-width) solid var(--cp-card-border-color);\n}\n\n.card-header:first-child {\n border-radius: var(--cp-card-inner-border-radius) var(--cp-card-inner-border-radius) 0 0;\n}\n\n.card-footer {\n padding: var(--cp-card-cap-padding-y) var(--cp-card-cap-padding-x);\n color: var(--cp-card-cap-color);\n background-color: var(--cp-card-cap-bg);\n border-top: var(--cp-card-border-width) solid var(--cp-card-border-color);\n}\n\n.card-footer:last-child {\n border-radius: 0 0 var(--cp-card-inner-border-radius) var(--cp-card-inner-border-radius);\n}\n\n.card-header-tabs {\n margin-right: calc(-0.5 * var(--cp-card-cap-padding-x));\n margin-bottom: calc(-1 * var(--cp-card-cap-padding-y));\n margin-left: calc(-0.5 * var(--cp-card-cap-padding-x));\n border-bottom: 0;\n}\n\n.card-header-tabs .nav-link.active {\n background-color: var(--cp-card-bg);\n border-bottom-color: var(--cp-card-bg);\n}\n\n.card-header-pills {\n margin-right: calc(-0.5 * var(--cp-card-cap-padding-x));\n margin-left: calc(-0.5 * var(--cp-card-cap-padding-x));\n}\n\n.card-img-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n padding: var(--cp-card-img-overlay-padding);\n border-radius: var(--cp-card-inner-border-radius);\n}\n\n.card-img,\n.card-img-top,\n.card-img-bottom {\n width: 100%;\n}\n\n.card-img,\n.card-img-top {\n border-top-left-radius: var(--cp-card-inner-border-radius);\n border-top-right-radius: var(--cp-card-inner-border-radius);\n}\n\n.card-img,\n.card-img-bottom {\n border-bottom-right-radius: var(--cp-card-inner-border-radius);\n border-bottom-left-radius: var(--cp-card-inner-border-radius);\n}\n\n.card-group > .card {\n margin-bottom: var(--cp-card-group-margin);\n}\n\n@media (min-width: 576px) {\n .card-group {\n display: flex;\n flex-flow: row wrap;\n }\n\n .card-group > .card {\n flex: 1 0 0%;\n margin-bottom: 0;\n }\n\n [dir="ltr"] .card-group > .card + .card {\n margin-left: 0;\n border-left: 0;\n }\n\n [dir="rtl"] .card-group > .card + .card {\n margin-right: 0;\n border-right: 0;\n }\n\n [dir="ltr"] .card-group > .card:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n [dir="rtl"] .card-group > .card:not(:last-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n [dir="ltr"] .card-group > .card:not(:last-child) .card-img-top,\n [dir="ltr"] .card-group > .card:not(:last-child) .card-header {\n border-top-right-radius: 0;\n }\n\n [dir="rtl"] .card-group > .card:not(:last-child) .card-img-top,\n [dir="rtl"] .card-group > .card:not(:last-child) .card-header {\n border-top-left-radius: 0;\n }\n\n [dir="ltr"] .card-group > .card:not(:last-child) .card-img-bottom,\n [dir="ltr"] .card-group > .card:not(:last-child) .card-footer {\n border-bottom-right-radius: 0;\n }\n\n [dir="rtl"] .card-group > .card:not(:last-child) .card-img-bottom,\n [dir="rtl"] .card-group > .card:not(:last-child) .card-footer {\n border-bottom-left-radius: 0;\n }\n\n [dir="ltr"] .card-group > .card:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n [dir="rtl"] .card-group > .card:not(:first-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n [dir="ltr"] .card-group > .card:not(:first-child) .card-img-top,\n [dir="ltr"] .card-group > .card:not(:first-child) .card-header {\n border-top-left-radius: 0;\n }\n\n [dir="rtl"] .card-group > .card:not(:first-child) .card-img-top,\n [dir="rtl"] .card-group > .card:not(:first-child) .card-header {\n border-top-right-radius: 0;\n }\n\n [dir="ltr"] .card-group > .card:not(:first-child) .card-img-bottom,\n [dir="ltr"] .card-group > .card:not(:first-child) .card-footer {\n border-bottom-left-radius: 0;\n }\n\n [dir="rtl"] .card-group > .card:not(:first-child) .card-img-bottom,\n [dir="rtl"] .card-group > .card:not(:first-child) .card-footer {\n border-bottom-right-radius: 0;\n }\n}\n\n.card {\n border-radius: 0.125rem;\n}\n\n.card-raised {\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);\n transition: all 0.15s ease-in;\n /* with no borders */\n border-color: transparent;\n}\n\n.card-raised:active, .card-raised:focus, .card-raised:hover {\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n}\n\n.card-list .card {\n /* Space out contents so the footer, etc. will align consistently in rows of cards. */\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n /* Fill container height, so groups of cards will be consistent height\n regardless of content length and will wrap neatly in rows */\n height: 100%;\n}\n\np {\n margin: 0;\n}\n\n.card-footer, .card-header {\n display: flex;\n background-color: #fff;\n justify-content: flex-start;\n gap: var(--cp-spacer-8, 2rem);\n align-items: center;\n padding: var(--cp-spacer-5, 1.25rem);\n}\n\n.card-header {\n justify-content: space-between;\n border: 0;\n}\n\n.card-footer {\n font-size: 0.75rem;\n border: 0;\n}\n\n.banner-header-content {\n display: flex;\n align-items: center;\n}\n\n[dir="ltr"] .banner-header-content {\n margin-right: var(--cp-spacer-2, 0.5rem);\n}\n\n[dir="rtl"] .banner-header-content {\n margin-left: var(--cp-spacer-2, 0.5rem);\n}\n\n.banner-image {\n width: 48px;\n margin: var(--cp-spacer-2, 0.5rem);\n}\n\n.banner-header-title {\n font-size: 1.25rem;\n font-weight: bold;\n margin-bottom: 0;\n}\n\n.banner-header-description {\n padding: var(--cp-spacer-1, 0.25rem) 0;\n}\n\n[dir="ltr"] .banner-primary-action--dismissible {\n margin-right: var(--cp-spacer-3, 0.75rem);\n}\n\n[dir="rtl"] .banner-primary-action--dismissible {\n margin-left: var(--cp-spacer-3, 0.75rem);\n}\n\n.banner-header-description--small {\n display: none;\n}\n\n.banner-close {\n position: absolute;\n top: 0;\n}\n\n[dir="ltr"] .banner-close {\n right: 0;\n}\n\n[dir="rtl"] .banner-close {\n left: 0;\n}\n\n.banner-hr {\n width: auto;\n margin: 0 var(--cp-spacer-5, 1.25rem);\n border-bottom: 1px solid #e4e9f2;\n}\n\n.banner-survey-button {\n font-size: 0.75rem;\n}\n\n.card {\n border: 0;\n box-shadow: 0 3px 10px rgba(10, 37, 64, 0.05);\n transition: box-shadow 0.5s;\n}\n\n.card:hover {\n box-shadow: 0 3px 10px rgba(10, 37, 64, 0.25);\n}\n\n@media (max-width: 575.98px) {\n .card-header,\n .card-footer {\n flex-direction: column;\n align-items: flex-start;\n gap: unset;\n }\n\n .banner-header-description--large {\n display: none;\n }\n\n .banner-header-description--small {\n display: block;\n padding: var(--cp-spacer-4, 1rem) 0;\n }\n\n .banner-cta {\n width: 100%;\n padding-left: unset;\n padding-right: unset;\n }\n}';!function(n,r){void 0===r&&(r={});var t=r.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");c.type="text/css","top"===t&&o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.styleSheet?c.styleSheet.cssText=n:c.appendChild(document.createTextNode(n))}}(n);const r=[{name:"close.click",pattern:/--track-close$/},{name:"conversion.click",pattern:/--track-cta-button$/},{name:"survey-yes.click",pattern:/--track-survey-yes$/},{name:"survey-no.click",pattern:/--track-survey-no$/}];class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.setupProps(),this.checkHidden(),this.isHidden||(this.render(),this.setupEventListeners(),this.setupViewHandler())}setupProps(){const n=(n,r)=>this.getAttribute(n)||r;this.campaignId=n("campaign-id"),this.stepId=n("step-id"),this.securityToken=n("cp-security-token"),this.showAgainIn=Number(n("show-again-in")),this.dismissible=this.hasAttribute("dismissible"),this.hasAnalytics=this.hasAttribute("banner-analytics"),this.imageUrl=n("image-url","_blank"),this.bannerTitle=n("banner-title","Banner Title"),this.bannerDescription=n("banner-description","Banner Description."),this.closeTitle=n("close-title","Close"),this.ctaOffsite=this.hasAttribute("cta-offsite"),this.ctaText=n("cta-text","Learn More"),this.ctaLink=n("cta-link"),this.showSurvey=!this.hasAttribute("survey-dismissed"),this.surveyTitle=n("survey-title"),this.surveyYes=n("survey-yes"),this.surveyNo=n("survey-no"),this.isHidden=!1}getId(){return this.campaignId+(this.stepId?`.${this.stepId}`:"")}setupEventListeners(){this.shadowRoot.querySelectorAll(`[id^="${this.campaignId}--track"]`).forEach((n=>{n.id.match(/--banner$/)||n.addEventListener("click",(r=>this.handleClick(r,n)))}))}handleClick(n,t){if(t.onlyOnce)return;t.onlyOnce=!0;let o="click";for(const n of r)if(n.pattern.test(t.id)){o=n.name;break}this.hasAnalytics&&this.trackEvent(o,t.id),/--track-cta-button$/.test(t.id)||(/--track-survey-/.test(t.id)?this.dismissSurvey():(this.dismiss(),n.preventDefault()))}setupViewHandler(){const n=this.shadowRoot.getElementById(`${this.campaignId}--banner`);if(n){const r=(r,t)=>{r.forEach((r=>{r.isIntersecting&&(this.hasAnalytics&&this.trackEvent("view",n.id),t.unobserve(n))}))};new IntersectionObserver(r,{root:null,rootMargin:"0px",threshold:.5}).observe(n)}}trackEvent(n,r){window.mixpanel?.track(`WHM-home-${this.campaignId}.${n}`,{campaign_id:this.campaignId,campaign_step:this.stepId,action:n.toLowerCase(),id:r,application:"WHM".toLowerCase()})}render(){const r=this.closest("[dir]")?.getAttribute("dir")||"ltr",t=n=>`<p class="banner-header-description--${n}">${this.bannerDescription}</p>`;this.shadowRoot.innerHTML=`\n <style>${n}</style>\n <div id="${this.campaignId}--banner" class="card" dir="${r}">\n ${(()=>`<input type="hidden" name="id" value="${this.getId()}" />`)()}\n <div class="card-header">\n <div class="banner-header-content">\n <img id="${this.campaignId}--image" class="banner-image" src="${this.imageUrl}" data-testid="banner-image__${this.campaignId}" alt="Logo" />\n <div class="banner-header-text">\n <p class="banner-header-title">${this.bannerTitle}</p>\n ${t("large")}\n </div>\n </div>\n ${t("small")}\n <a\n id="${this.campaignId}--track-cta-button"\n class="btn btn-primary banner-cta ${this.dismissible?"banner-primary-action--dismissible":""}"\n href="${this.ctaLink}"\n ${this.ctaOffsite?'target="_blank"':""}\n data-testid="banner-cta__${this.campaignId}"\n >\n ${this.ctaText}\n </a>\n </div>\n ${this.hasAnalytics&&this.showSurvey&&this.surveyTitle?(()=>`<div class="banner-hr"></div>\n <div id="${this.campaignId}--survey" class="card-footer">\n <p>${this.surveyTitle}</p>\n <span class="banner-survey-options">\n <button class="btn icon-btn-link banner-survey-button" id="${this.campaignId}--track-survey-yes" data-testid="banner-survey-yes__${this.campaignId}">${this.surveyYes}</button>\n <span>|</span>\n <button class="btn icon-btn-link banner-survey-button" id="${this.campaignId}--track-survey-no" data-testid="banner-survey-no__${this.campaignId}">${this.surveyNo}</button>\n </span>\n </div>`)():""}\n ${(n=>n?`<button\n type="button"\n class="btn btn-close btn-shrink close float-right banner-close whatever"\n id="${this.campaignId}--track-close"\n title="${this.closeTitle}"\n data-testid="banner-close__${this.campaignId}"\n >\n <span aria-hidden="true" class="visually-hidden">×</span>\n </button>`:"")(this.dismissible)}\n </div>`}lastTimeDismissed=()=>localStorage.getItem(`${this.getId()}.dismissed`);dismiss=async()=>{this.dismissible&&(this.hide(),localStorage.setItem(`${this.getId()}.dismissed`,(new Date).toISOString()),await this.setPersonalizationData(this.securityToken,"last_closed_step",this.stepId))};hide=()=>{const n=this.shadowRoot.getElementById(`${this.campaignId}--banner`);n?.remove()};dismissSurvey=async()=>{const n=this.shadowRoot.getElementById(`${this.campaignId}--survey`);n?.remove(),await this.setPersonalizationData(this.securityToken,`${this.getId()}_survey`,1)};checkHidden=()=>{const n=this.lastTimeDismissed(),r=new Date-new Date(n)>this.showAgainIn;!n||this.showAgainInAvailable&&r||(this.isHidden=!0)};async setPersonalizationData(n,r,t){const o={"api.version":1,store:this.campaignId,personalization:{[r]:t}},c=new Request(`${n}/json-api/personalization_set`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(o)});try{const n=await fetch(c);if(!n.ok)throw new Error(`Network response was not ok: ${n.statusText}`);const r=await n.json();if(r.metadata&&!r.metadata.result)throw new Error(r.metadata.reason);return r}catch(n){console.error(`DEV ERROR: ${n}`)}}}customElements.get("campaign-banner")||customElements.define("campaign-banner",t)}();
//# sourceMappingURL=campaign-banner.min.js.map
Back to Directory
File Manager