https://www.paxlovid.com/lib/blocks/notification/notification-dist.js

1/* eslint-disable */ 
2import{FranklinBlock,decorateIcons}from"../../scripts/lib-franklin.js";export default class Notification extends FranklinBlock{variants=[{name:"global",test:this.block.classList.contains("global")},{name:"expandedNotification",test:this.block.classList.contains("expanded-notification")},{name:"v1",test:!this.block.classList.contains("global")&&!this.block.classList.contains("expanded-notification")}];validateGlobalNotification(){const t=document.querySelector(".global-notifications-container");if(t){const i=t.querySelectorAll(".core-notification"),n=Array.from(i).every(t=>t.classList.contains("hidden"));t.classList.toggle("hidden",n)}}beforeBlockDataRead(){Object.entries({icon:{className:"notification-before-render--icon",schemaKey:"notificationIcon"},title:{className:"notification-before-render--title",schemaKey:"notificationTitle"},body:{className:"notification-before-render--body",schemaKey:"notificationBody"},dismiss:{className:"notification-before-render--dismiss",schemaKey:"notificationDismiss"},showMore:{className:"notification-before-render--show-more",schemaKey:"showMore"},showLess:{className:"notification-before-render--show-less",schemaKey:"showLess"},name:{className:"notification-before-render--notification-name",schemaKey:"name"},link:{className:"notification-before-render--notification-link",schemaKey:"link"},bodyOnLoadDesktop:{className:"notification-before-render--body-on-load-desktop",schemaKey:"bodyOnLoadDesktop"},bodyOnLoadMobile:{className:"notification-before-render--body-on-load-mobile",schemaKey:"bodyOnLoadMobile"}}).forEach(([t,i])=>{const n=this.findSectionContent(t);n?n.className=i.className:delete this.schema?.schema?.[i.schemaKey]}),"global"===this.variant&&this.block.classList.add("hidden")}beforeBlockRender(){let t=this.inputData.name;if(t=t?t.toLowerCase().trim().replace(/ /g,"-"):"",this.inputData.name=t,(this.inputData.notificationIcon||this.inputData.notificationTitle)&&(this.inputData.showHeader=!0),sessionStorage.getItem("core-notification-to-hide")||sessionStorage.setItem("core-notification-to-hide",JSON.stringify({})),"expandedNotification"!==this.variant&&"global"!==this.variant||(this.inputData.notificationDismiss&&"false"===this.inputData.notificationDismiss?.toLowerCase()?this.inputData.notificationDismiss=!1:this.inputData.notificationDismiss=!0),"expandedNotification"===this.variant&&(this.inputData.hasAuthorOnLoad=!(!this.inputData.bodyOnLoadDesktop&&!this.inputData.bodyOnLoadMobile),!this.inputData.hasAuthorOnLoad)){const t=document.createElement("div");t.innerHTML=this.inputData.notificationBody,this.inputData.truncatedValue=t.innerHTML}this.inputData={[this.variant]:{...this.inputData}}}setupClampEvaluation(t,i,n){let e=null;const o=()=>{const e=t.scrollHeight-t.clientHeight>2,o=n.classList.contains("expanded");i.style.display=e||o?"":"none"};setTimeout(o,200);const a=()=>{clearTimeout(e),e=setTimeout(()=>requestAnimationFrame(o),500)};this.block.notificationClampResizeRef&&window.removeEventListener("resize",this.block.notificationClampResizeRef),window.addEventListener("resize",a),this.block.notificationClampResizeRef=a}setupAuthorControlledContent(t,i,n){const e=this.inputData.expandedNotification.bodyOnLoadDesktop||"",o=this.inputData.expandedNotification.bodyOnLoadMobile||"",a=this.inputData.expandedNotification.notificationBody||"",s=document.createElement("div");s.className="notification-onload-desktop",s.innerHTML=e;const c=document.createElement("div");c.className="notification-onload-mobile",c.innerHTML=o,t.innerHTML="",t.appendChild(s),t.appendChild(c),t.classList.add("author-controlled"),i.appendChild(n);let r=!1;const d=()=>{if(r)return;const t=window.innerWidth>=1024;s.style.display=t?"":"none",c.style.display=t?"none":""};d();let l=null;const f=()=>{clearTimeout(l),l=setTimeout(()=>requestAnimationFrame(d),150)};this.block.notificationAuthorResizeRef&&window.removeEventListener("resize",this.block.notificationAuthorResizeRef),window.addEventListener("resize",f),this.block.notificationAuthorResizeRef=f,n.addEventListener("click",()=>

2{if(r){r=!1,clearTimeout(l),n.setAttribute("aria-expanded","false"),t.classList.remove("show-less");const i=t.querySelector(".notification-full-content");i&&(i.style.display="none"),d(),n.innerText=this.inputData.expandedNotification.showMore||"Show more"}else{r=!0,n.setAttribute("aria-expanded","true"),s.style.display="none",c.style.display="none",t.classList.add("show-less");let i=t.querySelector(".notification-full-content");i||(i=document.createElement("div"),i.className="notification-full-content",i.innerHTML=a,t.appendChild(i)),i.style.display="",n.innerText=this.inputData.expandedNotification.showLess||"Show less"}})}setupClampedContent(t,i,n){const e=this.inputData.expandedNotification.truncatedValue,o=document.createElement("div");o.innerHTML=e;let a=t.querySelector("p");a||(a=document.createElement("p"),t.insertBefore(a,t.firstChild));const s=document.createElement("span");s.className="notification-content-span";const c=o.querySelector("p");s.innerHTML=c?c.innerHTML:o.innerHTML,a.innerHTML="",a.appendChild(s),i.appendChild(n),a.classList.add("show-more"),t.classList.add("show-more"),n.addEventListener("click",()=>{if(a.classList.contains("expanded")){a.classList.remove("expanded"),n.setAttribute("aria-expanded","false");const i=document.createElement("div");i.innerHTML=this.inputData.expandedNotification.truncatedValue;const e=i.querySelector("p");s.innerHTML=e?e.innerHTML:i.innerHTML,t.classList.add("show-more"),t.classList.remove("show-less"),n.innerText=this.inputData.expandedNotification.showMore||"Show more"}else{a.classList.add("expanded"),n.setAttribute("aria-expanded","true");const i=document.createElement("div");i.innerHTML=this.inputData.expandedNotification.notificationBody;const e=i.querySelector("p");s.innerHTML=e?e.innerHTML:i.innerHTML,t.classList.remove("show-more"),t.classList.add("show-less"),n.innerText=this.inputData.expandedNotification.showLess||"Show less"}}),this.setupClampEvaluation(t,n,a)}afterBlockRender(){if(this.block.classList.add("block-focus-visible"),"expandedNotification"===this.variant){if(this.inputData.expandedNotification.notificationDismiss){const t=this.block.querySelector(".notification-close-button");decorateIcons(this.block);let i=sessionStorage.getItem("core-notification-to-hide"),n=JSON.parse(i);const e=this.inputData.expandedNotification.name;n[e]?this.block.classList.add("hidden"):this.block.classList.remove("hidden"),t.addEventListener("click",()=>{this.block.classList.add("hidden"),i=sessionStorage.getItem("core-notification-to-hide"),n=JSON.parse(i),n[this.inputData.expandedNotification.name]=!0;const t=JSON.stringify(n);sessionStorage.setItem("core-notification-to-hide",t),this.validateGlobalNotification()})}const t=this.block.querySelector(".core-notification-body .core-notification-body-text"),i=document.createElement("div");i.className="notification-content-wrapper";if(Array.from(t.childNodes).forEach(t=>{t.nodeType!==Node.ELEMENT_NODE||t.classList.contains("notification-show-more-button")||i.appendChild(t)}),t.insertBefore(i,t.firstChild),!this.block.classList.contains("no-truncate")){const n=document.createElement("button");n.className="notification-show-more-button",n.innerText=this.inputData.expandedNotification.showMore||"Show more",n.setAttribute("aria-expanded","false"),this.inputData.expandedNotification.hasAuthorOnLoad?this.setupAuthorControlledContent(i,t,n):this.setupClampedContent(i,t,n)}}else if("global"===this.variant){let t=sessionStorage.getItem("core-notification-to-hide"),i=JSON.parse(t);const n=this.inputData.global.name;i[n]?this.block.classList.add("hidden"):this.block.classList.remove("hidden");const e=this.block.querySelector(".core-notification-body-text p"),o=document.createElement("div");o.innerHTML=this.inputData.global?.link;const a=o.querySelector("a");if(a&&a.removeAttribute("class"),e.innerHTML=`${e?.innerHTML} ${o?.querySelector("p")?.innerHTML||""}`,this.inputData.global.notificationDismiss){const n=this.block.querySelector(".notification-close-button");decorateIcons(this.block),n.addEventListener("click",()=>{this.block.classList.add("hidden"),t=sessionStorage.getItem("core-notification-to-hide"),i=JSON.parse(t),i[this.inputData.global.name]=!0;const n=JSON.stringify(i);sessionStorage.setItem("core-notification-to-hide",n),this.validateGlobalNotification()})}this.validateGlobalNotification()}else{const t=this.block.querySelector(".notification-before-render--icon p span[data-icon-content]");if(t){const i=this.block.querySelector(".notification-before-render--icon");i.innerHTML="",i.appendChild(t)}const i=this.block.querySelector("button");i&&i.addEventListener("click",()=>{this.block.classList.add("hidden")})}this.block.classList.add("block-focus-visible")}}export const schema='{\n  "notification": {\n    "name": "notification",\n    "description": "An alert component for displaying important notifications with customizable styling. Features multiple color theme options (core, accent, extended) and background styles (tinted, white, grey), along with icon support, title, body content, and optional dismiss functionality.",\n    "coreBlockData": {\n      "blockName": "core-notification",\n      "isGlobalBlock": false,\n      "variants": ["v1", "global", "expandedNotification"],\n      "positionInPage": "inline-content"\n    },\n    "schema": {\n      "classes": [\n        "core-tinted",\n        "core-white",\n        "core-grey",\n        "core-success",\n        "success-white",\n        "success-grey",\n        "core-error",\n        "error-white",\n        "error-grey",\n        "branded-dark",\n        "neutral-dark",\n        "branded-tinted",\n        "neutral-tinted",\n        "global",\n        "hidden",\n        "expanded-notification",\n        "no-truncate",\n        "button-color-reversed",\n        "button-color-branded"\n      ],\n      "contentAtoms": true,\n      "notificationIcon": {\n        "selector": ".notification-before-render--icon",\n        "target": "innerHTML",\n        "description": "The notification icon that visually identifies the type of alert (e.g., warning, information, success) displayed at the beginning of the notification."\n      },\n      "notificationTitle": {\n        "selector": ".notification-before-render--title",\n        "target": "textContent",\n        "description": "The headline or primary text of the notification that briefly summarizes the message being communicated.",\n        "optional": true\n      },\n      "notificationBody": {\n        "selector": ".notification-before-render--body",\n        "target": "innerHTML",\n        "description": "The main content of the notification providing detailed information about the alert or message being displayed.",\n        "optional": true\n      },\n      "notificationDismiss": {\n        "selector": ".notification-before-render--dismiss",\n        "target": "textContent",\n        "description": "Text for the dismiss button allowing users to close or acknowledge the notification.",\n        "optional": true\n      },\n      "showMore": {\n        "selector": ".notification-before-render--show-more",\n        "target": "textContent",\n        "description": "Text for the button that expands the notification body to show more content.",\n        "optional": true\n      },\n      "showLess": {\n        "selector": ".notification-before-render--show-less",\n        "target": "textContent",\n        "description": "Text for the button that collapses the notification body to show less content.",\n        "optional": true\n      },\n      "name": {\n        "selector": ".notification-before-render--notification-name",\n        "target": "textContent",\n        "description": "notification id to save in session storage and hide it when dismissed.",\n        "optional": true\n      },\n      "link": {\n        "selector": ".notification-before-render--notification-link",\n        "target": "innerHTML",\n        "description": "notification link for click for details",\n        "optional": true\n      },\n      "bodyOnLoadDesktop": {\n        "selector": ".notification-before-render--body-on-load-desktop",\n        "target": "innerHTML",\n        "description": "Author-controlled body content shown on load for desktop viewports (>=1024px). Replaces CSS line-clamp truncation.",\n        "optional": true\n      },\n      "bodyOnLoadMobile": {\n        "selector": ".notification-before-render--body-on-load-mobile",\n        "target": "innerHTML",\n        "description": "Author-controlled body content shown on load for mobile viewports (<1024px). Replaces CSS line-clamp truncation.",\n        "optional": true\n      }\n    }\n  }\n}\n';export const template=' {{#v1}}\n<div class="core-notification-wrapper">\n    {{#showHeader}}\n    <div class="core-notification-header-wrapper">\n        {{#notificationIcon}}\n            <div class="core-notification-icon">\n                {{notificationIcon}}\n            </div>\n        {{/notificationIcon}}\n        {{#notificationTitle}}\n            <div class="core-notification-title">\n                <p>{{notificationTitle}}</p>\n            </div>\n        {{/notificationTitle}}\n    </div>\n    {{/showHeader}}\n    {{#notificationBody}}\n        <div class="core-notification-body">\n            <div class="core-notification-body-text">\n                {{notificationBody}}\n            </div>\n        </div>\n    {{/notificationBody}}\n    {{#notificationDismiss}}\n        <div class="core-notification-dismiss">\n            <button>{{notificationDismiss}}</button>\n        </div>\n    {{/notificationDismiss}}\n</div>\n{{/v1}}\n\n{{!///////////////////////////////////////////////////}}\n\n{{#global}}\n<div class="core-notification-wrapper">\n    {{#notificationIcon}}\n        <div class="core-notification-header-wrapper">\n            <div class="core-notification-icon">\n                {{notificationIcon}}\n            </div>\n        </div>\n    {{/notificationIcon}}\n\n    {{#notificationBody}}\n        <div class="core-notification-body">\n            <div class="core-notification-body-text">\n                {{notificationBody}}\n            </div>\n        </div>\n    {{/notificationBody}}\n\n    {{#notificationDismiss}}\n        <button class="notification-close-button" aria-label="Close notification"><span class="icon icon-lib-close"></span></button>\n    {{/notificationDismiss}}\n</div>\n{{/global}}\n\n{{!///////////////////////////////////////////////////}}\n\n{{ #expandedNotification }}\n<div class="core-notification-wrapper">\n    {{#notificationIcon}}\n        <div class="core-notification-header-wrapper">\n            <div class="core-notification-icon">\n                {{notificationIcon}}\n            </div>\n        </div>\n    {{/notificationIcon}}\n\n    {{#notificationBody}}\n        <div class="core-notification-body">\n            <div class="core-notification-body-text">\n                {{notificationBody}}\n            </div>\n        </div>\n    {{/notificationBody}}\n\n    {{#notificationDismiss}}\n        <button class="notification-close-button" aria-label="Close notification"><span class="icon icon-lib-close"></span></button>\n    {{/notificationDismiss}}\n</div>\n{{ /expandedNotification }}';export const smartCaptureConfig=" {}";