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

Inbox components for the Courier web UI

(function(E,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("@trycourier/courier-js")):typeof define=="function"&&define.amd?define(["exports","@trycourier/courier-js"],f):(E=typeof globalThis<"u"?globalThis:E||self,f(E.CourierUIInbox={},E.CourierJS))})(this,function(E,f){"use strict";var No=Object.defineProperty;var Uo=(E,f,oe)=>f in E?No(E,f,{enumerable:!0,configurable:!0,writable:!0,value:oe}):E[f]=oe;var a=(E,f,oe)=>Uo(E,typeof f!="symbol"?f+"":f,oe);var oe=Object.defineProperty,$o=(m,i,e)=>i in m?oe(m,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):m[i]=e,L=(m,i,e)=>$o(m,typeof i!="symbol"?i+"":i,e);const r={black:{500:"#171717",50010:"#1717171A",50020:"#17171733"},gray:{200:"#F5F5F5",400:"#3A3A3A",500:"#E5E5E5",600:"#737373"},white:{500:"#FFFFFF",50010:"#FFFFFF1A",50020:"#FFFFFF33"},blue:{400:"#60A5FA",500:"#2563EB"}},G={light:{colors:{primary:r.black[500],secondary:r.white[500],border:r.gray[500],link:r.blue[500],icon:r.black[500]},button:{cornerRadius:"4px"}},dark:{colors:{primary:r.white[500],secondary:r.black[500],border:r.gray[400],link:r.blue[400],icon:r.white[500]},button:{cornerRadius:"4px"}}},Ve=()=>typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",Ze=m=>{if(typeof window>"u")return()=>{};const i=window.matchMedia("(prefers-color-scheme: dark)"),e=t=>{m(t.matches?"dark":"light")};return i.addEventListener("change",e),()=>{i.removeEventListener("change",e)}};class je extends HTMLElement{constructor(){super(),L(this,"_currentSystemTheme"),L(this,"_systemThemeCleanup"),this._currentSystemTheme=Ve(),this._systemThemeCleanup=Ze(i=>{this._currentSystemTheme=i,this.onSystemThemeChange(i)})}get currentSystemTheme(){return this._currentSystemTheme}disconnectedCallback(){this._systemThemeCleanup&&this._systemThemeCleanup()}onSystemThemeChange(i){}}const Pe={borderRadius:"4px",fontSize:"14px"},X={primary:m=>({...Pe,backgroundColor:G[m].colors.primary,textColor:G[m].colors.secondary,fontWeight:"500",shadow:"none"}),secondary:m=>({...Pe,backgroundColor:G[m].colors.secondary,textColor:G[m].colors.primary,fontWeight:"500",border:`1px solid ${G[m].colors.border}`,shadow:m==="light"?"0px 1px 2px 0px rgba(0, 0, 0, 0.06)":"0px 1px 2px 0px rgba(255, 255, 255, 0.1)"}),tertiary:m=>({...Pe,backgroundColor:G[m].colors.border,textColor:G[m].colors.primary,fontWeight:"500",border:"none",shadow:"none"})};class Ie extends je{constructor(i){super(),L(this,"_button"),L(this,"_style");const e=this.attachShadow({mode:"open"});this._button=document.createElement("button"),this._button.setAttribute("part","button"),this._style=document.createElement("style"),this._style.textContent=this.getStyles(i),e.appendChild(this._style),e.appendChild(this._button),this.updateButton(i),this._button.addEventListener("click",t=>{t.preventDefault(),t.stopPropagation(),i.onClick&&i.onClick()})}getStyles(i){const e=()=>X.secondary(this.currentSystemTheme).textColor,t=()=>X.secondary(this.currentSystemTheme).backgroundColor,s=()=>X.secondary(this.currentSystemTheme).border,o=()=>X.secondary(this.currentSystemTheme).shadow,n=()=>X.secondary(this.currentSystemTheme).borderRadius,h=()=>X.secondary(this.currentSystemTheme).fontSize,d=()=>X.secondary(this.currentSystemTheme).fontWeight;return`
      :host {
        display: inline-block;
      }

      button {
        border: none;
        border-radius: ${i.borderRadius??n()};
        font-weight: ${i.fontWeight??d()};
        font-family: ${i.fontFamily??"inherit"};
        font-size: ${i.fontSize??h()};
        padding: 6px 10px;
        cursor: pointer;
        width: 100%;
        height: 100%;
        background-color: ${i.backgroundColor??t()};
        color: ${i.textColor??e()};
        border: ${i.border??s()};
        box-shadow: ${i.shadow??o()};
        touch-action: manipulation;
      }

      button:hover {
        ${i.hoverBackgroundColor?`background-color: ${i.hoverBackgroundColor};`:"filter: brightness(0.9);"}
      }

      button:active {
        ${i.activeBackgroundColor?`background-color: ${i.activeBackgroundColor};`:"filter: brightness(0.8);"}
      }

      button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    `}updateButton(i){i.text&&(this._button.textContent=i.text),this._style.textContent=this.getStyles(i)}}customElements.get("courier-button")||customElements.define("courier-button",Ie);const C={inbox:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,archive:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,check:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,filter:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,overflow:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,read:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,archiveRead:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,unread:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`,unarchive:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>`};class ie extends HTMLElement{constructor(i,e){super(),L(this,"_color"),L(this,"_svg"),L(this,"_iconContainer"),L(this,"_style"),this._color=i??r.black[500],this._svg=e;const t=this.attachShadow({mode:"open"});this._iconContainer=document.createElement("div"),t.appendChild(this._iconContainer),this._style=document.createElement("style"),this._style.textContent=this.getStyles(this._color),t.appendChild(this._style),this.refresh()}getStyles(i){return`
      :host {
        display: inline-block;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      svg {
        width: 24px;
        height: 24px;
        color: ${i};
      }
    `}refresh(){this._svg&&(this._iconContainer.innerHTML=this._svg),this._color&&(this._style.textContent=this.getStyles(this._color))}updateColor(i){this._color=i,this.refresh()}updateSVG(i){this._svg=i,this.refresh()}}customElements.get("courier-icon")||customElements.define("courier-icon",ie);class $e extends HTMLElement{constructor(){super(),L(this,"link");const i=this.attachShadow({mode:"open"});this.link=document.createElement("a"),this.link.setAttribute("part","link");const e=document.createElement("style");e.textContent=`
      :host {
        display: inline-block;
      }

      a {
        text-decoration: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        font-family: var(--courier-link-font-family, inherit);
        font-size: var(--courier-link-font-size, inherit);
      }

      /* Variants */
      a[data-variant="primary"][data-mode="light"] {
        color: var(--courier-link-color, ${G.light.colors.link});
      }

      a[data-variant="primary"][data-mode="light"]:hover {
        opacity: 0.8;
      }

      a[data-variant="primary"][data-mode="light"]:active {
        opacity: 0.6;
      }

      a[data-variant="primary"][data-mode="dark"] {
        color: var(--courier-link-color, ${G.dark.colors.link});
      }

      a[data-variant="primary"][data-mode="dark"]:hover {
        opacity: 0.8;
      }

      a[data-variant="primary"][data-mode="dark"]:active {
        opacity: 0.6;
      }

      a[data-underline="true"] {
        text-decoration: underline;
      }

      a:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
      }
    `,i.appendChild(e),i.appendChild(this.link),this.updateVariant(),this.updateUnderline(),this.updateMode()}connectedCallback(){const i=document.createElement("slot");this.link.appendChild(i),this.updateHref()}attributeChangedCallback(i,e,t){if(e!==t)switch(i){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();break}}updateHref(){const i=this.getAttribute("href");i&&(this.link.href=i)}updateVariant(){const i=this.getAttribute("variant")||"primary",e=this.getAttribute("mode")||"light";this.link.setAttribute("data-variant",i),this.link.setAttribute("data-mode",e)}updateColor(){const i=this.getAttribute("color");i?this.link.style.setProperty("--courier-link-color",i):this.link.style.removeProperty("--courier-link-color")}updateUnderline(){const i=this.getAttribute("underline")==="true";this.link.setAttribute("data-underline",i.toString())}updateMode(){const i=this.getAttribute("mode")||"light";this.link.setAttribute("data-mode",i)}updateTarget(){const i=this.getAttribute("target");i&&(this.link.target=i)}updateFontFamily(){const i=this.getAttribute("font-family");i?this.link.style.setProperty("--courier-link-font-family",i):this.link.style.removeProperty("--courier-link-font-family")}updateFontSize(){const i=this.getAttribute("font-size");i?this.link.style.setProperty("--courier-link-font-size",i):this.link.style.removeProperty("--courier-link-font-size")}}L($e,"observedAttributes",["href","variant","disabled","color","underline","mode","target","font-family","font-size"]),customElements.get("courier-link")||customElements.define("courier-link",$e);class Te extends je{constructor(){super(),L(this,"shadow"),this.shadow=this.attachShadow({mode:"open"})}build(i){if(i===null){this.shadow.replaceChildren();return}const e=i??this.defaultElement();this.shadow.replaceChildren(e)}defaultElement(){const i=document.createElement("div");return i.textContent="Default Element Factory",i.style.cssText=`
      background-color: red;
      text-align: center;
      padding: 12px;
    `,i}}class Le extends Te{constructor(i){super(),L(this,"_props"),L(this,"_title"),L(this,"_button"),L(this,"_style"),L(this,"_buttonClickCallback",null),this._props=i}defaultElement(){var i,e;const t=document.createElement("div");return this._title=document.createElement("h2"),(i=this._props.title)!=null&&i.text&&(this._title.textContent=this._props.title.text),this._button=new Ie(this._props.button??X.secondary(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.shadow.appendChild(t),(e=this._button)==null||e.addEventListener("click",()=>{this._buttonClickCallback&&this._buttonClickCallback()}),t}onSystemThemeChange(i){this.updateStyles(this._props)}getStyles(i){var e,t,s,o;return`
      :host {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
      }

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        text-align: center;
        padding: 24px;
      }

      .container h2 {
        margin: 0;
        color: ${((e=i.title)==null?void 0:e.textColor)??"red"};
        font-size: ${((t=i.title)==null?void 0:t.fontSize)??"16px"};
        font-weight: ${((s=i.title)==null?void 0:s.fontWeight)??"500"};
        font-family: ${((o=i.title)==null?void 0:o.fontFamily)??"inherit"};
      }
    `}updateStyles(i){this._props=i,this._style&&(this._style.textContent=this.getStyles(i)),this._button&&this._button.updateButton(i.button)}setButtonClickCallback(i){this._buttonClickCallback=i}}customElements.get("courier-info-state")||customElements.define("courier-info-state",Le);class re extends HTMLElement{constructor(i,e,t,s,o,n,h,d){super(),L(this,"_backgroundColor"),L(this,"_hoverBackgroundColor"),L(this,"_activeBackgroundColor"),L(this,"_borderRadius"),L(this,"_height"),L(this,"_width"),L(this,"_style"),L(this,"_button"),L(this,"_icon"),this._borderRadius=n,this._backgroundColor=t,this._hoverBackgroundColor=s,this._activeBackgroundColor=o,this._height=h,this._width=d;const c=this.attachShadow({mode:"open"});this._button=document.createElement("button"),this._button.setAttribute("part","button"),this._icon=new ie(e,i),this._style=document.createElement("style"),this.refresh(),c.appendChild(this._style),this._button.appendChild(this._icon),c.appendChild(this._button)}refresh(){this._style.textContent=this.getStyles()}getStyles(){return`
      :host {
        display: inline-block;
        border-radius: ${this._borderRadius??"50%"};
      }

      button {
        border: none;
        border-radius: ${this._borderRadius??"50%"};
        cursor: pointer;
        width: ${this._width??"36px"};
        height: ${this._height??"36px"};
        display: flex;
        align-items: center;
        justify-content: center;
        background: ${this._backgroundColor??"transparent"};
        transition: background-color 0.2s ease;
        touch-action: manipulation;
      }

      button:hover {
        background-color: ${this._hoverBackgroundColor??"red"};
      }

      button:active {
        background-color: ${this._activeBackgroundColor??"red"};
      }

      button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      [part="icon"] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
      }
    `}updateIconColor(i){this._icon.updateColor(i)}updateIconSVG(i){this._icon.updateSVG(i)}updateBackgroundColor(i){this._backgroundColor=i,this.refresh()}updateHoverBackgroundColor(i){this._hoverBackgroundColor=i,this.refresh()}updateActiveBackgroundColor(i){this._activeBackgroundColor=i,this.refresh()}}customElements.get("courier-icon-button")||customElements.define("courier-icon-button",re),[{name:"courier-button",class:Ie},{name:"courier-icon",class:ie},{name:"courier-link",class:$e},{name:"courier-info-state",class:Le},{name:"courier-icon-button",class:re}].forEach(({name:m,class:i})=>{customElements.get(m)||customElements.define(m,i)});const se=class se{constructor(){a(this,"_inboxDataSet");a(this,"_archiveDataSet");a(this,"_dataStoreListeners",[]);a(this,"_unreadCount");a(this,"isPaginatingInbox",!1);a(this,"isPaginatingArchive",!1)}static get shared(){return se.instance||(se.instance=new se),se.instance}get unreadCount(){return this._unreadCount??0}get inboxDataSet(){return this._inboxDataSet??{messages:[],canPaginate:!1,paginationCursor:null}}get archiveDataSet(){return this._archiveDataSet??{messages:[],canPaginate:!1,paginationCursor:null}}addDataStoreListener(i){this._dataStoreListeners.push(i)}removeDataStoreListener(i){this._dataStoreListeners=this._dataStoreListeners.filter(e=>e!==i)}async fetchDataSet(i){var t,s,o,n,h,d,c,u,g,p;if(i.canUseCache)switch(i.feedType){case"inbox":if(this._inboxDataSet)return this._inboxDataSet;break;case"archive":if(this._archiveDataSet)return this._archiveDataSet;break}const e=i.feedType==="inbox"?await((t=f.Courier.shared.client)==null?void 0:t.inbox.getMessages()):await((s=f.Courier.shared.client)==null?void 0:s.inbox.getArchivedMessages());return{messages:((n=(o=e==null?void 0:e.data)==null?void 0:o.messages)==null?void 0:n.nodes)??[],canPaginate:((c=(d=(h=e==null?void 0:e.data)==null?void 0:h.messages)==null?void 0:d.pageInfo)==null?void 0:c.hasNextPage)??!1,paginationCursor:((p=(g=(u=e==null?void 0:e.data)==null?void 0:u.messages)==null?void 0:g.pageInfo)==null?void 0:p.startCursor)??null}}async fetchUnreadCount(i){var t;return i.canUseCache&&this._unreadCount!==void 0?this._unreadCount:await((t=f.Courier.shared.client)==null?void 0:t.inbox.getUnreadMessageCount())??0}async load(i){var e,t,s;try{if(!((e=f.Courier.shared.client)!=null&&e.options.userId))throw new Error("User is not signed in");const o=i??{feedType:"inbox",canUseCache:!0},[n,h]=await Promise.all([this.fetchDataSet(o),this.fetchUnreadCount(o)]);switch(o.feedType){case"inbox":this._inboxDataSet=n;break;case"archive":this._archiveDataSet=n;break}this._unreadCount=h,this._dataStoreListeners.forEach(d=>{var c,u,g,p;(u=(c=d.events).onDataSetChange)==null||u.call(c,n,o.feedType),(p=(g=d.events).onUnreadCountChange)==null||p.call(g,this._unreadCount??0)}),await this.connectSocket()}catch(o){(s=(t=f.Courier.shared.client)==null?void 0:t.options.logger)==null||s.error("Error loading inbox:",o),this._dataStoreListeners.forEach(n=>{var h,d;(d=(h=n.events).onError)==null||d.call(h,o)})}}async connectSocket(){var e,t,s,o,n,h,d,c,u,g,p,x;const i=(e=f.Courier.shared.client)==null?void 0:e.inbox.socket;try{if(!i){(s=(t=f.Courier.shared.client)==null?void 0:t.options.logger)==null||s.info("CourierInbox socket not available");return}if((h=(o=f.Courier.shared.client)==null?void 0:o.options.logger)==null||h.info("CourierInbox socket connectionId:",(n=f.Courier.shared.client)==null?void 0:n.options.connectionId),i.isConnected){(c=(d=f.Courier.shared.client)==null?void 0:d.options.logger)==null||c.info("CourierInbox socket already connected. Socket will not attempt reconnection.");return}i.receivedMessage=_=>{this.addMessage(_,0,"inbox")},i.receivedMessageEvent=_=>{let b;switch(_.messageId&&(b=this.getMessage({messageId:_.messageId})),_.event){case"mark-all-read":this.readAllMessages();break;case"read":b&&this.readMessage(b,!1);break;case"unread":b&&this.unreadMessage(b,!1);break;case"opened":b&&this.openMessage(b,!1);break;case"archive":b&&this.archiveMessage(b,!1);break;case"click":b&&this.clickMessage(b,!1);break;case"unopened":case"unarchive":break}},await i.connect(),await i.sendSubscribe(),i.keepAlive(),(g=(u=f.Courier.shared.client)==null?void 0:u.options.logger)==null||g.info("CourierInbox socket connected")}catch(_){(x=(p=f.Courier.shared.client)==null?void 0:p.options.logger)==null||x.error("Failed to connect socket:",_)}}getMessage(i){var e,t;return((e=this._inboxDataSet)==null?void 0:e.messages.find(s=>s.messageId===i.messageId))??((t=this._archiveDataSet)==null?void 0:t.messages.find(s=>s.messageId===i.messageId))}async fetchNextPageOfMessages(i){var e,t,s,o,n,h,d,c,u,g,p,x,_,b,v,k,w,S,M,I,T,B,D,F;switch(i.feedType){case"inbox":if(this.isPaginatingInbox)return null;if((e=this._inboxDataSet)!=null&&e.canPaginate&&this._inboxDataSet.paginationCursor)try{this.isPaginatingInbox=!0;const y=await((t=f.Courier.shared.client)==null?void 0:t.inbox.getMessages({paginationLimit:f.Courier.shared.paginationLimit,startCursor:this._inboxDataSet.paginationCursor})),P={messages:((o=(s=y==null?void 0:y.data)==null?void 0:s.messages)==null?void 0:o.nodes)??[],canPaginate:((d=(h=(n=y==null?void 0:y.data)==null?void 0:n.messages)==null?void 0:h.pageInfo)==null?void 0:d.hasNextPage)??!1,paginationCursor:((g=(u=(c=y==null?void 0:y.data)==null?void 0:c.messages)==null?void 0:u.pageInfo)==null?void 0:g.startCursor)??null};return this.addPage(P,"inbox"),P}catch(y){return(x=(p=f.Courier.shared.client)==null?void 0:p.options.logger)==null||x.error("Error fetching next page of inbox messages:",y),null}finally{this.isPaginatingInbox=!1}break;case"archive":if(this.isPaginatingArchive)return null;if((_=this._archiveDataSet)!=null&&_.canPaginate&&this._archiveDataSet.paginationCursor)try{this.isPaginatingArchive=!0;const y=await((b=f.Courier.shared.client)==null?void 0:b.inbox.getArchivedMessages({paginationLimit:f.Courier.shared.paginationLimit,startCursor:this._archiveDataSet.paginationCursor})),P={messages:((k=(v=y==null?void 0:y.data)==null?void 0:v.messages)==null?void 0:k.nodes)??[],canPaginate:((M=(S=(w=y==null?void 0:y.data)==null?void 0:w.messages)==null?void 0:S.pageInfo)==null?void 0:M.hasNextPage)??!1,paginationCursor:((B=(T=(I=y==null?void 0:y.data)==null?void 0:I.messages)==null?void 0:T.pageInfo)==null?void 0:B.startCursor)??null};return this.addPage(P,"archive"),P}catch(y){return(F=(D=f.Courier.shared.client)==null?void 0:D.options.logger)==null||F.error("Error fetching next page of archived messages:",y),null}finally{this.isPaginatingArchive=!1}break}return null}applyLocalMessageChange(i,e){for(const[t,s]of Object.entries(e))s!==void 0&&this.updateMessage(i,s,t)}async readMessage(i,e=!0){var o,n,h,d;if(!f.Courier.shared.client)return;const t=i;if(t.read)return;const s={inbox:(o=this._inboxDataSet)==null?void 0:o.messages.findIndex(c=>c.messageId===i.messageId),archive:(n=this._archiveDataSet)==null?void 0:n.messages.findIndex(c=>c.messageId===i.messageId)};try{i.read=new Date().toISOString(),this.applyLocalMessageChange(i,s),e&&await f.Courier.shared.client.inbox.read({messageId:i.messageId})}catch(c){this.applyLocalMessageChange(t,s),(d=(h=f.Courier.shared.client)==null?void 0:h.options.logger)==null||d.error("Error reading message:",c)}}async unreadMessage(i,e=!0){var o,n,h,d;if(!f.Courier.shared.client)return;const t=i;if(!t.read)return;const s={inbox:(o=this._inboxDataSet)==null?void 0:o.messages.findIndex(c=>c.messageId===i.messageId),archive:(n=this._archiveDataSet)==null?void 0:n.messages.findIndex(c=>c.messageId===i.messageId)};try{i.read=void 0,this.applyLocalMessageChange(i,s),e&&await f.Courier.shared.client.inbox.unread({messageId:i.messageId})}catch(c){this.applyLocalMessageChange(t,s),(d=(h=f.Courier.shared.client)==null?void 0:h.options.logger)==null||d.error("Error unreading message:",c)}}async openMessage(i,e=!0){var o,n,h,d;if(!f.Courier.shared.client)return;const t=i,s={inbox:(o=this._inboxDataSet)==null?void 0:o.messages.findIndex(c=>c.messageId===i.messageId),archive:(n=this._archiveDataSet)==null?void 0:n.messages.findIndex(c=>c.messageId===i.messageId)};if(!(!s.inbox&&!s.archive)&&!t.opened)try{i.opened=new Date().toISOString(),this.applyLocalMessageChange(i,s),e&&await f.Courier.shared.client.inbox.open({messageId:i.messageId})}catch(c){this.applyLocalMessageChange(t,s),(d=(h=f.Courier.shared.client)==null?void 0:h.options.logger)==null||d.error("Error opening message:",c)}}async clickMessage(i,e=!0){var t,s,o,n;if(f.Courier.shared.client)try{(t=i.trackingIds)!=null&&t.clickTrackingId&&e&&await f.Courier.shared.client.inbox.click({messageId:i.messageId,trackingId:(s=i.trackingIds)==null?void 0:s.clickTrackingId})}catch(h){(n=(o=f.Courier.shared.client)==null?void 0:o.options.logger)==null||n.error("Error clicking message:",h)}}async archiveMessage(i,e=!0){var o,n;if(!f.Courier.shared.client)return;const t=i,s=(o=this._inboxDataSet)==null?void 0:o.messages.findIndex(h=>h.messageId===i.messageId);if(s!==void 0)try{if(this.removeMessage(i,s,"inbox"),(n=this._archiveDataSet)!=null&&n.messages){const h=this.findInsertIndex(i,this._archiveDataSet.messages);i.archived=new Date().toISOString(),this.addMessage(i,h,"archive")}e&&await f.Courier.shared.client.inbox.archive({messageId:i.messageId})}catch{this.addMessage(t,s,"inbox"),i.archived=void 0,this.removeMessage(i,s,"archive")}}async readAllMessages(i=!0){var o,n,h,d;if(!f.Courier.shared.client)return;const e=this._inboxDataSet,t=this._archiveDataSet,s=this._unreadCount;try{(o=this._inboxDataSet)==null||o.messages.forEach(c=>{c.read||(c.read=new Date().toISOString())}),(n=this._archiveDataSet)==null||n.messages.forEach(c=>{c.read||(c.read=new Date().toISOString())}),this._unreadCount=0,this._dataStoreListeners.forEach(c=>{var u,g,p,x,_,b;this._inboxDataSet&&((g=(u=c.events).onDataSetChange)==null||g.call(u,this._inboxDataSet,"inbox")),this._archiveDataSet&&((x=(p=c.events).onDataSetChange)==null||x.call(p,this._archiveDataSet,"archive")),(b=(_=c.events).onUnreadCountChange)==null||b.call(_,this._unreadCount)}),i&&await f.Courier.shared.client.inbox.readAll()}catch(c){(d=(h=f.Courier.shared.client)==null?void 0:h.options.logger)==null||d.error("Error reading all messages:",c),this._inboxDataSet&&e&&(this._inboxDataSet.messages=e.messages),this._archiveDataSet&&t&&(this._archiveDataSet.messages=t.messages),this._unreadCount=s,this._dataStoreListeners.forEach(u=>{var g,p,x,_,b,v;this._inboxDataSet&&((p=(g=u.events).onDataSetChange)==null||p.call(g,this._inboxDataSet,"inbox")),this._archiveDataSet&&((_=(x=u.events).onDataSetChange)==null||_.call(x,this._archiveDataSet,"archive")),(v=(b=u.events).onUnreadCountChange)==null||v.call(b,this._unreadCount)})}}findInsertIndex(i,e){const t=[...e];t.push(i),t.sort((o,n)=>{const h=new Date(o.created??Date.now()).getTime();return new Date(n.created??Date.now()).getTime()-h});const s=t.findIndex(o=>o.messageId===i.messageId);return Math.max(s-1,0)}addPage(i,e){switch(e){case"inbox":this._inboxDataSet&&(this._inboxDataSet.canPaginate=i.canPaginate,this._inboxDataSet.paginationCursor=i.paginationCursor,this._inboxDataSet.messages=[...this._inboxDataSet.messages,...i.messages]);break;case"archive":this._archiveDataSet&&(this._archiveDataSet.canPaginate=i.canPaginate,this._archiveDataSet.paginationCursor=i.paginationCursor,this._archiveDataSet.messages=[...this._archiveDataSet.messages,...i.messages]);break}this._dataStoreListeners.forEach(t=>{var s,o;return(o=(s=t.events).onPageAdded)==null?void 0:o.call(s,i,e)})}addMessage(i,e,t){var s,o;switch(t){case"inbox":!i.read&&this._unreadCount!==void 0&&(this._unreadCount=this._unreadCount+1),(s=this._inboxDataSet)==null||s.messages.splice(e,0,i);break;case"archive":(o=this._archiveDataSet)==null||o.messages.splice(e,0,i);break}this._dataStoreListeners.forEach(n=>{var h,d,c,u;(d=(h=n.events).onMessageAdd)==null||d.call(h,i,e,t),(u=(c=n.events).onUnreadCountChange)==null||u.call(c,this._unreadCount??0)})}removeMessage(i,e,t){var s,o;switch(t){case"inbox":!i.read&&this._unreadCount!==void 0&&(this._unreadCount=this._unreadCount-1),(s=this._inboxDataSet)==null||s.messages.splice(e,1);break;case"archive":(o=this._archiveDataSet)==null||o.messages.splice(e,1);break}this._dataStoreListeners.forEach(n=>{var h,d,c,u;(d=(h=n.events).onMessageRemove)==null||d.call(h,i,e,t),(u=(c=n.events).onUnreadCountChange)==null||u.call(c,this._unreadCount??0)})}updateMessage(i,e,t){switch(t){case"inbox":this._unreadCount!==void 0&&!i.archived&&(i.read&&(this._unreadCount=Math.max(0,this._unreadCount-1)),i.read||(this._unreadCount=this._unreadCount+1)),this._inboxDataSet&&(this._inboxDataSet.messages[e]=i);break;case"archive":this._archiveDataSet&&(this._archiveDataSet.messages[e]=i);break}this._dataStoreListeners.forEach(s=>{var o,n,h,d;(n=(o=s.events).onMessageUpdate)==null||n.call(o,i,e,t),(d=(h=s.events).onUnreadCountChange)==null||d.call(h,this._unreadCount??0)})}};a(se,"instance");let A=se;function Do(m){return A.shared.readMessage(m)}function Fo(m){return A.shared.unreadMessage(m)}function Ho(m){return A.shared.clickMessage(m)}function Ro(m){return A.shared.archiveMessage(m)}function zo(m){return A.shared.openMessage(m)}function We(m){if(!m.created)return"Now";const i=new Date,e=new Date(m.created),t=Math.floor((i.getTime()-e.getTime())/1e3);return t<60?`${t}s`:t<3600?`${Math.floor(t/60)}m`:t<86400?`${Math.floor(t/3600)}h`:t<604800?`${Math.floor(t/86400)}d`:t<31536e3?`${Math.floor(t/604800)}w`:`${Math.floor(t/31536e3)}y`}class Ge extends HTMLElement{constructor(e){super();a(this,"_theme");a(this,"_options",[]);a(this,"_style");this._theme=e;const t=this.attachShadow({mode:"open"});this._style=document.createElement("style"),this._style.textContent=this.getStyles(),t.appendChild(this._style);const s=document.createElement("ul");s.className="menu",t.appendChild(s)}getStyles(){var t,s,o;const e=(o=(s=(t=this._theme.inbox)==null?void 0:t.list)==null?void 0:s.item)==null?void 0:o.menu;return`
      :host {
        display: block;
        position: absolute;
        background: ${(e==null?void 0:e.backgroundColor)??"red"};
        border: ${(e==null?void 0:e.border)??"1px solid red"};
        border-radius: ${(e==null?void 0:e.borderRadius)??"0px"};
        box-shadow: ${(e==null?void 0:e.shadow)??"0 2px 8px red"};
        user-select: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
        overflow: hidden;
      }

      :host(.visible) {
        opacity: 1;
        pointer-events: auto;
      }

      ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
      }

      li.menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-bottom: none;
        background: transparent;
      }
    `}setOptions(e){this._options=e,this.renderMenu()}renderMenu(){var o,n,h,d;const e=(o=this.shadowRoot)==null?void 0:o.querySelector("ul.menu");if(!e)return;e.innerHTML="";const t=(d=(h=(n=this._theme.inbox)==null?void 0:n.list)==null?void 0:h.item)==null?void 0:d.menu,s=c=>{c.stopPropagation(),c.preventDefault()};this._options.forEach(c=>{var p,x,_;const u=new re(c.icon.svg,c.icon.color,t==null?void 0:t.backgroundColor,(p=t==null?void 0:t.item)==null?void 0:p.hoverBackgroundColor,(x=t==null?void 0:t.item)==null?void 0:x.activeBackgroundColor,(_=t==null?void 0:t.item)==null?void 0:_.borderRadius),g=b=>{s(b),c.onClick()};u.addEventListener("click",g),u.addEventListener("touchstart",s),u.addEventListener("touchend",g),u.addEventListener("touchmove",s),u.addEventListener("mousedown",s),u.addEventListener("mouseup",s),e.appendChild(u)})}show(){this.classList.add("visible")}hide(){this.classList.remove("visible")}}customElements.get("courier-list-item-menu")||customElements.define("courier-list-item-menu",Ge);class De extends HTMLElement{constructor(e){super();a(this,"_theme");a(this,"_message",null);a(this,"_feedType","inbox");a(this,"_isMobile",!1);a(this,"_titleElement");a(this,"_subtitleElement");a(this,"_timeElement");a(this,"_style");a(this,"_menu");a(this,"_unreadIndicator");a(this,"_actionsContainer");a(this,"_longPressTimeout",null);a(this,"_isLongPress",!1);a(this,"onItemClick",null);a(this,"onItemLongPress",null);a(this,"onItemActionClick",null);this._theme=e,this._isMobile="ontouchstart"in window;const t=this.attachShadow({mode:"open"}),s=document.createElement("div");s.className="content-container",this._titleElement=document.createElement("p"),this._titleElement.setAttribute("part","title"),this._subtitleElement=document.createElement("p"),this._subtitleElement.setAttribute("part","subtitle"),this._actionsContainer=document.createElement("div"),this._actionsContainer.className="actions-container",s.appendChild(this._titleElement),s.appendChild(this._subtitleElement),s.appendChild(this._actionsContainer),this._timeElement=document.createElement("p"),this._timeElement.setAttribute("part","time"),this._unreadIndicator=document.createElement("div"),this._unreadIndicator.className="unread-indicator",this._style=document.createElement("style"),this._refreshStyles(),this._menu=new Ge(this._theme),this._menu.setOptions(this._getMenuOptions()),t.append(this._style,this._unreadIndicator,s,this._timeElement,this._menu);const o=n=>{n.stopPropagation(),n.preventDefault()};this._menu.addEventListener("mousedown",o),this._menu.addEventListener("pointerdown",o),this._menu.addEventListener("click",o),this.addEventListener("click",n=>{this._menu.contains(n.target)||n.composedPath().includes(this._menu)||this._message&&this.onItemClick&&!(n.target instanceof ie)&&!this._isLongPress&&this.onItemClick(this._message)}),this._setupHoverBehavior(),this._setupLongPressBehavior()}_setupHoverBehavior(){this._isMobile||(this.addEventListener("mouseenter",()=>{this._isLongPress=!1,this._showMenu()}),this.addEventListener("mouseleave",()=>this._hideMenu()))}_setupLongPressBehavior(){var s,o,n;const e=(n=(o=(s=this._theme.inbox)==null?void 0:s.list)==null?void 0:o.item)==null?void 0:n.menu;if(!(e!=null&&e.enabled))return;const t=e.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((t==null?void 0:t.vibrationDuration)??50)),setTimeout(()=>{this._hideMenu(),this._isLongPress=!1},(t==null?void 0:t.displayDuration)??2e3)},650)},{passive:!0}),this.addEventListener("touchend",()=>{this._longPressTimeout&&(window.clearTimeout(this._longPressTimeout),this._longPressTimeout=null)})}setOnLongPress(e){this.onItemLongPress=e}_getMenuOptions(){var s,o,n,h,d,c,u,g,p,x,_,b,v,k,w,S,M,I,T;const e=(h=(n=(o=(s=this._theme.inbox)==null?void 0:s.list)==null?void 0:o.item)==null?void 0:n.menu)==null?void 0:h.item;let t=[];return(d=this._message)!=null&&d.archived||t.push({id:(c=this._message)!=null&&c.read?"unread":"read",icon:{svg:(u=this._message)!=null&&u.read?(g=e==null?void 0:e.unread)==null?void 0:g.svg:(p=e==null?void 0:e.read)==null?void 0:p.svg,color:(x=this._message)!=null&&x.read?(_=e==null?void 0:e.unread)==null?void 0:_.color:((b=e==null?void 0:e.read)==null?void 0:b.color)??"red"},onClick:()=>{this._message&&(this._message.read?A.shared.unreadMessage(this._message):A.shared.readMessage(this._message))}}),t.push({id:(v=this._message)!=null&&v.archived?"unarchive":"archive",icon:{svg:(k=this._message)!=null&&k.archived?(w=e==null?void 0:e.unarchive)==null?void 0:w.svg:(S=e==null?void 0:e.archive)==null?void 0:S.svg,color:(M=this._message)!=null&&M.archived?(I=e==null?void 0:e.unarchive)==null?void 0:I.color:((T=e==null?void 0:e.archive)==null?void 0:T.color)??"red"},onClick:()=>{this._message&&(this._message.archived?alert("unarchive"):A.shared.archiveMessage(this._message))}}),t}_showMenu(){var t,s,o;const e=(o=(s=(t=this._theme.inbox)==null?void 0:t.list)==null?void 0:s.item)==null?void 0:o.menu;e&&e.enabled&&(this._menu.setOptions(this._getMenuOptions()),this._menu.style.display="block",this._menu.show(),this._timeElement.style.opacity="0")}_hideMenu(){var t,s,o;const e=(o=(s=(t=this._theme.inbox)==null?void 0:t.list)==null?void 0:s.item)==null?void 0:o.menu;e&&e.enabled&&(this._menu.hide(),this._menu.style.display="none",this._timeElement.style.opacity="1")}_getStyles(){var t,s,o,n,h,d,c,u,g,p,x;const e=(s=(t=this._theme.inbox)==null?void 0:t.list)==null?void 0:s.item;return`
      :host {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: ${(e==null?void 0:e.divider)??"1px solid red"};
        font-family: inherit;
        cursor: pointer;
        transition: background-color 0.2s ease;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 20px;
        position: relative;
        background-color: ${(e==null?void 0:e.backgroundColor)??"transparent"};
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        touch-action: manipulation;
      }

      /* ───────────────────────── Base hover / active ────────────────── */
      @media (hover: hover) {
        :host(:hover) {
          background-color: ${(e==null?void 0:e.hoverBackgroundColor)??"red"};
        }
      }
      :host(:active) {
        background-color: ${(e==null?void 0:e.activeBackgroundColor)??"red"};
      }

      /* ───────────────────────── Menu hover / active ────────────────── */
      @media (hover: hover) {
        :host(:hover):has(courier-list-item-menu:hover, courier-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
          background-color: ${(e==null?void 0:e.backgroundColor)??"transparent"};
        }
      }
      :host(:active):has(courier-list-item-menu:active, courier-list-item-menu *:active, courier-button:active, courier-button *:active) {
        background-color: ${(e==null?void 0:e.backgroundColor)??"transparent"};
      }

      :host(:last-child) {
        border-bottom: none;
      }

      .unread-indicator {
        position: absolute;
        top: 28px;
        left: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: ${(e==null?void 0:e.unreadIndicatorColor)??"red"};
        display: none;
      }

      :host(.unread) .unread-indicator {
        display: block;
      }

      .content-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 12px;
      }

      p {
        margin: 0;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.4;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        text-align: left;
      }

      p[part='title'] {
        font-family: ${((o=e==null?void 0:e.title)==null?void 0:o.family)??"inherit"};
        font-size: ${((n=e==null?void 0:e.title)==null?void 0:n.size)??"14px"};
        color: ${((h=e==null?void 0:e.title)==null?void 0:h.color)??"red"};
        margin-bottom: 4px;
      }

      p[part='subtitle'] {
        font-family: ${((d=e==null?void 0:e.subtitle)==null?void 0:d.family)??"inherit"};
        font-size: ${((c=e==null?void 0:e.subtitle)==null?void 0:c.size)??"14px"};
        color: ${((u=e==null?void 0:e.subtitle)==null?void 0:u.color)??"red"};
      }

      p[part='time'] {
        font-family: ${((g=e==null?void 0:e.time)==null?void 0:g.family)??"inherit"};
        font-size: ${((p=e==null?void 0:e.time)==null?void 0:p.size)??"14px"};
        color: ${((x=e==null?void 0:e.time)==null?void 0:x.color)??"red"};
        text-align: right;
        white-space: nowrap;
      }

      courier-list-item-menu {
        z-index: 1;
        position: absolute;
        top: 8px;
        right: 8px;
        display: none; /* becomes block while visible */
      }

      .actions-container {
        display: flex;
        margin-top: 10px;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        display: none;
      }

    `}_refreshStyles(){this._style.textContent=this._getStyles()}connectedCallback(){var s,o;const e=this.getAttribute("message"),t=this.getAttribute("feed-type");if(t&&(this._feedType=t),e)try{this._message=JSON.parse(e),this._updateContent()}catch(n){(o=(s=f.Courier.shared.client)==null?void 0:s.options.logger)==null||o.error("CourierListItem – failed to parse message:",n)}}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}_updateContent(){var s,o,n,h,d,c;if(!this._message){this._titleElement.textContent="",this._subtitleElement.textContent="";return}this.classList.toggle("unread",!this._message.read&&this._feedType!=="archive"),this._titleElement.textContent=this._message.title||"Untitled Message",this._subtitleElement.textContent=this._message.preview||this._message.body||"",this._timeElement.textContent=We(this._message),this._menu.setOptions(this._getMenuOptions());const e=((s=this._message)==null?void 0:s.actions)&&this._message.actions.length>0;this._actionsContainer.style.display=e?"flex":"none";const t=(h=(n=(o=this._theme.inbox)==null?void 0:o.list)==null?void 0:n.item)==null?void 0:h.actions;(c=(d=this._message)==null?void 0:d.actions)==null||c.forEach(u=>{var p,x,_,b;const g=new Ie({text:u.content,variant:"secondary",backgroundColor:t==null?void 0:t.backgroundColor,hoverBackgroundColor:t==null?void 0:t.hoverBackgroundColor,activeBackgroundColor:t==null?void 0:t.activeBackgroundColor,border:t==null?void 0:t.border,borderRadius:t==null?void 0:t.borderRadius,shadow:t==null?void 0:t.shadow,fontFamily:(p=t==null?void 0:t.font)==null?void 0:p.family,fontSize:(x=t==null?void 0:t.font)==null?void 0:x.size,fontWeight:(_=t==null?void 0:t.font)==null?void 0:_.weight,textColor:(b=t==null?void 0:t.font)==null?void 0:b.color,onClick:()=>{this._message&&this.onItemActionClick&&this.onItemActionClick(this._message,u)}});this._actionsContainer.appendChild(g)})}}customElements.get("courier-list-item")||customElements.define("courier-list-item",De);class qe extends HTMLElement{constructor(e,t){super();a(this,"_shadow");this._shadow=this.attachShadow({mode:"open"});const s=document.createElement("style");s.textContent=this.getStyles(t),this._shadow.appendChild(s);const o=new Be(e,35),n=new Be(e,100),h=new Be(e,82);this._shadow.appendChild(o),this._shadow.appendChild(n),this._shadow.appendChild(h)}getStyles(e){return`
      :host {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
        opacity: ${e};
      }
    `}}customElements.get("courier-inbox-skeleton-list-item")||customElements.define("courier-inbox-skeleton-list-item",qe);class Be extends HTMLElement{constructor(e,t){super();a(this,"_shadow");this._shadow=this.attachShadow({mode:"open"});const s=document.createElement("style");s.textContent=this.getStyles(e,t),this._shadow.appendChild(s);const o=document.createElement("div");o.className="skeleton-item",this._shadow.appendChild(o)}getStyles(e,t){var g,p,x,_,b,v,k,w,S,M,I,T;const s=((x=(p=(g=e.inbox)==null?void 0:g.loading)==null?void 0:p.animation)==null?void 0:x.barColor)??"#000",o=s.length===4?`#${s[1]}${s[1]}${s[2]}${s[2]}${s[3]}${s[3]}`:s,n=parseInt(o.slice(1,3),16),h=parseInt(o.slice(3,5),16),d=parseInt(o.slice(5,7),16),c=`rgba(${n}, ${h}, ${d}, 0.8)`,u=`rgba(${n}, ${h}, ${d}, 0.4)`;return`
      :host {
        display: flex;
        height: 100%;
        width: ${t}%;
        align-items: flex-start;
        justify-content: flex-start;
      }

      .skeleton-item {
        height: ${((v=(b=(_=e.inbox)==null?void 0:_.loading)==null?void 0:b.animation)==null?void 0:v.barHeight)??"14px"};
        width: 100%;
        background: linear-gradient(
          90deg,
          ${c} 25%,
          ${u} 50%,
          ${c} 75%
        );
        background-size: 200% 100%;
        animation: shimmer ${((S=(w=(k=e.inbox)==null?void 0:k.loading)==null?void 0:w.animation)==null?void 0:S.duration)??"2s"} ease-in-out infinite;
        border-radius: ${((T=(I=(M=e.inbox)==null?void 0:M.loading)==null?void 0:I.animation)==null?void 0:T.barBorderRadius)??"14px"};
      }

      @keyframes shimmer {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }
    `}}customElements.get("courier-skeleton-animated-row")||customElements.define("courier-skeleton-animated-row",Be);class Fe extends Te{constructor(e){super();a(this,"_theme");this._theme=e}defaultElement(){const e=document.createElement("div");e.className="list";const t=document.createElement("style");t.textContent=this.getStyles(),e.appendChild(t);for(let s=0;s<3;s++){const o=new qe(this._theme,1/(s+1));e.appendChild(o)}return this.shadow.appendChild(e),e}getStyles(){var e,t;return`
      :host {
        display: flex;
        height: 100%;
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
      }

      .list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        overflow: hidden;
      }

      .list > * {
        border-bottom: ${((t=(e=this._theme.inbox)==null?void 0:e.loading)==null?void 0:t.divider)??"1px solid red"};
      }

      .list > *:last-child {
        border-bottom: none;
      }
    `}}customElements.get("courier-inbox-skeleton-list")||customElements.define("courier-inbox-skeleton-list",Fe);class Xe extends HTMLElement{constructor(e){super();a(this,"skeletonLoadingList");a(this,"observer");a(this,"customItem");a(this,"onPaginationTrigger");this.onPaginationTrigger=e.onPaginationTrigger,this.customItem=e.customItem;const t=this.attachShadow({mode:"open"}),s=document.createElement("style");if(s.textContent=this.getStyles(),t.appendChild(s),this.customItem)t.appendChild(this.customItem);else{const o=document.createElement("div");o.className="skeleton-container",this.skeletonLoadingList=new Fe(e.theme),this.skeletonLoadingList.build(void 0),o.appendChild(this.skeletonLoadingList),t.appendChild(o)}this.observer=new IntersectionObserver(o=>{o.forEach(n=>{n.isIntersecting&&this.onPaginationTrigger()})}),this.observer.observe(this)}getStyles(){return`
      :host {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .skeleton-container {
        height: 150%;
      }
    `}disconnectedCallback(){this.observer.disconnect()}}customElements.get("courier-inbox-pagination-list-item")||customElem