Editing File: /usr/local/cpanel/whostmgr/docroot/templates/announcements/announcement.min.js

!function(){"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._onKeydown=this._onKeydown.bind(this),this._onDomReady=this._onDomReady.bind(this)}connectedCallback(){"loading"!==document.readyState?this._connectedSetup():document.addEventListener("DOMContentLoaded",this._onDomReady,{once:!0})}disconnectedCallback(){document.removeEventListener("DOMContentLoaded",this._onDomReady),document.removeEventListener("keydown",this._onKeydown,!0),document.body.style.overflow=this._prevBodyOverflow||""}_onDomReady(){this.isConnected&&this._connectedSetup()}_connectedSetup(){this._setupProps(),this.payload&&Array.isArray(this.payload.items)&&0!==this.payload.items.length&&(this._previouslyFocused=document.activeElement,this._render(),this._wireEvents(),this._setupReveal(),this._open())}_setupProps(){const n=(n,e)=>this.getAttribute(n)||e;this.announcementId=n("announcement-id","");const e=Number(n("announcement-version","0"));this.announcementVersion=Number.isFinite(e)?e:0,this.securityToken=n("cp-security-token",""),this.closeTitle=n("close-title","Close"),this.dialogLabel=n("dialog-label",""),this.payload=this._readPayload(),this.reducedMotion=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}_readPayload(){const n=this.querySelector('script[type="application/json"]');if(!n)return null;try{return JSON.parse(n.textContent)}catch(n){return console.error(`DEV ERROR: could not parse announcement payload: ${n}`),null}}_escape(n){return null==n?"":String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}_safeHref(n){const e=String(n||"").replace(/[\t\n\r]/g,"").trim();return/^https?:\/\//i.test(e)||/^\/\//.test(e)||/^\.{1,2}\//.test(e)?e:/^\/(?!\/)/.test(e)?this.securityToken+e:e&&!/^[a-z][a-z0-9+.-]*:/i.test(e)?e:""}_bust(n){return n?n+(n.indexOf("?")>=0?"&":"?")+"v="+encodeURIComponent(this.announcementVersion):""}_render(){const n=this.payload.header||{},e=this.dialogLabel||n.title||"",t=this.closest("[dir]")?.getAttribute("dir")||document.documentElement.getAttribute("dir")||"ltr";this.shadowRoot.innerHTML=`\n            <style>:host {\n  --wa-white: var(--cp-white, #fff);\n  --wa-gray-900: var(--cp-gray-900, #14181f);\n  --wa-gray-800: var(--cp-gray-800, #2f3742);\n  --wa-gray-700: var(--cp-gray-700, #4a5560);\n  --wa-gray-200: var(--cp-gray-200, #e4e8ec);\n  --wa-hero-bg: #06070f;\n  display: block;\n  font-family: "Open Sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;\n}\n\n* {\n  box-sizing: border-box;\n}\n\np {\n  margin: 0;\n}\n\n.wa-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: rgba(6, 7, 15, 0.66);\n  animation: wa-fade 160ms ease-out;\n}\n\n.wa-dialog {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 1020px;\n  max-height: 90vh;\n  overflow: hidden;\n  color: var(--wa-gray-900);\n  background: var(--wa-white);\n  border-radius: 8px;\n  box-shadow: 0 24px 60px rgba(6, 7, 15, 0.45);\n  animation: wa-rise 200ms ease-out;\n}\n\n.wa-close {\n  position: absolute;\n  top: 16px;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  font-size: 22px;\n  line-height: 1;\n  color: #fff;\n  cursor: pointer;\n  background: rgba(6, 7, 15, 0.78);\n  border: 1px solid rgba(255, 255, 255, 0.45);\n  border-radius: 50%;\n}\n\n[dir="ltr"] .wa-close {\n  right: 24px;\n}\n\n[dir="rtl"] .wa-close {\n  left: 24px;\n}\n\n.wa-close:hover {\n  background: rgba(6, 7, 15, 0.9);\n}\n\n.wa-close:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  box-shadow: 0 0 0 2px var(--wa-hero-bg, #06070f), 0 0 0 4px #fff;\n}\n\n.wa-scroll {\n  flex: 1 1 auto;\n  overflow-x: hidden;\n  overflow-y: auto;\n  color: var(--wa-gray-900);\n  scrollbar-width: thin;\n  scrollbar-color: rgba(6, 7, 15, 0.3) transparent;\n}\n\n.wa-scroll:focus-visible {\n  outline: 2px solid var(--cp-primary, #1a6ce7);\n  outline-offset: -2px;\n}\n\n.wa-scroll::-webkit-scrollbar {\n  width: 10px;\n}\n\n.wa-scroll::-webkit-scrollbar-thumb {\n  background: rgba(6, 7, 15, 0.28);\n  border: 3px solid transparent;\n  background-clip: padding-box;\n  border-radius: 999px;\n}\n\n.wa-scroll::-webkit-scrollbar-thumb:hover {\n  background: rgba(6, 7, 15, 0.45);\n  background-clip: padding-box;\n}\n\n.wa-hero {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  overflow: hidden;\n  aspect-ratio: 3.2/1;\n  min-height: 220px;\n  padding: 40px 40px 24px;\n  color: #fff;\n  text-align: center;\n  background-color: var(--wa-hero-bg);\n  background-repeat: no-repeat;\n  background-position: top center;\n  background-size: cover;\n}\n\n.wa-hero-anim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -o-object-position: top center;\n     object-position: top center;\n}\n\n.wa-hero-scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n}\n\n[dir="ltr"] .wa-hero-scrim {\n  background: linear-gradient(180deg, rgba(6, 7, 15, 0) 0%, rgba(6, 7, 15, 0) 26%, rgba(6, 7, 15, 0.45) 60%, rgba(6, 7, 15, 0.72) 100%);\n}\n\n[dir="rtl"] .wa-hero-scrim {\n  background: linear-gradient(-180deg, rgba(6, 7, 15, 0) 0%, rgba(6, 7, 15, 0) 26%, rgba(6, 7, 15, 0.45) 60%, rgba(6, 7, 15, 0.72) 100%);\n}\n\n.wa-hero-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 40em;\n}\n\n.wa-hero-eyebrow {\n  margin: 0 0 12px;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.94);\n  text-shadow: 0 0 8px rgb(6, 10, 34), 0 0 18px rgba(6, 10, 34, 0.96);\n}\n\n.wa-hero-title {\n  margin: 0;\n  font-size: 40px;\n  font-weight: 800;\n  line-height: 1.05;\n  letter-spacing: -0.01em;\n}\n\n.wa-hero-logo {\n  display: block;\n  width: auto;\n  height: 41px;\n  filter: brightness(0) invert(1);\n}\n\n.wa-hero-subtitle {\n  margin: 14px 0 0;\n  font-size: 18px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: rgba(255, 255, 255, 0.95);\n}\n\n.wa-list {\n  padding: 8px 0;\n  background: var(--wa-white);\n}\n\n.wa-item {\n  display: grid;\n  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);\n  align-items: center;\n  padding: 28px 32px;\n  opacity: 0;\n  transform: translateY(64px) scale(0.97);\n  filter: blur(12px);\n  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1), transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), filter 1.6s cubic-bezier(0.22, 1, 0.36, 1);\n  will-change: opacity, transform, filter;\n}\n\n.wa-item.wa-exit-top {\n  transform: translateY(-64px) scale(0.97);\n}\n\n.wa-item.is-revealed {\n  opacity: 1;\n  transform: none;\n  filter: blur(0);\n}\n\n.wa-item:not(:last-child) {\n  border-bottom: 1px solid var(--wa-gray-200);\n}\n\n.wa-media {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  overflow: hidden;\n}\n\n.wa-media img {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  border-radius: 4px;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.wa-text {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 10px;\n  padding: 0 8px;\n}\n\n.wa-item:nth-child(even) .wa-media {\n  order: 2;\n}\n\n[dir="ltr"] .wa-item:nth-child(even) .wa-media {\n  padding-left: 32px;\n}\n\n[dir="rtl"] .wa-item:nth-child(even) .wa-media {\n  padding-right: 32px;\n}\n\n.wa-item:nth-child(even) .wa-text {\n  order: 1;\n}\n\n[dir="ltr"] .wa-item:nth-child(odd) .wa-media {\n  padding-right: 32px;\n}\n\n[dir="rtl"] .wa-item:nth-child(odd) .wa-media {\n  padding-left: 32px;\n}\n\n.wa-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n}\n\n.wa-badge {\n  display: inline-block;\n  padding: 3px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1.2;\n  border-radius: 50rem;\n}\n\n.wa-badge-new {\n  color: var(--cp-orange-700, #9a4a09);\n  background: var(--cp-orange-100, #fdecd8);\n}\n\n.wa-badge-meridian {\n  padding: 2px 8px;\n  color: var(--cp-indigo, #3f48b3);\n  background: var(--wa-white);\n  border: 1px solid var(--cp-indigo-100, #dfe2fb);\n}\n\n.wa-badge-default {\n  color: var(--wa-gray-700);\n  background: var(--cp-gray-100, #f1f4f7);\n}\n\n.wa-item-title {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--wa-gray-900);\n}\n\n.wa-item-subtitle {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--wa-gray-800);\n}\n\n.wa-item-description {\n  font-size: 14px;\n  line-height: 1.6;\n  color: var(--wa-gray-700);\n}\n\n.wa-cta-row {\n  align-self: flex-end;\n  margin-top: 4px;\n}\n\n.wa-cta {\n  display: inline-flex;\n  align-items: center;\n  padding: 8px 18px;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.2;\n  color: var(--cp-white, #fff);\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--cp-primary, #1a6ce7);\n  border: 1px solid transparent;\n  border-radius: 4px;\n}\n\n.wa-cta:hover {\n  background: var(--cp-primary-d1, #155cc4);\n}\n\n.wa-cta:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  box-shadow: 0 0 0 2px var(--wa-white, #fff), 0 0 0 4px var(--cp-primary, #1a6ce7);\n}\n\n.wa-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes wa-fade {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes wa-rise {\n  from {\n    opacity: 0;\n    transform: translateY(24px);\n  }\n\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n@media (max-width: 760px) {\n  .wa-item,\n  .wa-item:nth-child(even),\n  .wa-item:nth-child(odd) {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 16px;\n  }\n\n  .wa-item:nth-child(even) .wa-media,\n  .wa-item:nth-child(odd) .wa-media {\n    order: 0;\n    padding: 0;\n  }\n\n  .wa-item:nth-child(even) .wa-text {\n    order: 0;\n  }\n\n  .wa-hero-title {\n    font-size: 30px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wa-backdrop,\n  .wa-dialog {\n    animation: none;\n  }\n\n  .wa-item {\n    opacity: 1;\n    transition: none;\n    transform: none;\n    filter: none;\n  }\n}</style>\n            <div class="wa-backdrop" dir="${this._escape(t)}" data-testid="wa-backdrop">\n                <div\n                    class="wa-dialog"\n                    role="dialog"\n                    aria-modal="true"\n                    aria-label="${this._escape(e)}"\n                    data-testid="wa-dialog__${this._escape(this.announcementId)}"\n                >\n                    <button\n                        type="button"\n                        class="wa-close"\n                        title="${this._escape(this.closeTitle)}"\n                        aria-label="${this._escape(this.closeTitle)}"\n                        data-testid="wa-close__${this._escape(this.announcementId)}"\n                    >\n                        <span aria-hidden="true">&times;</span>\n                    </button>\n                    <div class="wa-scroll" tabindex="0">\n                        ${this._renderHeader(n)}\n                        <div class="wa-list">\n                            ${this.payload.items.map(n=>this._renderItem(n)).join("")}\n                        </div>\n                    </div>\n                </div>\n            </div>`}_renderHeader(n){const e=n.background_image?this._bust(n.background_image):"",t=e?` style="background-image:url('${this._escape(e)}')"`:"",a=!this.reducedMotion&&n.background_animation?this._bust(n.background_animation):"",i=a?`<img class="wa-hero-anim" src="${this._escape(a)}" alt="" aria-hidden="true" />`:"",o=n.eyebrow?`<p class="wa-hero-eyebrow">${this._escape(n.eyebrow)}</p>`:"",r=n.subtitle?`<p class="wa-hero-subtitle">${this._escape(n.subtitle)}</p>`:"";return`\n            <header class="wa-hero"${t}>\n                ${i}\n                <div class="wa-hero-scrim" aria-hidden="true"></div>\n                <div class="wa-hero-inner">\n                    ${o}\n                    ${n.logo?`<h1 class="wa-hero-title"><img class="wa-hero-logo" src="${this._escape(this._bust(n.logo))}" alt="${this._escape(n.title)}" /></h1>`:`<h1 class="wa-hero-title">${this._escape(n.title)}</h1>`}\n                    ${r}\n                </div>\n            </header>`}_renderItem(n){const e=Array.isArray(n.badges)?n.badges:[],t=e.length?`<div class="wa-badges">${e.map(n=>`<span class="wa-badge wa-badge-${this._escape(n.variant||"default")}">${this._escape(n.text)}</span>`).join("")}</div>`:"",a=n.image?`<div class="wa-media"><img src="${this._escape(this._bust(n.image))}" alt="" loading="lazy" /></div>`:"",i=n.subtitle?`<p class="wa-item-subtitle">${this._escape(n.subtitle)}</p>`:"",o=n.description?`<p class="wa-item-description">${this._escape(n.description)}</p>`:"";return`\n            <section class="wa-item" data-testid="wa-item__${this._escape(n.id)}">\n                ${a}\n                <div class="wa-text">\n                    ${t}\n                    <h2 class="wa-item-title">${this._escape(n.title)}</h2>\n                    ${i}\n                    ${o}\n                    ${this._renderCta(n)}\n                </div>\n            </section>`}_renderCta(n){const e=n.cta;if(!e||!e.button_text)return"";const t=this._safeHref(e.url);if(!t)return"";const a=e.offsite?' target="_blank" rel="noopener noreferrer"':"",i=e.offsite?`<span class="wa-visually-hidden"> (${this._escape("opens in a new tab")})</span>`:"";return`\n            <div class="wa-cta-row">\n                <a\n                    class="wa-cta"\n                    href="${this._escape(t)}"${a}\n                    data-testid="wa-cta__${this._escape(n.id)}"\n                >${this._escape(e.button_text)}${i}</a>\n            </div>`}_wireEvents(){this._closeButton=this.shadowRoot.querySelector(".wa-close"),this._dialog=this.shadowRoot.querySelector(".wa-dialog"),this._closeButton.addEventListener("click",()=>this._close()),document.addEventListener("keydown",this._onKeydown,!0)}_setupReveal(){const n=Array.from(this.shadowRoot.querySelectorAll(".wa-item"));if(this.reducedMotion||"undefined"==typeof IntersectionObserver)return void n.forEach(n=>n.classList.add("is-revealed"));const e=this.shadowRoot.querySelector(".wa-scroll"),t=new IntersectionObserver(n=>{n.forEach(n=>{const{target:e,isIntersecting:t,boundingClientRect:a,rootBounds:i}=n;!t&&i&&e.classList.toggle("wa-exit-top",a.top<i.top),e.classList.toggle("is-revealed",t)})},{root:e,rootMargin:"-8% 0px",threshold:0});n.forEach(n=>t.observe(n))}_open(){this._prevBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden",(this._closeButton||this._dialog).focus(),window.mixpanel?.track(`WHM-home-${this.announcementId}.view`,{announcement_id:this.announcementId,application:"WHM".toLowerCase()})}_onKeydown(n){"Tab"===n.key&&this._trapFocus(n)}_trapFocus(n){const e=Array.from(this.shadowRoot.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(n=>null!==n.offsetParent||n===this._closeButton);if(0===e.length)return;const t=e[0],a=e[e.length-1],i=this.shadowRoot.activeElement;n.shiftKey&&i===t?(n.preventDefault(),a.focus()):n.shiftKey||i!==a||(n.preventDefault(),t.focus())}_close(){document.removeEventListener("keydown",this._onKeydown,!0),document.body.style.overflow=this._prevBodyOverflow||"";const n=this.shadowRoot.querySelector(".wa-backdrop");n&&n.remove(),this._previouslyFocused&&"function"==typeof this._previouslyFocused.focus&&this._previouslyFocused.focus(),this._persistDismissal();const e=new URL(window.location.href);e.searchParams.delete("show_announcement"),history.replaceState(null,"",e.toString())}async _persistDismissal(){await this._setPersonalization("dismissed_at_version",this.announcementVersion)}async _setPersonalization(n,e){const t={"api.version":1,store:this.announcementId,personalization:{[n]:e}},a=new Request(`${this.securityToken}/json-api/personalization_set`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t),keepalive:!0});try{const e=await fetch(a);if(!e.ok)throw new Error(`Network response was not ok: ${e.statusText}`);const t=await e.json();if(0===t?.metadata?.result)throw new Error(t.metadata.reason||"personalization_set failed");const i=t?.data?.personalization?.[n];if(!i||!i.success)throw new Error(i&&i.reason||`personalization_set did not confirm "${n}"`);return t}catch(n){console.error(`DEV ERROR: ${n}`)}}}class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this._setupProps(),this.announcementId&&this.bannerTitle&&(this._render(),this._wireEvents())}_setupProps(){const n=(n,e="")=>this.getAttribute(n)||e;this.announcementId=n("announcement-id");const e=Number(n("announcement-version","0"));this.announcementVersion=Number.isFinite(e)?e:0,this.securityToken=n("cp-security-token"),this.bannerTitle=n("banner-title"),this.description=n("description"),this.ctaText=n("cta-text"),this.ctaHref=n("cta-href"),this.iconUrl=n("icon-url"),this.closeTitle=n("close-title","Dismiss")}_escape(n){return null==n?"":String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}_render(){const n=this.description?`<p class="wab-description">${this._escape(this.description)}</p>`:"",e=this.iconUrl?`<img class="wab-icon" src="${this._escape(this.iconUrl)}" alt="" aria-hidden="true" />`:"";this.shadowRoot.innerHTML=`\n            <style>:host {\n  --wab-white: var(--cp-white, #fff);\n  --wab-gray-900: var(--cp-gray-900, #14181f);\n  --wab-gray-800: var(--cp-gray-800, #2f3742);\n  --wab-gray-200: var(--cp-gray-200, #e4e8ec);\n  --wab-radius: var(--cp-radius-sm, 8px);\n  display: block;\n  font-family: "Open Sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;\n}\n\n* {\n  box-sizing: border-box;\n}\n\np {\n  margin: 0;\n}\n\n.wab-card {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 20px 24px;\n  background: var(--wab-white);\n  border: 1px solid var(--wab-gray-200);\n  border-radius: var(--wab-radius);\n  box-shadow: 0 1px 4px rgba(6, 7, 15, 0.08), 0 1px 2px rgba(6, 7, 15, 0.06);\n}\n\n.wab-icon {\n  flex: 0 0 auto;\n  width: 44px;\n  height: 44px;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.wab-text {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.wab-title {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 400;\n  line-height: 1.25;\n  color: var(--wab-gray-900);\n}\n\n.wab-description {\n  font-size: 15px;\n  line-height: 1.5;\n  color: var(--wab-gray-800);\n}\n\n.wab-cta {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  padding: 8px 18px;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.2;\n  color: var(--cp-white, #fff);\n  text-decoration: none;\n  cursor: pointer;\n  white-space: nowrap;\n  background: var(--cp-primary, #1a6ce7);\n  border: 1px solid transparent;\n  border-radius: 4px;\n}\n\n.wab-cta:hover {\n  background: var(--cp-primary-d1, #155cc4);\n}\n\n.wab-cta:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  box-shadow: 0 0 0 2px var(--wab-white), 0 0 0 4px var(--cp-primary, #1a6ce7);\n}\n\n.wab-close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  font-size: 16px;\n  line-height: 1;\n  color: var(--wab-gray-800);\n  cursor: pointer;\n  background: transparent;\n  border: 1px solid var(--cp-gray-400, #7c8891);\n  border-radius: 50%;\n}\n\n.wab-close:hover {\n  background: var(--cp-gray-100, #f1f4f7);\n}\n\n.wab-close:focus-visible {\n  outline: 2px solid var(--cp-primary, #1a6ce7);\n  outline-offset: 2px;\n}\n\n@media (max-width: 640px) {\n  .wab-card {\n    flex-wrap: wrap;\n    padding: 16px;\n  }\n\n  .wab-text {\n    flex-basis: 100%;\n  }\n\n  .wab-cta {\n    order: 3;\n    width: 100%;\n    justify-content: center;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wab-card {\n    transition: none;\n  }\n}</style>\n            <div\n                class="wab-card"\n                role="region"\n                aria-label="${this._escape(this.bannerTitle)}"\n                data-testid="wab-banner__${this._escape(this.announcementId)}"\n            >\n                ${e}\n                <div class="wab-text">\n                    <h2 class="wab-title">${this._escape(this.bannerTitle)}</h2>\n                    ${n}\n                </div>\n                <a\n                    class="wab-cta"\n                    href="${this._escape(this.ctaHref)}"\n                    data-testid="wab-cta__${this._escape(this.announcementId)}"\n                >${this._escape(this.ctaText)}</a>\n                <button\n                    type="button"\n                    class="wab-close"\n                    title="${this._escape(this.closeTitle)}"\n                    aria-label="${this._escape(this.closeTitle)}"\n                    data-testid="wab-close__${this._escape(this.announcementId)}"\n                >\n                    <span aria-hidden="true">&times;</span>\n                </button>\n            </div>`}_wireEvents(){this.shadowRoot.querySelector(".wab-close").addEventListener("click",()=>this._dismiss())}async _dismiss(){await this._setPersonalization("banner_dismissed_at_version",this.announcementVersion)&&this.remove()}async _setPersonalization(n,e){const t={"api.version":1,store:this.announcementId,personalization:{[n]:e}},a=new Request(`${this.securityToken}/json-api/personalization_set`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t),keepalive:!0});try{const e=await fetch(a);if(!e.ok)throw new Error(`Network response was not ok: ${e.statusText}`);const t=await e.json();if(0===t?.metadata?.result)throw new Error(t.metadata.reason||"personalization_set failed");const i=t?.data?.personalization?.[n];if(!i||!i.success)throw new Error(i&&i.reason||`personalization_set did not confirm "${n}"`);return!0}catch(n){return console.error(`DEV ERROR: ${n}`),!1}}}customElements.get("whm-announcement")||customElements.define("whm-announcement",n),customElements.get("whm-announcement-banner")||customElements.define("whm-announcement-banner",e)}();
//# sourceMappingURL=announcement.min.js.map

Back to Directory