Editing 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: rgb(0, 51.85, 141.1);\n  --cp-btn-hover-border-color: rgb(0, 48.8, 132.8);\n  --cp-btn-focus-shadow-rgb: 38, 90, 179;\n  --cp-btn-active-color: #fff;\n  --cp-btn-active-bg: rgb(0, 48.8, 132.8);\n  --cp-btn-active-border-color: rgb(0, 45.75, 124.5);\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: rgb(21.25, 114.75, 71.4);\n  --cp-btn-hover-border-color: rgb(20, 108, 67.2);\n  --cp-btn-focus-shadow-rgb: 60, 153, 110;\n  --cp-btn-active-color: #fff;\n  --cp-btn-active-bg: rgb(20, 108, 67.2);\n  --cp-btn-active-border-color: rgb(18.75, 101.25, 63);\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: rgb(49.3, 209.95, 242.25);\n  --cp-btn-hover-border-color: rgb(37.2, 207.3, 241.5);\n  --cp-btn-focus-shadow-rgb: 11, 172, 204;\n  --cp-btn-active-color: #000;\n  --cp-btn-active-bg: rgb(61.4, 212.6, 243);\n  --cp-btn-active-border-color: rgb(37.2, 207.3, 241.5);\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: rgb(255, 202.3, 44.2);\n  --cp-btn-hover-border-color: rgb(255, 199.2, 31.8);\n  --cp-btn-focus-shadow-rgb: 217, 164, 6;\n  --cp-btn-active-color: #000;\n  --cp-btn-active-bg: rgb(255, 205.4, 56.6);\n  --cp-btn-active-border-color: rgb(255, 199.2, 31.8);\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: rgb(187, 45.05, 58.65);\n  --cp-btn-hover-border-color: rgb(176, 42.4, 55.2);\n  --cp-btn-focus-shadow-rgb: 225, 83, 97;\n  --cp-btn-active-color: #fff;\n  --cp-btn-active-bg: rgb(176, 42.4, 55.2);\n  --cp-btn-active-border-color: rgb(165, 39.75, 51.75);\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: rgb(212.5, 212.5, 212.5);\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: rgb(187.5, 187.5, 187.5);\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: rgb(68.85, 85, 97.75);\n  --cp-btn-hover-border-color: rgb(57.9, 75, 88.5);\n  --cp-btn-focus-shadow-rgb: 69, 85, 98;\n  --cp-btn-active-color: #fff;\n  --cp-btn-active-bg: rgb(79.8, 95, 107);\n  --cp-btn-active-border-color: rgb(57.9, 75, 88.5);\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: rgb(226.95, 116.45, 77.35);\n  --cp-btn-hover-border-color: rgb(225.3, 108.3, 66.9);\n  --cp-btn-focus-shadow-rgb: 189, 78, 39;\n  --cp-btn-active-color: #000;\n  --cp-btn-active-bg: rgb(228.6, 124.6, 87.8);\n  --cp-btn-active-border-color: rgb(225.3, 108.3, 66.9);\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: rgb(27.2, 32.3, 71.4);\n  --cp-btn-hover-border-color: rgb(25.6, 30.4, 67.2);\n  --cp-btn-focus-shadow-rgb: 65, 71, 110;\n  --cp-btn-active-color: #fff;\n  --cp-btn-active-bg: rgb(25.6, 30.4, 67.2);\n  --cp-btn-active-border-color: rgb(24, 28.5, 63);\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}\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-raised {\n  /* with no borders */\n  border-color: transparent;\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">&times;</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