@popgrids/embed 0.0.2 → 0.0.4
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/README.md +2 -2
- package/dist/components/pop-comment-bar.d.ts.map +1 -1
- package/dist/components/pop-comment-icon.d.ts +3 -0
- package/dist/components/pop-comment-icon.d.ts.map +1 -1
- package/dist/components/pop-grid.d.ts +8 -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 +341 -267
- package/dist/embed.js.map +1 -1
- package/dist/index.cjs +61 -40
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +156 -82
- package/dist/index.js.map +1 -1
- package/dist/store/grid-store.d.ts +23 -1
- package/dist/store/grid-store.d.ts.map +1 -1
- package/dist/types/models.d.ts +2 -2
- package/dist/types/models.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -150,9 +150,12 @@ var de = 3e4, w = 3, T = (e) => {
|
|
|
150
150
|
}, E = (e, t) => {
|
|
151
151
|
let n = e?.previewCount ?? t;
|
|
152
152
|
return n > 0 ? n : w;
|
|
153
|
+
}, fe = (e, t) => e && {
|
|
154
|
+
...e,
|
|
155
|
+
...t
|
|
153
156
|
}, D = class {
|
|
154
157
|
constructor(t) {
|
|
155
|
-
this.previewCount = w, this.
|
|
158
|
+
this.previewCount = w, this._fetchedGrid = n(null), this._overrides = n({}), this.grid = e(() => fe(this._fetchedGrid.value, this._overrides.value)), this.comments = n([]), this.loading = n(!0), this.error = n(null), this.open = n(!1), this.replyingTo = n(null), this.editingCommentId = n(null), this.scrollingCommentId = n(null), this.socket = null, this.reconnectAttempt = 0, this.reconnectTimer = null, this.disposed = !1, this.topLevelComments = e(() => this.comments.value.filter((e) => e.parentCommentId === null).sort((e, t) => String(e.sortKey).localeCompare(String(t.sortKey)))), this.replyingToComment = e(() => {
|
|
156
159
|
let e = this.replyingTo.value;
|
|
157
160
|
return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
|
|
158
161
|
}), this.editingComment = e(() => {
|
|
@@ -167,6 +170,9 @@ var de = 3e4, w = 3, T = (e) => {
|
|
|
167
170
|
return n.reverse();
|
|
168
171
|
}), this.apiUrl = t.apiUrl, this.publicKey = t.publicKey, this.pageUrl = t.pageUrl, this.externalId = t.externalId?.trim() || null;
|
|
169
172
|
}
|
|
173
|
+
setOverrides(e) {
|
|
174
|
+
this._overrides.value = e;
|
|
175
|
+
}
|
|
170
176
|
identityParams() {
|
|
171
177
|
let e = new URLSearchParams({ pageUrl: this.pageUrl });
|
|
172
178
|
return this.externalId && e.set("externalId", this.externalId), e.toString();
|
|
@@ -181,7 +187,7 @@ var de = 3e4, w = 3, T = (e) => {
|
|
|
181
187
|
let e = await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}`, { credentials: "include" });
|
|
182
188
|
if (!e.ok) return this.error.value = "There was a problem loading the PopGrid", !1;
|
|
183
189
|
let t = await e.json();
|
|
184
|
-
this.
|
|
190
|
+
this._fetchedGrid.value = t.grid, this.connectRealtime();
|
|
185
191
|
let n = await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments?${this.identityParams()}`, { credentials: "include" });
|
|
186
192
|
if (n.ok) {
|
|
187
193
|
let e = await n.json();
|
|
@@ -298,7 +304,7 @@ var de = 3e4, w = 3, T = (e) => {
|
|
|
298
304
|
updateCommentInList(e) {
|
|
299
305
|
this.comments.value = this.comments.value.map((t) => t.id === e.id ? e : t);
|
|
300
306
|
}
|
|
301
|
-
}, fe = "@layer base{:host{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--pop-color-brand-midnight-100:oklch(96.58% .0161 262.75);--pop-color-brand-midnight-900:oklch(15% .03 255.43);--pop-color-brand-midnight-800:oklch(19% .05 255.43);--pop-color-brand-ocean-400:oklch(63% .19 255.43);--pop-color-brand-ocean-100:oklch(91% .05 255.43);--pop-color-brand-forest-900:oklch(38.66% .0698 180.75);--pop-color-brand-forest-700:oklch(45% .15 165.43);--pop-color-brand-forest-100:oklch(97% .04 165.43);--pop-color-brand-highlight-400:oklch(88% .25 105.43);--pop-color-brand-pumpkin-500:oklch(62% .18 45.43);--pop-color-brand-pumpkin-200:oklch(89% .08 45.43);--pop-color-brand-lemon-300:oklch(91% .12 85.43);--pop-color-brand-lemon-100:oklch(97% .04 85.43);--pop-duration-bouncy:1s;--pop-duration-card-highlight:.6s;--pop-duration-gentle:.833s;--pop-duration-menu:.4s;--pop-duration-pop-hover:.6s;--pop-duration-pop-text:.3s;--pop-duration-quick:.833s;--pop-duration-slow:1.167s;--pop-ease-bouncy:linear(0, .011, .045 1.3%, .184 2.7%, .911 7.4%, 1.153 9.4%, 1.301 11.2%, 1.342, 1.362 13%, 1.363, 1.355 14.4%, 1.306 16%, 1.028 21%, .939 23%, .89 24.7%, .876, .868 26.4%, .869, .882 29%, .907 30.5%, 1.014 35.9%, 1.038, 1.048 39.8% 41.1%, 1.043 42.5%, .995 49.3%, .987, .983 53.2%, .984 55.9%, 1.002 62.7%, 1.006 66.4%, .998 79.7%, 1);--pop-ease-card-highlight:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-gentle:linear(0, .007, .026, .059 4.5%, .106 6.3%, .209 9.5%, .558 19.3%, .658, .742, .812, .87, .918, .957, .986 41.6%, 1.007 45.3%, 1.021 49.4%, 1.027 54% 60.9%, 1.007 83.2%, 1);--pop-ease-menu:linear(0, .0034 0.81%, .0278 2.42%, .097 4.84%, .5361 15.32%, .655 18.55%, .7314, .7964 23.39%, .8662, .9185, .9561, .9818, .9984, 1.0083 42.74%, 1.014 46.77%, 1.0145 53.22%, 1.0053 68.55%, 1.0019 77.42%, .9998 100%);--pop-ease-pop-hover:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-pop-text:linear(0, .0051 0.99%, .0261, .0607 3.61%, .1192 5.26%, .2531 8.21%, .6509 16.1%, .7652 18.73%, .8512, .9232 23.33%, .9881 25.96%, 1.0305 28.26%, 1.0642 30.88%, 1.0782 32.53%, 1.089, 1.094 36.47%, 1.0942, 1.0896 41.07%, 1.0804 43.7%, 1.0354 53.23%, 1.0181 57.5%, 1.0061 61.44%, .9974 65.71%, .9925 70.31%, .991 75.9%, .9996 99.88%);--pop-ease-quick:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-slow:linear(0, .005, .02 2%, .081 4.5%, .469 15.2%, .567, .65, .722 24.4%, .784, .835 31.1%, .878 34.9%, .914 39.1%, .942 43.8%, .964 49.1%, .979 55.4%, .989 62.4%, .995 71.1%, 1);--pop-shadow-xs:0px 1px 2px 0px #1018280d;--pop-shadow-sm:0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;--pop-shadow-md:0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;--pop-shadow-lg:0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808;--pop-shadow-xl:0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;--pop-shadow-2xl:0px 24px 48px -12px #1018282e;--pop-shadow-3xl:0px 32px 48px -12px #10182852;--pop-shadow-4xl:0px 24px 32px -12px #10182847;--pop-radius-none:0;--pop-radius-xxs:.125rem;--pop-radius-xs:.25rem;--pop-radius-sm:.375rem;--pop-radius-md:.5rem;--pop-radius-lg:.625rem;--pop-radius-xl:.75rem;--pop-radius-2xl:1rem;--pop-radius-3xl:1.25rem;--pop-radius-4xl:1.5rem;--pop-radius-full:9999px;--pop-radius:.625rem;--pop-background:oklch(100% 0 0);--pop-foreground:oklch(0% 0 0);--pop-card:oklch(100% 0 0);--pop-card-foreground:oklch(14.5% 0 0);--pop-popover:oklch(100% 0 0);--pop-popover-foreground:oklch(0% 0 0);--pop-primary:oklch(20.5% 0 0);--pop-primary-foreground:oklch(98.5% 0 0);--pop-secondary:oklch(97% 0 0);--pop-secondary-foreground:oklch(20.5% 0 0);--pop-muted:oklch(97% 0 0);--pop-muted-foreground:oklch(71.52% .0233 256.76);--pop-accent:oklch(97% 0 0);--pop-accent-foreground:oklch(20.5% 0 0);--pop-destructive:var(--color-error-600);--pop-border:oklch(11.01% .0763 264.05/.102);--pop-input:oklch(92.2% 0 0);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(64.6% .222 41.116);--pop-chart-2:oklch(60% .118 184.704);--pop-chart-3:oklch(39.8% .07 227.392);--pop-chart-4:oklch(82.8% .189 84.429);--pop-chart-5:oklch(76.9% .188 70.08);--pop-sidebar:oklch(98.5% 0 0);--pop-sidebar-foreground:oklch(14.5% 0 0);--pop-sidebar-primary:oklch(20.5% 0 0);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(97% 0 0);--pop-sidebar-accent-foreground:oklch(20.5% 0 0);--pop-sidebar-border:oklch(92.2% 0 0);--pop-sidebar-ring:oklch(70.8% 0 0);font-family:Inter,sans-serif;font-size:16px}@media (prefers-color-scheme:dark){:host{--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}}:host(.dark){--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}*,:before,:after{box-sizing:inherit}html,body{margin:0;padding:0}svg{display:block}p{margin:0;padding:0}button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}}", pe = "@layer components{.btn{text-align:center;cursor:pointer;border:0;border-radius:4px;justify-content:center;align-items:center;gap:.625rem;height:auto;padding:.625rem 1.25rem;transition:background-color .2s,color .2s;display:flex}.btn-link{border-radius:var(--pop-radius-xs,4px);cursor:pointer;background-color:#0000;border-style:solid;border-color:#0000;justify-content:center;align-items:center;gap:2px;font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.btn-link--size-sm{letter-spacing:-.08px;border-width:1px 2px;font-size:13px;line-height:18px}.btn-link--size-md{letter-spacing:0;border-width:1px 3px;font-size:14px;line-height:20px}.btn-link--size-lg{letter-spacing:0;border-width:1px 4px;font-size:16px;line-height:24px}.btn-link--theme-default{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link--theme-default.btn-link--primary{color:var(--pop-foreground)}.btn-link--theme-white{color:#fff}.btn-link--theme-black{color:#000}.btn-link--theme-default:hover,.btn-link--theme-black:hover{background-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent);border-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent)}.btn-link--theme-default:not(.btn-link--primary):hover{color:var(--pop-foreground)}.btn-link--theme-white:hover{background-color:#ffffff29;border-color:#ffffff29}.btn-link:active{background-color:#0000;border-color:#0000}.btn-link--theme-default:not(.btn-link--primary):active{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link:focus-visible{background-color:var(--pop-ring,#155eef);border-color:var(--pop-ring,#155eef);outline:none;color:#fff!important}.btn-link:disabled,.btn-link.is-disabled{cursor:not-allowed;pointer-events:none;color:color-mix(in srgb, var(--pop-foreground) 35%, transparent)!important;background-color:#0000!important;border-color:#0000!important}.btn:focus-visible{outline-offset:2px;outline:2px solid}}", me = "@layer components{.mask{-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mask-squircle{-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e\")}}", O = !1, k = /* @__PURE__ */ new Set(), A = null, j = null;
|
|
307
|
+
}, pe = "@layer base{:host{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--pop-color-brand-midnight-100:oklch(96.58% .0161 262.75);--pop-color-brand-midnight-900:oklch(15% .03 255.43);--pop-color-brand-midnight-800:oklch(19% .05 255.43);--pop-color-brand-ocean-400:oklch(63% .19 255.43);--pop-color-brand-ocean-100:oklch(91% .05 255.43);--pop-color-brand-forest-900:oklch(38.66% .0698 180.75);--pop-color-brand-forest-700:oklch(45% .15 165.43);--pop-color-brand-forest-100:oklch(97% .04 165.43);--pop-color-brand-highlight-400:oklch(88% .25 105.43);--pop-color-brand-pumpkin-500:oklch(62% .18 45.43);--pop-color-brand-pumpkin-200:oklch(89% .08 45.43);--pop-color-brand-lemon-300:oklch(91% .12 85.43);--pop-color-brand-lemon-100:oklch(97% .04 85.43);--pop-duration-bouncy:1s;--pop-duration-card-highlight:.6s;--pop-duration-gentle:.833s;--pop-duration-menu:.4s;--pop-duration-pop-hover:.6s;--pop-duration-pop-text:.3s;--pop-duration-quick:.833s;--pop-duration-slow:1.167s;--pop-ease-bouncy:linear(0, .011, .045 1.3%, .184 2.7%, .911 7.4%, 1.153 9.4%, 1.301 11.2%, 1.342, 1.362 13%, 1.363, 1.355 14.4%, 1.306 16%, 1.028 21%, .939 23%, .89 24.7%, .876, .868 26.4%, .869, .882 29%, .907 30.5%, 1.014 35.9%, 1.038, 1.048 39.8% 41.1%, 1.043 42.5%, .995 49.3%, .987, .983 53.2%, .984 55.9%, 1.002 62.7%, 1.006 66.4%, .998 79.7%, 1);--pop-ease-card-highlight:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-gentle:linear(0, .007, .026, .059 4.5%, .106 6.3%, .209 9.5%, .558 19.3%, .658, .742, .812, .87, .918, .957, .986 41.6%, 1.007 45.3%, 1.021 49.4%, 1.027 54% 60.9%, 1.007 83.2%, 1);--pop-ease-menu:linear(0, .0034 0.81%, .0278 2.42%, .097 4.84%, .5361 15.32%, .655 18.55%, .7314, .7964 23.39%, .8662, .9185, .9561, .9818, .9984, 1.0083 42.74%, 1.014 46.77%, 1.0145 53.22%, 1.0053 68.55%, 1.0019 77.42%, .9998 100%);--pop-ease-pop-hover:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-pop-text:linear(0, .0051 0.99%, .0261, .0607 3.61%, .1192 5.26%, .2531 8.21%, .6509 16.1%, .7652 18.73%, .8512, .9232 23.33%, .9881 25.96%, 1.0305 28.26%, 1.0642 30.88%, 1.0782 32.53%, 1.089, 1.094 36.47%, 1.0942, 1.0896 41.07%, 1.0804 43.7%, 1.0354 53.23%, 1.0181 57.5%, 1.0061 61.44%, .9974 65.71%, .9925 70.31%, .991 75.9%, .9996 99.88%);--pop-ease-quick:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-slow:linear(0, .005, .02 2%, .081 4.5%, .469 15.2%, .567, .65, .722 24.4%, .784, .835 31.1%, .878 34.9%, .914 39.1%, .942 43.8%, .964 49.1%, .979 55.4%, .989 62.4%, .995 71.1%, 1);--pop-shadow-xs:0px 1px 2px 0px #1018280d;--pop-shadow-sm:0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;--pop-shadow-md:0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;--pop-shadow-lg:0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808;--pop-shadow-xl:0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;--pop-shadow-2xl:0px 24px 48px -12px #1018282e;--pop-shadow-3xl:0px 32px 48px -12px #10182852;--pop-shadow-4xl:0px 24px 32px -12px #10182847;--pop-radius-none:0;--pop-radius-xxs:.125rem;--pop-radius-xs:.25rem;--pop-radius-sm:.375rem;--pop-radius-md:.5rem;--pop-radius-lg:.625rem;--pop-radius-xl:.75rem;--pop-radius-2xl:1rem;--pop-radius-3xl:1.25rem;--pop-radius-4xl:1.5rem;--pop-radius-full:9999px;--pop-radius:.625rem;--pop-background:oklch(100% 0 0);--pop-foreground:oklch(0% 0 0);--pop-card:oklch(100% 0 0);--pop-card-foreground:oklch(14.5% 0 0);--pop-popover:oklch(100% 0 0);--pop-popover-foreground:oklch(0% 0 0);--pop-primary:oklch(20.5% 0 0);--pop-primary-foreground:oklch(98.5% 0 0);--pop-secondary:oklch(97% 0 0);--pop-secondary-foreground:oklch(20.5% 0 0);--pop-muted:oklch(97% 0 0);--pop-muted-foreground:oklch(71.52% .0233 256.76);--pop-accent:oklch(97% 0 0);--pop-accent-foreground:oklch(20.5% 0 0);--pop-destructive:var(--color-error-600);--pop-border:oklch(11.01% .0763 264.05/.102);--pop-input:oklch(92.2% 0 0);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(64.6% .222 41.116);--pop-chart-2:oklch(60% .118 184.704);--pop-chart-3:oklch(39.8% .07 227.392);--pop-chart-4:oklch(82.8% .189 84.429);--pop-chart-5:oklch(76.9% .188 70.08);--pop-sidebar:oklch(98.5% 0 0);--pop-sidebar-foreground:oklch(14.5% 0 0);--pop-sidebar-primary:oklch(20.5% 0 0);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(97% 0 0);--pop-sidebar-accent-foreground:oklch(20.5% 0 0);--pop-sidebar-border:oklch(92.2% 0 0);--pop-sidebar-ring:oklch(70.8% 0 0);font-family:Inter,sans-serif;font-size:16px}@media (prefers-color-scheme:dark){:host{--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}}:host(.dark){--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}*,:before,:after{box-sizing:inherit}html,body{margin:0;padding:0}svg{display:block}p{margin:0;padding:0}button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}}", me = "@layer components{.btn{text-align:center;cursor:pointer;border:0;border-radius:4px;justify-content:center;align-items:center;gap:.625rem;height:auto;padding:.625rem 1.25rem;transition:background-color .2s,color .2s;display:flex}.btn-link{border-radius:var(--pop-radius-xs,4px);cursor:pointer;background-color:#0000;border-style:solid;border-color:#0000;justify-content:center;align-items:center;gap:2px;font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.btn-link--size-sm{letter-spacing:-.08px;border-width:1px 2px;font-size:13px;line-height:18px}.btn-link--size-md{letter-spacing:0;border-width:1px 3px;font-size:14px;line-height:20px}.btn-link--size-lg{letter-spacing:0;border-width:1px 4px;font-size:16px;line-height:24px}.btn-link--theme-default{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link--theme-default.btn-link--primary{color:var(--pop-foreground)}.btn-link--theme-white{color:#fff}.btn-link--theme-black{color:#000}.btn-link--theme-default:hover,.btn-link--theme-black:hover{background-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent);border-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent)}.btn-link--theme-default:not(.btn-link--primary):hover{color:var(--pop-foreground)}.btn-link--theme-white:hover{background-color:#ffffff29;border-color:#ffffff29}.btn-link:active{background-color:#0000;border-color:#0000}.btn-link--theme-default:not(.btn-link--primary):active{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link:focus-visible{background-color:var(--pop-ring,#155eef);border-color:var(--pop-ring,#155eef);outline:none;color:#fff!important}.btn-link:disabled,.btn-link.is-disabled{cursor:not-allowed;pointer-events:none;color:color-mix(in srgb, var(--pop-foreground) 35%, transparent)!important;background-color:#0000!important;border-color:#0000!important}.btn:focus-visible{outline-offset:2px;outline:2px solid}}", he = "@layer components{.mask{-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mask-squircle{-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e\")}}", O = !1, k = /* @__PURE__ */ new Set(), A = null, j = null;
|
|
302
308
|
function M() {
|
|
303
309
|
if (typeof window > "u" || typeof document > "u") return !1;
|
|
304
310
|
let e = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"), t = document.documentElement.classList.contains("light") || document.body.classList.contains("light");
|
|
@@ -314,7 +320,7 @@ function N() {
|
|
|
314
320
|
var P = () => {
|
|
315
321
|
N();
|
|
316
322
|
};
|
|
317
|
-
function
|
|
323
|
+
function ge(e) {
|
|
318
324
|
if (typeof window > "u" || typeof document > "u") return;
|
|
319
325
|
k.size === 0 && (O = M(), A = new MutationObserver(() => {
|
|
320
326
|
N();
|
|
@@ -328,7 +334,7 @@ function he(e) {
|
|
|
328
334
|
let t = O || !!e.closest(".dark");
|
|
329
335
|
e.classList.toggle("dark", t);
|
|
330
336
|
}
|
|
331
|
-
function
|
|
337
|
+
function _e(e) {
|
|
332
338
|
k.delete(e), k.size === 0 && (A &&= (A.disconnect(), null), j &&= (j.removeEventListener("change", P), null));
|
|
333
339
|
}
|
|
334
340
|
//#endregion
|
|
@@ -337,15 +343,15 @@ function F(e) {
|
|
|
337
343
|
let t = new CSSStyleSheet();
|
|
338
344
|
return t.replaceSync(e), t;
|
|
339
345
|
}
|
|
340
|
-
var
|
|
346
|
+
var ve = F(pe), ye = F(me), be = F(he), I = class extends HTMLElement {
|
|
341
347
|
get styleSheets() {
|
|
342
348
|
return [];
|
|
343
349
|
}
|
|
344
350
|
constructor() {
|
|
345
351
|
super(), this.baseStyleSheets = [
|
|
346
|
-
_e,
|
|
347
352
|
ve,
|
|
348
|
-
ye
|
|
353
|
+
ye,
|
|
354
|
+
be
|
|
349
355
|
], this._hasRendered = !1, this._disposables = [], this.events = {}, this.attachShadow({ mode: "open" }), this.shadowRoot && (this.shadowRoot.adoptedStyleSheets = this.styles);
|
|
350
356
|
}
|
|
351
357
|
attributeChangedCallback(e, t, n) {
|
|
@@ -357,12 +363,12 @@ var _e = F(fe), ve = F(pe), ye = F(me), I = class extends HTMLElement {
|
|
|
357
363
|
this._disposables.push(t(e));
|
|
358
364
|
}
|
|
359
365
|
connectedCallback() {
|
|
360
|
-
|
|
366
|
+
ge(this), r(() => {
|
|
361
367
|
this.render(), this._bindEvents(), this.setupEffects();
|
|
362
368
|
});
|
|
363
369
|
}
|
|
364
370
|
disconnectedCallback() {
|
|
365
|
-
|
|
371
|
+
_e(this), this._disposables.forEach((e) => e()), this._disposables = [];
|
|
366
372
|
}
|
|
367
373
|
_bindEvents() {
|
|
368
374
|
let e = this.shadowRoot;
|
|
@@ -423,12 +429,12 @@ function L(e, t, n, r) {
|
|
|
423
429
|
}
|
|
424
430
|
//#endregion
|
|
425
431
|
//#region src/components/pop-auth-panel.ts
|
|
426
|
-
var
|
|
432
|
+
var xe = F("\n :host {\n display: block;\n position: relative;\n\n --pop-auth-border: var(--pop-border, rgba(0, 0, 32, 0.04));\n --pop-auth-watermark: rgba(0, 0, 32, 0.4);\n --pop-auth-btn: #000000;\n --pop-auth-logo: rgba(0, 0, 32, 0.35);\n --pop-auth-error: #dc2626;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --pop-auth-border: var(--pop-border, rgba(255, 255, 255, 0.1));\n --pop-auth-watermark: rgba(255, 255, 255, 0.4);\n --pop-auth-btn: #ffffff;\n --pop-auth-logo: rgba(255, 255, 255, 0.35);\n --pop-auth-error: var(--pop-destructive, #f87171);\n }\n }\n\n :host(.dark) {\n --pop-auth-border: var(--pop-border, rgba(255, 255, 255, 0.1));\n --pop-auth-watermark: rgba(255, 255, 255, 0.4);\n --pop-auth-btn: #ffffff;\n --pop-auth-logo: rgba(255, 255, 255, 0.35);\n --pop-auth-error: var(--pop-destructive, #f87171);\n }\n\n .panel {\n position: relative;\n border-top: 1px solid var(--pop-auth-border);\n }\n\n .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-auth-watermark);\n text-transform: uppercase;\n backdrop-filter: blur(4px);\n border-radius: 9999px;\n padding: 2px 6px;\n pointer-events: none;\n }\n\n .actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n }\n\n .join-btn {\n font-family: Inter, sans-serif;\n font-size: 13px;\n font-weight: 600;\n color: var(--pop-auth-btn);\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n letter-spacing: -0.08px;\n line-height: 18px;\n }\n\n .join-btn:disabled {\n opacity: 0.6;\n cursor: default;\n }\n\n .logo {\n font-family: Inter, sans-serif;\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 1.5px;\n color: var(--pop-auth-logo);\n text-transform: uppercase;\n }\n\n .error {\n padding: 0 16px 12px;\n font-family: Inter, sans-serif;\n font-size: 12px;\n line-height: 16px;\n color: var(--pop-auth-error);\n text-align: center;\n }\n"), R = class extends I {
|
|
427
433
|
constructor(...e) {
|
|
428
434
|
super(...e), this.events = { click: "onClick" };
|
|
429
435
|
}
|
|
430
436
|
get styleSheets() {
|
|
431
|
-
return [
|
|
437
|
+
return [xe];
|
|
432
438
|
}
|
|
433
439
|
onClick(e) {
|
|
434
440
|
e.target.closest(".join-btn") && this.handleJoin();
|
|
@@ -451,8 +457,8 @@ var be = F("\n :host {\n display: block;\n position: relative;\n\n --p
|
|
|
451
457
|
L([C(D)], R.prototype, "gridStore", void 0), customElements.get("pop-auth-panel") || customElements.define("pop-auth-panel", R);
|
|
452
458
|
//#endregion
|
|
453
459
|
//#region src/assets/popgrids-letter-p.png?inline
|
|
454
|
-
var
|
|
455
|
-
function
|
|
460
|
+
var Se = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAABMCAYAAADa6W+wAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUuSURBVHgB5ZyBceIwEEX3bq4AOsAdQAdxKggl+Co4rgKcCkgqgFRAUgGkAqACOxVAKvDpg+VRHEmWQSubuTezg8Ega7UrebWS+UG8jIXEQoZCovI9lcd1ciHHUnZCPsrXXflZ7xkISYSshByEFJ5kLWRO54bsHRGdK+dTYZNkQhbUg4aI6FyRoiNBQyQUGLj3jMJYuleNMC4v1gel67Ig/WCq5Qe144+QlM6Wb2QwGNB4PD7JaDQ6veIzKZLj8XiSPM9Pr/v9nna73UnwWUtyIb+FbMgjM3K0QBzHxXq9Lg6HQ3Et2+22WCwWpzJdr1/KjDzRqLiwZDGbzbwobCLLslNDRFEUrAEmTReBVVCxkLRohIsbICLLiA5roxJdAm9zaIAJXUBmKhCtHtraJjAuNHjBgVrcBcDsFhSXoD4NDbB2VTyyFNI7xSUODTB1UX5hKmA+nxd9Bl0AYxGZ3X9wkdWTJCluARjIYv2ULrG6T3eHhabT6SkY4sASFB1aWx23FJ+IULcqm6MBUKbF+rFO+ZQCje6qa6J8jsjQYv2FTvmMAvb1yWRSXePp6anwzWq1cnb9MQXo6yqwthyZ0Q04y9e5/k9F+VjnCpiGCrckDjCtFV51OpZTWN/lo/4Gxqryd7pvCNckTkS/rI7f39/JN5b6j1TltU10d3dHnKjl+7Y8sHhtpS+iHm3f4JyfS2RIytHvMV4ZdMt+1lvhS9OUaSdu5DUuSFk5l60hksoPWv7QK9I1kb/zjU2HRsuHIFQj17FanusWV4fD4i5I5Ye6k8PhkELAqbxlHDn2os9L5Tm6mUX5vBfKy/s7x/U+Pz9Np7q3/GazqY7VaI+j/Br7zpV/e3urjjmiSUvUWJ3QRkHcqAlHzL58g+iUzAmNLxOboGAgur+/rwYkjgnU6+ur6VROXVpezbLA6hw5A9dMTnDlZRoLinPk8CwTmm85vE76PCdIvRn0ympdQL8YGWI6y0GD1atVGzngaePLrmLua8FAaqEaBTsb7bl4fHy0hbTPdB7pv7AmjYtwraZw0eDu6OuRqrTV7T8+PuhWkHGDhUeqWV0qr43+b6XPI4RVAyYNGyHL+odS+Vz3i1tQ/vn5uUlxnPitO/FL+cL3XzEkFAFmWsjRY28eZnKXTKBQBgY3y6xN8pcM+km0O66wlhZiUMJ1lstlY1yB8y335KU2peUOTKRQtvWTyOGJypJv4FGwmlD42zl4Aq6rZnQhFyxnYYBLXb4YEemXpjlx2ENziSBaTaglncT3nhtgTS23nEkyXYEhdl417KJwtfaUrkCrPPbOhEDdqNBS6ZQcd4HbWOkugN0NIWhhfRhpQR4eM/mlHGujPEvq1ysNOXu4tHzaKidPqLO6XPcFrkCnDgIdy/IYUryYiubkEVV5bSwbSnlgW04mBhqVDxnfh16tVZXXhk8hLW9bVCQGemV5y7VyCkAnUR5APEHmezkL9RxeZ4Oey5qab5yUVxcTuXh5eTGd2lMgnkjjepg/c9JmdYWT2FQJjo3BEsusLqPAbHUV4VpMTNPUZvUFBSYxVMT7vvsGxWH1iDpgTYbbDjzg2i6AXBweMSH77C2hjsAUy/psPLwASce2OD4GuqIA2B4hxzRyrrzHbfBb8I2ZGJKODw8PVeJRxujysXDcw/FYOBKWDhFjLuSeAkV1NlJqn125RjLqqJ+bSOk/VVwSEe9fRSzJQx6Om4T8NgLKiunGSMh8O3QR/Damjmn7hyF14KpxKSM6d49IOa/7u6dX6snfPf0DiVL6IWhCmZ4AAAAASUVORK5CYII=", z = /* @__PURE__ */ "#DDD0BE.#E9DCBB.#E9DCBB.#C7D1B0.#C6D0CB.#E9DCBB.#C7D1B0.#E9DCBB.#DFC2C0.#CFD4C6.#D7E3E8.#CFD4C6.#D6B3B3.#E9DCBB.#CFCBDC.#BFD6D7.#E3D2C6.#D1E2E7.#D6B3B3.#BFD6D7.#E9DCBB.#C7D1B0.#DFC2C0.#D1E2E7.#CFD4C6.#E9DCBB.#D7E3E8.#CFD4C6.#C6D0CB.#E9DCBB.#C7D1B0.#E9DCBB.#CFCBDC.#E3D2C6.#E9DCBB".split("."), Ce = (e) => typeof e == "number" ? z[e % z.length] ?? "#e5e7eb" : z[Math.floor(Math.random() * z.length)];
|
|
461
|
+
function we(e) {
|
|
456
462
|
let t = new TextEncoder().encode(e), n = 2166136261;
|
|
457
463
|
for (let e = 0; e < t.length; e++) {
|
|
458
464
|
let r = t[e] ?? 0;
|
|
@@ -460,14 +466,14 @@ function Ce(e) {
|
|
|
460
466
|
}
|
|
461
467
|
return n >>> 0;
|
|
462
468
|
}
|
|
463
|
-
function
|
|
464
|
-
return z[
|
|
469
|
+
function Te(e) {
|
|
470
|
+
return z[we(e) % z.length] ?? "#e5e7eb";
|
|
465
471
|
}
|
|
466
472
|
//#endregion
|
|
467
473
|
//#region src/components/pop-comment-avatar.ts
|
|
468
|
-
var
|
|
474
|
+
var Ee = F("\n :host {\n display: block;\n\n --comment-avatar-border-size: 1px;\n --comment-avatar-border-color: var(--color-background, #fff);\n --comment-avatar-size: 32px;\n }\n\n .comment-avatar {\n align-items: center;\n display: flex;\n flex-shrink: 0;\n isolation: isolate;\n justify-content: center;\n position: relative;\n width: calc(var(--comment-avatar-size) + calc(var(--comment-avatar-border-size) * 2));\n height: calc(var(--comment-avatar-size) + calc(var(--comment-avatar-border-size) * 2));\n }\n\n .comment-avatar--size-xs {\n --comment-avatar-size: 32px;\n }\n\n .comment-avatar--size-sm {\n --comment-avatar-size: 56px;\n }\n\n .comment-avatar--size-md {\n --comment-avatar-size: 80px;\n }\n\n .comment-avatar--size-lg {\n --comment-avatar-size: 120px;\n }\n\n .comment-avatar--size-xl {\n --comment-avatar-size: 140px;\n }\n\n .comment-avatar__background {\n background-color: var(--comment-avatar-border-color);\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n }\n\n /**\n * Content\n */\n\n .comment-avatar__content {\n align-items: center;\n background-color: var(--color-surface-bg-default);\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n height: var(--comment-avatar-size);\n width: var(--comment-avatar-size);\n z-index: 20;\n\n /* Initials styling */\n font-family: Inter, sans-serif;\n font-weight: 600;\n color: #374151;\n font-size: calc(var(--comment-avatar-size) * 0.35);\n line-height: 1;\n }\n\n .comment-avatar__content::slotted(img) {\n -webkit-user-drag: none;\n align-self: stretch;\n flex: 1 0 0;\n height: var(--comment-avatar-size);\n object-fit: cover;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: var(--comment-avatar-size);\n }\n\n .comment-avatar__deleted-mark {\n -webkit-user-drag: none;\n bottom: -3px;\n height: auto;\n left: 0;\n object-fit: cover;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: 100%;\n transform: scale(0.57);\n }\n"), De = class extends I {
|
|
469
475
|
constructor() {
|
|
470
|
-
super(), this._backgroundColor =
|
|
476
|
+
super(), this._backgroundColor = Ce() ?? "#e5e7eb";
|
|
471
477
|
}
|
|
472
478
|
static get observedAttributes() {
|
|
473
479
|
return [
|
|
@@ -486,7 +492,7 @@ var Te = F("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
486
492
|
this.render();
|
|
487
493
|
}
|
|
488
494
|
get styleSheets() {
|
|
489
|
-
return [
|
|
495
|
+
return [Ee];
|
|
490
496
|
}
|
|
491
497
|
get size() {
|
|
492
498
|
return this.getAttribute("size") || "md";
|
|
@@ -501,7 +507,7 @@ var Te = F("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
501
507
|
e ? this.setAttribute("deleted", "") : this.removeAttribute("deleted");
|
|
502
508
|
}
|
|
503
509
|
getTemplate() {
|
|
504
|
-
let e = this.size, t = this.deleted, n = this.getAttribute("data-color-key"), r = t ? "var(--pop-muted-foreground, #e5e7eb)" : n ?
|
|
510
|
+
let e = this.size, t = this.deleted, n = this.getAttribute("data-color-key"), r = t ? "var(--pop-muted-foreground, #e5e7eb)" : n ? Te(n) : this._backgroundColor;
|
|
505
511
|
return `
|
|
506
512
|
<div class="comment-avatar comment-avatar--size-${e}" part="base">
|
|
507
513
|
<div class="comment-avatar__background mask mask-squircle" part="background"></div>
|
|
@@ -509,7 +515,7 @@ var Te = F("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
509
515
|
class="comment-avatar__content mask mask-squircle"
|
|
510
516
|
part="content"
|
|
511
517
|
style="background-color: ${r}; opacity: 0.15"
|
|
512
|
-
><img class="comment-avatar__deleted-mark" src="${
|
|
518
|
+
><img class="comment-avatar__deleted-mark" src="${Se}" alt="Deleted user" /></div>` : `<slot
|
|
513
519
|
class="comment-avatar__content mask mask-squircle"
|
|
514
520
|
part="content"
|
|
515
521
|
style="background-color: ${r};"
|
|
@@ -518,7 +524,7 @@ var Te = F("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
518
524
|
`;
|
|
519
525
|
}
|
|
520
526
|
};
|
|
521
|
-
customElements.get("pop-comment-avatar") || customElements.define("pop-comment-avatar",
|
|
527
|
+
customElements.get("pop-comment-avatar") || customElements.define("pop-comment-avatar", De);
|
|
522
528
|
//#endregion
|
|
523
529
|
//#region src/helpers/author.ts
|
|
524
530
|
function B(e) {
|
|
@@ -526,12 +532,12 @@ function B(e) {
|
|
|
526
532
|
}
|
|
527
533
|
//#endregion
|
|
528
534
|
//#region src/components/pop-comment-bar.ts
|
|
529
|
-
var
|
|
535
|
+
var Oe = F("\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--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"), ke = "<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>", V = class extends I {
|
|
530
536
|
constructor(...e) {
|
|
531
537
|
super(...e), this.events = { click: "onClick" };
|
|
532
538
|
}
|
|
533
539
|
get styleSheets() {
|
|
534
|
-
return [
|
|
540
|
+
return [Oe];
|
|
535
541
|
}
|
|
536
542
|
onClick(e) {
|
|
537
543
|
e.target.closest(".bar__send") && this.handleSend();
|
|
@@ -589,7 +595,7 @@ var De = F("\n :host {\n background: var(--pop-background);\n border-top:
|
|
|
589
595
|
}
|
|
590
596
|
getTemplate() {
|
|
591
597
|
return `
|
|
592
|
-
<div class="logo-watermark">${
|
|
598
|
+
<div class="logo-watermark">${ke}</div>
|
|
593
599
|
<div class="bar">
|
|
594
600
|
<div class="bar__user">
|
|
595
601
|
<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user">?</pop-comment-avatar>
|
|
@@ -597,22 +603,25 @@ var De = F("\n :host {\n background: var(--pop-background);\n border-top:
|
|
|
597
603
|
<div class="bar__input-wrap">
|
|
598
604
|
<pop-comment-input></pop-comment-input>
|
|
599
605
|
</div>
|
|
600
|
-
<
|
|
601
|
-
|
|
602
|
-
|
|
606
|
+
<pop-comment-icon
|
|
607
|
+
class="bar__send"
|
|
608
|
+
theme="neutral"
|
|
609
|
+
variant="send"
|
|
610
|
+
aria-label="Send comment"
|
|
611
|
+
></pop-comment-icon>
|
|
603
612
|
</div>
|
|
604
613
|
`;
|
|
605
614
|
}
|
|
606
615
|
};
|
|
607
|
-
L([C(D)],
|
|
616
|
+
L([C(D)], V.prototype, "gridStore", void 0), customElements.get("pop-comment-bar") || customElements.define("pop-comment-bar", V);
|
|
608
617
|
//#endregion
|
|
609
618
|
//#region src/components/pop-comment-icon.ts
|
|
610
|
-
var Oe = F("\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 display: none;\n height: calc(100% + 3px);\n inset: -1.5px;\n transform-origin: center;\n transform: scale(var(--pop-comment-icon-scale));\n transition: all 200ms ease-out;\n width: calc(100% + 3px);\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 @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 transition: transform var(--pop-ease-pop-hover) var(--pop-duration-pop-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: 100ms;\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-black);\n --pop-comment-icon-color-active: var(--pop-comment-color-black);\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-hover);\n --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);\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"), ke = class extends I {
|
|
619
|
+
var Ae = F("\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"), je = class extends I {
|
|
611
620
|
constructor(...e) {
|
|
612
621
|
super(...e), this.events = { click: "onClick" };
|
|
613
622
|
}
|
|
614
623
|
get styleSheets() {
|
|
615
|
-
return [
|
|
624
|
+
return [Ae];
|
|
616
625
|
}
|
|
617
626
|
static get observedAttributes() {
|
|
618
627
|
return [
|
|
@@ -622,9 +631,13 @@ var Oe = F("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
622
631
|
"theme",
|
|
623
632
|
"variant",
|
|
624
633
|
"type",
|
|
625
|
-
"disabled"
|
|
634
|
+
"disabled",
|
|
635
|
+
"aria-label"
|
|
626
636
|
];
|
|
627
637
|
}
|
|
638
|
+
onAriaLabelChanged() {
|
|
639
|
+
this.render();
|
|
640
|
+
}
|
|
628
641
|
onCounterChanged() {
|
|
629
642
|
this.render();
|
|
630
643
|
}
|
|
@@ -688,6 +701,12 @@ var Oe = F("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
688
701
|
set disabled(e) {
|
|
689
702
|
e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
690
703
|
}
|
|
704
|
+
get ariaLabel() {
|
|
705
|
+
return this.getAttribute("aria-label");
|
|
706
|
+
}
|
|
707
|
+
set ariaLabel(e) {
|
|
708
|
+
e === null ? this.removeAttribute("aria-label") : this.setAttribute("aria-label", e);
|
|
709
|
+
}
|
|
691
710
|
onClick(e) {
|
|
692
711
|
if (this.disabled) {
|
|
693
712
|
e.preventDefault(), e.stopImmediatePropagation();
|
|
@@ -706,15 +725,18 @@ var Oe = F("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
706
725
|
this.theme ? `comment-icon--theme-${this.theme}` : "",
|
|
707
726
|
this.variant ? `comment-icon--variant-${this.variant}` : ""
|
|
708
727
|
].filter(Boolean).join(" "), n = this.iconUrl ? `<img src="${this.iconUrl}" alt="" class="comment-icon__icon-image" />
|
|
709
|
-
<slot class="comment-icon__icon" name="icon">${this.icon}</slot>` : `<slot class="comment-icon__icon" name="icon">${this.icon}</slot
|
|
728
|
+
<slot class="comment-icon__icon" name="icon">${this.icon}</slot>` : `<slot class="comment-icon__icon" name="icon">${this.icon}</slot>`, r = this.ariaLabel ? `aria-label="${this.ariaLabel}"` : "";
|
|
710
729
|
return `
|
|
711
730
|
<button
|
|
712
731
|
class="${t}"
|
|
713
732
|
part="base"
|
|
714
733
|
type="${this.type}"
|
|
715
734
|
${e}
|
|
735
|
+
${r}
|
|
716
736
|
>
|
|
717
|
-
<pop-focus-indicator
|
|
737
|
+
<pop-focus-indicator
|
|
738
|
+
class="comment-icon__focus-indicator mask mask-squircle"
|
|
739
|
+
></pop-focus-indicator>
|
|
718
740
|
<div class="comment-icon__inner mask mask-squircle">
|
|
719
741
|
<div class="comment-icon__icon-container" part="icon">${n}</div>
|
|
720
742
|
</div>
|
|
@@ -722,10 +744,10 @@ var Oe = F("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
722
744
|
`;
|
|
723
745
|
}
|
|
724
746
|
};
|
|
725
|
-
customElements.get("pop-comment-icon") || customElements.define("pop-comment-icon",
|
|
747
|
+
customElements.get("pop-comment-icon") || customElements.define("pop-comment-icon", je);
|
|
726
748
|
//#endregion
|
|
727
749
|
//#region src/components/pop-comment-input.ts
|
|
728
|
-
var
|
|
750
|
+
var Me = F("\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"), H = class extends I {
|
|
729
751
|
constructor(...e) {
|
|
730
752
|
super(...e), this.events = {
|
|
731
753
|
input: "onInput",
|
|
@@ -733,7 +755,7 @@ var Ae = F("\n :host {\n display: flex;\n flex: 1;\n min-width: 0;\n
|
|
|
733
755
|
};
|
|
734
756
|
}
|
|
735
757
|
get styleSheets() {
|
|
736
|
-
return [
|
|
758
|
+
return [Me];
|
|
737
759
|
}
|
|
738
760
|
onInput(e) {
|
|
739
761
|
let t = e.target;
|
|
@@ -766,15 +788,15 @@ var Ae = F("\n :host {\n display: flex;\n flex: 1;\n min-width: 0;\n
|
|
|
766
788
|
return "\n <textarea rows=\"1\" placeholder=\"Comment\"></textarea>\n ";
|
|
767
789
|
}
|
|
768
790
|
};
|
|
769
|
-
L([C(D)],
|
|
791
|
+
L([C(D)], H.prototype, "gridStore", void 0), customElements.get("pop-comment-input") || customElements.define("pop-comment-input", H);
|
|
770
792
|
//#endregion
|
|
771
793
|
//#region src/components/pop-comment-thread.ts
|
|
772
|
-
var
|
|
794
|
+
var Ne = F("\n :host {\n display: block;\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 padding-left: 30px;\n transition: opacity 0.15s ease;\n width: 100%;\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"), U = 2, W = class extends I {
|
|
773
795
|
constructor(...e) {
|
|
774
796
|
super(...e), this._showAll = !1, this.events = { click: "onClick" };
|
|
775
797
|
}
|
|
776
798
|
get styleSheets() {
|
|
777
|
-
return [
|
|
799
|
+
return [Ne];
|
|
778
800
|
}
|
|
779
801
|
onClick(e) {
|
|
780
802
|
e.target.closest(".thread__more-btn") && (this._showAll = !0, this.render());
|
|
@@ -788,7 +810,7 @@ var je = F("\n :host {\n display: block;\n\n --pop-thread-link: rgba(0, 0
|
|
|
788
810
|
getTemplate() {
|
|
789
811
|
let e = this.getAttribute("comment-id");
|
|
790
812
|
if (!e) return "";
|
|
791
|
-
let t = this.gridStore.repliesFor(e), n = this._showAll || t.length <=
|
|
813
|
+
let t = this.gridStore.repliesFor(e), n = this._showAll || t.length <= U ? t : t.slice(0, U), r = t.length - n.length, i = r > 0 ? `<div class="thread__more">
|
|
792
814
|
<div class="thread__more-dot"></div>
|
|
793
815
|
<button class="thread__more-btn btn-link btn-link--size-sm btn-link--theme-default" type="button">
|
|
794
816
|
Show ${r} more ${r === 1 ? "reply" : "replies"}
|
|
@@ -805,16 +827,16 @@ var je = F("\n :host {\n display: block;\n\n --pop-thread-link: rgba(0, 0
|
|
|
805
827
|
`;
|
|
806
828
|
}
|
|
807
829
|
};
|
|
808
|
-
L([C(D)],
|
|
830
|
+
L([C(D)], W.prototype, "gridStore", void 0), customElements.get("pop-comment-thread") || customElements.define("pop-comment-thread", W);
|
|
809
831
|
//#endregion
|
|
810
832
|
//#region src/helpers/time.ts
|
|
811
|
-
function
|
|
833
|
+
function G(e) {
|
|
812
834
|
let t = e instanceof Date ? e : new Date(e), n = (Date.now() - t.getTime()) / 1e3;
|
|
813
835
|
return n < 1 ? "now" : n < 60 ? `${Math.floor(n)}s` : n < 3600 ? `${Math.floor(n / 60)}m` : n < 86400 ? `${Math.floor(n / 3600)}h` : n < 604800 ? `${Math.floor(n / 86400)}d` : `${Math.floor(n / 604800)}w`;
|
|
814
836
|
}
|
|
815
837
|
//#endregion
|
|
816
838
|
//#region src/components/pop-comment.ts
|
|
817
|
-
var
|
|
839
|
+
var Pe = F("\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"), K = class extends I {
|
|
818
840
|
constructor(...e) {
|
|
819
841
|
super(...e), this.events = { click: "onClick" }, this._expanded = !1, this._dropdownOpen = !1, this._onOutsideClick = (e) => {
|
|
820
842
|
let t = e.composedPath(), n = this.getElement(".comment__dropdown"), r = this.getElement(".comment__menu-trigger");
|
|
@@ -837,7 +859,7 @@ var Me = F("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
837
859
|
return this.size === "sm" ? "xs" : "sm";
|
|
838
860
|
}
|
|
839
861
|
get styleSheets() {
|
|
840
|
-
return [
|
|
862
|
+
return [Pe];
|
|
841
863
|
}
|
|
842
864
|
toggleDropdown() {
|
|
843
865
|
this._dropdownOpen ? this.closeDropdown() : this.openDropdown();
|
|
@@ -926,7 +948,7 @@ var Me = F("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
926
948
|
if (!t) return;
|
|
927
949
|
let n = () => {
|
|
928
950
|
let e = this.getElement(".comment__timestamp");
|
|
929
|
-
e && (e.textContent =
|
|
951
|
+
e && (e.textContent = G(t.createdAt));
|
|
930
952
|
let r = Date.now() - (typeof t.createdAt == "number" ? t.createdAt : Date.parse(String(t.createdAt))), i = 6e4;
|
|
931
953
|
i = r < 6e4 ? 5e3 : r < 36e5 ? 6e4 : 18e5, this._timeUpdateTimer = setTimeout(n, i);
|
|
932
954
|
}, r = Date.now() - (typeof t.createdAt == "number" ? t.createdAt : Date.parse(String(t.createdAt))) < 6e4 ? 5e3 : 6e4;
|
|
@@ -1025,7 +1047,7 @@ var Me = F("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
1025
1047
|
<div class="comment__user-name">
|
|
1026
1048
|
${n ? "[Deleted]" : r ? "[Deleted user]" : t.author?.name ?? ""}
|
|
1027
1049
|
</div>
|
|
1028
|
-
<div class="comment__timestamp">${
|
|
1050
|
+
<div class="comment__timestamp">${G(t.createdAt)}</div>
|
|
1029
1051
|
</div>
|
|
1030
1052
|
${u}
|
|
1031
1053
|
</div>
|
|
@@ -1035,15 +1057,15 @@ var Me = F("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
1035
1057
|
`;
|
|
1036
1058
|
}
|
|
1037
1059
|
};
|
|
1038
|
-
L([C(D)],
|
|
1060
|
+
L([C(D)], K.prototype, "gridStore", void 0), customElements.get("pop-comment") || customElements.define("pop-comment", K);
|
|
1039
1061
|
//#endregion
|
|
1040
1062
|
//#region src/components/pop-feed.ts
|
|
1041
|
-
var
|
|
1063
|
+
var Fe = F("\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: 400px;\n max-width: 400px;\n min-width: 343px;\n opacity: 0;\n overflow: hidden;\n padding: 0 4px 0 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 {\n display: grid;\n grid-template-rows: 1fr 50px;\n }\n\n .feed__content {\n align-items: flex-start;\n align-self: stretch;\n display: flex;\n gap: 8px;\n min-height: 80px;\n max-height: 290px;\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 position: absolute;\n bottom: 0;\n min-height: 50px;\n width: 100%;\n }\n\n .feed__main {\n align-items: stretch;\n align-self: stretch;\n display: flex;\n flex-direction: column;\n flex: 1 0 0;\n gap: 16px;\n min-height: 100%;\n overflow: hidden auto;\n padding: 8px 10px 8px 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"), q = class extends I {
|
|
1042
1064
|
constructor(...e) {
|
|
1043
1065
|
super(...e), this._footerChild = null, this._wasOpen = !1;
|
|
1044
1066
|
}
|
|
1045
1067
|
get styleSheets() {
|
|
1046
|
-
return [
|
|
1068
|
+
return [Fe];
|
|
1047
1069
|
}
|
|
1048
1070
|
connectedCallback() {
|
|
1049
1071
|
super.connectedCallback(), document.addEventListener("mousedown", this), document.addEventListener("keydown", this);
|
|
@@ -1097,69 +1119,120 @@ var Ne = F("\n :host {\n display: flex;\n background: var(--pop-backgroun
|
|
|
1097
1119
|
return "\n <div class=\"feed\">\n <div class=\"feed__content\">\n <div class=\"feed__main\"></div>\n </div>\n <div class=\"feed__footer\"></div>\n </div>\n ";
|
|
1098
1120
|
}
|
|
1099
1121
|
};
|
|
1100
|
-
L([C(D)],
|
|
1122
|
+
L([C(D)], q.prototype, "gridStore", void 0), customElements.get("pop-feed") || customElements.define("pop-feed", q);
|
|
1101
1123
|
//#endregion
|
|
1102
1124
|
//#region node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
|
|
1103
|
-
function
|
|
1125
|
+
function Ie() {
|
|
1104
1126
|
return typeof window < "u";
|
|
1105
1127
|
}
|
|
1106
|
-
function
|
|
1128
|
+
function J(e) {
|
|
1107
1129
|
var t;
|
|
1108
1130
|
return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
|
|
1109
1131
|
}
|
|
1110
|
-
function
|
|
1111
|
-
return
|
|
1132
|
+
function Le(e) {
|
|
1133
|
+
return Ie() ? e instanceof Element || e instanceof J(e).Element : !1;
|
|
1112
1134
|
}
|
|
1113
|
-
var
|
|
1114
|
-
function
|
|
1115
|
-
let t =
|
|
1116
|
-
return
|
|
1135
|
+
var Re = /transform|translate|scale|rotate|perspective|filter/, ze = /paint|layout|strict|content/, Y = (e) => !!e && e !== "none", X;
|
|
1136
|
+
function Be(e) {
|
|
1137
|
+
let t = Le(e) ? He(e) : e;
|
|
1138
|
+
return Y(t.transform) || Y(t.translate) || Y(t.scale) || Y(t.rotate) || Y(t.perspective) || !Ve() && (Y(t.backdropFilter) || Y(t.filter)) || Re.test(t.willChange || "") || ze.test(t.contain || "");
|
|
1117
1139
|
}
|
|
1118
|
-
function
|
|
1119
|
-
return
|
|
1140
|
+
function Ve() {
|
|
1141
|
+
return X ??= typeof CSS < "u" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none"), X;
|
|
1120
1142
|
}
|
|
1121
|
-
function
|
|
1122
|
-
return
|
|
1143
|
+
function He(e) {
|
|
1144
|
+
return J(e).getComputedStyle(e);
|
|
1123
1145
|
}
|
|
1124
1146
|
//#endregion
|
|
1125
1147
|
//#region node_modules/.pnpm/composed-offset-position@0.0.6_@floating-ui+utils@0.2.11/node_modules/composed-offset-position/dist/composed-offset-position.browser.min.mjs
|
|
1126
|
-
function
|
|
1127
|
-
return
|
|
1148
|
+
function Ue(e) {
|
|
1149
|
+
return We(e);
|
|
1128
1150
|
}
|
|
1129
|
-
function
|
|
1151
|
+
function Z(e) {
|
|
1130
1152
|
return e.assignedSlot ? e.assignedSlot : e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode;
|
|
1131
1153
|
}
|
|
1132
|
-
function
|
|
1133
|
-
for (let t = e; t; t =
|
|
1134
|
-
for (let t =
|
|
1154
|
+
function We(e) {
|
|
1155
|
+
for (let t = e; t; t = Z(t)) if (t instanceof Element && getComputedStyle(t).display === "none") return null;
|
|
1156
|
+
for (let t = Z(e); t; t = Z(t)) {
|
|
1135
1157
|
if (!(t instanceof Element)) continue;
|
|
1136
1158
|
let e = getComputedStyle(t);
|
|
1137
|
-
if (e.display !== "contents" && (e.position !== "static" ||
|
|
1159
|
+
if (e.display !== "contents" && (e.position !== "static" || Be(e) || t.tagName === "BODY")) return t;
|
|
1138
1160
|
}
|
|
1139
1161
|
return null;
|
|
1140
1162
|
}
|
|
1141
1163
|
//#endregion
|
|
1142
1164
|
//#region src/components/pop-grid.ts
|
|
1143
|
-
var
|
|
1165
|
+
var Ge = "https://www.popgrids.io", Q = new Set([
|
|
1166
|
+
"start",
|
|
1167
|
+
"center",
|
|
1168
|
+
"end"
|
|
1169
|
+
]), Ke = new Set(["sm", "lg"]), qe = new Set([
|
|
1170
|
+
"auto",
|
|
1171
|
+
"up",
|
|
1172
|
+
"down"
|
|
1173
|
+
]), Je = F("\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"), Ye = class extends I {
|
|
1144
1174
|
constructor(...e) {
|
|
1145
1175
|
super(...e), this._initialized = !1;
|
|
1146
1176
|
}
|
|
1147
1177
|
get styleSheets() {
|
|
1148
|
-
return [
|
|
1178
|
+
return [Je];
|
|
1179
|
+
}
|
|
1180
|
+
static get observedAttributes() {
|
|
1181
|
+
return [
|
|
1182
|
+
"data-align",
|
|
1183
|
+
"data-layout",
|
|
1184
|
+
"data-position",
|
|
1185
|
+
"data-icon",
|
|
1186
|
+
"data-preview-count"
|
|
1187
|
+
];
|
|
1149
1188
|
}
|
|
1150
1189
|
connectedCallback() {
|
|
1151
1190
|
if (this._initialized) return;
|
|
1152
1191
|
this._initialized = !0;
|
|
1153
|
-
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ??
|
|
1192
|
+
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ?? Ge, n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id");
|
|
1154
1193
|
this._store = new D({
|
|
1155
1194
|
apiUrl: t,
|
|
1156
1195
|
publicKey: e,
|
|
1157
1196
|
pageUrl: n,
|
|
1158
1197
|
externalId: r
|
|
1159
|
-
}), ce(this, this._store), super.connectedCallback(), this._store.load().then((n) => {
|
|
1198
|
+
}), ce(this, this._store), super.connectedCallback(), this._store.setOverrides(this._readOverridesFromAttributes()), this._store.load().then((n) => {
|
|
1160
1199
|
n && b(t, e);
|
|
1161
1200
|
});
|
|
1162
1201
|
}
|
|
1202
|
+
_readOverridesFromAttributes() {
|
|
1203
|
+
let e = {}, t = this.getAttribute("data-align");
|
|
1204
|
+
t && Q.has(t) && (e.align = t);
|
|
1205
|
+
let n = this.getAttribute("data-layout");
|
|
1206
|
+
n && Ke.has(n) && (e.layout = n);
|
|
1207
|
+
let r = this.getAttribute("data-position");
|
|
1208
|
+
r && qe.has(r) && (e.position = r);
|
|
1209
|
+
let i = this.getAttribute("data-icon");
|
|
1210
|
+
i && (e.icon = i);
|
|
1211
|
+
let a = this.getAttribute("data-preview-count");
|
|
1212
|
+
if (a !== null) {
|
|
1213
|
+
let t = Number(a);
|
|
1214
|
+
Number.isInteger(t) && t > 0 && (e.previewCount = t);
|
|
1215
|
+
}
|
|
1216
|
+
return e;
|
|
1217
|
+
}
|
|
1218
|
+
_applyOverridesFromAttributes() {
|
|
1219
|
+
this._store && this._store.setOverrides(this._readOverridesFromAttributes());
|
|
1220
|
+
}
|
|
1221
|
+
onDataAlignChanged() {
|
|
1222
|
+
this._applyOverridesFromAttributes();
|
|
1223
|
+
}
|
|
1224
|
+
onDataLayoutChanged() {
|
|
1225
|
+
this._applyOverridesFromAttributes();
|
|
1226
|
+
}
|
|
1227
|
+
onDataPositionChanged() {
|
|
1228
|
+
this._applyOverridesFromAttributes();
|
|
1229
|
+
}
|
|
1230
|
+
onDataIconChanged() {
|
|
1231
|
+
this._applyOverridesFromAttributes();
|
|
1232
|
+
}
|
|
1233
|
+
onDataPreviewCountChanged() {
|
|
1234
|
+
this._applyOverridesFromAttributes();
|
|
1235
|
+
}
|
|
1163
1236
|
disconnectedCallback() {
|
|
1164
1237
|
this._floatingCleanup?.(), this._store.destroy(), le(this), super.disconnectedCallback();
|
|
1165
1238
|
}
|
|
@@ -1189,7 +1262,7 @@ var Ue = F("\n :host {\n display: block;\n position: relative;\n }\n\n
|
|
|
1189
1262
|
fallbackStrategy: "bestFit",
|
|
1190
1263
|
padding: 16
|
|
1191
1264
|
}));
|
|
1192
|
-
let u = (e) => c.getOffsetParent(e,
|
|
1265
|
+
let u = (e) => c.getOffsetParent(e, Ue), d = () => {
|
|
1193
1266
|
a(t, n, {
|
|
1194
1267
|
placement: r.position === "down" ? "bottom-start" : "top-start",
|
|
1195
1268
|
middleware: l,
|
|
@@ -1212,15 +1285,15 @@ var Ue = F("\n :host {\n display: block;\n position: relative;\n }\n\n
|
|
|
1212
1285
|
return "\n <div class=\"grid\">\n <pop-widget></pop-widget>\n <pop-feed></pop-feed>\n </div>\n ";
|
|
1213
1286
|
}
|
|
1214
1287
|
};
|
|
1215
|
-
customElements.get("pop-grid") || customElements.define("pop-grid",
|
|
1288
|
+
customElements.get("pop-grid") || customElements.define("pop-grid", Ye);
|
|
1216
1289
|
//#endregion
|
|
1217
1290
|
//#region src/components/pop-widget.ts
|
|
1218
|
-
var
|
|
1291
|
+
var Xe = F("\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"), $ = class extends I {
|
|
1219
1292
|
constructor(...e) {
|
|
1220
1293
|
super(...e), this.events = { click: "onClick" };
|
|
1221
1294
|
}
|
|
1222
1295
|
get styleSheets() {
|
|
1223
|
-
return [
|
|
1296
|
+
return [Xe];
|
|
1224
1297
|
}
|
|
1225
1298
|
onClick() {
|
|
1226
1299
|
this.gridStore.error.value || (this.gridStore.open.value = !this.gridStore.open.value);
|
|
@@ -1235,14 +1308,14 @@ var Ge = F("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
1235
1308
|
getTemplate() {
|
|
1236
1309
|
if (this.gridStore.loading.value) return "<div class=\"widget\"><div class=\"skeleton mask mask-squircle\"></div></div>";
|
|
1237
1310
|
if (this.gridStore.error.value) return "<div class=\"error-badge\">Error: there was a problem loading the PopGrid</div>";
|
|
1238
|
-
let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length;
|
|
1311
|
+
let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length, n = this.gridStore.grid.value, r = n?.layout === "lg" ? "md" : "xs", i = n?.icon === "brand" ? "brand" : "neutral";
|
|
1239
1312
|
return `
|
|
1240
1313
|
<div class="widget">
|
|
1241
1314
|
${e.map((t, n) => {
|
|
1242
|
-
let
|
|
1243
|
-
return t?.image ? `<pop-comment-avatar size="
|
|
1315
|
+
let i = e.length + n, a = t?.id ?? t?.name ?? "";
|
|
1316
|
+
return t?.image ? `<pop-comment-avatar size="${r}" style="z-index: ${i}" data-color-key="${a}">
|
|
1244
1317
|
<img src="${t.image}" alt="${t.name ?? "User"}" />
|
|
1245
|
-
</pop-comment-avatar>` : `<pop-comment-avatar size="
|
|
1318
|
+
</pop-comment-avatar>` : `<pop-comment-avatar size="${r}" style="z-index: ${i}" data-color-key="${a}">
|
|
1246
1319
|
${B(t?.name)}
|
|
1247
1320
|
</pop-comment-avatar>`;
|
|
1248
1321
|
}).join("")}
|
|
@@ -1254,6 +1327,7 @@ var Ge = F("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
1254
1327
|
</div>
|
|
1255
1328
|
</span>
|
|
1256
1329
|
</div>
|
|
1330
|
+
<pop-comment-icon variant="add" theme="${i}" size="xs"></pop-comment-icon>
|
|
1257
1331
|
</div>
|
|
1258
1332
|
`;
|
|
1259
1333
|
}
|