@popgrids/embed 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +11 -30
- package/README.md +3 -0
- package/dist/components/pop-comment-thread.d.ts.map +1 -1
- package/dist/components/pop-comment.d.ts.map +1 -1
- package/dist/components/pop-feed.d.ts.map +1 -1
- package/dist/components/pop-grid.d.ts +12 -0
- package/dist/components/pop-grid.d.ts.map +1 -1
- package/dist/components/pop-widget.d.ts.map +1 -1
- package/dist/embed.js +477 -443
- package/dist/embed.js.map +1 -1
- package/dist/index.cjs +56 -49
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +125 -91
- package/dist/index.js.map +1 -1
- package/dist/lib/position-feed.d.ts +9 -0
- package/dist/lib/position-feed.d.ts.map +1 -0
- package/dist/store/embed-auth-store.d.ts +3 -0
- package/dist/store/embed-auth-store.d.ts.map +1 -1
- package/dist/store/grid-store.d.ts +12 -0
- package/dist/store/grid-store.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -108,9 +108,9 @@ var f = "/embed/auth/login", ee = "popgrids-auth", te = "popup,width=480,height=
|
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
constructor(t) {
|
|
111
|
-
this.currentUser = c(null), this.authError = c(null), this.authErrorAction = c(h), this.authNoticeDismissals = c(0), this.authErrorRetryAt = c(null), this.authPending = c(!1), this.organizations = c([]), this.organizationsLoading = c(!1), this.authView = c("idle"), this.otpEmail = c(""), this.otpPending = c(!1), this.otpError = c(null), this.otpExpiresAt = c(null), this.authSocket = null, this.authReconnectAttempt = 0, this.authReconnectTimer = null, this.destroyed = !1, this.onStorageEvent = (e) => {
|
|
111
|
+
this.currentUser = c(null), this.authError = c(null), this.authErrorAction = c(h), this.authNoticeDismissals = c(0), this.authErrorRetryAt = c(null), this.authPending = c(!1), this.organizations = c([]), this.organizationsLoading = c(!1), this.authView = c("idle"), this.otpEmail = c(""), this.otpPending = c(!1), this.otpError = c(null), this.otpExpiresAt = c(null), this.session = null, this.authSocket = null, this.authReconnectAttempt = 0, this.authReconnectTimer = null, this.destroyed = !1, this.onStorageEvent = (e) => {
|
|
112
112
|
e.storageArea !== window.localStorage || e.key !== g(this.publicKey) || this.applyExternalChange(e.newValue);
|
|
113
|
-
}, this.resolveInlineSignIn = null, this.inlineSignInPromise = null, this.apiUrl = t.apiUrl, this.publicKey = t.publicKey, this.session = this.readStoredSession(), this.currentUser.value = this.session?.user ?? null, window.addEventListener("storage", this.onStorageEvent), e.instances.add(this);
|
|
113
|
+
}, this.resolveInlineSignIn = null, this.inlineSignInPromise = null, this.apiUrl = t.apiUrl, this.publicKey = t.publicKey, this.demo = t.demo ?? !1, !this.demo && (this.session = this.readStoredSession(), this.currentUser.value = this.session?.user ?? null, window.addEventListener("storage", this.onStorageEvent), e.instances.add(this));
|
|
114
114
|
}
|
|
115
115
|
destroy() {
|
|
116
116
|
this.destroyed = !0, this.closeAuthChannel(), window.removeEventListener("storage", this.onStorageEvent), e.instances.delete(this);
|
|
@@ -148,6 +148,7 @@ var f = "/embed/auth/login", ee = "popgrids-auth", te = "popup,width=480,height=
|
|
|
148
148
|
return this.session ? this.session.expiresAt <= Date.now() ? (this.handleSignedOut(), null) : this.session.token : null;
|
|
149
149
|
}
|
|
150
150
|
async fetchWithToken(e, t = {}) {
|
|
151
|
+
if (this.demo) throw Error("PopGrids: no requests in demo mode");
|
|
151
152
|
let n = new Headers(t.headers), r = this.token;
|
|
152
153
|
return r && n.set(ue, r), fetch(new URL(e, this.apiUrl), {
|
|
153
154
|
...t,
|
|
@@ -306,7 +307,7 @@ var f = "/embed/auth/login", ee = "popgrids-auth", te = "popup,width=480,height=
|
|
|
306
307
|
this.clearStoredSession(), this.currentUser.value = null, this.authView.value = "idle", t && !e?.silent && this.showAuthError("You were signed out. Sign in again to keep commenting.");
|
|
307
308
|
}
|
|
308
309
|
async connectAuthChannel() {
|
|
309
|
-
if (this.destroyed || this.authSocket || !this.currentUser.value) return;
|
|
310
|
+
if (this.demo || this.destroyed || this.authSocket || !this.currentUser.value) return;
|
|
310
311
|
let e = null, t = !1;
|
|
311
312
|
try {
|
|
312
313
|
let n = await this.fetchWithToken(`/api/v1/embed/grids/${this.publicKey}/auth/connect-ticket`, { method: "POST" });
|
|
@@ -1164,31 +1165,36 @@ var qe = O("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
1164
1165
|
customElements.get("pop-comment-avatar") || customElements.define("pop-comment-avatar", Je);
|
|
1165
1166
|
//#endregion
|
|
1166
1167
|
//#region src/store/grid-store.ts
|
|
1167
|
-
var Ye = 3e4, V = 3, H = (e) => {
|
|
1168
|
+
var Ye = 3e4, V = 3, Xe = 1, H = (e) => {
|
|
1168
1169
|
let t = typeof e.createdAt == "number" ? e.createdAt : Date.parse(String(e.createdAt));
|
|
1169
1170
|
return Number.isFinite(t) ? t : 0;
|
|
1170
1171
|
}, U = (e, t) => {
|
|
1171
1172
|
let n = e?.previewCount ?? t;
|
|
1172
1173
|
return n > 0 ? n : V;
|
|
1173
|
-
},
|
|
1174
|
+
}, Ze = (e, t) => e && {
|
|
1174
1175
|
...e,
|
|
1175
1176
|
...t
|
|
1176
1177
|
}, W = class {
|
|
1177
1178
|
constructor(e) {
|
|
1178
|
-
this.previewCount = V, this._fetchedGrid = c(null), this._overrides = c({}), this.grid = o(() =>
|
|
1179
|
+
this.previewCount = V, this._fetchedGrid = c(null), this._overrides = c({}), this.grid = o(() => Ze(this._fetchedGrid.value, this._overrides.value)), this.comments = c([]), this.loading = c(!0), this.error = c(null), this.open = c(!1), this.replyingTo = c(null), this.editingCommentId = c(null), this.scrollingCommentId = c(null), this.socket = null, this.reconnectAttempt = 0, this.reconnectTimer = null, this.disposed = !1, this.topLevelComments = o(() => this.comments.value.filter((e) => e.parentCommentId === null).sort((e, t) => String(e.sortKey).localeCompare(String(t.sortKey)))), this.commentSize = o(() => this.grid.value?.layout === "lg" ? "lg" : "sm"), this.replyingToComment = o(() => {
|
|
1179
1180
|
let e = this.replyingTo.value;
|
|
1180
1181
|
return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
|
|
1181
1182
|
}), this.editingComment = o(() => {
|
|
1182
1183
|
let e = this.editingCommentId.value;
|
|
1183
1184
|
return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
|
|
1184
1185
|
}), this.previewComments = o(() => this.topLevelComments.value.slice(0, U(this.grid.value, this.previewCount))), this.previewAvatars = o(() => {
|
|
1185
|
-
let e = U(this.grid.value, this.previewCount)
|
|
1186
|
+
let e = U(this.grid.value, this.previewCount);
|
|
1187
|
+
if (e <= Xe) return [];
|
|
1188
|
+
let t = /* @__PURE__ */ new Set(), n = [], r = [...this.comments.value].sort((e, t) => H(t) - H(e));
|
|
1186
1189
|
for (let i of r) {
|
|
1187
1190
|
let r = i.author;
|
|
1188
1191
|
if (!(!r?.id || t.has(r.id)) && (t.add(r.id), n.push(r), n.length >= e)) break;
|
|
1189
1192
|
}
|
|
1190
1193
|
return n.reverse();
|
|
1191
|
-
}), this.apiUrl = e.apiUrl, this.publicKey = e.publicKey, this.pageUrl = e.pageUrl, this.externalId = e.externalId?.trim() || null, this.authStore = e.authStore;
|
|
1194
|
+
}), this.apiUrl = e.apiUrl, this.publicKey = e.publicKey, this.pageUrl = e.pageUrl, this.externalId = e.externalId?.trim() || null, this.demo = e.demo ?? !1, this.authStore = e.authStore;
|
|
1195
|
+
}
|
|
1196
|
+
showDemo({ grid: e, comments: t }) {
|
|
1197
|
+
this._fetchedGrid.value = e, this.comments.value = t, this.error.value = null, this.loading.value = !1;
|
|
1192
1198
|
}
|
|
1193
1199
|
setOverrides(e) {
|
|
1194
1200
|
this._overrides.value = e;
|
|
@@ -1308,12 +1314,12 @@ var Ye = 3e4, V = 3, H = (e) => {
|
|
|
1308
1314
|
updateCommentInList(e) {
|
|
1309
1315
|
this.comments.value = this.comments.value.map((t) => t.id === e.id ? e : t);
|
|
1310
1316
|
}
|
|
1311
|
-
},
|
|
1317
|
+
}, Qe = O("\n :host {\n background: var(--pop-background);\n border-top: 1px solid var(--pop-bar-input-bg);\n display: block;\n padding: 6px;\n position: relative;\n\n --pop-bar-avatar-bg: #e5e7eb;\n --pop-bar-avatar-color: #374151;\n --pop-bar-avatar-border: #ffffff;\n --pop-bar-input-bg: rgba(0, 0, 32, 0.04);\n --pop-bar-send-hover: rgba(0, 0, 32, 0.06);\n --pop-bar-send-color: #000000;\n --pop-bar-watermark: rgba(0, 0, 32, 0.1);\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --pop-bar-avatar-bg: #1f2937;\n --pop-bar-avatar-color: #d1d5db;\n --pop-bar-avatar-border: var(--pop-popover, #151d2a);\n --pop-bar-input-bg: rgba(255, 255, 255, 0.05);\n --pop-bar-send-hover: rgba(255, 255, 255, 0.08);\n --pop-bar-send-color: #ffffff;\n --pop-bar-watermark: rgba(255, 255, 255, 0.1);\n }\n }\n\n :host(.dark) {\n --pop-bar-avatar-bg: #1f2937;\n --pop-bar-avatar-color: #d1d5db;\n --pop-bar-avatar-border: var(--pop-popover, #151d2a);\n --pop-bar-input-bg: rgba(255, 255, 255, 0.05);\n --pop-bar-send-hover: rgba(255, 255, 255, 0.08);\n --pop-bar-send-color: #ffffff;\n --pop-bar-watermark: rgba(255, 255, 255, 0.1);\n }\n\n .bar {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .bar__user {\n display: flex;\n align-items: center;\n align-self: flex-start;\n flex-shrink: 0;\n padding-top: 2px;\n }\n\n .bar__avatar {\n flex-shrink: 0;\n --comment-avatar-border-size: 0px;\n }\n\n .bar__avatar--reply {\n margin-right: -4px;\n z-index: 1;\n }\n\n .bar__avatar--reply.hidden {\n display: none;\n }\n\n .bar__avatar--user {\n z-index: 2;\n }\n\n .bar__user.has-reply .bar__avatar--user {\n --comment-avatar-border-size: 2px;\n --comment-avatar-border-color: var(--pop-bar-avatar-border);\n }\n\n .bar__input-wrap {\n flex: 1;\n min-width: 0;\n background: var(--pop-bar-input-bg);\n border-radius: 18px;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n padding: 4px 8px 4px 12px;\n max-height: 280px;\n }\n\n .bar__send {\n align-items: center;\n align-self: flex-end;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding-bottom: 2px;\n }\n\n .logo-watermark {\n position: absolute;\n top: -16px;\n left: 8px;\n font-family: Inter, sans-serif;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 1px;\n color: var(--pop-bar-watermark);\n text-transform: uppercase;\n border-radius: 9999px;\n padding: 2px 6px;\n pointer-events: none;\n user-select: none;\n }\n"), $e = "<svg width=\"64\" height=\"11\" viewBox=\"0 0 64 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.91111 0C0.892839 0 0 2.11357 0 4.77714C0 5.76321 0.0987654 6.73357 0.213333 7.70786C0.25679 8.08893 0.240988 8.50929 0.312099 8.89036C0.497778 9.89214 1.44593 10.3557 2.36642 10.3557C3.62667 10.3557 4.4642 9.56607 4.4642 8.30107C4.4642 7.57036 4.22321 7.09107 3.5279 6.80821C3.48444 6.7925 3.44099 6.78071 3.44099 6.72179C3.44099 6.62357 3.59901 6.55286 3.69778 6.55286C4.03753 6.55286 4.57481 6.89071 5.04494 6.89071C6.88593 6.89071 7.90519 5.13071 7.90519 3.48071C7.90519 1.08429 6.13136 0 3.91111 0ZM3.89531 5.18179C3.78074 5.18179 3.68198 5.08357 3.68198 4.96964C3.68198 4.81643 3.89531 4.7025 3.96642 4.57679C4.12049 4.29393 4.16395 3.81464 4.16395 3.4925C4.16395 3.11143 4.06519 2.40821 3.8242 2.12536C3.75309 2.04286 3.65432 1.99964 3.65432 1.88571C3.65432 1.77179 3.76889 1.67357 3.87951 1.67357C4.36148 1.67357 4.60247 3.08393 4.60247 3.44929C4.60247 3.84214 4.47605 5.18179 3.89531 5.18179Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M12.7368 0.239637C9.73433 0.239637 7.93285 2.35321 7.93285 5.25249C7.93285 8.15178 9.73038 10.2654 12.7368 10.2654C15.7432 10.2654 17.5249 8.12428 17.5249 5.25249C17.5249 2.38071 15.7116 0.239637 12.7368 0.239637ZM12.8672 8.83142C12.8198 8.89035 12.7249 9.00035 12.6104 9.00035C12.4958 9.00035 12.3852 8.90214 12.3852 8.78821C12.3852 8.74499 12.7526 8.19499 12.8119 8.02607C13.037 7.36214 13.0805 6.64321 13.0805 5.93999C13.0805 4.99714 12.9106 3.78321 12.3299 3.00928C12.2153 2.86785 11.8637 2.60071 11.8637 2.44749C11.8637 2.33357 11.9625 2.23535 12.077 2.23535C12.1758 2.23535 12.2746 2.32178 12.3457 2.37678C13.2504 3.12321 13.523 4.82821 13.523 5.93999C13.523 6.81214 13.4874 8.08499 12.8711 8.82749L12.8672 8.83142Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M21.6533 0C18.6351 0 17.7422 2.11357 17.7422 4.77714C17.7422 5.76321 17.841 6.73357 17.9555 7.70786C17.999 8.08893 17.9832 8.50929 18.0543 8.89036C18.24 9.89214 19.1881 10.3557 20.1086 10.3557C21.3689 10.3557 22.2064 9.56607 22.2064 8.30107C22.2064 7.57036 21.9654 7.09107 21.2701 6.80821C21.2267 6.7925 21.1832 6.78071 21.1832 6.72179C21.1832 6.62357 21.3412 6.55286 21.44 6.55286C21.7797 6.55286 22.317 6.89071 22.7871 6.89071C24.6281 6.89071 25.6474 5.13071 25.6474 3.48071C25.6474 1.08429 23.8775 0 21.6533 0ZM21.6415 5.18179C21.5269 5.18179 21.4281 5.08357 21.4281 4.96964C21.4281 4.81643 21.6415 4.7025 21.7126 4.57679C21.8667 4.29393 21.9101 3.81464 21.9101 3.4925C21.9101 3.11143 21.8113 2.40821 21.5704 2.12536C21.4992 2.04286 21.4005 1.99964 21.4005 1.88571C21.4005 1.77179 21.5151 1.67357 21.6257 1.67357C22.1076 1.67357 22.3486 3.08393 22.3486 3.44929C22.3486 3.84214 22.2222 5.18179 21.6415 5.18179Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M31.9012 4.16822C30.882 4.16822 29.4637 4.6318 29.4637 5.84572C29.4637 6.53715 29.9733 7.56251 30.7832 7.56251C31.2929 7.56251 31.6208 7.16965 31.7906 7.16965C31.8341 7.16965 31.8736 7.19715 31.8736 7.24037C31.8736 7.64894 31.0795 7.83358 30.7674 7.83358C29.677 7.83358 29.0963 6.90251 29.0963 5.91644C29.0963 4.70644 30.242 3.77537 31.4035 3.77537C31.7432 3.77537 32.0988 3.87358 32.4385 3.87358C33.4459 3.87358 34.165 2.97394 34.165 2.01537C34.165 0.424295 32.2687 0.0589382 31.0045 0.0589382C27.6464 0.0589382 25.6909 2.22751 25.6909 5.52358C25.6909 8.56822 27.279 10.5089 30.4237 10.5089C32.4622 10.5089 34.6864 9.6368 34.6864 7.26787C34.6864 5.6493 33.6237 4.16822 31.8973 4.16822H31.9012Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M41.2681 6.56464C41.0113 6.56464 40.802 6.66286 40.5886 6.66286C40.5452 6.66286 40.5333 6.61964 40.5333 6.59214C40.5333 6.49393 40.5768 6.45071 40.6479 6.42321C40.8889 6.34071 41.1457 6.28179 41.3827 6.16786C42.4612 5.66107 43.0973 4.7575 43.0973 3.56321C43.0973 1.40643 41.2405 0.0982143 39.202 0.0982143C38.4632 0.0982143 37.7442 0.310357 37.12 0.648214C35.4212 1.56357 35.0933 2.87571 34.9946 4.66321C34.9511 5.36643 34.9511 6.07357 34.9511 6.77679V8.48179C34.9511 9.55036 35.6583 10.4107 36.7763 10.4107C37.5822 10.4107 38.3052 9.83321 38.4909 9.07107C38.5896 8.61929 38.5343 8.085 38.5343 7.64893C38.5343 7.60571 38.5501 7.59393 38.5896 7.59393C38.6291 7.59393 38.6765 7.62143 38.7042 7.63714C39.202 8.83536 39.8815 10.3557 41.4222 10.3557C42.4849 10.3557 43.362 9.60929 43.362 8.525C43.362 7.44071 42.3427 6.56857 41.2642 6.56857L41.2681 6.56464ZM38.961 5.18179C38.8464 5.18179 38.7476 5.08357 38.7476 4.96964C38.7476 4.81643 38.961 4.7025 39.0321 4.57679C39.1862 4.29393 39.2296 3.81464 39.2296 3.4925C39.2296 3.11143 39.1309 2.40821 38.8899 2.12536C38.8188 2.04286 38.7358 1.99964 38.7358 1.88571C38.7358 1.77179 38.8346 1.67357 38.9491 1.67357C39.4311 1.67357 39.6721 3.08393 39.6721 3.44929C39.6721 3.84214 39.5575 5.18179 38.9649 5.18179H38.961Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M46.7674 0.549991C46.4277 0.326063 45.9457 0.212134 45.5348 0.212134C44.642 0.212134 43.8756 0.915349 43.7768 1.79142C43.7491 2.04678 43.761 2.28642 43.761 2.55356V4.94606L43.7175 7.46821V8.72142C43.7175 9.70749 44.5669 10.4814 45.5467 10.4814C46.2696 10.4814 47.0637 10.0296 47.3324 9.35392C47.4864 8.97285 47.5022 8.43856 47.5022 8.02999V6.92999L47.518 4.73392V2.53785C47.518 1.72071 47.5022 1.07249 46.7674 0.549991Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M50.2993 0.125713C48.8533 0.125713 48.1304 0.801428 48.1304 2.25107V2.82857L48.1462 3.96786V4.54536C48.1462 4.98143 48.1462 5.39 48.1304 5.82607C48.1027 6.34857 48.0316 6.86714 48.0316 7.40536C48.0316 9.3775 49.0509 10.3361 51.0222 10.3361C54.0523 10.3361 56.1067 9.03964 56.1067 5.81429C56.1067 1.925 54.2222 0.121785 50.2993 0.121785V0.125713ZM51.6583 7.91607C51.5437 7.91607 51.4449 7.81786 51.4449 7.70393C51.4449 7.66071 51.4608 7.83352 51.4884 7.59C51.8558 6.985 51.9546 6.14036 51.9546 5.44893C51.9546 4.80071 51.8835 3.84214 51.4726 3.33536C51.4015 3.22143 51.2593 3.13893 51.2593 2.9975C51.2593 2.88357 51.358 2.78536 51.4726 2.78536C51.6859 2.78536 51.9822 3.31964 52.0691 3.50428C52.3378 4.125 52.3812 4.80071 52.3812 5.46071C52.3812 5.86928 52.1679 7.91214 51.6583 7.91214V7.91607Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n<path d=\"M62.7239 5.1268C61.9022 5.05608 60.7249 4.77322 60.0889 4.23894C60.0059 4.16822 59.8637 4.07001 59.8637 3.9443C59.8637 3.90108 59.8795 3.83037 59.9348 3.83037C60.0889 3.83037 61.0805 4.62001 61.9338 4.62001C63.0123 4.62001 64 3.78715 64 2.69108C64 0.887867 61.5941 0.157152 60.1324 0.157152C57.9635 0.157152 56.3516 1.5518 56.3516 3.76358C56.3516 4.24287 56.4227 4.90287 56.7783 5.27215C56.9482 5.4568 57.2326 5.4568 57.4578 5.4568C58.3072 5.4568 59.3857 5.72394 59.836 6.49787C59.8795 6.56858 59.919 6.68251 59.919 6.76501C59.919 6.79251 59.919 6.83572 59.8914 6.82001C59.8084 6.79251 59.7373 6.7218 59.678 6.6668C59.1802 6.18751 58.5007 5.70822 57.7817 5.70822C56.7032 5.70822 56.324 6.73751 56.324 7.63715C56.324 9.45215 57.9674 10.4539 59.6385 10.4539C61.6217 10.4539 64 9.15751 64 6.94572C64 6.12858 63.6444 5.21322 62.7239 5.13072V5.1268Z\" fill=\"#000020\" fill-opacity=\"0.1\"/>\n</svg>", G = class extends k {
|
|
1312
1318
|
constructor(...e) {
|
|
1313
1319
|
super(...e), this.events = { click: "onClick" };
|
|
1314
1320
|
}
|
|
1315
1321
|
get styleSheets() {
|
|
1316
|
-
return [
|
|
1322
|
+
return [Qe];
|
|
1317
1323
|
}
|
|
1318
1324
|
onClick(e) {
|
|
1319
1325
|
e.target.closest(A("send")) && this.handleSend();
|
|
@@ -1362,7 +1368,7 @@ var Ye = 3e4, V = 3, H = (e) => {
|
|
|
1362
1368
|
}
|
|
1363
1369
|
getTemplate() {
|
|
1364
1370
|
return `
|
|
1365
|
-
<div class="logo-watermark">${
|
|
1371
|
+
<div class="logo-watermark">${$e}</div>
|
|
1366
1372
|
<div class="bar">
|
|
1367
1373
|
<div class="bar__user" data-ref="user">
|
|
1368
1374
|
<pop-comment-avatar
|
|
@@ -1389,12 +1395,12 @@ var Ye = 3e4, V = 3, H = (e) => {
|
|
|
1389
1395
|
j([b(W)], G.prototype, "gridStore", void 0), j([b(_)], G.prototype, "authStore", void 0), customElements.get("pop-comment-bar") || customElements.define("pop-comment-bar", G);
|
|
1390
1396
|
//#endregion
|
|
1391
1397
|
//#region src/components/pop-comment-icon.ts
|
|
1392
|
-
var $e = O("\n :host {\n /* Mode-level theme colors (defaults for light mode) */\n --pop-comment-color-black: #000000;\n --pop-comment-color-white: #ffffff;\n --pop-comment-color-default: #000000;\n --pop-comment-color-reversed: #ffffff;\n --pop-comment-bg-singular-resting: #121926;\n --pop-comment-bg-singular-hover: rgba(0, 0, 32, 0.08);\n --pop-comment-bg-reversed: #121926;\n --pop-comment-bg-blank-resting: #ffffff;\n\n display: flex;\n\n --pop-comment-icon-scale: 1;\n --pop-comment-icon-scale-hover: 1.1875;\n --pop-comment-icon-scale-active: 0.9375;\n --pop-comment-icon-size: 32px;\n --pop-comment-icon-color: var(--pop-foreground, #000000);\n --pop-comment-icon-color-hover: var(--pop-foreground, #000000);\n --pop-comment-icon-color-active: var(--pop-foreground, #000000);\n --pop-comment-icon-color-focused: var(--pop-foreground, #000000);\n --pop-comment-icon-background: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n --pop-comment-icon-background-hover: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n --pop-comment-icon-background-active: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n --pop-comment-icon-background-focused: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n /* Overrides for dark mode */\n --pop-comment-color-black: #ffffff;\n --pop-comment-color-white: #000000;\n --pop-comment-color-default: #ffffff;\n --pop-comment-color-reversed: #000000;\n --pop-comment-bg-singular-resting: #ffffff;\n --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);\n --pop-comment-bg-reversed: #ffffff;\n --pop-comment-bg-blank-resting: #121926;\n }\n }\n\n :host(.dark) {\n /* Overrides for dark mode (.dark class on host) */\n --pop-comment-color-black: #ffffff;\n --pop-comment-color-white: #000000;\n --pop-comment-color-default: #ffffff;\n --pop-comment-color-reversed: #000000;\n --pop-comment-bg-singular-resting: #ffffff;\n --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);\n --pop-comment-bg-reversed: #ffffff;\n --pop-comment-bg-blank-resting: #121926;\n }\n\n .comment-icon {\n align-items: center;\n background: transparent;\n border: none;\n display: inline-flex;\n height: var(--pop-comment-icon-size);\n justify-content: center;\n padding: 0;\n position: relative;\n transform-origin: center;\n width: var(--pop-comment-icon-size);\n }\n\n .comment-icon--size-sm {\n --pop-comment-icon-size: 24px;\n }\n\n .comment-icon:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .comment-icon__focus-indicator {\n background-color: var(--pop-ring);\n display: none;\n position: absolute;\n inset: -3px;\n pointer-events: none;\n transform-origin: center;\n transform: scale(var(--pop-comment-icon-scale));\n transition: all 200ms ease-out;\n width: calc(100% + 6px);\n }\n\n .comment-icon:focus-visible .comment-icon__focus-indicator {\n display: flex;\n }\n\n .comment-icon:focus-visible {\n outline: none;\n }\n\n .comment-icon__inner {\n align-items: center;\n background: var(--pop-comment-icon-background);\n color: var(--pop-comment-icon-color);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n height: var(--pop-comment-icon-size);\n justify-content: center;\n position: absolute;\n transform-origin: center;\n transition: all 200ms ease-out;\n transform: scale(var(--pop-comment-icon-scale));\n width: var(--pop-comment-icon-size);\n }\n\n .comment-icon__icon-container {\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n transition: transform ease-out 150ms;\n width: 100%;\n }\n\n .comment-icon__icon-container svg {\n width: calc(var(--pop-comment-icon-size) * 0.6875);\n height: calc(var(--pop-comment-icon-size) * 0.6875);\n }\n\n .comment-icon--variant-close.comment-icon--theme-neutral .comment-icon__icon-container svg {\n width: var(--pop-comment-icon-size);\n height: var(--pop-comment-icon-size);\n }\n\n .comment-icon__icon-image {\n display: flex;\n width: var(--pop-comment-icon-size);\n height: var(--pop-comment-icon-size);\n }\n\n .comment-icon__icon {\n display: flex;\n }\n\n .comment-icon__icon-image + .comment-icon__icon {\n display: none;\n }\n\n .comment-icon .comment-icon__inner {\n transition: transform var(--pop-ease-pop-hover) var(--pop-duration-pop-hover);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .comment-icon:hover .comment-icon__inner {\n background: var(--pop-comment-icon-background-hover);\n color: var(--pop-comment-icon-color-hover);\n transform: scale(var(--pop-comment-icon-scale-hover));\n }\n\n .comment-icon:hover .comment-icon__icon-image {\n display: none;\n }\n\n .comment-icon:hover .comment-icon__icon-image + .comment-icon__icon {\n display: flex;\n }\n }\n\n .comment-icon:active .comment-icon__inner {\n background: var(--pop-comment-icon-background-active);\n color: var(--pop-comment-icon-color-active);\n transform: scale(var(--pop-comment-icon-scale-active));\n transition-duration: 200ms;\n }\n\n .comment-icon:is(:focus-visible) .comment-icon__inner {\n background: var(--pop-comment-icon-background-focused);\n color: var(--pop-comment-icon-color-focused);\n }\n\n /* Brand / Add */\n .comment-icon--theme-brand.comment-icon--variant-add {\n --pop-comment-icon-color: var(--pop-comment-color-black);\n --pop-comment-icon-color-hover: var(--pop-comment-color-black);\n --pop-comment-icon-color-active: var(--pop-comment-color-black);\n --pop-comment-icon-color-focused: var(--pop-comment-color-black);\n --pop-comment-icon-background: transparent;\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-hover);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);\n --pop-comment-icon-background-focused: transparent;\n }\n\n /* Brand / Close */\n .comment-icon--theme-brand.comment-icon--variant-close {\n --pop-comment-icon-color: var(--pop-comment-color-white);\n --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n --pop-comment-icon-color-active: var(--pop-comment-color-white);\n --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n }\n\n /* Neutral / Add */\n .comment-icon--theme-neutral.comment-icon--variant-add {\n --pop-comment-icon-color: var(--pop-comment-color-white);\n --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n --pop-comment-icon-color-active: var(--pop-comment-color-white);\n --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n }\n\n /* Neutral / Close */\n .comment-icon--theme-neutral.comment-icon--variant-close {\n --pop-comment-icon-color: var(--pop-comment-color-white);\n --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n --pop-comment-icon-color-active: var(--pop-comment-color-white);\n --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n }\n\n /* Neutral / Send */\n .comment-icon--theme-neutral.comment-icon--variant-send {\n --pop-comment-icon-color: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-active: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-focused: var(--pop-comment-color-reversed);\n --pop-comment-icon-background: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-reversed);\n }\n\n /* Neutral / More */\n .comment-icon--theme-neutral.comment-icon--variant-more {\n --pop-comment-icon-color: var(--pop-comment-color-default);\n --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-active: var(--pop-comment-color-default);\n --pop-comment-icon-color-focused: var(--pop-comment-color-default);\n --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-active: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);\n }\n\n /* Neutral / Cancel */\n .comment-icon--theme-neutral.comment-icon--variant-cancel {\n --pop-comment-icon-color: var(--pop-comment-color-default);\n --pop-comment-icon-color-hover: var(--pop-comment-color-default);\n --pop-comment-icon-color-active: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-focused: var(--pop-comment-color-default);\n --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);\n }\n"), et = class extends k {
|
|
1398
|
+
var et = O("\n :host {\n /* Mode-level theme colors (defaults for light mode) */\n --pop-comment-color-black: #000000;\n --pop-comment-color-white: #ffffff;\n --pop-comment-color-default: #000000;\n --pop-comment-color-reversed: #ffffff;\n --pop-comment-bg-singular-resting: #121926;\n --pop-comment-bg-singular-hover: rgba(0, 0, 32, 0.08);\n --pop-comment-bg-reversed: #121926;\n --pop-comment-bg-blank-resting: #ffffff;\n\n display: flex;\n\n --pop-comment-icon-scale: 1;\n --pop-comment-icon-scale-hover: 1.1875;\n --pop-comment-icon-scale-active: 0.9375;\n --pop-comment-icon-size: 32px;\n --pop-comment-icon-color: var(--pop-foreground, #000000);\n --pop-comment-icon-color-hover: var(--pop-foreground, #000000);\n --pop-comment-icon-color-active: var(--pop-foreground, #000000);\n --pop-comment-icon-color-focused: var(--pop-foreground, #000000);\n --pop-comment-icon-background: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n --pop-comment-icon-background-hover: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n --pop-comment-icon-background-active: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n --pop-comment-icon-background-focused: var(\n --color-surface-buttons-singular-bg-launch-icon-hover,\n rgba(0, 0, 32, 0.08)\n );\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n /* Overrides for dark mode */\n --pop-comment-color-black: #ffffff;\n --pop-comment-color-white: #000000;\n --pop-comment-color-default: #ffffff;\n --pop-comment-color-reversed: #000000;\n --pop-comment-bg-singular-resting: #ffffff;\n --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);\n --pop-comment-bg-reversed: #ffffff;\n --pop-comment-bg-blank-resting: #121926;\n }\n }\n\n :host(.dark) {\n /* Overrides for dark mode (.dark class on host) */\n --pop-comment-color-black: #ffffff;\n --pop-comment-color-white: #000000;\n --pop-comment-color-default: #ffffff;\n --pop-comment-color-reversed: #000000;\n --pop-comment-bg-singular-resting: #ffffff;\n --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);\n --pop-comment-bg-reversed: #ffffff;\n --pop-comment-bg-blank-resting: #121926;\n }\n\n .comment-icon {\n align-items: center;\n background: transparent;\n border: none;\n display: inline-flex;\n height: var(--pop-comment-icon-size);\n justify-content: center;\n padding: 0;\n position: relative;\n transform-origin: center;\n width: var(--pop-comment-icon-size);\n }\n\n .comment-icon--size-sm {\n --pop-comment-icon-size: 24px;\n }\n\n .comment-icon:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .comment-icon__focus-indicator {\n background-color: var(--pop-ring);\n display: none;\n position: absolute;\n inset: -3px;\n pointer-events: none;\n transform-origin: center;\n transform: scale(var(--pop-comment-icon-scale));\n transition: all 200ms ease-out;\n width: calc(100% + 6px);\n }\n\n .comment-icon:focus-visible .comment-icon__focus-indicator {\n display: flex;\n }\n\n .comment-icon:focus-visible {\n outline: none;\n }\n\n .comment-icon__inner {\n align-items: center;\n background: var(--pop-comment-icon-background);\n color: var(--pop-comment-icon-color);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n height: var(--pop-comment-icon-size);\n justify-content: center;\n position: absolute;\n transform-origin: center;\n transition: all 200ms ease-out;\n transform: scale(var(--pop-comment-icon-scale));\n width: var(--pop-comment-icon-size);\n }\n\n .comment-icon__icon-container {\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n transition: transform ease-out 150ms;\n width: 100%;\n }\n\n .comment-icon__icon-container svg {\n width: calc(var(--pop-comment-icon-size) * 0.6875);\n height: calc(var(--pop-comment-icon-size) * 0.6875);\n }\n\n .comment-icon--variant-close.comment-icon--theme-neutral .comment-icon__icon-container svg {\n width: var(--pop-comment-icon-size);\n height: var(--pop-comment-icon-size);\n }\n\n .comment-icon__icon-image {\n display: flex;\n width: var(--pop-comment-icon-size);\n height: var(--pop-comment-icon-size);\n }\n\n .comment-icon__icon {\n display: flex;\n }\n\n .comment-icon__icon-image + .comment-icon__icon {\n display: none;\n }\n\n .comment-icon .comment-icon__inner {\n transition: transform var(--pop-ease-pop-hover) var(--pop-duration-pop-hover);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .comment-icon:hover .comment-icon__inner {\n background: var(--pop-comment-icon-background-hover);\n color: var(--pop-comment-icon-color-hover);\n transform: scale(var(--pop-comment-icon-scale-hover));\n }\n\n .comment-icon:hover .comment-icon__icon-image {\n display: none;\n }\n\n .comment-icon:hover .comment-icon__icon-image + .comment-icon__icon {\n display: flex;\n }\n }\n\n .comment-icon:active .comment-icon__inner {\n background: var(--pop-comment-icon-background-active);\n color: var(--pop-comment-icon-color-active);\n transform: scale(var(--pop-comment-icon-scale-active));\n transition-duration: 200ms;\n }\n\n .comment-icon:is(:focus-visible) .comment-icon__inner {\n background: var(--pop-comment-icon-background-focused);\n color: var(--pop-comment-icon-color-focused);\n }\n\n /* Brand / Add */\n .comment-icon--theme-brand.comment-icon--variant-add {\n --pop-comment-icon-color: var(--pop-comment-color-black);\n --pop-comment-icon-color-hover: var(--pop-comment-color-black);\n --pop-comment-icon-color-active: var(--pop-comment-color-black);\n --pop-comment-icon-color-focused: var(--pop-comment-color-black);\n --pop-comment-icon-background: transparent;\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-hover);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);\n --pop-comment-icon-background-focused: transparent;\n }\n\n /* Brand / Close */\n .comment-icon--theme-brand.comment-icon--variant-close {\n --pop-comment-icon-color: var(--pop-comment-color-white);\n --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n --pop-comment-icon-color-active: var(--pop-comment-color-white);\n --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n }\n\n /* Neutral / Add */\n .comment-icon--theme-neutral.comment-icon--variant-add {\n --pop-comment-icon-color: var(--pop-comment-color-white);\n --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n --pop-comment-icon-color-active: var(--pop-comment-color-white);\n --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n }\n\n /* Neutral / Close */\n .comment-icon--theme-neutral.comment-icon--variant-close {\n --pop-comment-icon-color: var(--pop-comment-color-white);\n --pop-comment-icon-color-hover: var(--pop-comment-color-white);\n --pop-comment-icon-color-active: var(--pop-comment-color-white);\n --pop-comment-icon-color-focused: var(--pop-comment-color-white);\n --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);\n }\n\n /* Neutral / Send */\n .comment-icon--theme-neutral.comment-icon--variant-send {\n --pop-comment-icon-color: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-active: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-focused: var(--pop-comment-color-reversed);\n --pop-comment-icon-background: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-reversed);\n }\n\n /* Neutral / More */\n .comment-icon--theme-neutral.comment-icon--variant-more {\n --pop-comment-icon-color: var(--pop-comment-color-default);\n --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-active: var(--pop-comment-color-default);\n --pop-comment-icon-color-focused: var(--pop-comment-color-default);\n --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-active: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);\n }\n\n /* Neutral / Cancel */\n .comment-icon--theme-neutral.comment-icon--variant-cancel {\n --pop-comment-icon-color: var(--pop-comment-color-default);\n --pop-comment-icon-color-hover: var(--pop-comment-color-default);\n --pop-comment-icon-color-active: var(--pop-comment-color-reversed);\n --pop-comment-icon-color-focused: var(--pop-comment-color-default);\n --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-hover: var(--pop-comment-bg-blank-resting);\n --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);\n --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);\n }\n"), tt = class extends k {
|
|
1393
1399
|
constructor(...e) {
|
|
1394
1400
|
super(...e), this.events = { click: "onClick" };
|
|
1395
1401
|
}
|
|
1396
1402
|
get styleSheets() {
|
|
1397
|
-
return [
|
|
1403
|
+
return [et];
|
|
1398
1404
|
}
|
|
1399
1405
|
static get observedAttributes() {
|
|
1400
1406
|
return [
|
|
@@ -1517,10 +1523,10 @@ var $e = O("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
1517
1523
|
`;
|
|
1518
1524
|
}
|
|
1519
1525
|
};
|
|
1520
|
-
customElements.get("pop-comment-icon") || customElements.define("pop-comment-icon",
|
|
1526
|
+
customElements.get("pop-comment-icon") || customElements.define("pop-comment-icon", tt);
|
|
1521
1527
|
//#endregion
|
|
1522
1528
|
//#region src/components/pop-comment-input.ts
|
|
1523
|
-
var
|
|
1529
|
+
var nt = O("\n :host {\n display: flex;\n flex: 1;\n min-width: 0;\n align-items: flex-end;\n }\n\n textarea {\n flex: 1;\n min-width: 0;\n background: none;\n border: none;\n outline: none;\n resize: none;\n font-family: Inter, sans-serif;\n font-size: 13px;\n color: black;\n line-height: 18px;\n padding: 5px 0;\n max-height: 200px;\n overflow-y: auto;\n width: 100%;\n letter-spacing: -0.08px;\n }\n\n textarea::placeholder {\n color: #697586;\n }\n"), K = class extends k {
|
|
1524
1530
|
constructor(...e) {
|
|
1525
1531
|
super(...e), this.events = {
|
|
1526
1532
|
input: "onInput",
|
|
@@ -1528,7 +1534,7 @@ var tt = O("\n :host {\n display: flex;\n flex: 1;\n min-width: 0;\n
|
|
|
1528
1534
|
};
|
|
1529
1535
|
}
|
|
1530
1536
|
get styleSheets() {
|
|
1531
|
-
return [
|
|
1537
|
+
return [nt];
|
|
1532
1538
|
}
|
|
1533
1539
|
onInput(e) {
|
|
1534
1540
|
let t = e.target;
|
|
@@ -1564,18 +1570,20 @@ var tt = O("\n :host {\n display: flex;\n flex: 1;\n min-width: 0;\n
|
|
|
1564
1570
|
j([b(W)], K.prototype, "gridStore", void 0), customElements.get("pop-comment-input") || customElements.define("pop-comment-input", K);
|
|
1565
1571
|
//#endregion
|
|
1566
1572
|
//#region src/components/pop-comment-thread.ts
|
|
1567
|
-
var
|
|
1573
|
+
var rt = O("\n :host {\n display: block;\n /* Width of a comment's avatar column: pop-comment's avatar plus its gap. */\n --pop-thread-avatar-column: 40px;\n\n --pop-thread-link: rgba(0, 0, 32, 0.5);\n --pop-thread-link-hover: rgba(0, 0, 32, 0.8);\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --pop-thread-link: rgba(255, 255, 255, 0.5);\n --pop-thread-link-hover: rgba(255, 255, 255, 0.8);\n }\n }\n\n :host(.dark) {\n --pop-thread-link: rgba(255, 255, 255, 0.5);\n --pop-thread-link-hover: rgba(255, 255, 255, 0.8);\n }\n\n .thread {\n align-items: stretch;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .thread__replies {\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding-left: 24px;\n }\n\n .thread__more {\n display: flex;\n align-items: center;\n font-size: 13px;\n gap: 6px;\n /* Starts the count's text where the replies' text starts: the 4px dot and 6px gap sit in the avatar column. */\n padding-left: calc(var(--pop-thread-avatar-column) - 10px);\n transition: opacity 0.15s ease;\n width: 100%;\n }\n\n :host([data-size=\"lg\"]) {\n --pop-thread-avatar-column: 68px;\n }\n\n .thread__more:hover {\n opacity: 1;\n }\n\n .thread__more-dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--pop-muted-foreground);\n flex-shrink: 0;\n opacity: 0.1;\n }\n"), q = 2, J = class extends k {
|
|
1568
1574
|
constructor(...e) {
|
|
1569
1575
|
super(...e), this._showAll = !1, this.events = { click: "onClick" };
|
|
1570
1576
|
}
|
|
1571
1577
|
get styleSheets() {
|
|
1572
|
-
return [
|
|
1578
|
+
return [rt];
|
|
1573
1579
|
}
|
|
1574
1580
|
onClick(e) {
|
|
1575
1581
|
e.target.closest(A("more")) && (this._showAll = !0, this.render());
|
|
1576
1582
|
}
|
|
1577
1583
|
setupEffects() {
|
|
1578
1584
|
this.addEffect(() => {
|
|
1585
|
+
this.setAttribute("data-size", this.gridStore.commentSize.value);
|
|
1586
|
+
}), this.addEffect(() => {
|
|
1579
1587
|
let e = this.getAttribute("comment-id"), t = this.gridStore.scrollingCommentId.value;
|
|
1580
1588
|
e && t && this.gridStore.repliesFor(e).some((e) => e.id === t) && (this._showAll = !0), this.gridStore.comments.value, this.render();
|
|
1581
1589
|
});
|
|
@@ -1609,7 +1617,7 @@ function Y(e) {
|
|
|
1609
1617
|
}
|
|
1610
1618
|
//#endregion
|
|
1611
1619
|
//#region src/components/pop-comment.ts
|
|
1612
|
-
var
|
|
1620
|
+
var it = O("\n :host {\n display: block;\n width: 100%;\n --pop-comment-hover: rgba(0, 0, 32, 0.04);\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --pop-comment-hover: rgba(255, 255, 255, 0.04);\n }\n }\n\n .comment {\n display: flex;\n width: 100%;\n gap: 8px;\n align-items: center;\n background-color: transparent;\n border: none;\n padding: 0;\n border-radius: var(--pop-radius-md);\n outline: 6px solid transparent;\n text-align: left;\n transition:\n background-color 150ms ease,\n outline-color 150ms ease;\n }\n\n :host([data-size=\"sm\"]) .comment,\n :host:not([data-size]) .comment {\n --avatar-size: 32px;\n --width: 32px;\n gap: 8px;\n }\n\n :host([data-size=\"lg\"]) .comment {\n --avatar-size: 56px;\n --width: 56px;\n gap: 12px;\n }\n\n .comment--is-selected {\n background-color: var(--pop-muted);\n outline-color: var(--pop-muted);\n }\n\n :host(.is-signed-in) .comment {\n cursor: pointer;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .comment:hover .comment__avatar {\n --avatar-translate-x: 2px;\n }\n\n .comment__avatar:hover {\n /* --avatar-scale: 1.06; */\n }\n\n .comment .comment__menu {\n display: none;\n }\n\n .comment:hover .comment__menu {\n display: flex;\n }\n }\n\n .comment--is-selected .comment__avatar {\n --avatar-translate-x: 2px;\n }\n\n .comment__avatar {\n --comment-avatar-border-size: 0;\n --avatar-translate-x: 0px;\n --avatar-scale: 1;\n width: var(--avatar-size);\n height: var(--avatar-size);\n transform: translateX(var(--avatar-translate-x)) scale(var(--avatar-scale));\n transition: transform var(--pop-duration-quick) var(--pop-ease-quick);\n }\n\n .comment__user {\n display: flex;\n width: var(--width);\n align-items: flex-start;\n gap: 10px;\n flex-shrink: 0;\n align-self: stretch;\n }\n\n .comment__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n align-self: stretch;\n }\n\n .comment__info {\n display: flex;\n align-items: flex-start;\n align-self: stretch;\n }\n\n .comment__menu {\n display: flex;\n justify-self: flex-end;\n }\n\n .comment__menu-trigger {\n background: none;\n border: none;\n cursor: pointer;\n border-radius: 9999px;\n aspect-ratio: 1;\n position: relative;\n }\n\n .comment__menu-trigger:before {\n content: \"\";\n height: 40px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n }\n\n .comment__user-meta {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n flex-shrink: 0;\n align-self: stretch;\n flex-grow: 1;\n }\n\n .comment__user-name {\n color: var(--pop-foreground);\n font-feature-settings:\n \"liga\" off,\n \"clig\" off;\n font-family: Inter, sans-serif;\n font-size: var(--text-widget-base, 13px);\n font-style: normal;\n font-weight: 500;\n line-height: var(--text-widget-base--line-height, 18px);\n letter-spacing: -0.08px;\n }\n\n .comment__timestamp {\n color: var(--pop-muted-foreground);\n font-feature-settings:\n \"liga\" off,\n \"clig\" off;\n font-family: Inter, sans-serif;\n font-size: var(--text-widget-base, 13px);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-widget-base--line-height, 18px);\n letter-spacing: -0.08px;\n opacity: 0.5;\n }\n\n .comment__text {\n align-self: stretch;\n color: var(--pop-foreground);\n font-feature-settings:\n \"liga\" off,\n \"clig\" off;\n font-family: Inter, sans-serif;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px;\n letter-spacing: -0.08px;\n text-align: left;\n\n /* Clamping when not expanded */\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .comment__text.expanded,\n .comment--is-selected .comment__text {\n -webkit-line-clamp: initial;\n display: block;\n }\n\n .comment__mention {\n color: #155eef;\n font-weight: 500;\n }\n\n .comment__menu {\n position: relative;\n }\n\n .comment__dropdown {\n background-color: var(--pop-background);\n border-radius: 6px;\n box-shadow: var(--pop-shadow-xl);\n display: none;\n flex-direction: column;\n gap: 6px;\n padding: 6px;\n pointer-events: auto;\n position: fixed;\n width: 120px;\n z-index: 1000;\n }\n\n .comment__dropdown.is-open {\n display: flex;\n }\n\n .comment__dropdown-item {\n align-items: center;\n background: none;\n border-radius: 4px;\n border: none;\n color: var(--pop-foreground);\n cursor: pointer;\n display: flex;\n flex: 1 0 0;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 500;\n justify-content: center;\n min-height: 40px;\n padding: 0 12px;\n text-align: left;\n transition: background-color 100ms ease;\n width: 100%;\n }\n\n .comment__dropdown-item:hover {\n background-color: var(--pop-comment-hover, rgba(0, 0, 0, 0.04));\n }\n\n .comment__dropdown-item--danger {\n color: #ef4444;\n }\n\n .comment__edit-form {\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: 8px;\n margin-top: 4px;\n }\n\n .comment__edit-input {\n width: 100%;\n background: var(--pop-background, #ffffff);\n color: var(--pop-foreground, #000000);\n border: 1px solid var(--pop-border, #e4e4e7);\n border-radius: var(--pop-radius-sm, 4px);\n padding: 6px 8px;\n font-family: Inter, sans-serif;\n font-size: 13px;\n line-height: 18px;\n resize: vertical;\n outline: none;\n }\n\n .comment__edit-input:focus {\n border-color: var(--pop-ring, #000020);\n }\n\n .comment__edit-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n }\n\n .comment__edit-save,\n .comment__edit-cancel {\n font-size: 12px;\n padding: 4px 8px;\n cursor: pointer;\n }\n\n .comment--deleted .comment__text {\n color: var(--pop-muted-foreground, #697586);\n font-style: italic;\n opacity: 0.8;\n }\n"), X = class extends k {
|
|
1613
1621
|
constructor(...e) {
|
|
1614
1622
|
super(...e), this.events = { click: "onClick" }, this._expanded = !1, this._dropdownOpen = !1, this._onOutsideClick = (e) => {
|
|
1615
1623
|
let t = e.composedPath(), n = this.getElement(A("dropdown")), r = this.getElement(A("menu-trigger"));
|
|
@@ -1632,7 +1640,7 @@ var rt = O("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
1632
1640
|
return this.size === "sm" ? "xs" : "sm";
|
|
1633
1641
|
}
|
|
1634
1642
|
get styleSheets() {
|
|
1635
|
-
return [
|
|
1643
|
+
return [it];
|
|
1636
1644
|
}
|
|
1637
1645
|
toggleDropdown() {
|
|
1638
1646
|
this._dropdownOpen ? this.closeDropdown() : this.openDropdown();
|
|
@@ -1732,6 +1740,8 @@ var rt = O("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
1732
1740
|
}
|
|
1733
1741
|
setupEffects() {
|
|
1734
1742
|
this.addEffect(() => {
|
|
1743
|
+
this.setAttribute("data-size", this.gridStore.commentSize.value);
|
|
1744
|
+
}), this.addEffect(() => {
|
|
1735
1745
|
let e = this.getAttribute("comment-id"), t = this.authStore.currentUser.value, n = this.gridStore.replyingTo.value, r = this.gridStore.editingCommentId.value, i = this.gridStore.scrollingCommentId.value;
|
|
1736
1746
|
this.classList.toggle("is-signed-in", t !== null), this.classList.toggle("is-replying", e !== null && n === e), this.classList.toggle("is-editing", e !== null && r === e), this.gridStore.comments.value, this.render(), this.startTimeUpdates(), e && i === e && setTimeout(() => {
|
|
1737
1747
|
let t = this.shadowRoot?.querySelector(`#comment-${e}`);
|
|
@@ -1833,12 +1843,12 @@ var rt = O("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
1833
1843
|
j([b(W)], X.prototype, "gridStore", void 0), j([b(_)], X.prototype, "authStore", void 0), customElements.get("pop-comment") || customElements.define("pop-comment", X);
|
|
1834
1844
|
//#endregion
|
|
1835
1845
|
//#region src/components/pop-feed.ts
|
|
1836
|
-
var
|
|
1846
|
+
var at = O("\n :host {\n display: flex;\n background: var(--pop-background);\n border-radius: var(--pop-radius-2xl);\n /* border: 1px solid var(--pop-background); */\n box-shadow: var(--pop-shadow-3xl);\n display: block;\n left: 0;\n max-height: 340px;\n max-width: 400px;\n min-width: 343px;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n pointer-events: none;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 9999;\n transform: scale(0.94);\n transition:\n opacity var(--pop-duration-quick) var(--pop-ease-quick),\n transform var(--pop-duration-quick) var(--pop-ease-quick),\n display var(--pop-duration-quick) allow-discrete;\n }\n\n :host([data-current-placement=\"top-start\"]) {\n transform-origin: left bottom;\n }\n\n :host([data-current-placement=\"bottom-start\"]) {\n transform-origin: left top;\n }\n\n :host([data-current-placement=\"top-end\"]) {\n transform-origin: right bottom;\n }\n\n :host([data-current-placement=\"bottom-end\"]) {\n transform-origin: right top;\n }\n\n :host([data-current-placement=\"top\"]) {\n transform-origin: bottom;\n }\n\n :host([data-current-placement=\"bottom\"]) {\n transform-origin: top;\n }\n\n :host([open]) {\n opacity: 1;\n pointer-events: auto;\n transform: scale(1);\n\n @starting-style {\n display: flex;\n opacity: 0;\n transform: scale(0.94);\n }\n }\n\n /* .feed__content and .feed__footer are stacked in the same grid cell\n (see grid-area below) rather than laid out as flex siblings, so the\n footer can grow taller (email/code/no-code states) and overlay the\n comment list instead of pushing it — the grid row auto-sizes to\n whichever of the two is taller, which a manual absolute-position +\n fixed-height-reservation approach can't do without clipping against\n :host's overflow:hidden when the footer is the tall one. */\n .feed {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr;\n /* height (not just max-height) gives the grid row a definite size to\n shrink to — otherwise an auto-height grid container sizes its 1fr\n row to content's max-content height regardless of max-height,\n clipping instead of scrolling. */\n height: fit-content(340px);\n max-height: 340px;\n }\n\n .feed__content {\n align-items: flex-start;\n /* stretch (not start) so .feed__main inherits a bounded height to\n scroll within, instead of growing to fit all comments. */\n align-self: stretch;\n display: flex;\n gap: 8px;\n grid-area: 1 / 1;\n min-height: 0;\n width: 100%;\n }\n\n .feed__empty {\n padding: 24px 16px 24px 8px;\n text-align: center;\n font-family: Inter, sans-serif;\n font-size: 13px;\n color: var(--pop-muted-foreground);\n line-height: 18px;\n }\n\n .feed__footer {\n align-self: end;\n grid-area: 1 / 1;\n width: 100%;\n z-index: 1;\n }\n\n /* Full-widget scrim for auth errors (e.g. \"You were signed out\"). Sits in\n the same grid cell as the content and footer, above both, so the message\n never takes layout space from the join bar. Click to dismiss. */\n .feed__notice {\n align-items: center;\n background: color-mix(in srgb, var(--pop-background) 80%, transparent);\n color: var(--pop-foreground);\n cursor: pointer;\n display: flex;\n font-family: Inter, sans-serif;\n font-size: 13px;\n grid-area: 1 / 1;\n justify-content: center;\n line-height: 18px;\n padding: 24px;\n text-align: center;\n z-index: 2;\n }\n\n .feed__notice-box {\n align-items: center;\n background: var(--pop-background);\n border: 1px solid var(--pop-border);\n border-radius: var(--pop-radius-sm);\n cursor: default;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 16px;\n }\n\n .feed__notice-box:focus {\n outline: none;\n }\n\n .feed__notice[hidden] {\n display: none;\n }\n\n .feed__notice-dismiss {\n background: var(--pop-foreground);\n border: none;\n border-radius: var(--pop-radius-xs);\n color: var(--pop-background);\n cursor: pointer;\n font: inherit;\n font-weight: 600;\n padding: 6px 12px;\n }\n\n .feed__notice-dismiss:focus-visible {\n outline: 2px solid var(--pop-ring);\n outline-offset: 2px;\n }\n\n .feed__main {\n align-items: stretch;\n align-self: stretch;\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n gap: 16px;\n min-height: 0;\n overflow: hidden auto;\n /* Bottom padding reserves space for the idle \"Join the Conversation\"\n bar (~50px) so comments end above it, same as before this became an\n overlay — a taller auth-panel state then naturally covers more. */\n padding: 8px 10px 58px 8px;\n }\n\n .feed__main::-webkit-scrollbar {\n width: 4px;\n }\n\n .feed__main::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .feed__main::-webkit-scrollbar-thumb {\n background: var(--pop-border);\n border-radius: 100px;\n }\n"), Z = class extends k {
|
|
1837
1847
|
constructor(...e) {
|
|
1838
1848
|
super(...e), this._footerChild = null, this._wasOpen = !1, this._noticeRetryAt = null, this.events = { click: "onClick" };
|
|
1839
1849
|
}
|
|
1840
1850
|
get styleSheets() {
|
|
1841
|
-
return [
|
|
1851
|
+
return [at];
|
|
1842
1852
|
}
|
|
1843
1853
|
onClick(e) {
|
|
1844
1854
|
e.target.closest(A("notice")) && this.authStore.authErrorRetryAt.value === null && this.authStore.dismissAuthError();
|
|
@@ -1921,7 +1931,7 @@ var it = O("\n :host {\n display: flex;\n background: var(--pop-backgroun
|
|
|
1921
1931
|
let e = n.hidden;
|
|
1922
1932
|
n.hidden = !t, this.setText(A("notice-message"), t ?? "");
|
|
1923
1933
|
let r = t ? this.authStore.authErrorRetryAt.value : null;
|
|
1924
|
-
t && this.setText(A("notice-dismiss"), this.authStore.authErrorAction.value), this.syncNoticeCountdown(r), this.getElement(A("content"))?.toggleAttribute("inert", !!t), this.getElement(A("footer"))?.toggleAttribute("inert", !!t), t && e && this.gridStore.open.value && this.getElement(A(r === null ? "notice-dismiss" : "notice-box"))?.focus();
|
|
1934
|
+
t && this.setText(A("notice-dismiss"), this.authStore.authErrorAction.value), this.syncNoticeCountdown(r), this.getElement(A("content"))?.toggleAttribute("inert", !!t), this.getElement(A("footer"))?.toggleAttribute("inert", !!t || this.gridStore.demo), t && e && this.gridStore.open.value && this.getElement(A(r === null ? "notice-dismiss" : "notice-box"))?.focus();
|
|
1925
1935
|
}
|
|
1926
1936
|
let r = this.getElement(A("footer"));
|
|
1927
1937
|
if (r) {
|
|
@@ -1936,60 +1946,104 @@ var it = O("\n :host {\n display: flex;\n background: var(--pop-backgroun
|
|
|
1936
1946
|
j([b(W)], Z.prototype, "gridStore", void 0), j([b(_)], Z.prototype, "authStore", void 0), customElements.get("pop-feed") || customElements.define("pop-feed", Z);
|
|
1937
1947
|
//#endregion
|
|
1938
1948
|
//#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
|
|
1939
|
-
function
|
|
1949
|
+
function ot() {
|
|
1940
1950
|
return typeof window < "u";
|
|
1941
1951
|
}
|
|
1942
|
-
function
|
|
1952
|
+
function st(e) {
|
|
1943
1953
|
var t;
|
|
1944
1954
|
return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
|
|
1945
1955
|
}
|
|
1946
|
-
function
|
|
1947
|
-
return
|
|
1956
|
+
function ct(e) {
|
|
1957
|
+
return ot() ? e instanceof Element || e instanceof st(e).Element : !1;
|
|
1948
1958
|
}
|
|
1949
|
-
var
|
|
1950
|
-
function
|
|
1951
|
-
let t =
|
|
1952
|
-
return Q(t.transform) || Q(t.translate) || Q(t.scale) || Q(t.rotate) || Q(t.perspective) || !
|
|
1959
|
+
var lt = /transform|translate|scale|rotate|perspective|filter/, ut = /paint|layout|strict|content/, Q = (e) => !!e && e !== "none", dt;
|
|
1960
|
+
function ft(e) {
|
|
1961
|
+
let t = ct(e) ? mt(e) : e;
|
|
1962
|
+
return Q(t.transform) || Q(t.translate) || Q(t.scale) || Q(t.rotate) || Q(t.perspective) || !pt() && (Q(t.backdropFilter) || Q(t.filter)) || lt.test(t.willChange || "") || ut.test(t.contain || "");
|
|
1953
1963
|
}
|
|
1954
|
-
function
|
|
1955
|
-
return
|
|
1964
|
+
function pt() {
|
|
1965
|
+
return dt ??= typeof CSS < "u" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none"), dt;
|
|
1956
1966
|
}
|
|
1957
|
-
function
|
|
1958
|
-
return
|
|
1967
|
+
function mt(e) {
|
|
1968
|
+
return st(e).getComputedStyle(e);
|
|
1959
1969
|
}
|
|
1960
1970
|
//#endregion
|
|
1961
1971
|
//#region ../../node_modules/.pnpm/composed-offset-position@0.0.6_@floating-ui+utils@0.2.12/node_modules/composed-offset-position/dist/composed-offset-position.browser.min.mjs
|
|
1962
|
-
function
|
|
1963
|
-
return
|
|
1972
|
+
function ht(e) {
|
|
1973
|
+
return gt(e);
|
|
1964
1974
|
}
|
|
1965
1975
|
function $(e) {
|
|
1966
1976
|
return e.assignedSlot ? e.assignedSlot : e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode;
|
|
1967
1977
|
}
|
|
1968
|
-
function
|
|
1978
|
+
function gt(e) {
|
|
1969
1979
|
for (let t = e; t; t = $(t)) if (t instanceof Element && getComputedStyle(t).display === "none") return null;
|
|
1970
1980
|
for (let t = $(e); t; t = $(t)) {
|
|
1971
1981
|
if (!(t instanceof Element)) continue;
|
|
1972
1982
|
let e = getComputedStyle(t);
|
|
1973
|
-
if (e.display !== "contents" && (e.position !== "static" ||
|
|
1983
|
+
if (e.display !== "contents" && (e.position !== "static" || ft(e) || t.tagName === "BODY")) return t;
|
|
1974
1984
|
}
|
|
1975
1985
|
return null;
|
|
1976
1986
|
}
|
|
1977
1987
|
//#endregion
|
|
1988
|
+
//#region src/lib/position-feed.ts
|
|
1989
|
+
var _t = 16, vt = (e) => i.getOffsetParent(e, ht);
|
|
1990
|
+
function yt(o, s, c) {
|
|
1991
|
+
let l = [r({
|
|
1992
|
+
mainAxis: c === "down" ? -16 : -54,
|
|
1993
|
+
crossAxis: -18
|
|
1994
|
+
})];
|
|
1995
|
+
return (!c || c === "auto") && l.push(n({
|
|
1996
|
+
fallbackPlacements: ["bottom-start", "top-start"],
|
|
1997
|
+
fallbackStrategy: "bestFit",
|
|
1998
|
+
padding: _t
|
|
1999
|
+
})), l.push(a({
|
|
2000
|
+
padding: _t,
|
|
2001
|
+
crossAxis: !0
|
|
2002
|
+
})), e(o, s, () => {
|
|
2003
|
+
t(o, s, {
|
|
2004
|
+
placement: c === "down" ? "bottom-start" : "top-start",
|
|
2005
|
+
middleware: l,
|
|
2006
|
+
strategy: "fixed",
|
|
2007
|
+
platform: {
|
|
2008
|
+
...i,
|
|
2009
|
+
getOffsetParent: vt
|
|
2010
|
+
}
|
|
2011
|
+
}).then(({ x: e, y: t, placement: n }) => {
|
|
2012
|
+
s.setAttribute("data-current-placement", n), Object.assign(s.style, {
|
|
2013
|
+
left: `${e}px`,
|
|
2014
|
+
top: `${t}px`
|
|
2015
|
+
});
|
|
2016
|
+
});
|
|
2017
|
+
});
|
|
2018
|
+
}
|
|
2019
|
+
//#endregion
|
|
1978
2020
|
//#region src/components/pop-grid.ts
|
|
1979
|
-
var
|
|
2021
|
+
var bt = "https://www.popgrids.io", xt = /* @__PURE__ */ new Set([
|
|
1980
2022
|
"start",
|
|
1981
2023
|
"center",
|
|
1982
2024
|
"end"
|
|
1983
|
-
]),
|
|
2025
|
+
]), St = /* @__PURE__ */ new Set(["sm", "lg"]), Ct = /* @__PURE__ */ new Set([
|
|
1984
2026
|
"auto",
|
|
1985
2027
|
"up",
|
|
1986
2028
|
"down"
|
|
1987
|
-
]),
|
|
2029
|
+
]), wt = O("\n :host {\n display: block;\n position: relative;\n }\n\n .grid {\n display: flex;\n height: 100%;\n position: relative;\n width: 100%;\n }\n\n .grid--align-start {\n justify-content: flex-start;\n }\n\n .grid--align-center {\n justify-content: center;\n }\n\n .grid--align-end {\n justify-content: flex-end;\n }\n"), Tt = class extends k {
|
|
1988
2030
|
constructor(...e) {
|
|
1989
2031
|
super(...e), this._initialized = !1;
|
|
1990
2032
|
}
|
|
2033
|
+
get demo() {
|
|
2034
|
+
return this._demo;
|
|
2035
|
+
}
|
|
2036
|
+
set demo(e) {
|
|
2037
|
+
this._demo = e, this._store?.demo && this._store.showDemo(e);
|
|
2038
|
+
}
|
|
2039
|
+
get open() {
|
|
2040
|
+
return this._store?.open.value ?? !1;
|
|
2041
|
+
}
|
|
2042
|
+
set open(e) {
|
|
2043
|
+
this._store && (this._store.open.value = e);
|
|
2044
|
+
}
|
|
1991
2045
|
get styleSheets() {
|
|
1992
|
-
return [
|
|
2046
|
+
return [wt];
|
|
1993
2047
|
}
|
|
1994
2048
|
static get observedAttributes() {
|
|
1995
2049
|
return [
|
|
@@ -2003,25 +2057,31 @@ var gt = "https://www.popgrids.io", _t = /* @__PURE__ */ new Set([
|
|
|
2003
2057
|
connectedCallback() {
|
|
2004
2058
|
if (this._initialized) return;
|
|
2005
2059
|
this._initialized = !0;
|
|
2006
|
-
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ??
|
|
2007
|
-
this._authStore = new _({
|
|
2060
|
+
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ?? bt, n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id"), i = this.hasAttribute("data-demo");
|
|
2061
|
+
if (this._authStore = new _({
|
|
2008
2062
|
apiUrl: t,
|
|
2009
|
-
publicKey: e
|
|
2063
|
+
publicKey: e,
|
|
2064
|
+
demo: i
|
|
2010
2065
|
}), y(this, this._authStore), this._store = new W({
|
|
2011
2066
|
apiUrl: t,
|
|
2012
2067
|
publicKey: e,
|
|
2013
2068
|
pageUrl: n,
|
|
2014
2069
|
externalId: r,
|
|
2070
|
+
demo: i,
|
|
2015
2071
|
authStore: this._authStore
|
|
2016
|
-
}), y(this, this._store), super.connectedCallback(), this._store.setOverrides(this._readOverridesFromAttributes()), this._store.
|
|
2072
|
+
}), y(this, this._store), super.connectedCallback(), this._store.setOverrides(this._readOverridesFromAttributes()), this._store.demo) {
|
|
2073
|
+
this._demo && this._store.showDemo(this._demo);
|
|
2074
|
+
return;
|
|
2075
|
+
}
|
|
2076
|
+
this._store.load();
|
|
2017
2077
|
}
|
|
2018
2078
|
_readOverridesFromAttributes() {
|
|
2019
2079
|
let e = {}, t = this.getAttribute("data-align");
|
|
2020
|
-
t &&
|
|
2080
|
+
t && xt.has(t) && (e.align = t);
|
|
2021
2081
|
let n = this.getAttribute("data-layout");
|
|
2022
|
-
n &&
|
|
2082
|
+
n && St.has(n) && (e.layout = n);
|
|
2023
2083
|
let r = this.getAttribute("data-position");
|
|
2024
|
-
r &&
|
|
2084
|
+
r && Ct.has(r) && (e.position = r);
|
|
2025
2085
|
let i = this.getAttribute("data-icon");
|
|
2026
2086
|
i && (e.icon = i);
|
|
2027
2087
|
let a = this.getAttribute("data-preview-count");
|
|
@@ -2063,53 +2123,27 @@ var gt = "https://www.popgrids.io", _t = /* @__PURE__ */ new Set([
|
|
|
2063
2123
|
t.classList.add(`grid--preview-${n}`);
|
|
2064
2124
|
}
|
|
2065
2125
|
}), this.addEffect(() => {
|
|
2066
|
-
let
|
|
2067
|
-
if (this._floatingCleanup &&= (this._floatingCleanup(), void 0), !
|
|
2068
|
-
let
|
|
2069
|
-
if (!
|
|
2070
|
-
let
|
|
2071
|
-
|
|
2072
|
-
let l = [];
|
|
2073
|
-
l = [r({
|
|
2074
|
-
mainAxis: c.position === "down" ? -16 : -54,
|
|
2075
|
-
crossAxis: -18
|
|
2076
|
-
})], (!c.position || c.position === "auto") && l.push(n({
|
|
2077
|
-
fallbackPlacements: ["bottom-start", "top-start"],
|
|
2078
|
-
fallbackStrategy: "bestFit",
|
|
2079
|
-
padding: 16
|
|
2080
|
-
}));
|
|
2081
|
-
let u = (e) => i.getOffsetParent(e, mt), d = () => {
|
|
2082
|
-
t(o, s, {
|
|
2083
|
-
placement: c.position === "down" ? "bottom-start" : "top-start",
|
|
2084
|
-
middleware: l,
|
|
2085
|
-
strategy: "fixed",
|
|
2086
|
-
platform: {
|
|
2087
|
-
...i,
|
|
2088
|
-
getOffsetParent: u
|
|
2089
|
-
}
|
|
2090
|
-
}).then(({ x: e, y: t, placement: n }) => {
|
|
2091
|
-
s.setAttribute("data-current-placement", n), Object.assign(s.style, {
|
|
2092
|
-
left: `${e}px`,
|
|
2093
|
-
top: `${t}px`
|
|
2094
|
-
});
|
|
2095
|
-
});
|
|
2096
|
-
};
|
|
2097
|
-
this._floatingCleanup = e(o, s, d);
|
|
2126
|
+
let e = this._store.open.value;
|
|
2127
|
+
if (this._floatingCleanup &&= (this._floatingCleanup(), void 0), !e) return;
|
|
2128
|
+
let t = this.getElement("pop-widget"), n = this.getElement("pop-feed");
|
|
2129
|
+
if (!t || !n) return;
|
|
2130
|
+
let r = this._store.grid.value;
|
|
2131
|
+
r && (this._floatingCleanup = yt(t, n, r.position));
|
|
2098
2132
|
});
|
|
2099
2133
|
}
|
|
2100
2134
|
getTemplate() {
|
|
2101
2135
|
return "\n <div class=\"grid\" data-ref=\"grid\">\n <pop-widget></pop-widget>\n <pop-feed></pop-feed>\n </div>\n ";
|
|
2102
2136
|
}
|
|
2103
2137
|
};
|
|
2104
|
-
customElements.get("pop-grid") || customElements.define("pop-grid",
|
|
2138
|
+
customElements.get("pop-grid") || customElements.define("pop-grid", Tt);
|
|
2105
2139
|
//#endregion
|
|
2106
2140
|
//#region src/components/pop-widget.ts
|
|
2107
|
-
var
|
|
2141
|
+
var Et = O("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text: #991b1b;\n --error-badge-border: #fecaca;\n\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --error-badge-bg: #450a0a;\n --error-badge-text: #fca5a5;\n --error-badge-border: #7f1d1d;\n }\n }\n\n :host(.dark) {\n --error-badge-bg: #450a0a;\n --error-badge-text: #fca5a5;\n --error-badge-border: #7f1d1d;\n }\n\n :host([data-error]) {\n cursor: default;\n }\n\n .error-badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 10px;\n border-radius: var(--pop-radius-full);\n border: 1px solid var(--error-badge-border);\n background: var(--error-badge-bg);\n color: var(--error-badge-text);\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n white-space: nowrap;\n }\n\n .widget {\n display: inline-flex;\n align-items: flex-start;\n }\n\n .widget > :not([hidden]) ~ :not([hidden]) {\n margin-left: -6px;\n }\n\n .skeleton {\n width: 32px;\n height: 32px;\n background: var(--pop-muted);\n animation: pulse 1.5s ease-in-out infinite;\n }\n\n @keyframes pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n }\n\n .count {\n --count-size: calc(32px + var(--count-border-size));\n --count-background: var(--pop-background);\n --count-border-color: rgba(0 0 32 / 16%);\n --count-border-size: 1px;\n --count-color: var(--pop-foreground);\n\n align-items: center;\n background-color: var(--pop-background);\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n padding: calc(var(--count-border-size) / 2);\n position: relative;\n z-index: 10;\n\n width: calc(var(--count-size) + (calc(var(--count-border-size))));\n height: calc(var(--count-size) + (calc(var(--count-border-size))));\n }\n\n .count__background {\n background-color: var(--count-border-color);\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n }\n\n .count__content {\n align-items: center;\n background: var(--count-background);\n display: flex;\n justify-content: center;\n overflow: hidden;\n height: var(--count-size);\n width: var(--count-size);\n }\n\n .count__label {\n color: var(--count-color);\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n letter-spacing: -0.96px;\n line-height: 28px;\n text-align: center;\n user-select: none;\n }\n\n .count__label-container {\n align-items: center;\n background: var(--pop-background);\n display: flex;\n height: calc(100% - calc(var(--count-border-size) * 2));\n justify-content: center;\n position: relative;\n text-indent: calc(calc(var(--count-border-size) * 2) * -1);\n width: calc(100% - calc(var(--count-border-size) * 2));\n z-index: 20;\n }\n\n /* Above .count (z-index: 10) — otherwise it paints underneath despite\n * coming later in the widget's facepile, since z-index only applies to\n * positioned elements and this one had neither. */\n .widget pop-comment-icon {\n position: relative;\n z-index: 20;\n top: 1px;\n }\n"), Dt = class extends k {
|
|
2108
2142
|
constructor(...e) {
|
|
2109
2143
|
super(...e), this.events = { click: "onClick" };
|
|
2110
2144
|
}
|
|
2111
2145
|
get styleSheets() {
|
|
2112
|
-
return [
|
|
2146
|
+
return [Et];
|
|
2113
2147
|
}
|
|
2114
2148
|
onClick() {
|
|
2115
2149
|
this.gridStore.error.value || (this.gridStore.open.value = !this.gridStore.open.value);
|
|
@@ -2124,14 +2158,14 @@ var St = O("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
2124
2158
|
getTemplate() {
|
|
2125
2159
|
if (this.gridStore.loading.value) return "<div class=\"widget\"><div class=\"skeleton mask mask-squircle\"></div></div>";
|
|
2126
2160
|
if (this.gridStore.error.value) return "<div class=\"error-badge\">Error: there was a problem loading the PopGrid</div>";
|
|
2127
|
-
let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length, n = this.gridStore.grid.value
|
|
2161
|
+
let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length, n = this.gridStore.grid.value?.icon === "brand" ? "brand" : "neutral";
|
|
2128
2162
|
return `
|
|
2129
2163
|
<div class="widget">
|
|
2130
2164
|
${e.map((t, n) => {
|
|
2131
|
-
let
|
|
2132
|
-
return t?.image ? `<pop-comment-avatar size="
|
|
2165
|
+
let r = e.length + n, i = t?.id ?? t?.name ?? "";
|
|
2166
|
+
return t?.image ? `<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
|
|
2133
2167
|
<img src="${t.image}" alt="${t.name ?? "User"}" />
|
|
2134
|
-
</pop-comment-avatar>` : `<pop-comment-avatar size="
|
|
2168
|
+
</pop-comment-avatar>` : `<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
|
|
2135
2169
|
${u(t?.name)}
|
|
2136
2170
|
</pop-comment-avatar>`;
|
|
2137
2171
|
}).join("")}
|
|
@@ -2143,14 +2177,14 @@ var St = O("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
2143
2177
|
</div>
|
|
2144
2178
|
</span>
|
|
2145
2179
|
</div>
|
|
2146
|
-
<pop-comment-icon variant="add" theme="${
|
|
2180
|
+
<pop-comment-icon variant="add" theme="${n}" size="xs"></pop-comment-icon>
|
|
2147
2181
|
</div>
|
|
2148
2182
|
`;
|
|
2149
2183
|
}
|
|
2150
2184
|
};
|
|
2151
2185
|
//#endregion
|
|
2152
2186
|
//#region src/index.ts
|
|
2153
|
-
if (j([b(W)],
|
|
2187
|
+
if (j([b(W)], Dt.prototype, "gridStore", void 0), customElements.get("pop-widget") || customElements.define("pop-widget", Dt), typeof document < "u") {
|
|
2154
2188
|
let e = "https://rsms.me/inter/inter.css";
|
|
2155
2189
|
if (!document.querySelector(`link[href="${e}"]`)) {
|
|
2156
2190
|
let t = document.createElement("link");
|