@trycourier/courier-ui-inbox
Version:
Inbox components for the Courier web UI
1,139 lines (1,107 loc) • 140 kB
JavaScript
var Lo = Object.defineProperty;
var To = (g, i, e) => i in g ? Lo(g, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[i] = e;
var a = (g, i, e) => To(g, typeof i != "symbol" ? i + "" : i, e);
import { Courier as C } from "@trycourier/courier-js";
var Bo = Object.defineProperty, Ao = (g, i, e) => i in g ? Bo(g, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[i] = e, L = (g, i, e) => Ao(g, 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"
}
}
}, go = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", mo = (g) => {
if (typeof window > "u")
return () => {
};
const i = window.matchMedia("(prefers-color-scheme: dark)"), e = (t) => {
g(t.matches ? "dark" : "light");
};
return i.addEventListener("change", e), () => {
i.removeEventListener("change", e);
};
};
class bo extends HTMLElement {
constructor() {
super(), L(this, "_currentSystemTheme"), L(this, "_systemThemeCleanup"), this._currentSystemTheme = go(), this._systemThemeCleanup = mo((i) => {
this._currentSystemTheme = i, this.onSystemThemeChange(i);
});
}
get currentSystemTheme() {
return this._currentSystemTheme;
}
disconnectedCallback() {
this._systemThemeCleanup && this._systemThemeCleanup();
}
onSystemThemeChange(i) {
}
}
const Te = {
borderRadius: "4px",
fontSize: "14px"
}, ee = {
primary: (g) => ({
...Te,
backgroundColor: G[g].colors.primary,
textColor: G[g].colors.secondary,
fontWeight: "500",
shadow: "none"
}),
secondary: (g) => ({
...Te,
backgroundColor: G[g].colors.secondary,
textColor: G[g].colors.primary,
fontWeight: "500",
border: `1px solid ${G[g].colors.border}`,
shadow: g === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
}),
tertiary: (g) => ({
...Te,
backgroundColor: G[g].colors.border,
textColor: G[g].colors.primary,
fontWeight: "500",
border: "none",
shadow: "none"
})
};
class Ie extends bo {
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 = () => ee.secondary(this.currentSystemTheme).textColor, t = () => ee.secondary(this.currentSystemTheme).backgroundColor, s = () => ee.secondary(this.currentSystemTheme).border, o = () => ee.secondary(this.currentSystemTheme).shadow, n = () => ee.secondary(this.currentSystemTheme).borderRadius, h = () => ee.secondary(this.currentSystemTheme).fontSize, d = () => ee.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 f = {
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 Pe 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(Pe, "observedAttributes", [
"href",
"variant",
"disabled",
"color",
"underline",
"mode",
"target",
"font-family",
"font-size"
]);
customElements.get("courier-link") || customElements.define("courier-link", Pe);
class Le extends bo {
constructor() {
super(), L(this, "shadow"), this.shadow = this.attachShadow({ mode: "open" });
}
// Build the element with a factory function
build(i) {
if (i === null) {
this.shadow.replaceChildren();
return;
}
const e = i ?? this.defaultElement();
this.shadow.replaceChildren(e);
}
// Default element to be used if no factory is provided
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 Me extends Le {
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 ?? ee.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", Me);
class Se 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", Se);
const Po = [
{ name: "courier-button", class: Ie },
{ name: "courier-icon", class: ie },
{ name: "courier-link", class: Pe },
{ name: "courier-info-state", class: Me },
{ name: "courier-icon-button", class: Se }
];
Po.forEach(({ name: g, class: i }) => {
customElements.get(g) || customElements.define(g, i);
});
const te = class te {
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 te.instance || (te.instance = new te()), te.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, m, 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 = C.shared.client) == null ? void 0 : t.inbox.getMessages()) : await ((s = C.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 = (m = (u = e == null ? void 0 : e.data) == null ? void 0 : u.messages) == null ? void 0 : m.pageInfo) == null ? void 0 : p.startCursor) ?? null
};
}
async fetchUnreadCount(i) {
var t;
return i.canUseCache && this._unreadCount !== void 0 ? this._unreadCount : await ((t = C.shared.client) == null ? void 0 : t.inbox.getUnreadMessageCount()) ?? 0;
}
async load(i) {
var e, t, s;
try {
if (!((e = C.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, m, p;
(u = (c = d.events).onDataSetChange) == null || u.call(c, n, o.feedType), (p = (m = d.events).onUnreadCountChange) == null || p.call(m, this._unreadCount ?? 0);
}), await this.connectSocket();
} catch (o) {
(s = (t = C.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, m, p, x;
const i = (e = C.shared.client) == null ? void 0 : e.inbox.socket;
try {
if (!i) {
(s = (t = C.shared.client) == null ? void 0 : t.options.logger) == null || s.info("CourierInbox socket not available");
return;
}
if ((h = (o = C.shared.client) == null ? void 0 : o.options.logger) == null || h.info("CourierInbox socket connectionId:", (n = C.shared.client) == null ? void 0 : n.options.connectionId), i.isConnected) {
(c = (d = C.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(), (m = (u = C.shared.client) == null ? void 0 : u.options.logger) == null || m.info("CourierInbox socket connected");
} catch (_) {
(x = (p = C.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, m, p, x, _, b, v, k, w, S, E, M, I, T, $, D;
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 = C.shared.client) == null ? void 0 : t.inbox.getMessages({
paginationLimit: C.shared.paginationLimit,
startCursor: this._inboxDataSet.paginationCursor
})), B = {
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: ((m = (u = (c = y == null ? void 0 : y.data) == null ? void 0 : c.messages) == null ? void 0 : u.pageInfo) == null ? void 0 : m.startCursor) ?? null
};
return this.addPage(B, "inbox"), B;
} catch (y) {
return (x = (p = C.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 = C.shared.client) == null ? void 0 : b.inbox.getArchivedMessages({
paginationLimit: C.shared.paginationLimit,
startCursor: this._archiveDataSet.paginationCursor
})), B = {
messages: ((k = (v = y == null ? void 0 : y.data) == null ? void 0 : v.messages) == null ? void 0 : k.nodes) ?? [],
canPaginate: ((E = (S = (w = y == null ? void 0 : y.data) == null ? void 0 : w.messages) == null ? void 0 : S.pageInfo) == null ? void 0 : E.hasNextPage) ?? !1,
paginationCursor: ((T = (I = (M = y == null ? void 0 : y.data) == null ? void 0 : M.messages) == null ? void 0 : I.pageInfo) == null ? void 0 : T.startCursor) ?? null
};
return this.addPage(B, "archive"), B;
} catch (y) {
return (D = ($ = C.shared.client) == null ? void 0 : $.options.logger) == null || D.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 (!C.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 = (/* @__PURE__ */ new Date()).toISOString(), this.applyLocalMessageChange(i, s), e && await C.shared.client.inbox.read({ messageId: i.messageId });
} catch (c) {
this.applyLocalMessageChange(t, s), (d = (h = C.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 (!C.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 C.shared.client.inbox.unread({ messageId: i.messageId });
} catch (c) {
this.applyLocalMessageChange(t, s), (d = (h = C.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 (!C.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 = (/* @__PURE__ */ new Date()).toISOString(), this.applyLocalMessageChange(i, s), e && await C.shared.client.inbox.open({ messageId: i.messageId });
} catch (c) {
this.applyLocalMessageChange(t, s), (d = (h = C.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 (C.shared.client)
try {
(t = i.trackingIds) != null && t.clickTrackingId && e && await C.shared.client.inbox.click({
messageId: i.messageId,
trackingId: (s = i.trackingIds) == null ? void 0 : s.clickTrackingId
});
} catch (h) {
(n = (o = C.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Error clicking message:", h);
}
}
async archiveMessage(i, e = !0) {
var o, n;
if (!C.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 = (/* @__PURE__ */ new Date()).toISOString(), this.addMessage(i, h, "archive");
}
e && await C.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 (!C.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 = (/* @__PURE__ */ new Date()).toISOString());
}), (n = this._archiveDataSet) == null || n.messages.forEach((c) => {
c.read || (c.read = (/* @__PURE__ */ new Date()).toISOString());
}), this._unreadCount = 0, this._dataStoreListeners.forEach((c) => {
var u, m, p, x, _, b;
this._inboxDataSet && ((m = (u = c.events).onDataSetChange) == null || m.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 C.shared.client.inbox.readAll();
} catch (c) {
(d = (h = C.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 m, p, x, _, b, v;
this._inboxDataSet && ((p = (m = u.events).onDataSetChange) == null || p.call(m, 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(te, "instance");
let A = te;
function zo(g) {
return A.shared.readMessage(g);
}
function Oo(g) {
return A.shared.unreadMessage(g);
}
function No(g) {
return A.shared.clickMessage(g);
}
function Uo(g) {
return A.shared.archiveMessage(g);
}
function Vo(g) {
return A.shared.openMessage(g);
}
function $o(g) {
if (!g.created) return "Now";
const i = /* @__PURE__ */ new Date(), e = new Date(g.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 _o extends HTMLElement {
constructor(e) {
super();
// State
a(this, "_theme");
a(this, "_options", []);
// Components
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 Se(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), m = (b) => {
s(b), c.onClick();
};
u.addEventListener("click", m), u.addEventListener("touchstart", s), u.addEventListener("touchend", m), 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", _o);
class xo extends HTMLElement {
constructor(e) {
super();
// State
a(this, "_theme");
a(this, "_message", null);
a(this, "_feedType", "inbox");
a(this, "_isMobile", !1);
// Elements
a(this, "_titleElement");
a(this, "_subtitleElement");
a(this, "_timeElement");
a(this, "_style");
a(this, "_menu");
a(this, "_unreadIndicator");
a(this, "_actionsContainer");
// Touch gestures
a(this, "_longPressTimeout", null);
a(this, "_isLongPress", !1);
// Callbacks
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 _o(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;
}
// Helpers
_getMenuOptions() {
var s, o, n, h, d, c, u, m, p, x, _, b, v, k, w, S, E, M, I;
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 ? (m = e == null ? void 0 : e.unread) == null ? void 0 : m.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: (E = this._message) != null && E.archived ? (M = e == null ? void 0 : e.unarchive) == null ? void 0 : M.color : ((I = e == null ? void 0 : e.archive) == null ? void 0 : I.color) ?? "red"
},
onClick: () => {
this._message && (this._message.archived ? alert("unarchive") : A.shared.archiveMessage(this._message));
}
}), t;
}
// Menu visibility helpers
_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, m, 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;