@trycourier/courier-ui-inbox/dist/index.js

Inbox components for the Courier web UI

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@trycourier/courier-js")):"function"==typeof define&&define.amd?define(["exports","@trycourier/courier-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CourierUIInbox={},e.CourierJS)}(this,(function(e,t){"use strict";var n,i=Object.defineProperty,o=(e,t,n)=>((e,t,n)=>t in e?i(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n)(e,"symbol"!=typeof t?t+"":t,n),s=Object.defineProperty,l=e=>{throw TypeError(e)},r=(e,t,n)=>((e,t,n)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n)(e,"symbol"!=typeof t?t+"":t,n),a=(e,t,n)=>t.has(e)||l("Cannot "+n),d=(e,t,n,i)=>(a(e,t,"write to private field"),t.set(e,n),n);const h={500:"#171717",50010:"#1717171A",50020:"#17171733"},u={200:"#F5F5F5",400:"#3A3A3A",500:"#E5E5E5",600:"#737373"},c={500:"#FFFFFF",50010:"#FFFFFF1A",50020:"#FFFFFF33"},v={400:"#60A5FA",500:"#2563EB"},p={light:{colors:{primary:h[500],secondary:c[500],border:u[500],link:v[500],icon:h[500]},button:{cornerRadius:"4px"}},dark:{colors:{primary:c[500],secondary:h[500],border:u[400],link:v[400],icon:c[500]},button:{cornerRadius:"4px"}}},g=()=>"undefined"==typeof window?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",m=e=>{if("undefined"==typeof window)return()=>{};const t=window.matchMedia("(prefers-color-scheme: dark)"),n=t=>{e(t.matches?"dark":"light")};return t.addEventListener("change",n),()=>{t.removeEventListener("change",n)}},_=(()=>{try{return"undefined"==typeof HTMLElement?class{}:HTMLElement}catch{return class{}}})();class b extends _{constructor(){var e,t,i;super(...arguments),e=this,i=!1,(t=n).has(e)?l("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i)}static get id(){return"courier-base-element"}connectedCallback(){var e,t,i;(a(t=this,i=n,"read from private field"),i.get(t))||(d(this,n,!0),null==(e=this.onComponentMounted)||e.call(this))}disconnectedCallback(){var e;d(this,n,!1),null==(e=this.onComponentUnmounted)||e.call(this)}onComponentMounted(){}onComponentUnmounted(){}}n=new WeakMap;class x extends b{constructor(){super(),r(this,"_currentSystemTheme"),r(this,"_systemThemeCleanup"),this._currentSystemTheme=g(),this._systemThemeCleanup=m((e=>{this._currentSystemTheme=e,this.onSystemThemeChange(e)}))}static get id(){return"courier-system-theme-element"}get currentSystemTheme(){return this._currentSystemTheme}onComponentUnmounted(){var e;null==(e=this._systemThemeCleanup)||e.call(this),super.onComponentUnmounted()}onSystemThemeChange(e){}}const C={borderRadius:"4px",fontSize:"14px"},f=e=>({...C,backgroundColor:p[e].colors.secondary,textColor:p[e].colors.primary,fontWeight:"500",border:`1px solid ${p[e].colors.border}`,shadow:"light"===e?"0px 1px 2px 0px rgba(0, 0, 0, 0.06)":"0px 1px 2px 0px rgba(255, 255, 255, 0.1)"});class y extends x{constructor(e){super(),r(this,"_button"),r(this,"_style");const t=this.attachShadow({mode:"open"});this._button=document.createElement("button"),this._button.setAttribute("part","button"),this._style=document.createElement("style"),this._style.textContent=this.getStyles(e),t.appendChild(this._style),t.appendChild(this._button),this.updateButton(e),this._button.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation(),e.onClick&&e.onClick()}))}static get id(){return"courier-button"}getStyles(e){const t="system"===e.mode?this.currentSystemTheme:e.mode;return`\n      :host {\n        display: inline-block;\n      }\n\n      button {\n        border: none;\n        border-radius: ${e.borderRadius??f(t).borderRadius};\n        font-weight: ${e.fontWeight??f(t).fontWeight};\n        font-family: ${e.fontFamily??"inherit"};\n        font-size: ${e.fontSize??f(t).fontSize};\n        padding: 6px 10px;\n        cursor: pointer;\n        width: 100%;\n        height: 100%;\n        background-color: ${e.backgroundColor??f(t).backgroundColor};\n        color: ${e.textColor??f(t).textColor};\n        border: ${e.border??f(t).border};\n        box-shadow: ${e.shadow??f(t).shadow};\n        touch-action: manipulation;\n      }\n\n      button:hover {\n        ${e.hoverBackgroundColor?`background-color: ${e.hoverBackgroundColor};`:"filter: brightness(0.9);"}\n      }\n\n      button:active {\n        ${e.activeBackgroundColor?`background-color: ${e.activeBackgroundColor};`:"filter: brightness(0.8);"}\n      }\n\n      button:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    `}updateButton(e){e.text&&(this._button.textContent=e.text),this._style.textContent=this.getStyles(e)}}const k={inbox:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5.5 14.5V17C5.5 17.2812 5.71875 17.5 6 17.5H18C18.25 17.5 18.5 17.2812 18.5 17V14.5H15.9375L15.2812 15.8125C15.0938 16.25 14.6562 16.5 14.1875 16.5H9.78125C9.3125 16.5 8.875 16.25 8.6875 15.8125L8.03125 14.5H5.5ZM18.1875 13L16.6562 6.90625C16.5938 6.65625 16.4062 6.5 16.1875 6.5H7.8125C7.5625 6.5 7.375 6.65625 7.3125 6.90625L5.78125 13H8.1875C8.65625 13 9.09375 13.2812 9.3125 13.7188L9.9375 15H14.0312L14.6875 13.7188C14.875 13.2812 15.3125 13 15.7812 13H18.1875ZM4 14.25C4 14.0938 4 13.9375 4.03125 13.7812L5.84375 6.53125C6.09375 5.625 6.875 5 7.8125 5H16.1875C17.0938 5 17.9062 5.625 18.125 6.53125L19.9375 13.7812C19.9688 13.9375 20 14.0938 20 14.25V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V14.25Z" fill="currentColor"/>\n</svg>',archive:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5.5 6.5V8H18.5V6.5H5.5ZM5 5H19C19.5312 5 20 5.46875 20 6V8.5C20 9.0625 19.5312 9.5 19 9.5H5C4.4375 9.5 4 9.0625 4 8.5V6C4 5.46875 4.4375 5 5 5ZM9 11.75C9 11.3438 9.3125 11 9.75 11H14.25C14.6562 11 15 11.3438 15 11.75C15 12.1875 14.6562 12.5 14.25 12.5H9.75C9.3125 12.5 9 12.1875 9 11.75ZM5 17V10.5H6.5V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V10.5H19V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17Z" fill="currentColor"/>\n</svg>',check:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M18.793 7.33203C19.0742 7.64453 19.0742 8.11328 18.793 8.39453L10.543 16.6445C10.2305 16.957 9.76172 16.957 9.48047 16.6445L5.23047 12.3945C4.91797 12.1133 4.91797 11.6445 5.23047 11.3633C5.51172 11.0508 5.98047 11.0508 6.26172 11.3633L9.98047 15.082L17.7305 7.33203C18.0117 7.05078 18.4805 7.05078 18.7617 7.33203H18.793Z" fill="currentColor"/>\n</svg>',filter:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5 7C5 6.59375 5.3125 6.25 5.75 6.25H18.25C18.6562 6.25 19 6.59375 19 7C19 7.4375 18.6562 7.75 18.25 7.75H5.75C5.3125 7.75 5 7.4375 5 7ZM7 12C7 11.5938 7.3125 11.25 7.75 11.25H16.25C16.6562 11.25 17 11.5938 17 12C17 12.4375 16.6562 12.75 16.25 12.75H7.75C7.3125 12.75 7 12.4375 7 12ZM14 17C14 17.4375 13.6562 17.75 13.25 17.75H10.75C10.3125 17.75 10 17.4375 10 17C10 16.5938 10.3125 16.25 10.75 16.25H13.25C13.6562 16.25 14 16.5938 14 17Z" fill="currentColor"/>\n</svg>',overflow:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M18.5117 11.9883C18.5117 12.5508 18.1992 13.0195 17.7617 13.3008C17.293 13.582 16.6992 13.582 16.2617 13.3008C15.793 13.0195 15.5117 12.5508 15.5117 11.9883C15.5117 11.457 15.793 10.9883 16.2617 10.707C16.6992 10.4258 17.293 10.4258 17.7617 10.707C18.1992 10.9883 18.5117 11.457 18.5117 11.9883ZM13.5117 11.9883C13.5117 12.5508 13.1992 13.0195 12.7617 13.3008C12.293 13.582 11.6992 13.582 11.2617 13.3008C10.793 13.0195 10.5117 12.5508 10.5117 11.9883C10.5117 11.457 10.793 10.9883 11.2617 10.707C11.6992 10.4258 12.293 10.4258 12.7617 10.707C13.1992 10.9883 13.5117 11.457 13.5117 11.9883ZM7.01172 13.4883C6.44922 13.4883 5.98047 13.207 5.69922 12.7383C5.41797 12.3008 5.41797 11.707 5.69922 11.2383C5.98047 10.8008 6.44922 10.4883 7.01172 10.4883C7.54297 10.4883 8.01172 10.8008 8.29297 11.2383C8.57422 11.707 8.57422 12.3008 8.29297 12.7383C8.01172 13.207 7.54297 13.4883 7.01172 13.4883Z" fill="currentColor"/>\n</svg>',read:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7 6.5C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5H7ZM5 7C5 5.90625 5.875 5 7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7ZM15.5312 10.5312L11.5312 14.5312C11.2188 14.8438 10.75 14.8438 10.4688 14.5312L8.46875 12.5312C8.15625 12.25 8.15625 11.7812 8.46875 11.5C8.75 11.1875 9.21875 11.1875 9.53125 11.5L11 12.9688L14.4688 9.46875C14.75 9.1875 15.2188 9.1875 15.5 9.46875C15.8125 9.78125 15.8125 10.25 15.5 10.5312H15.5312Z" fill="currentColor"/>\n</svg>',archiveRead:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.5 6.5V15.25H16.5V6.5H7.5ZM6 15.25V6.5C6 5.6875 6.65625 5 7.5 5H16.5C17.3125 5 18 5.6875 18 6.5V15.25C18.4062 15.25 18.75 15.5938 18.75 16C18.75 16.4375 18.4062 16.75 18 16.75H6C5.5625 16.75 5.25 16.4375 5.25 16C5.25 15.5938 5.5625 15.25 6 15.25ZM5 13V14.5H4.5V17.5H19.5V14.5H19V13H19.5C20.3125 13 21 13.6875 21 14.5V17.5C21 18.3438 20.3125 19 19.5 19H4.5C3.65625 19 3 18.3438 3 17.5V14.5C3 13.6875 3.65625 13 4.5 13H5ZM15.0312 9.625L11.6875 12.9688C11.5312 13.0938 11.3438 13.1875 11.1562 13.1875C10.9375 13.1875 10.75 13.0938 10.625 12.9688L8.96875 11.2812C8.65625 11 8.65625 10.5312 8.96875 10.25C9.25 9.9375 9.71875 9.9375 10 10.25L11.1562 11.375L13.9688 8.5625C14.25 8.28125 14.7188 8.28125 15 8.5625C15.3125 8.875 15.3125 9.34375 15 9.625H15.0312Z" fill="currentColor"/>\n</svg>',unread:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17 6.5H7C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5ZM7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7C5 5.90625 5.875 5 7 5Z" fill="currentColor"/>\n</svg>',unarchive:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5.5 11C5.0625 11 4.75 10.6875 4.75 10.25V5.75C4.75 5.34375 5.0625 5 5.5 5C5.90625 5 6.25 5.34375 6.25 5.75V8.28125L6.875 7.53125C8.15625 6 10.0625 5 12.25 5C16.0938 5 19.25 8.15625 19.25 12C19.25 15.875 16.0938 19 12.25 19C10.6562 19 9.21875 18.5 8.03125 17.625C7.71875 17.375 7.625 16.9062 7.875 16.5625C8.125 16.2188 8.59375 16.1562 8.9375 16.4062C9.84375 17.0938 11 17.5 12.25 17.5C15.2812 17.5 17.75 15.0625 17.75 12C17.75 8.96875 15.2812 6.5 12.25 6.5C10.5312 6.5 9.03125 7.28125 8 8.5L7.15625 9.5H10C10.4062 9.5 10.75 9.84375 10.75 10.25C10.75 10.6875 10.4062 11 10 11H5.5Z" fill="currentColor"/>\n</svg>'};class S extends b{constructor(e,t){super(),r(this,"_color"),r(this,"_svg"),r(this,"_iconContainer"),r(this,"_style"),this._color=e??h[500],this._svg=t;const n=this.attachShadow({mode:"open"});this._iconContainer=document.createElement("div"),n.appendChild(this._iconContainer),this._style=document.createElement("style"),this._style.textContent=this.getStyles(this._color),n.appendChild(this._style),this.refresh()}static get id(){return"courier-icon"}getStyles(e){return`\n      :host {\n        display: inline-block;\n        line-height: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      svg {\n        width: 24px;\n        height: 24px;\n        color: ${e};\n      }\n    `}refresh(){this._svg&&(this._iconContainer.innerHTML=this._svg),this._color&&(this._style.textContent=this.getStyles(this._color))}updateColor(e){this._color=e,this.refresh()}updateSVG(e){this._svg=e,this.refresh()}}class M extends b{constructor(){super(),r(this,"link");const e=this.attachShadow({mode:"open"});this.link=document.createElement("a"),this.link.setAttribute("part","link");const t=document.createElement("style");t.textContent=`\n      :host {\n        display: inline-block;\n      }\n\n      a {\n        text-decoration: none;\n        border-radius: 4px;\n        cursor: pointer;\n        font-weight: 500;\n        transition: all 0.2s ease;\n        font-family: var(--courier-link-font-family, inherit);\n        font-size: var(--courier-link-font-size, inherit);\n      }\n\n      /* Variants */\n      a[data-variant="primary"][data-mode="light"] {\n        color: var(--courier-link-color, ${p.light.colors.link});\n      }\n\n      a[data-variant="primary"][data-mode="light"]:hover {\n        opacity: 0.8;\n      }\n\n      a[data-variant="primary"][data-mode="light"]:active {\n        opacity: 0.6;\n      }\n\n      a[data-variant="primary"][data-mode="dark"] {\n        color: var(--courier-link-color, ${p.dark.colors.link});\n      }\n\n      a[data-variant="primary"][data-mode="dark"]:hover {\n        opacity: 0.8;\n      }\n\n      a[data-variant="primary"][data-mode="dark"]:active {\n        opacity: 0.6;\n      }\n\n      a[data-underline="true"] {\n        text-decoration: underline;\n      }\n\n      a:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n    `,e.appendChild(t),e.appendChild(this.link),this.updateVariant(),this.updateUnderline(),this.updateMode()}static get id(){return"courier-link"}connectedCallback(){const e=document.createElement("slot");this.link.appendChild(e),this.updateHref()}attributeChangedCallback(e,t,n){if(t!==n)switch(e){case"href":this.updateHref();break;case"variant":case"mode":this.updateVariant();break;case"disabled":this.link.style.pointerEvents=this.hasAttribute("disabled")?"none":"auto",this.link.style.opacity=this.hasAttribute("disabled")?"0.6":"1";break;case"color":this.updateColor();break;case"underline":this.updateUnderline();break;case"target":this.updateTarget();break;case"font-family":this.updateFontFamily();break;case"font-size":this.updateFontSize()}}updateHref(){const e=this.getAttribute("href");e&&(this.link.href=e)}updateVariant(){const e=this.getAttribute("variant")||"primary",t=this.getAttribute("mode")||"light";this.link.setAttribute("data-variant",e),this.link.setAttribute("data-mode",t)}updateColor(){const e=this.getAttribute("color");e?this.link.style.setProperty("--courier-link-color",e):this.link.style.removeProperty("--courier-link-color")}updateUnderline(){const e="true"===this.getAttribute("underline");this.link.setAttribute("data-underline",e.toString())}updateMode(){const e=this.getAttribute("mode")||"light";this.link.setAttribute("data-mode",e)}updateTarget(){const e=this.getAttribute("target");e&&(this.link.target=e)}updateFontFamily(){const e=this.getAttribute("font-family");e?this.link.style.setProperty("--courier-link-font-family",e):this.link.style.removeProperty("--courier-link-font-family")}updateFontSize(){const e=this.getAttribute("font-size");e?this.link.style.setProperty("--courier-link-font-size",e):this.link.style.removeProperty("--courier-link-font-size")}}r(M,"observedAttributes",["href","variant","disabled","color","underline","mode","target","font-family","font-size"]);class w extends x{constructor(){super()}build(e){if(null===e)return void this.replaceChildren();const t=e??this.defaultElement();this.replaceChildren(t)}defaultElement(){const e=document.createElement("div");return e.textContent="Default Element Factory",e.style.cssText="\n      background-color: red;\n      text-align: center;\n      padding: 12px;\n    ",e}}class I extends w{constructor(e){super(),r(this,"_props"),r(this,"_title"),r(this,"_button"),r(this,"_style"),this._props=e}static get id(){return"courier-info-state"}defaultElement(){var e;const t=document.createElement("div");return this._title=document.createElement("h2"),(null==(e=this._props.title)?void 0:e.text)&&(this._title.textContent=this._props.title.text),this._button=new y(this._props.button??f(this.currentSystemTheme)),this._style=document.createElement("style"),this._style.textContent=this.getStyles(this._props),t.className="container",t.appendChild(this._style),t.appendChild(this._title),t.appendChild(this._button),this.appendChild(t),t}onSystemThemeChange(e){this.updateStyles(this._props)}getStyles(e){var t,n,i,o;return`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        width: 100%;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 16px;\n        text-align: center;\n        padding: 24px;\n        box-sizing: border-box;\n        height: 100%;\n      }\n\n      .container h2 {\n        margin: 0;\n        color: ${(null==(t=e.title)?void 0:t.textColor)??"red"};\n        font-size: ${(null==(n=e.title)?void 0:n.fontSize)??"16px"};\n        font-weight: ${(null==(i=e.title)?void 0:i.fontWeight)??"500"};\n        font-family: ${(null==(o=e.title)?void 0:o.fontFamily)??"inherit"};\n      }\n    `}updateStyles(e){this._props=e,this._style&&(this._style.textContent=this.getStyles(e)),this._button&&this._button.updateButton(e.button)}}class E extends b{constructor(e,t,n,i,o,s,l,a){super(),r(this,"_backgroundColor"),r(this,"_hoverBackgroundColor"),r(this,"_activeBackgroundColor"),r(this,"_borderRadius"),r(this,"_height"),r(this,"_width"),r(this,"_style"),r(this,"_button"),r(this,"_icon"),this._borderRadius=s,this._backgroundColor=n,this._hoverBackgroundColor=i,this._activeBackgroundColor=o,this._height=l,this._width=a;const d=this.attachShadow({mode:"open"});this._button=document.createElement("button"),this._button.setAttribute("part","button"),this._icon=new S(t,e),this._style=document.createElement("style"),this.refresh(),d.appendChild(this._style),this._button.appendChild(this._icon),d.appendChild(this._button)}static get id(){return"courier-icon-button"}refresh(){this._style.textContent=this.getStyles()}getStyles(){return`\n      :host {\n        display: inline-block;\n        border-radius: ${this._borderRadius??"50%"};\n      }\n\n      button {\n        border: none;\n        border-radius: ${this._borderRadius??"50%"};\n        cursor: pointer;\n        width: ${this._width??"36px"};\n        height: ${this._height??"36px"};\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: ${this._backgroundColor??"transparent"};\n        transition: background-color 0.2s ease;\n        touch-action: manipulation;\n      }\n\n      button:hover {\n        background-color: ${this._hoverBackgroundColor??"red"};\n      }\n\n      button:active {\n        background-color: ${this._activeBackgroundColor??"red"};\n      }\n\n      button:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      [part="icon"] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n      }\n    `}updateIconColor(e){this._icon.updateColor(e)}updateIconSVG(e){this._icon.updateSVG(e)}updateBackgroundColor(e){this._backgroundColor=e,this.refresh()}updateHoverBackgroundColor(e){this._hoverBackgroundColor=e,this.refresh()}updateActiveBackgroundColor(e){this._activeBackgroundColor=e,this.refresh()}}function $(e){"undefined"==typeof window||customElements.get(e.id)||customElements.define(e.id,e)}function T(e,t){const n=`style[data-${e}]`,i=document.querySelector(n);if(!i){const n=document.createElement("style");return n.setAttribute(`data-${e}`,""),n.textContent=t,document.head.appendChild(n),n}return i}function D(e){const t={...e};return e.actions&&(t.actions=e.actions.map((e=>function(e){const t={...e};e.data&&(t.data=JSON.parse(JSON.stringify(e.data)));return t}(e)))),e.data&&(t.data=JSON.parse(JSON.stringify(e.data))),e.tags&&(t.tags=[...e.tags]),e.trackingIds&&(t.trackingIds={...e.trackingIds}),t}function L(e){if(e)return{...e,messages:e.messages.map((e=>D(e)))}}$(y),$(S),$(M),$(I),$(E),$(x);class A extends b{constructor(e){super(),o(this,"_theme"),o(this,"_options",[]),this._theme=e}static get id(){return"courier-inbox-list-item-menu"}onComponentMounted(){const e=document.createElement("ul");e.className="menu",this.appendChild(e)}static getStyles(e){var t,n,i;const o=null==(i=null==(n=null==(t=e.inbox)?void 0:t.list)?void 0:n.item)?void 0:i.menu;return`\n      ${A.id} {\n        display: none;\n        position: absolute;\n        background: ${(null==o?void 0:o.backgroundColor)??"red"};\n        border: ${(null==o?void 0:o.border)??"1px solid red"};\n        border-radius: ${(null==o?void 0:o.borderRadius)??"0px"};\n        box-shadow: ${(null==o?void 0:o.shadow)??"0 2px 8px red"};\n        user-select: none;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.15s;\n        overflow: hidden;\n      }\n\n      ${A.id}.visible {\n        display: block;\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      ${A.id} ul.menu {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: row;\n      }\n\n      ${A.id} li.menu-item {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        border-bottom: none;\n        background: transparent;\n      }\n    `}setOptions(e){this._options=e,this.renderMenu()}renderMenu(){var e,t,n;const i=this.querySelector("ul.menu");if(!i)return;i.innerHTML="";const o=null==(n=null==(t=null==(e=this._theme.inbox)?void 0:e.list)?void 0:t.item)?void 0:n.menu,s=e=>{e.stopPropagation(),e.preventDefault()};this._options.forEach((e=>{var t,n,l;const r=new E(e.icon.svg,e.icon.color,null==o?void 0:o.backgroundColor,null==(t=null==o?void 0:o.item)?void 0:t.hoverBackgroundColor,null==(n=null==o?void 0:o.item)?void 0:n.activeBackgroundColor,null==(l=null==o?void 0:o.item)?void 0:l.borderRadius),a=t=>{s(t),e.onClick()};r.addEventListener("click",a),r.addEventListener("touchstart",s),r.addEventListener("touchend",a),r.addEventListener("touchmove",s),r.addEventListener("mousedown",s),r.addEventListener("mouseup",s),i.appendChild(r)}))}show(){this.style.display="block",this.classList.add("visible")}hide(){this.style.display="none",this.classList.remove("visible")}}$(A);const P=class e{constructor(){o(this,"_inboxDataSet"),o(this,"_archiveDataSet"),o(this,"_dataStoreListeners",[]),o(this,"_unreadCount"),o(this,"isPaginatingInbox",!1),o(this,"isPaginatingArchive",!1)}static get shared(){return e.instance||(e.instance=new e),e.instance}get unreadCount(){return this._unreadCount??0}get inboxDataSet(){return this._inboxDataSet??{feedType:"inbox",messages:[],canPaginate:!1,paginationCursor:null}}get archiveDataSet(){return this._archiveDataSet??{feedType:"archive",messages:[],canPaginate:!1,paginationCursor:null}}addDataStoreListener(e){this._dataStoreListeners.push(e)}removeDataStoreListener(e){this._dataStoreListeners=this._dataStoreListeners.filter((t=>t!==e))}async fetchCachableDataSet(e){var t,n,i,o,s,l,r,a;if(e.canUseCache){if("inbox"===e.feedType&&this._inboxDataSet)return this._inboxDataSet;if("archive"===e.feedType&&this._archiveDataSet)return this._archiveDataSet}const d=await e.fetch;return{feedType:e.feedType,messages:(null==(n=null==(t=d.data)?void 0:t.messages)?void 0:n.nodes)??[],canPaginate:(null==(s=null==(o=null==(i=d.data)?void 0:i.messages)?void 0:o.pageInfo)?void 0:s.hasNextPage)??!1,paginationCursor:(null==(a=null==(r=null==(l=d.data)?void 0:l.messages)?void 0:r.pageInfo)?void 0:a.startCursor)??null}}async fetchUnreadCount(e){var n;if(e.canUseCache&&void 0!==this._unreadCount)return this._unreadCount;return await(null==(n=t.Courier.shared.client)?void 0:n.inbox.getUnreadMessageCount())??0}async load(e){var n,i;try{const n=t.Courier.shared.client;if(!(null==n?void 0:n.options.userId))throw new Error("User is not signed in");const i=e??{canUseCache:!0},[o,s,l]=await Promise.all([this.fetchCachableDataSet({fetch:n.inbox.getMessages(),feedType:"inbox",canUseCache:i.canUseCache}),this.fetchCachableDataSet({fetch:n.inbox.getArchivedMessages(),feedType:"archive",canUseCache:i.canUseCache}),this.fetchUnreadCount(i)]);this._inboxDataSet=o,this._archiveDataSet=s,this._unreadCount=l,this._dataStoreListeners.forEach((e=>{var t,n,i,o,s,l;this._inboxDataSet&&(null==(n=(t=e.events).onDataSetChange)||n.call(t,this._inboxDataSet,"inbox")),this._archiveDataSet&&(null==(o=(i=e.events).onDataSetChange)||o.call(i,this._archiveDataSet,"archive")),null==(l=(s=e.events).onUnreadCountChange)||l.call(s,this._unreadCount??0)}))}catch(o){null==(i=null==(n=t.Courier.shared.client)?void 0:n.options.logger)||i.error("Error loading inbox:",o),this._dataStoreListeners.forEach((e=>{var t,n;null==(n=(t=e.events).onError)||n.call(t,o)}))}}async listenForUpdates(){var e,n;try{await this.connectSocket()}catch(i){null==(n=null==(e=t.Courier.shared.client)?void 0:e.options.logger)||n.error("Error listening for updates:",i),this._dataStoreListeners.forEach((e=>{var t,n;null==(n=(t=e.events).onError)||n.call(t,i)}))}}async connectSocket(){var e,n,i,o,s,l,r,a,d,h,u;const c=null==(e=t.Courier.shared.client)?void 0:e.inbox.socket;try{if(!c)return void(null==(i=null==(n=t.Courier.shared.client)?void 0:n.options.logger)||i.info("CourierInbox socket not available"));if(c.isConnecting||c.isOpen)return void(null==(l=null==(o=t.Courier.shared.client)?void 0:o.options.logger)||l.info(`Inbox socket already connecting or open for client ID: [${null==(s=t.Courier.shared.client)?void 0:s.options.connectionId}]`));c.addMessageEventListener((e=>{if(e.event===t.InboxMessageEvent.NewMessage){const t=e.data;return void this.addMessage(t,0,"inbox")}const n=this.getMessage({messageId:e.messageId});switch(e.event){case t.InboxMessageEvent.MarkAllRead:this.readAllMessages({canCallApi:!1});break;case t.InboxMessageEvent.Read:n&&this.readMessage({message:n,canCallApi:!1});break;case t.InboxMessageEvent.Unread:n&&this.unreadMessage({message:n,canCallApi:!1});break;case t.InboxMessageEvent.Opened:n&&this.openMessage({message:n,canCallApi:!1});break;case t.InboxMessageEvent.Archive:n&&this.archiveMessage({message:n,canCallApi:!1});break;case t.InboxMessageEvent.ArchiveRead:this.archiveReadMessages({canCallApi:!1});break;case t.InboxMessageEvent.ArchiveAll:this.archiveAllMessages({canCallApi:!1});break;case t.InboxMessageEvent.Clicked:n&&this.clickMessage({message:n,canCallApi:!1});break;case t.InboxMessageEvent.Unarchive:n&&this.unarchiveMessage({message:n,canCallApi:!1});case t.InboxMessageEvent.Unopened:}})),await c.connect(),null==(d=null==(r=t.Courier.shared.client)?void 0:r.options.logger)||d.info(`Inbox socket connected for client ID: [${null==(a=t.Courier.shared.client)?void 0:a.options.connectionId}]`)}catch(v){null==(u=null==(h=t.Courier.shared.client)?void 0:h.options.logger)||u.error("Failed to connect socket:",v)}}getMessage(e){var t,n;if(e.messageId)return(null==(t=this._inboxDataSet)?void 0:t.messages.find((t=>t.messageId===e.messageId)))??(null==(n=this._archiveDataSet)?void 0:n.messages.find((t=>t.messageId===e.messageId)))}async fetchNextPageOfMessages(e){var n,i,o,s,l,r,a,d,h,u,c,v,p,g,m,_,b,x,C,f,y,k,S,M;switch(e.feedType){case"inbox":if(this.isPaginatingInbox)return null;if((null==(n=this._inboxDataSet)?void 0:n.canPaginate)&&this._inboxDataSet.paginationCursor)try{this.isPaginatingInbox=!0;const e=await(null==(i=t.Courier.shared.client)?void 0:i.inbox.getMessages({paginationLimit:t.Courier.shared.paginationLimit,startCursor:this._inboxDataSet.paginationCursor})),n={feedType:"inbox",messages:(null==(s=null==(o=null==e?void 0:e.data)?void 0:o.messages)?void 0:s.nodes)??[],canPaginate:(null==(a=null==(r=null==(l=null==e?void 0:e.data)?void 0:l.messages)?void 0:r.pageInfo)?void 0:a.hasNextPage)??!1,paginationCursor:(null==(u=null==(h=null==(d=null==e?void 0:e.data)?void 0:d.messages)?void 0:h.pageInfo)?void 0:u.startCursor)??null};return this.addPage(n),n}catch(w){return null==(v=null==(c=t.Courier.shared.client)?void 0:c.options.logger)||v.error("Error fetching next page of inbox messages:",w),null}finally{this.isPaginatingInbox=!1}break;case"archive":if(this.isPaginatingArchive)return null;if((null==(p=this._archiveDataSet)?void 0:p.canPaginate)&&this._archiveDataSet.paginationCursor)try{this.isPaginatingArchive=!0;const e=await(null==(g=t.Courier.shared.client)?void 0:g.inbox.getArchivedMessages({paginationLimit:t.Courier.shared.paginationLimit,startCursor:this._archiveDataSet.paginationCursor})),n={feedType:"archive",messages:(null==(_=null==(m=null==e?void 0:e.data)?void 0:m.messages)?void 0:_.nodes)??[],canPaginate:(null==(C=null==(x=null==(b=null==e?void 0:e.data)?void 0:b.messages)?void 0:x.pageInfo)?void 0:C.hasNextPage)??!1,paginationCursor:(null==(k=null==(y=null==(f=null==e?void 0:e.data)?void 0:f.messages)?void 0:y.pageInfo)?void 0:k.startCursor)??null};return this.addPage(n),n}catch(w){return null==(M=null==(S=t.Courier.shared.client)?void 0:S.options.logger)||M.error("Error fetching next page of archived messages:",w),null}finally{this.isPaginatingArchive=!1}}return null}canMutate(){return!!(t.Courier.shared.client&&this._inboxDataSet&&this._archiveDataSet)}async readMessage({message:e,canCallApi:n=!0}){var i,o,s;if(!this.canMutate())return;const l=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet),r=this.getMessageSnapshot(e);if(!r.message.read)try{r.message.read=(new Date).toISOString(),this.applyMessageSnapshot(r),this._unreadCount=l.unreadCount-1,this._dataStoreListeners.forEach((e=>{var t,n;null==(n=(t=e.events).onUnreadCountChange)||n.call(t,this._unreadCount)})),n&&await(null==(i=t.Courier.shared.client)?void 0:i.inbox.read({messageId:e.messageId}))}catch(a){null==(s=null==(o=t.Courier.shared.client)?void 0:o.options.logger)||s.error("Error reading message:",a),this.applyDatastoreSnapshot(l)}}async unreadMessage({message:e,canCallApi:n=!0}){var i,o,s;if(!this.canMutate())return;const l=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet),r=this.getMessageSnapshot(e);if(r.message.read)try{r.message.read=void 0,this.applyMessageSnapshot(r),this._unreadCount=l.unreadCount+1,this._dataStoreListeners.forEach((e=>{var t,n;null==(n=(t=e.events).onUnreadCountChange)||n.call(t,this._unreadCount)})),n&&await(null==(i=t.Courier.shared.client)?void 0:i.inbox.unread({messageId:e.messageId}))}catch(a){null==(s=null==(o=t.Courier.shared.client)?void 0:o.options.logger)||s.error("Error unreading message:",a),this.applyDatastoreSnapshot(l)}}async openMessage({message:e,canCallApi:n=!0}){var i,o,s;if(!this.canMutate())return;const l=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet),r=this.getMessageSnapshot(e);if((void 0!==r.inboxIndex||void 0!==r.archiveIndex)&&!r.message.opened)try{r.message.opened=(new Date).toISOString(),this.applyMessageSnapshot(r),n&&await(null==(i=t.Courier.shared.client)?void 0:i.inbox.open({messageId:e.messageId}))}catch(a){null==(s=null==(o=t.Courier.shared.client)?void 0:o.options.logger)||s.error("Error opening message:",a),this.applyDatastoreSnapshot(l)}}async clickMessage({message:e,canCallApi:n=!0}){var i,o,s,l,r;if(this.canMutate())try{(null==(i=e.trackingIds)?void 0:i.clickTrackingId)&&n&&await(null==(s=t.Courier.shared.client)?void 0:s.inbox.click({messageId:e.messageId,trackingId:null==(o=e.trackingIds)?void 0:o.clickTrackingId}))}catch(a){null==(r=null==(l=t.Courier.shared.client)?void 0:l.options.logger)||r.error("Error clicking message:",a)}}async archiveMessage({message:e,canCallApi:n=!0}){var i,o,s,l;if(!this.canMutate())return;const r=this.getMessageSnapshot(e);if(void 0===r.inboxIndex)return;const a=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet);try{if(e.archived=(new Date).toISOString(),this.removeMessage(e,r.inboxIndex,"inbox"),null==(i=this._archiveDataSet)?void 0:i.messages){const t=this.findInsertIndex(e,this._archiveDataSet);this.addMessage(e,t,"archive")}n&&await(null==(o=t.Courier.shared.client)?void 0:o.inbox.archive({messageId:e.messageId}))}catch(d){null==(l=null==(s=t.Courier.shared.client)?void 0:s.options.logger)||l.error("Error archiving message:",d),this.applyDatastoreSnapshot(a)}}async unarchiveMessage({message:e,canCallApi:n=!0}){var i,o,s,l;if(!this.canMutate())return;const r=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet),a=this.getMessageSnapshot(e);if(void 0!==a.archiveIndex)try{if(a.message.archived=void 0,this.removeMessage(e,a.archiveIndex,"archive"),null==(i=this._inboxDataSet)?void 0:i.messages){const t=this.findInsertIndex(e,this._inboxDataSet);this.addMessage(e,t,"inbox")}n&&await(null==(o=t.Courier.shared.client)?void 0:o.inbox.unarchive({messageId:e.messageId}))}catch(d){null==(l=null==(s=t.Courier.shared.client)?void 0:s.options.logger)||l.error("Error unarchiving message:",d),this.applyDatastoreSnapshot(r)}}async archiveReadMessages({canCallApi:e=!0}={}){var n,i,o,s;if(!this.canMutate())return;const l=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet);try{const o=(new Date).toISOString();((null==(n=this._inboxDataSet)?void 0:n.messages.filter((e=>e.read)))??[]).forEach((e=>{var t,n,i;e.archived=o;const s=null==(t=this._inboxDataSet)?void 0:t.messages.findIndex((t=>t.messageId===e.messageId));if(void 0!==s&&-1!==s&&(null==(n=this._inboxDataSet)||n.messages.splice(s,1)),null==(i=this._archiveDataSet)?void 0:i.messages){const t=this.findInsertIndex(e,this._archiveDataSet);this._archiveDataSet.messages.splice(t,0,e)}})),this._dataStoreListeners.forEach((e=>{var t,n,i,o;this._inboxDataSet&&(null==(n=(t=e.events).onDataSetChange)||n.call(t,this._inboxDataSet,"inbox")),this._archiveDataSet&&(null==(o=(i=e.events).onDataSetChange)||o.call(i,this._archiveDataSet,"archive"))})),e&&await(null==(i=t.Courier.shared.client)?void 0:i.inbox.archiveRead())}catch(r){null==(s=null==(o=t.Courier.shared.client)?void 0:o.options.logger)||s.error("Error archiving read messages:",r),this.applyDatastoreSnapshot(l)}}async archiveAllMessages({canCallApi:e=!0}={}){var n,i,o,s;if(!this.canMutate())return;const l=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet);try{const o=(new Date).toISOString();null==(n=this._inboxDataSet)||n.messages.forEach((e=>{var t;if(e.archived=o,null==(t=this._archiveDataSet)?void 0:t.messages){const t=this.findInsertIndex(e,this._archiveDataSet);this._archiveDataSet.messages.splice(t,0,e)}})),this._inboxDataSet={messages:[],canPaginate:!1,paginationCursor:null,feedType:"inbox"},this._unreadCount=0,this._dataStoreListeners.forEach((e=>{var t,n,i,o,s,l;this._inboxDataSet&&(null==(n=(t=e.events).onDataSetChange)||n.call(t,this._inboxDataSet,"inbox")),this._archiveDataSet&&(null==(o=(i=e.events).onDataSetChange)||o.call(i,this._archiveDataSet,"archive")),null==(l=(s=e.events).onUnreadCountChange)||l.call(s,this._unreadCount)})),e&&await(null==(i=t.Courier.shared.client)?void 0:i.inbox.archiveAll())}catch(r){null==(s=null==(o=t.Courier.shared.client)?void 0:o.options.logger)||s.error("Error archiving all messages:",r),this.applyDatastoreSnapshot(l)}}async readAllMessages({canCallApi:e=!0}={}){var n,i,o,s,l;if(!this.canMutate())return;const r=this.getDatastoreSnapshot(this.unreadCount,this._inboxDataSet,this._archiveDataSet);try{const s=(new Date).toISOString();null==(n=this._inboxDataSet)||n.messages.forEach((e=>{e.read||(e.read=s)})),null==(i=this._archiveDataSet)||i.messages.forEach((e=>{e.read||(e.read=s)})),this._unreadCount=0,this._dataStoreListeners.forEach((e=>{var t,n,i,o,s,l;this._inboxDataSet&&(null==(n=(t=e.events).onDataSetChange)||n.call(t,this._inboxDataSet,"inbox")),this._archiveDataSet&&(null==(o=(i=e.events).onDataSetChange)||o.call(i,this._archiveDataSet,"archive")),null==(l=(s=e.events).onUnreadCountChange)||l.call(s,this._unreadCount)})),e&&await(null==(o=t.Courier.shared.client)?void 0:o.inbox.readAll())}catch(a){null==(l=null==(s=t.Courier.shared.client)?void 0:s.options.logger)||l.error("Error reading all messages:",a),this.applyDatastoreSnapshot(r)}}findInsertIndex(e,t){const n=t.messages;for(let i=0;i<n.length;i++){const t=n[i];if(t.created&&e.created&&t.created<e.created)return i}return n.length}addPage(e){switch(e.feedType){case"inbox":this._inboxDataSet&&(this._inboxDataSet.canPaginate=e.canPaginate,this._inboxDataSet.paginationCursor=e.paginationCursor,this._inboxDataSet.messages=[...this._inboxDataSet.messages,...e.messages]);break;case"archive":this._archiveDataSet&&(this._archiveDataSet.canPaginate=e.canPaginate,this._archiveDataSet.paginationCursor=e.paginationCursor,this._archiveDataSet.messages=[...this._archiveDataSet.messages,...e.messages])}this._dataStoreListeners.forEach((t=>{var n,i;return null==(i=(n=t.events).onPageAdded)?void 0:i.call(n,e,e.feedType)}))}addMessage(e,t,n){var i,o;switch(n){case"inbox":e.read||void 0===this._unreadCount||(this._unreadCount=this._unreadCount+1),null==(i=this._inboxDataSet)||i.messages.splice(t,0,e);break;case"archive":null==(o=this._archiveDataSet)||o.messages.splice(t,0,e)}this._dataStoreListeners.forEach((i=>{var o,s,l,r;null==(s=(o=i.events).onMessageAdd)||s.call(o,e,t,n),null==(r=(l=i.events).onUnreadCountChange)||r.call(l,this._unreadCount??0)}))}removeMessage(e,t,n){var i,o;switch(n){case"inbox":e.read||void 0===this._unreadCount||(this._unreadCount=this._unreadCount-1),null==(i=this._inboxDataSet)||i.messages.splice(t,1);break;case"archive":null==(o=this._archiveDataSet)||o.messages.splice(t,1)}this._dataStoreListeners.forEach((i=>{var o,s,l,r;null==(s=(o=i.events).onMessageRemove)||s.call(o,e,t,n),null==(r=(l=i.events).onUnreadCountChange)||r.call(l,this._unreadCount??0)}))}applyMessageSnapshot(e){void 0!==e.archiveIndex&&this.updateMessage(e.message,e.archiveIndex,"archive"),void 0!==e.inboxIndex&&this.updateMessage(e.message,e.inboxIndex,"inbox")}applyDatastoreSnapshot(e){const{unreadCount:t,inbox:n,archive:i}=e;this._inboxDataSet=n,this._archiveDataSet=i,this._dataStoreListeners.forEach((e=>{var n,i,o,s,l,r;this._inboxDataSet&&(null==(i=(n=e.events).onDataSetChange)||i.call(n,this._inboxDataSet,"inbox")),this._archiveDataSet&&(null==(s=(o=e.events).onDataSetChange)||s.call(o,this._archiveDataSet,"archive")),null==(r=(l=e.events).onUnreadCountChange)||r.call(l,t)}))}updateMessage(e,t,n){switch(n){case"inbox":this._inboxDataSet&&(this._inboxDataSet.messages[t]=e);break;case"archive":this._archiveDataSet&&(this._archiveDataSet.messages[t]=e)}this._dataStoreListeners.forEach((i=>{var o,s,l,r;null==(s=(o=i.events).onMessageUpdate)||s.call(o,e,t,n),null==(r=(l=i.events).onUnreadCountChange)||r.call(l,this._unreadCount??0)}))}getDatastoreSnapshot(e,t,n){return{unreadCount:e,inbox:L(t),archive:L(n)}}getMessageSnapshot(e){const t=this._archiveDataSet?this._archiveDataSet.messages.findIndex((t=>t.messageId===e.messageId)):void 0,n=this._inboxDataSet?this._inboxDataSet.messages.findIndex((t=>t.messageId===e.messageId)):void 0;return{message:D(e),archiveIndex:t,inboxIndex:n}}};o(P,"instance");let B=P;class F extends b{constructor(e,t,n){super(),o(this,"_themeManager"),o(this,"_theme"),o(this,"_message",null),o(this,"_feedType","inbox"),o(this,"_isMobile",!1),o(this,"_canClick",!1),o(this,"_titleElement"),o(this,"_subtitleElement"),o(this,"_timeElement"),o(this,"_menu"),o(this,"_unreadIndicator"),o(this,"_actionsContainer"),o(this,"_longPressTimeout",null),o(this,"_isLongPress",!1),o(this,"_observer"),o(this,"onItemClick",null),o(this,"onItemLongPress",null),o(this,"onItemActionClick",null),o(this,"onItemVisible",null),this._canClick=t,this._themeManager=e,this._theme=e.getTheme(),this._isMobile="ontouchstart"in window,this.render(),this._setupIntersectionObserver()}static get id(){return"courier-inbox-list-item"}render(){const e=document.createElement("div");e.className="content-container",this._titleElement=document.createElement("p"),this._titleElement.className="title",this._subtitleElement=document.createElement("p"),this._subtitleElement.className="subtitle",this._actionsContainer=document.createElement("div"),this._actionsContainer.className="actions-container",e.appendChild(this._titleElement),e.appendChild(this._subtitleElement),e.appendChild(this._actionsContainer),this._timeElement=document.createElement("p"),this._timeElement.className="time",this._unreadIndicator=document.createElement("div"),this._unreadIndicator.className="unread-indicator",this._menu=new A(this._theme),this._menu.setOptions(this._getMenuOptions()),this.append(this._unreadIndicator,e,this._timeElement,this._menu);const t=e=>{e.stopPropagation(),e.preventDefault()};this._menu.addEventListener("mousedown",t),this._menu.addEventListener("pointerdown",t),this._menu.addEventListener("click",t),this.addEventListener("click",(e=>{this._canClick&&(this._menu&&(this._menu.contains(e.target)||e.composedPath().includes(this._menu))||!this._message||!this.onItemClick||e.target instanceof S||this._isLongPress||this.onItemClick(this._message))})),this._setupHoverBehavior(),this._setupLongPressBehavior(),this._canClick&&this.classList.add("clickable")}_setupIntersectionObserver(){"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver&&(this._observer&&this._observer.disconnect(),this._observer=new IntersectionObserver((e=>{e.forEach((e=>{1===e.intersectionRatio&&this.onItemVisible&&this._message&&this.onItemVisible(this._message)}))}),{threshold:1}),this._observer.observe(this))}onComponentUnmounted(){var e;null==(e=this._observer)||e.disconnect()}static getStyles(e){var t,n,i,o,s,l,r,a,d,h,u,c,v,p,g,m,_,b,x,C,f,y,k,S,M,w;const I=null==(t=e.inbox)?void 0:t.list;return`\n      ${F.id} {\n        display: flex;\n        flex-direction: row;\n        align-items: flex-start;\n        justify-content: space-between;\n        border-bottom: ${(null==(n=null==I?void 0:I.item)?void 0:n.divider)??"1px solid red"};\n        font-family: inherit;\n        cursor: default;\n        transition: background-color 0.2s ease;\n        margin: 0;\n        width: 100%;\n        box-sizing: border-box;\n        padding: 12px 20px;\n        position: relative;\n        background-color: ${(null==(i=null==I?void 0:I.item)?void 0:i.backgroundColor)??"transparent"};\n        user-select: none;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        touch-action: manipulation;\n      }\n\n      /* Only apply hover/active background if clickable */\n      @media (hover: hover) {\n        ${F.id}.clickable:hover {\n          cursor: pointer;\n          background-color: ${(null==(o=null==I?void 0:I.item)?void 0:o.hoverBackgroundColor)??"red"};\n        }\n      }\n\n      ${F.id}.clickable:active {\n        cursor: pointer;\n        background-color: ${(null==(s=null==I?void 0:I.item)?void 0:s.activeBackgroundColor)??"red"};\n      }\n\n      /* Menu hover / active */\n      @media (hover: hover) {\n        ${F.id}.clickable:hover:has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {\n          background-color: ${(null==(l=null==I?void 0:I.item)?void 0:l.backgroundColor)??"transparent"};\n        }\n      }\n\n      ${F.id}.clickable:active:has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {\n        background-color: ${(null==(r=null==I?void 0:I.item)?void 0:r.backgroundColor)??"transparent"};\n      }\n\n      ${F.id}:last-child {\n        border-bottom: none;\n      }\n\n      ${F.id} .unread-indicator {\n        position: absolute;\n        top: 28px;\n        left: 6px;\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background-color: ${(null==(a=null==I?void 0:I.item)?void 0:a.unreadIndicatorColor)??"red"};\n        display: none;\n      }\n\n      ${F.id}.unread .unread-indicator {\n        display: block;\n      }\n\n      ${F.id} .content-container {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        margin-right: 12px;\n      }\n\n      ${F.id} p {\n        margin: 0;\n        overflow-wrap: break-word;\n        word-break: break-word;\n        hyphens: auto;\n        line-height: 1.4;\n        user-select: none;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        text-align: left;\n      }\n\n      ${F.id} .title {\n        font-family: ${(null==(h=null==(d=null==I?void 0:I.item)?void 0:d.title)?void 0:h.family)??"inherit"};\n        font-size: ${(null==(c=null==(u=null==I?void 0:I.item)?void 0:u.title)?void 0:c.size)??"14px"};\n        color: ${(null==(p=null==(v=null==I?void 0:I.item)?void 0:v.title)?void 0:p.color)??"red"};\n        margin-bottom: 4px;\n      }\n\n      ${F.id} .subtitle {\n        font-family: ${(null==(m=null==(g=null==I?void 0:I.item)?void 0:g.subtitle)?void 0:m.family)??"inherit"};\n        font-size: ${(null==(b=null==(_=null==I?void 0:I.item)?void 0:_.subtitle)?void 0:b.size)??"14px"};\n        color: ${(null==(C=null==(x=null==I?void 0:I.item)?void 0:x.subtitle)?void 0:C.color)??"red"};\n      }\n\n      ${F.id} .time {\n        font-family: ${(null==(y=null==(f=null==I?void 0:I.item)?void 0:f.time)?void 0:y.family)??"inherit"};\n        font-size: ${(null==(S=null==(k=null==I?void 0:I.item)?void 0:k.time)?void 0:S.size)??"14px"};\n        color: ${(null==(w=null==(M=null==I?void 0:I.item)?void 0:M.time)?void 0:w.color)??"red"};\n        text-align: right;\n        white-space: nowrap;\n      }\n\n      ${F.id} courier-inbox-list-item-menu {\n        z-index: 1;\n        position: absolute;\n        top: 8px;\n        right: 8px;\n        display: none;\n      }\n\n      ${F.id} .actions-container {\n        display: flex;\n        margin-top: 10px;\n        flex-wrap: wrap;\n        flex-direction: row;\n        align-items: center;\n        gap: 8px;\n        display: none;\n      }\n    `}_setupHoverBehavior(){this._isMobile||(this.addEventListener("mouseenter",(()=>{this._isLongPress=!1,this._showMenu()})),this.addEventListener("mouseleave",(()=>this._hideMenu())))}_setupLongPressBehavior(){var e,t,n;const i=null==(n=null==(t=null==(e=this._theme.inbox)?void 0:e.list)?void 0:t.item)?void 0:n.menu;if(!(null==i?void 0:i.enabled))return;const o=i.longPress;this.addEventListener("touchstart",(()=>{this._longPressTimeout=window.setTimeout((()=>{this._isLongPress=!0,this._showMenu(),this._message&&this.onItemLongPress&&(this.onItemLongPress(this._message),navigator.vibrate&&navigator.vibrate((null==o?void 0:o.vibrationDuration)??50)),setTimeout((()=>{this._hideMenu(),this._isLongPress=!1}),(null==o?void 0:o.displayDuration)??2e3)}),650)}),{passive:!0}),this.addEventListener("touchend",(()=>{this._longPressTimeout&&(window.clearTimeout(this._longPressTimeout),this._longPressTimeout=null)}))}_getMenuOptions(){var e,t,n,i,o,s,l,r,a,d,h,u,c,v,p;const g=null==(i=null==(n=null==(t=null==(e=this._theme.inbox)?void 0:e.list)?void 0:t.item)?void 0:n.menu)?void 0:i.item;let m=[];const _="archive"===this._feedType;return _||m.push({id:(null==(o=this._message)?void 0:o.read)?"unread":"read",icon:{svg:(null==(s=this._message)?void 0:s.read)?null==(l=null==g?void 0:g.unread)?void 0:l.svg:null==(r=null==g?void 0:g.read)?void 0:r.svg,color:(null==(a=this._message)?void 0:a.read)?null==(d=null==g?void 0:g.unread)?void 0:d.color:(null==(h=null==g?void 0:g.read)?void 0:h.color)??"red"},onClick:()=>{this._message&&(this._message.read?B.shared.unreadMessage({message:this._message}):B.shared.readMessage({message:this._message}))}}),m.push({id:_?"unarchive":"archive",icon:{svg:_?null==(u=null==g?void 0:g.unarchive)?void 0:u.svg:null==(c=null==g?void 0:g.archive)?void 0:c.svg,color:_?null==(v=null==g?void 0:g.unarchive)?void 0:v.color:(null==(p=null==g?void 0:g.archive)?void 0:p.color)??"red"},onClick:()=>{this._message&&(_?B.shared.unarchiveMessage({message:this._message}):B.shared.archiveMessage({message:this._message}))}}),m}_showMenu(){var e,t,n;const i=null==(n=null==(t=null==(e=this._theme.inbox)?void 0:e.list)?void 0:t.item)?void 0:n.menu;i&&i.enabled&&this._menu&&this._timeElement&&(this._menu.setOptions(this._getMenuOptions()),this._menu.style.display="block",this._menu.show(),this._timeElement.style.opacity="0")}_hideMenu(){var e,t,n;const i=null==(n=null==(t=null==(e=this._theme.inbox)?void 0:e.list)?void 0:t.item)?void 0:n.menu;i&&i.enabled&&this._menu&&this._timeElement&&(this._menu.hide(),this._menu.style.display="none",this._timeElement.style.opacity="1")}setMessage(e,t){this._message=e,this._feedType=t,this._updateContent()}setOnItemClick(e){this.onItemClick=e}setOnItemActionClick(e){this.onItemActionClick=e}setOnItemLongPress(e){this.onItemLongPress=e}setOnItemVisible(e){this.onItemVisible=e}_updateContent(){var e,t,n;if(!this._message)return this._titleElement&&(this._titleElement.textContent=""),void(this._subtitleElement&&(this._subtitleElement.textContent=""));this.classList.toggle("unread",!this._message.read&&"archive"!==this._feedType),this._titleElement&&(this._titleElement.textContent=this._message.title||"Untitled Message"),this._subtitleElement&&(this._subtitleElement.textContent=this._message.preview||this._message.body||""),this._timeElement&&(this._timeElement.textContent=function(e){if(!e.created)return"Now";const t=new Date,n=new Date(e.created),i=Math.floor((t.getTime()-n.getTime())/1e3);return i<5?"Now":i<60?`${i}s`:i<3600?`${Math.floor(i/60)}m`:i<86400?`${Math.floor(i/3600)}h`:i<604800?`${Math.floor(i/86400)}d`:i<31536e3?`${Math.floor(i/604800)}w`:`${Math.floor(i/31536e3)}y`}(this._message)),this._menu&&this._menu.setOptions(this._getMenuOptions());const i=this._message.actions&&this._message.actions.length>0;this._actionsContainer&&(this._actionsContaine