@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/embed.js
CHANGED
|
@@ -383,9 +383,12 @@ var be = 3e4, xe = 3, Se = (e) => {
|
|
|
383
383
|
}, Ce = (e, t) => {
|
|
384
384
|
let n = e?.previewCount ?? t;
|
|
385
385
|
return n > 0 ? n : xe;
|
|
386
|
+
}, we = (e, t) => e && {
|
|
387
|
+
...e,
|
|
388
|
+
...t
|
|
386
389
|
}, k = class {
|
|
387
390
|
constructor(e) {
|
|
388
|
-
this.previewCount = xe, this.
|
|
391
|
+
this.previewCount = xe, this._fetchedGrid = p(null), this._overrides = p({}), this.grid = v(() => we(this._fetchedGrid.value, this._overrides.value)), this.comments = p([]), this.loading = p(!0), this.error = p(null), this.open = p(!1), this.replyingTo = p(null), this.editingCommentId = p(null), this.scrollingCommentId = p(null), this.socket = null, this.reconnectAttempt = 0, this.reconnectTimer = null, this.disposed = !1, this.topLevelComments = v(() => this.comments.value.filter((e) => e.parentCommentId === null).sort((e, t) => String(e.sortKey).localeCompare(String(t.sortKey)))), this.replyingToComment = v(() => {
|
|
389
392
|
let e = this.replyingTo.value;
|
|
390
393
|
return e ? this.comments.value.find((t) => t.id === e) ?? null : null;
|
|
391
394
|
}), this.editingComment = v(() => {
|
|
@@ -400,6 +403,9 @@ var be = 3e4, xe = 3, Se = (e) => {
|
|
|
400
403
|
return n.reverse();
|
|
401
404
|
}), this.apiUrl = e.apiUrl, this.publicKey = e.publicKey, this.pageUrl = e.pageUrl, this.externalId = e.externalId?.trim() || null;
|
|
402
405
|
}
|
|
406
|
+
setOverrides(e) {
|
|
407
|
+
this._overrides.value = e;
|
|
408
|
+
}
|
|
403
409
|
identityParams() {
|
|
404
410
|
let e = new URLSearchParams({ pageUrl: this.pageUrl });
|
|
405
411
|
return this.externalId && e.set("externalId", this.externalId), e.toString();
|
|
@@ -414,7 +420,7 @@ var be = 3e4, xe = 3, Se = (e) => {
|
|
|
414
420
|
let e = await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}`, { credentials: "include" });
|
|
415
421
|
if (!e.ok) return this.error.value = "There was a problem loading the PopGrid", !1;
|
|
416
422
|
let t = await e.json();
|
|
417
|
-
this.
|
|
423
|
+
this._fetchedGrid.value = t.grid, this.connectRealtime();
|
|
418
424
|
let n = await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments?${this.identityParams()}`, { credentials: "include" });
|
|
419
425
|
if (n.ok) {
|
|
420
426
|
let e = await n.json();
|
|
@@ -531,38 +537,38 @@ var be = 3e4, xe = 3, Se = (e) => {
|
|
|
531
537
|
updateCommentInList(e) {
|
|
532
538
|
this.comments.value = this.comments.value.map((t) => t.id === e.id ? e : t);
|
|
533
539
|
}
|
|
534
|
-
}, we = "@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}}", Te = "@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}}", Ee = "@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\")}}", De = !1, A = /* @__PURE__ */ new Set(), j = null, M = null;
|
|
535
|
-
function
|
|
540
|
+
}, Te = "@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}}", Ee = "@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}}", De = "@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\")}}", Oe = !1, A = /* @__PURE__ */ new Set(), j = null, M = null;
|
|
541
|
+
function ke() {
|
|
536
542
|
if (typeof window > "u" || typeof document > "u") return !1;
|
|
537
543
|
let e = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"), t = document.documentElement.classList.contains("light") || document.body.classList.contains("light");
|
|
538
544
|
return e ? !0 : t ? !1 : (M ||= window.matchMedia("(prefers-color-scheme: dark)"), M.matches);
|
|
539
545
|
}
|
|
540
|
-
function
|
|
541
|
-
let e =
|
|
542
|
-
e !==
|
|
543
|
-
let t =
|
|
546
|
+
function Ae() {
|
|
547
|
+
let e = ke();
|
|
548
|
+
e !== Oe && (Oe = e, A.forEach((e) => {
|
|
549
|
+
let t = Oe || !!e.closest(".dark");
|
|
544
550
|
e.classList.toggle("dark", t);
|
|
545
551
|
}));
|
|
546
552
|
}
|
|
547
|
-
var
|
|
548
|
-
|
|
553
|
+
var je = () => {
|
|
554
|
+
Ae();
|
|
549
555
|
};
|
|
550
|
-
function
|
|
556
|
+
function Me(e) {
|
|
551
557
|
if (typeof window > "u" || typeof document > "u") return;
|
|
552
|
-
A.size === 0 && (
|
|
553
|
-
|
|
558
|
+
A.size === 0 && (Oe = ke(), j = new MutationObserver(() => {
|
|
559
|
+
Ae();
|
|
554
560
|
}), j.observe(document.documentElement, {
|
|
555
561
|
attributes: !0,
|
|
556
562
|
attributeFilter: ["class"]
|
|
557
563
|
}), j.observe(document.body, {
|
|
558
564
|
attributes: !0,
|
|
559
565
|
attributeFilter: ["class"]
|
|
560
|
-
}), M = window.matchMedia("(prefers-color-scheme: dark)"), M.addEventListener("change",
|
|
561
|
-
let t =
|
|
566
|
+
}), M = window.matchMedia("(prefers-color-scheme: dark)"), M.addEventListener("change", je)), A.add(e);
|
|
567
|
+
let t = Oe || !!e.closest(".dark");
|
|
562
568
|
e.classList.toggle("dark", t);
|
|
563
569
|
}
|
|
564
|
-
function
|
|
565
|
-
A.delete(e), A.size === 0 && (j &&= (j.disconnect(), null), M &&= (M.removeEventListener("change",
|
|
570
|
+
function Ne(e) {
|
|
571
|
+
A.delete(e), A.size === 0 && (j &&= (j.disconnect(), null), M &&= (M.removeEventListener("change", je), null));
|
|
566
572
|
}
|
|
567
573
|
//#endregion
|
|
568
574
|
//#region src/components/base-element.ts
|
|
@@ -570,15 +576,15 @@ function N(e) {
|
|
|
570
576
|
let t = new CSSStyleSheet();
|
|
571
577
|
return t.replaceSync(e), t;
|
|
572
578
|
}
|
|
573
|
-
var
|
|
579
|
+
var Pe = N(Te), Fe = N(Ee), Ie = N(De), P = class extends HTMLElement {
|
|
574
580
|
get styleSheets() {
|
|
575
581
|
return [];
|
|
576
582
|
}
|
|
577
583
|
constructor() {
|
|
578
584
|
super(), this.baseStyleSheets = [
|
|
579
|
-
Ne,
|
|
580
585
|
Pe,
|
|
581
|
-
Fe
|
|
586
|
+
Fe,
|
|
587
|
+
Ie
|
|
582
588
|
], this._hasRendered = !1, this._disposables = [], this.events = {}, this.attachShadow({ mode: "open" }), this.shadowRoot && (this.shadowRoot.adoptedStyleSheets = this.styles);
|
|
583
589
|
}
|
|
584
590
|
attributeChangedCallback(e, t, n) {
|
|
@@ -590,12 +596,12 @@ var Ne = N(we), Pe = N(Te), Fe = N(Ee), P = class extends HTMLElement {
|
|
|
590
596
|
this._disposables.push(ee(e));
|
|
591
597
|
}
|
|
592
598
|
connectedCallback() {
|
|
593
|
-
|
|
599
|
+
Me(this), r(() => {
|
|
594
600
|
this.render(), this._bindEvents(), this.setupEffects();
|
|
595
601
|
});
|
|
596
602
|
}
|
|
597
603
|
disconnectedCallback() {
|
|
598
|
-
|
|
604
|
+
Ne(this), this._disposables.forEach((e) => e()), this._disposables = [];
|
|
599
605
|
}
|
|
600
606
|
_bindEvents() {
|
|
601
607
|
let e = this.shadowRoot;
|
|
@@ -656,12 +662,12 @@ function F(e, t, n, r) {
|
|
|
656
662
|
}
|
|
657
663
|
//#endregion
|
|
658
664
|
//#region src/components/pop-auth-panel.ts
|
|
659
|
-
var
|
|
665
|
+
var Le = N("\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"), Re = class extends P {
|
|
660
666
|
constructor(...e) {
|
|
661
667
|
super(...e), this.events = { click: "onClick" };
|
|
662
668
|
}
|
|
663
669
|
get styleSheets() {
|
|
664
|
-
return [
|
|
670
|
+
return [Le];
|
|
665
671
|
}
|
|
666
672
|
onClick(e) {
|
|
667
673
|
e.target.closest(".join-btn") && this.handleJoin();
|
|
@@ -681,11 +687,11 @@ var Ie = N("\n :host {\n display: block;\n position: relative;\n\n --p
|
|
|
681
687
|
return "\n <div class=\"panel\">\n <div class=\"watermark\">Popgrids</div>\n <div class=\"actions\">\n <button class=\"join-btn\" type=\"button\">Join the Conversation</button>\n <span class=\"logo\">POPGRIDS</span>\n </div>\n <div class=\"error\" hidden></div>\n </div>\n ";
|
|
682
688
|
}
|
|
683
689
|
};
|
|
684
|
-
F([O(k)],
|
|
690
|
+
F([O(k)], Re.prototype, "gridStore", void 0), customElements.get("pop-auth-panel") || customElements.define("pop-auth-panel", Re);
|
|
685
691
|
//#endregion
|
|
686
692
|
//#region src/assets/popgrids-letter-p.png?inline
|
|
687
|
-
var
|
|
688
|
-
function
|
|
693
|
+
var ze = "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=", I = /* @__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("."), Be = (e) => typeof e == "number" ? I[e % I.length] ?? "#e5e7eb" : I[Math.floor(Math.random() * I.length)];
|
|
694
|
+
function Ve(e) {
|
|
689
695
|
let t = new TextEncoder().encode(e), n = 2166136261;
|
|
690
696
|
for (let e = 0; e < t.length; e++) {
|
|
691
697
|
let r = t[e] ?? 0;
|
|
@@ -693,14 +699,14 @@ function Be(e) {
|
|
|
693
699
|
}
|
|
694
700
|
return n >>> 0;
|
|
695
701
|
}
|
|
696
|
-
function
|
|
697
|
-
return I[
|
|
702
|
+
function He(e) {
|
|
703
|
+
return I[Ve(e) % I.length] ?? "#e5e7eb";
|
|
698
704
|
}
|
|
699
705
|
//#endregion
|
|
700
706
|
//#region src/components/pop-comment-avatar.ts
|
|
701
|
-
var
|
|
707
|
+
var Ue = N("\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"), We = class extends P {
|
|
702
708
|
constructor() {
|
|
703
|
-
super(), this._backgroundColor =
|
|
709
|
+
super(), this._backgroundColor = Be() ?? "#e5e7eb";
|
|
704
710
|
}
|
|
705
711
|
static get observedAttributes() {
|
|
706
712
|
return [
|
|
@@ -719,7 +725,7 @@ var He = N("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
719
725
|
this.render();
|
|
720
726
|
}
|
|
721
727
|
get styleSheets() {
|
|
722
|
-
return [
|
|
728
|
+
return [Ue];
|
|
723
729
|
}
|
|
724
730
|
get size() {
|
|
725
731
|
return this.getAttribute("size") || "md";
|
|
@@ -734,7 +740,7 @@ var He = N("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
734
740
|
e ? this.setAttribute("deleted", "") : this.removeAttribute("deleted");
|
|
735
741
|
}
|
|
736
742
|
getTemplate() {
|
|
737
|
-
let e = this.size, t = this.deleted, n = this.getAttribute("data-color-key"), r = t ? "var(--pop-muted-foreground, #e5e7eb)" : n ?
|
|
743
|
+
let e = this.size, t = this.deleted, n = this.getAttribute("data-color-key"), r = t ? "var(--pop-muted-foreground, #e5e7eb)" : n ? He(n) : this._backgroundColor;
|
|
738
744
|
return `
|
|
739
745
|
<div class="comment-avatar comment-avatar--size-${e}" part="base">
|
|
740
746
|
<div class="comment-avatar__background mask mask-squircle" part="background"></div>
|
|
@@ -742,7 +748,7 @@ var He = N("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
742
748
|
class="comment-avatar__content mask mask-squircle"
|
|
743
749
|
part="content"
|
|
744
750
|
style="background-color: ${r}; opacity: 0.15"
|
|
745
|
-
><img class="comment-avatar__deleted-mark" src="${
|
|
751
|
+
><img class="comment-avatar__deleted-mark" src="${ze}" alt="Deleted user" /></div>` : `<slot
|
|
746
752
|
class="comment-avatar__content mask mask-squircle"
|
|
747
753
|
part="content"
|
|
748
754
|
style="background-color: ${r};"
|
|
@@ -751,7 +757,7 @@ var He = N("\n :host {\n display: block;\n\n --comment-avatar-border-size
|
|
|
751
757
|
`;
|
|
752
758
|
}
|
|
753
759
|
};
|
|
754
|
-
customElements.get("pop-comment-avatar") || customElements.define("pop-comment-avatar",
|
|
760
|
+
customElements.get("pop-comment-avatar") || customElements.define("pop-comment-avatar", We);
|
|
755
761
|
//#endregion
|
|
756
762
|
//#region src/helpers/author.ts
|
|
757
763
|
function L(e) {
|
|
@@ -759,12 +765,12 @@ function L(e) {
|
|
|
759
765
|
}
|
|
760
766
|
//#endregion
|
|
761
767
|
//#region src/components/pop-comment-bar.ts
|
|
762
|
-
var
|
|
768
|
+
var Ge = N("\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>", qe = class extends P {
|
|
763
769
|
constructor(...e) {
|
|
764
770
|
super(...e), this.events = { click: "onClick" };
|
|
765
771
|
}
|
|
766
772
|
get styleSheets() {
|
|
767
|
-
return [
|
|
773
|
+
return [Ge];
|
|
768
774
|
}
|
|
769
775
|
onClick(e) {
|
|
770
776
|
e.target.closest(".bar__send") && this.handleSend();
|
|
@@ -822,7 +828,7 @@ var We = N("\n :host {\n background: var(--pop-background);\n border-top:
|
|
|
822
828
|
}
|
|
823
829
|
getTemplate() {
|
|
824
830
|
return `
|
|
825
|
-
<div class="logo-watermark">${
|
|
831
|
+
<div class="logo-watermark">${Ke}</div>
|
|
826
832
|
<div class="bar">
|
|
827
833
|
<div class="bar__user">
|
|
828
834
|
<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user">?</pop-comment-avatar>
|
|
@@ -830,22 +836,25 @@ var We = N("\n :host {\n background: var(--pop-background);\n border-top:
|
|
|
830
836
|
<div class="bar__input-wrap">
|
|
831
837
|
<pop-comment-input></pop-comment-input>
|
|
832
838
|
</div>
|
|
833
|
-
<
|
|
834
|
-
|
|
835
|
-
|
|
839
|
+
<pop-comment-icon
|
|
840
|
+
class="bar__send"
|
|
841
|
+
theme="neutral"
|
|
842
|
+
variant="send"
|
|
843
|
+
aria-label="Send comment"
|
|
844
|
+
></pop-comment-icon>
|
|
836
845
|
</div>
|
|
837
846
|
`;
|
|
838
847
|
}
|
|
839
848
|
};
|
|
840
|
-
F([O(k)],
|
|
849
|
+
F([O(k)], qe.prototype, "gridStore", void 0), customElements.get("pop-comment-bar") || customElements.define("pop-comment-bar", qe);
|
|
841
850
|
//#endregion
|
|
842
851
|
//#region src/components/pop-comment-icon.ts
|
|
843
|
-
var qe = N("\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"), Je = class extends P {
|
|
852
|
+
var Je = N("\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"), Ye = class extends P {
|
|
844
853
|
constructor(...e) {
|
|
845
854
|
super(...e), this.events = { click: "onClick" };
|
|
846
855
|
}
|
|
847
856
|
get styleSheets() {
|
|
848
|
-
return [
|
|
857
|
+
return [Je];
|
|
849
858
|
}
|
|
850
859
|
static get observedAttributes() {
|
|
851
860
|
return [
|
|
@@ -855,9 +864,13 @@ var qe = N("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
855
864
|
"theme",
|
|
856
865
|
"variant",
|
|
857
866
|
"type",
|
|
858
|
-
"disabled"
|
|
867
|
+
"disabled",
|
|
868
|
+
"aria-label"
|
|
859
869
|
];
|
|
860
870
|
}
|
|
871
|
+
onAriaLabelChanged() {
|
|
872
|
+
this.render();
|
|
873
|
+
}
|
|
861
874
|
onCounterChanged() {
|
|
862
875
|
this.render();
|
|
863
876
|
}
|
|
@@ -921,6 +934,12 @@ var qe = N("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
921
934
|
set disabled(e) {
|
|
922
935
|
e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
923
936
|
}
|
|
937
|
+
get ariaLabel() {
|
|
938
|
+
return this.getAttribute("aria-label");
|
|
939
|
+
}
|
|
940
|
+
set ariaLabel(e) {
|
|
941
|
+
e === null ? this.removeAttribute("aria-label") : this.setAttribute("aria-label", e);
|
|
942
|
+
}
|
|
924
943
|
onClick(e) {
|
|
925
944
|
if (this.disabled) {
|
|
926
945
|
e.preventDefault(), e.stopImmediatePropagation();
|
|
@@ -939,15 +958,18 @@ var qe = N("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
939
958
|
this.theme ? `comment-icon--theme-${this.theme}` : "",
|
|
940
959
|
this.variant ? `comment-icon--variant-${this.variant}` : ""
|
|
941
960
|
].filter(Boolean).join(" "), n = this.iconUrl ? `<img src="${this.iconUrl}" alt="" class="comment-icon__icon-image" />
|
|
942
|
-
<slot class="comment-icon__icon" name="icon">${this.icon}</slot>` : `<slot class="comment-icon__icon" name="icon">${this.icon}</slot
|
|
961
|
+
<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}"` : "";
|
|
943
962
|
return `
|
|
944
963
|
<button
|
|
945
964
|
class="${t}"
|
|
946
965
|
part="base"
|
|
947
966
|
type="${this.type}"
|
|
948
967
|
${e}
|
|
968
|
+
${r}
|
|
949
969
|
>
|
|
950
|
-
<pop-focus-indicator
|
|
970
|
+
<pop-focus-indicator
|
|
971
|
+
class="comment-icon__focus-indicator mask mask-squircle"
|
|
972
|
+
></pop-focus-indicator>
|
|
951
973
|
<div class="comment-icon__inner mask mask-squircle">
|
|
952
974
|
<div class="comment-icon__icon-container" part="icon">${n}</div>
|
|
953
975
|
</div>
|
|
@@ -955,10 +977,10 @@ var qe = N("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
955
977
|
`;
|
|
956
978
|
}
|
|
957
979
|
};
|
|
958
|
-
customElements.get("pop-comment-icon") || customElements.define("pop-comment-icon",
|
|
980
|
+
customElements.get("pop-comment-icon") || customElements.define("pop-comment-icon", Ye);
|
|
959
981
|
//#endregion
|
|
960
982
|
//#region src/components/pop-comment-input.ts
|
|
961
|
-
var
|
|
983
|
+
var Xe = N("\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"), Ze = class extends P {
|
|
962
984
|
constructor(...e) {
|
|
963
985
|
super(...e), this.events = {
|
|
964
986
|
input: "onInput",
|
|
@@ -966,7 +988,7 @@ var Ye = N("\n :host {\n display: flex;\n flex: 1;\n min-width: 0;\n
|
|
|
966
988
|
};
|
|
967
989
|
}
|
|
968
990
|
get styleSheets() {
|
|
969
|
-
return [
|
|
991
|
+
return [Xe];
|
|
970
992
|
}
|
|
971
993
|
onInput(e) {
|
|
972
994
|
let t = e.target;
|
|
@@ -999,15 +1021,15 @@ var Ye = N("\n :host {\n display: flex;\n flex: 1;\n min-width: 0;\n
|
|
|
999
1021
|
return "\n <textarea rows=\"1\" placeholder=\"Comment\"></textarea>\n ";
|
|
1000
1022
|
}
|
|
1001
1023
|
};
|
|
1002
|
-
F([O(k)],
|
|
1024
|
+
F([O(k)], Ze.prototype, "gridStore", void 0), customElements.get("pop-comment-input") || customElements.define("pop-comment-input", Ze);
|
|
1003
1025
|
//#endregion
|
|
1004
1026
|
//#region src/components/pop-comment-thread.ts
|
|
1005
|
-
var
|
|
1027
|
+
var Qe = N("\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"), $e = 2, et = class extends P {
|
|
1006
1028
|
constructor(...e) {
|
|
1007
1029
|
super(...e), this._showAll = !1, this.events = { click: "onClick" };
|
|
1008
1030
|
}
|
|
1009
1031
|
get styleSheets() {
|
|
1010
|
-
return [
|
|
1032
|
+
return [Qe];
|
|
1011
1033
|
}
|
|
1012
1034
|
onClick(e) {
|
|
1013
1035
|
e.target.closest(".thread__more-btn") && (this._showAll = !0, this.render());
|
|
@@ -1021,7 +1043,7 @@ var Ze = N("\n :host {\n display: block;\n\n --pop-thread-link: rgba(0, 0
|
|
|
1021
1043
|
getTemplate() {
|
|
1022
1044
|
let e = this.getAttribute("comment-id");
|
|
1023
1045
|
if (!e) return "";
|
|
1024
|
-
let t = this.gridStore.repliesFor(e), n = this._showAll || t.length <=
|
|
1046
|
+
let t = this.gridStore.repliesFor(e), n = this._showAll || t.length <= $e ? t : t.slice(0, $e), r = t.length - n.length, i = r > 0 ? `<div class="thread__more">
|
|
1025
1047
|
<div class="thread__more-dot"></div>
|
|
1026
1048
|
<button class="thread__more-btn btn-link btn-link--size-sm btn-link--theme-default" type="button">
|
|
1027
1049
|
Show ${r} more ${r === 1 ? "reply" : "replies"}
|
|
@@ -1038,84 +1060,84 @@ var Ze = N("\n :host {\n display: block;\n\n --pop-thread-link: rgba(0, 0
|
|
|
1038
1060
|
`;
|
|
1039
1061
|
}
|
|
1040
1062
|
};
|
|
1041
|
-
F([O(k)],
|
|
1063
|
+
F([O(k)], et.prototype, "gridStore", void 0), customElements.get("pop-comment-thread") || customElements.define("pop-comment-thread", et);
|
|
1042
1064
|
//#endregion
|
|
1043
1065
|
//#region src/helpers/time.ts
|
|
1044
|
-
function
|
|
1066
|
+
function tt(e) {
|
|
1045
1067
|
let t = e instanceof Date ? e : new Date(e), n = (Date.now() - t.getTime()) / 1e3;
|
|
1046
1068
|
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`;
|
|
1047
1069
|
}
|
|
1048
1070
|
//#endregion
|
|
1049
1071
|
//#region node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
|
|
1050
|
-
var
|
|
1072
|
+
var nt = Math.min, R = Math.max, rt = Math.round, it = Math.floor, z = (e) => ({
|
|
1051
1073
|
x: e,
|
|
1052
1074
|
y: e
|
|
1053
|
-
}),
|
|
1075
|
+
}), at = {
|
|
1054
1076
|
left: "right",
|
|
1055
1077
|
right: "left",
|
|
1056
1078
|
bottom: "top",
|
|
1057
1079
|
top: "bottom"
|
|
1058
1080
|
};
|
|
1059
|
-
function
|
|
1060
|
-
return R(e,
|
|
1081
|
+
function ot(e, t, n) {
|
|
1082
|
+
return R(e, nt(t, n));
|
|
1061
1083
|
}
|
|
1062
|
-
function
|
|
1084
|
+
function st(e, t) {
|
|
1063
1085
|
return typeof e == "function" ? e(t) : e;
|
|
1064
1086
|
}
|
|
1065
1087
|
function B(e) {
|
|
1066
1088
|
return e.split("-")[0];
|
|
1067
1089
|
}
|
|
1068
|
-
function
|
|
1090
|
+
function ct(e) {
|
|
1069
1091
|
return e.split("-")[1];
|
|
1070
1092
|
}
|
|
1071
|
-
function
|
|
1093
|
+
function lt(e) {
|
|
1072
1094
|
return e === "x" ? "y" : "x";
|
|
1073
1095
|
}
|
|
1074
|
-
function
|
|
1096
|
+
function ut(e) {
|
|
1075
1097
|
return e === "y" ? "height" : "width";
|
|
1076
1098
|
}
|
|
1077
1099
|
function V(e) {
|
|
1078
1100
|
let t = e[0];
|
|
1079
1101
|
return t === "t" || t === "b" ? "y" : "x";
|
|
1080
1102
|
}
|
|
1081
|
-
function
|
|
1082
|
-
return
|
|
1103
|
+
function dt(e) {
|
|
1104
|
+
return lt(V(e));
|
|
1083
1105
|
}
|
|
1084
|
-
function
|
|
1106
|
+
function ft(e, t, n) {
|
|
1085
1107
|
n === void 0 && (n = !1);
|
|
1086
|
-
let r =
|
|
1087
|
-
return t.reference[a] > t.floating[a] && (o =
|
|
1108
|
+
let r = ct(e), i = dt(e), a = ut(i), o = i === "x" ? r === (n ? "end" : "start") ? "right" : "left" : r === "start" ? "bottom" : "top";
|
|
1109
|
+
return t.reference[a] > t.floating[a] && (o = xt(o)), [o, xt(o)];
|
|
1088
1110
|
}
|
|
1089
|
-
function
|
|
1090
|
-
let t =
|
|
1111
|
+
function pt(e) {
|
|
1112
|
+
let t = xt(e);
|
|
1091
1113
|
return [
|
|
1092
|
-
|
|
1114
|
+
mt(e),
|
|
1093
1115
|
t,
|
|
1094
|
-
|
|
1116
|
+
mt(t)
|
|
1095
1117
|
];
|
|
1096
1118
|
}
|
|
1097
|
-
function
|
|
1119
|
+
function mt(e) {
|
|
1098
1120
|
return e.includes("start") ? e.replace("start", "end") : e.replace("end", "start");
|
|
1099
1121
|
}
|
|
1100
|
-
var
|
|
1101
|
-
function
|
|
1122
|
+
var ht = ["left", "right"], gt = ["right", "left"], _t = ["top", "bottom"], vt = ["bottom", "top"];
|
|
1123
|
+
function yt(e, t, n) {
|
|
1102
1124
|
switch (e) {
|
|
1103
1125
|
case "top":
|
|
1104
|
-
case "bottom": return n ? t ?
|
|
1126
|
+
case "bottom": return n ? t ? gt : ht : t ? ht : gt;
|
|
1105
1127
|
case "left":
|
|
1106
|
-
case "right": return t ?
|
|
1128
|
+
case "right": return t ? _t : vt;
|
|
1107
1129
|
default: return [];
|
|
1108
1130
|
}
|
|
1109
1131
|
}
|
|
1110
|
-
function
|
|
1111
|
-
let i =
|
|
1112
|
-
return i && (a = a.map((e) => e + "-" + i), t && (a = a.concat(a.map(
|
|
1132
|
+
function bt(e, t, n, r) {
|
|
1133
|
+
let i = ct(e), a = yt(B(e), n === "start", r);
|
|
1134
|
+
return i && (a = a.map((e) => e + "-" + i), t && (a = a.concat(a.map(mt)))), a;
|
|
1113
1135
|
}
|
|
1114
|
-
function
|
|
1136
|
+
function xt(e) {
|
|
1115
1137
|
let t = B(e);
|
|
1116
|
-
return
|
|
1138
|
+
return at[t] + e.slice(t.length);
|
|
1117
1139
|
}
|
|
1118
|
-
function
|
|
1140
|
+
function St(e) {
|
|
1119
1141
|
return {
|
|
1120
1142
|
top: 0,
|
|
1121
1143
|
right: 0,
|
|
@@ -1124,15 +1146,15 @@ function xt(e) {
|
|
|
1124
1146
|
...e
|
|
1125
1147
|
};
|
|
1126
1148
|
}
|
|
1127
|
-
function
|
|
1149
|
+
function Ct(e) {
|
|
1128
1150
|
return typeof e == "number" ? {
|
|
1129
1151
|
top: e,
|
|
1130
1152
|
right: e,
|
|
1131
1153
|
bottom: e,
|
|
1132
1154
|
left: e
|
|
1133
|
-
} :
|
|
1155
|
+
} : St(e);
|
|
1134
1156
|
}
|
|
1135
|
-
function
|
|
1157
|
+
function wt(e) {
|
|
1136
1158
|
let { x: t, y: n, width: r, height: i } = e;
|
|
1137
1159
|
return {
|
|
1138
1160
|
width: r,
|
|
@@ -1147,8 +1169,8 @@ function Ct(e) {
|
|
|
1147
1169
|
}
|
|
1148
1170
|
//#endregion
|
|
1149
1171
|
//#region node_modules/.pnpm/@floating-ui+core@1.7.5/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
|
|
1150
|
-
function
|
|
1151
|
-
let { reference: r, floating: i } = e, a = V(t), o =
|
|
1172
|
+
function Tt(e, t, n) {
|
|
1173
|
+
let { reference: r, floating: i } = e, a = V(t), o = dt(t), s = ut(o), c = B(t), l = a === "y", u = r.x + r.width / 2 - i.width / 2, d = r.y + r.height / 2 - i.height / 2, f = r[s] / 2 - i[s] / 2, p;
|
|
1152
1174
|
switch (c) {
|
|
1153
1175
|
case "top":
|
|
1154
1176
|
p = {
|
|
@@ -1179,7 +1201,7 @@ function wt(e, t, n) {
|
|
|
1179
1201
|
y: r.y
|
|
1180
1202
|
};
|
|
1181
1203
|
}
|
|
1182
|
-
switch (
|
|
1204
|
+
switch (ct(t)) {
|
|
1183
1205
|
case "start":
|
|
1184
1206
|
p[o] -= f * (n && l ? -1 : 1);
|
|
1185
1207
|
break;
|
|
@@ -1189,9 +1211,9 @@ function wt(e, t, n) {
|
|
|
1189
1211
|
}
|
|
1190
1212
|
return p;
|
|
1191
1213
|
}
|
|
1192
|
-
async function
|
|
1214
|
+
async function Et(e, t) {
|
|
1193
1215
|
t === void 0 && (t = {});
|
|
1194
|
-
let { x: n, y: r, platform: i, rects: a, elements: o, strategy: s } = e, { boundary: c = "clippingAncestors", rootBoundary: l = "viewport", elementContext: u = "floating", altBoundary: d = !1, padding: f = 0 } =
|
|
1216
|
+
let { x: n, y: r, platform: i, rects: a, elements: o, strategy: s } = e, { boundary: c = "clippingAncestors", rootBoundary: l = "viewport", elementContext: u = "floating", altBoundary: d = !1, padding: f = 0 } = st(t, e), p = Ct(f), m = o[d ? u === "floating" ? "reference" : "floating" : u], h = wt(await i.getClippingRect({
|
|
1195
1217
|
element: await (i.isElement == null ? void 0 : i.isElement(m)) ?? !0 ? m : m.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(o.floating)),
|
|
1196
1218
|
boundary: c,
|
|
1197
1219
|
rootBoundary: l,
|
|
@@ -1204,7 +1226,7 @@ async function Tt(e, t) {
|
|
|
1204
1226
|
} : a.reference, _ = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(o.floating)), v = await (i.isElement == null ? void 0 : i.isElement(_)) && await (i.getScale == null ? void 0 : i.getScale(_)) || {
|
|
1205
1227
|
x: 1,
|
|
1206
1228
|
y: 1
|
|
1207
|
-
}, y =
|
|
1229
|
+
}, y = wt(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1208
1230
|
elements: o,
|
|
1209
1231
|
rect: g,
|
|
1210
1232
|
offsetParent: _,
|
|
@@ -1217,15 +1239,15 @@ async function Tt(e, t) {
|
|
|
1217
1239
|
right: (y.right - h.right + p.right) / v.x
|
|
1218
1240
|
};
|
|
1219
1241
|
}
|
|
1220
|
-
var
|
|
1242
|
+
var Dt = 50, Ot = async (e, t, n) => {
|
|
1221
1243
|
let { placement: r = "bottom", strategy: i = "absolute", middleware: a = [], platform: o } = n, s = o.detectOverflow ? o : {
|
|
1222
1244
|
...o,
|
|
1223
|
-
detectOverflow:
|
|
1245
|
+
detectOverflow: Et
|
|
1224
1246
|
}, c = await (o.isRTL == null ? void 0 : o.isRTL(t)), l = await o.getElementRects({
|
|
1225
1247
|
reference: e,
|
|
1226
1248
|
floating: t,
|
|
1227
1249
|
strategy: i
|
|
1228
|
-
}), { x: u, y: d } =
|
|
1250
|
+
}), { x: u, y: d } = Tt(l, r, c), f = r, p = 0, m = {};
|
|
1229
1251
|
for (let n = 0; n < a.length; n++) {
|
|
1230
1252
|
let h = a[n];
|
|
1231
1253
|
if (!h) continue;
|
|
@@ -1246,11 +1268,11 @@ var Et = 50, Dt = async (e, t, n) => {
|
|
|
1246
1268
|
u = v ?? u, d = y ?? d, m[g] = {
|
|
1247
1269
|
...m[g],
|
|
1248
1270
|
...b
|
|
1249
|
-
}, x && p <
|
|
1271
|
+
}, x && p < Dt && (p++, typeof x == "object" && (x.placement && (f = x.placement), x.rects && (l = x.rects === !0 ? await o.getElementRects({
|
|
1250
1272
|
reference: e,
|
|
1251
1273
|
floating: t,
|
|
1252
1274
|
strategy: i
|
|
1253
|
-
}) : x.rects), {x: u, y: d} =
|
|
1275
|
+
}) : x.rects), {x: u, y: d} = Tt(l, f, c)), n = -1);
|
|
1254
1276
|
}
|
|
1255
1277
|
return {
|
|
1256
1278
|
x: u,
|
|
@@ -1259,19 +1281,19 @@ var Et = 50, Dt = async (e, t, n) => {
|
|
|
1259
1281
|
strategy: i,
|
|
1260
1282
|
middlewareData: m
|
|
1261
1283
|
};
|
|
1262
|
-
},
|
|
1284
|
+
}, kt = function(e) {
|
|
1263
1285
|
return e === void 0 && (e = {}), {
|
|
1264
1286
|
name: "flip",
|
|
1265
1287
|
options: e,
|
|
1266
1288
|
async fn(t) {
|
|
1267
1289
|
var n;
|
|
1268
|
-
let { placement: r, middlewareData: i, rects: a, initialPlacement: o, platform: s, elements: c } = t, { mainAxis: l = !0, crossAxis: u = !0, fallbackPlacements: d, fallbackStrategy: f = "bestFit", fallbackAxisSideDirection: p = "none", flipAlignment: m = !0, ...h } =
|
|
1290
|
+
let { placement: r, middlewareData: i, rects: a, initialPlacement: o, platform: s, elements: c } = t, { mainAxis: l = !0, crossAxis: u = !0, fallbackPlacements: d, fallbackStrategy: f = "bestFit", fallbackAxisSideDirection: p = "none", flipAlignment: m = !0, ...h } = st(e, t);
|
|
1269
1291
|
if ((n = i.arrow) != null && n.alignmentOffset) return {};
|
|
1270
|
-
let g = B(r), _ = V(o), v = B(o) === o, y = await (s.isRTL == null ? void 0 : s.isRTL(c.floating)), b = d || (v || !m ? [
|
|
1271
|
-
!d && x && b.push(...
|
|
1292
|
+
let g = B(r), _ = V(o), v = B(o) === o, y = await (s.isRTL == null ? void 0 : s.isRTL(c.floating)), b = d || (v || !m ? [xt(o)] : pt(o)), x = p !== "none";
|
|
1293
|
+
!d && x && b.push(...bt(o, m, p, y));
|
|
1272
1294
|
let S = [o, ...b], ee = await s.detectOverflow(t, h), C = [], w = i.flip?.overflows || [];
|
|
1273
1295
|
if (l && C.push(ee[g]), u) {
|
|
1274
|
-
let e =
|
|
1296
|
+
let e = ft(r, a, y);
|
|
1275
1297
|
C.push(ee[e[0]], ee[e[1]]);
|
|
1276
1298
|
}
|
|
1277
1299
|
if (w = [...w, {
|
|
@@ -1308,9 +1330,9 @@ var Et = 50, Dt = async (e, t, n) => {
|
|
|
1308
1330
|
return {};
|
|
1309
1331
|
}
|
|
1310
1332
|
};
|
|
1311
|
-
},
|
|
1312
|
-
async function
|
|
1313
|
-
let { placement: n, platform: r, elements: i } = e, a = await (r.isRTL == null ? void 0 : r.isRTL(i.floating)), o = B(n), s =
|
|
1333
|
+
}, At = /*#__PURE__*/ new Set(["left", "top"]);
|
|
1334
|
+
async function jt(e, t) {
|
|
1335
|
+
let { placement: n, platform: r, elements: i } = e, a = await (r.isRTL == null ? void 0 : r.isRTL(i.floating)), o = B(n), s = ct(n), c = V(n) === "y", l = At.has(o) ? -1 : 1, u = a && c ? -1 : 1, d = st(t, e), { mainAxis: f, crossAxis: p, alignmentAxis: m } = typeof d == "number" ? {
|
|
1314
1336
|
mainAxis: d,
|
|
1315
1337
|
crossAxis: 0,
|
|
1316
1338
|
alignmentAxis: null
|
|
@@ -1327,13 +1349,13 @@ async function At(e, t) {
|
|
|
1327
1349
|
y: p * u
|
|
1328
1350
|
};
|
|
1329
1351
|
}
|
|
1330
|
-
var
|
|
1352
|
+
var Mt = function(e) {
|
|
1331
1353
|
return e === void 0 && (e = 0), {
|
|
1332
1354
|
name: "offset",
|
|
1333
1355
|
options: e,
|
|
1334
1356
|
async fn(t) {
|
|
1335
1357
|
var n;
|
|
1336
|
-
let { x: r, y: i, placement: a, middlewareData: o } = t, s = await
|
|
1358
|
+
let { x: r, y: i, placement: a, middlewareData: o } = t, s = await jt(t, e);
|
|
1337
1359
|
return a === o.offset?.placement && (n = o.arrow) != null && n.alignmentOffset ? {} : {
|
|
1338
1360
|
x: r + s.x,
|
|
1339
1361
|
y: i + s.y,
|
|
@@ -1344,7 +1366,7 @@ var jt = function(e) {
|
|
|
1344
1366
|
};
|
|
1345
1367
|
}
|
|
1346
1368
|
};
|
|
1347
|
-
},
|
|
1369
|
+
}, Nt = function(e) {
|
|
1348
1370
|
return e === void 0 && (e = {}), {
|
|
1349
1371
|
name: "shift",
|
|
1350
1372
|
options: e,
|
|
@@ -1355,17 +1377,17 @@ var jt = function(e) {
|
|
|
1355
1377
|
x: t,
|
|
1356
1378
|
y: n
|
|
1357
1379
|
};
|
|
1358
|
-
} }, ...l } =
|
|
1380
|
+
} }, ...l } = st(e, t), u = {
|
|
1359
1381
|
x: n,
|
|
1360
1382
|
y: r
|
|
1361
|
-
}, d = await a.detectOverflow(t, l), f = V(B(i)), p =
|
|
1383
|
+
}, d = await a.detectOverflow(t, l), f = V(B(i)), p = lt(f), m = u[p], h = u[f];
|
|
1362
1384
|
if (o) {
|
|
1363
1385
|
let e = p === "y" ? "top" : "left", t = p === "y" ? "bottom" : "right", n = m + d[e], r = m - d[t];
|
|
1364
|
-
m =
|
|
1386
|
+
m = ot(n, m, r);
|
|
1365
1387
|
}
|
|
1366
1388
|
if (s) {
|
|
1367
1389
|
let e = f === "y" ? "top" : "left", t = f === "y" ? "bottom" : "right", n = h + d[e], r = h - d[t];
|
|
1368
|
-
h =
|
|
1390
|
+
h = ot(n, h, r);
|
|
1369
1391
|
}
|
|
1370
1392
|
let g = c.fn({
|
|
1371
1393
|
...t,
|
|
@@ -1388,39 +1410,39 @@ var jt = function(e) {
|
|
|
1388
1410
|
};
|
|
1389
1411
|
//#endregion
|
|
1390
1412
|
//#region node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
|
|
1391
|
-
function
|
|
1413
|
+
function Pt() {
|
|
1392
1414
|
return typeof window < "u";
|
|
1393
1415
|
}
|
|
1394
1416
|
function H(e) {
|
|
1395
|
-
return
|
|
1417
|
+
return Ft(e) ? (e.nodeName || "").toLowerCase() : "#document";
|
|
1396
1418
|
}
|
|
1397
1419
|
function U(e) {
|
|
1398
1420
|
var t;
|
|
1399
1421
|
return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
|
|
1400
1422
|
}
|
|
1401
1423
|
function W(e) {
|
|
1402
|
-
return ((
|
|
1424
|
+
return ((Ft(e) ? e.ownerDocument : e.document) || window.document)?.documentElement;
|
|
1403
1425
|
}
|
|
1404
|
-
function
|
|
1405
|
-
return
|
|
1426
|
+
function Ft(e) {
|
|
1427
|
+
return Pt() ? e instanceof Node || e instanceof U(e).Node : !1;
|
|
1406
1428
|
}
|
|
1407
1429
|
function G(e) {
|
|
1408
|
-
return
|
|
1430
|
+
return Pt() ? e instanceof Element || e instanceof U(e).Element : !1;
|
|
1409
1431
|
}
|
|
1410
1432
|
function K(e) {
|
|
1411
|
-
return
|
|
1433
|
+
return Pt() ? e instanceof HTMLElement || e instanceof U(e).HTMLElement : !1;
|
|
1412
1434
|
}
|
|
1413
|
-
function
|
|
1414
|
-
return !
|
|
1435
|
+
function It(e) {
|
|
1436
|
+
return !Pt() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof U(e).ShadowRoot;
|
|
1415
1437
|
}
|
|
1416
1438
|
function q(e) {
|
|
1417
1439
|
let { overflow: t, overflowX: n, overflowY: r, display: i } = X(e);
|
|
1418
1440
|
return /auto|scroll|overlay|hidden|clip/.test(t + r + n) && i !== "inline" && i !== "contents";
|
|
1419
1441
|
}
|
|
1420
|
-
function
|
|
1442
|
+
function Lt(e) {
|
|
1421
1443
|
return /^(table|td|th)$/.test(H(e));
|
|
1422
1444
|
}
|
|
1423
|
-
function
|
|
1445
|
+
function Rt(e) {
|
|
1424
1446
|
try {
|
|
1425
1447
|
if (e.matches(":popover-open")) return !0;
|
|
1426
1448
|
} catch {}
|
|
@@ -1430,22 +1452,22 @@ function Lt(e) {
|
|
|
1430
1452
|
return !1;
|
|
1431
1453
|
}
|
|
1432
1454
|
}
|
|
1433
|
-
var
|
|
1434
|
-
function
|
|
1455
|
+
var zt = /transform|translate|scale|rotate|perspective|filter/, Bt = /paint|layout|strict|content/, J = (e) => !!e && e !== "none", Vt;
|
|
1456
|
+
function Ht(e) {
|
|
1435
1457
|
let t = G(e) ? X(e) : e;
|
|
1436
|
-
return J(t.transform) || J(t.translate) || J(t.scale) || J(t.rotate) || J(t.perspective) || !
|
|
1458
|
+
return J(t.transform) || J(t.translate) || J(t.scale) || J(t.rotate) || J(t.perspective) || !Wt() && (J(t.backdropFilter) || J(t.filter)) || zt.test(t.willChange || "") || Bt.test(t.contain || "");
|
|
1437
1459
|
}
|
|
1438
|
-
function
|
|
1460
|
+
function Ut(e) {
|
|
1439
1461
|
let t = Z(e);
|
|
1440
1462
|
for (; K(t) && !Y(t);) {
|
|
1441
|
-
if (
|
|
1442
|
-
if (
|
|
1463
|
+
if (Ht(t)) return t;
|
|
1464
|
+
if (Rt(t)) return null;
|
|
1443
1465
|
t = Z(t);
|
|
1444
1466
|
}
|
|
1445
1467
|
return null;
|
|
1446
1468
|
}
|
|
1447
|
-
function
|
|
1448
|
-
return
|
|
1469
|
+
function Wt() {
|
|
1470
|
+
return Vt ??= typeof CSS < "u" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none"), Vt;
|
|
1449
1471
|
}
|
|
1450
1472
|
function Y(e) {
|
|
1451
1473
|
return /^(html|body|#document)$/.test(H(e));
|
|
@@ -1453,7 +1475,7 @@ function Y(e) {
|
|
|
1453
1475
|
function X(e) {
|
|
1454
1476
|
return U(e).getComputedStyle(e);
|
|
1455
1477
|
}
|
|
1456
|
-
function
|
|
1478
|
+
function Gt(e) {
|
|
1457
1479
|
return G(e) ? {
|
|
1458
1480
|
scrollLeft: e.scrollLeft,
|
|
1459
1481
|
scrollTop: e.scrollTop
|
|
@@ -1464,99 +1486,99 @@ function Wt(e) {
|
|
|
1464
1486
|
}
|
|
1465
1487
|
function Z(e) {
|
|
1466
1488
|
if (H(e) === "html") return e;
|
|
1467
|
-
let t = e.assignedSlot || e.parentNode ||
|
|
1468
|
-
return
|
|
1489
|
+
let t = e.assignedSlot || e.parentNode || It(e) && e.host || W(e);
|
|
1490
|
+
return It(t) ? t.host : t;
|
|
1469
1491
|
}
|
|
1470
|
-
function
|
|
1492
|
+
function Kt(e) {
|
|
1471
1493
|
let t = Z(e);
|
|
1472
|
-
return Y(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : K(t) && q(t) ? t :
|
|
1494
|
+
return Y(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : K(t) && q(t) ? t : Kt(t);
|
|
1473
1495
|
}
|
|
1474
|
-
function
|
|
1496
|
+
function qt(e, t, n) {
|
|
1475
1497
|
t === void 0 && (t = []), n === void 0 && (n = !0);
|
|
1476
|
-
let r =
|
|
1498
|
+
let r = Kt(e), i = r === e.ownerDocument?.body, a = U(r);
|
|
1477
1499
|
if (i) {
|
|
1478
|
-
let e =
|
|
1479
|
-
return t.concat(a, a.visualViewport || [], q(r) ? r : [], e && n ?
|
|
1480
|
-
} else return t.concat(r,
|
|
1500
|
+
let e = Jt(a);
|
|
1501
|
+
return t.concat(a, a.visualViewport || [], q(r) ? r : [], e && n ? qt(e) : []);
|
|
1502
|
+
} else return t.concat(r, qt(r, [], n));
|
|
1481
1503
|
}
|
|
1482
|
-
function
|
|
1504
|
+
function Jt(e) {
|
|
1483
1505
|
return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
|
|
1484
1506
|
}
|
|
1485
1507
|
//#endregion
|
|
1486
1508
|
//#region node_modules/.pnpm/@floating-ui+dom@1.7.6/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
|
|
1487
|
-
function
|
|
1488
|
-
let t = X(e), n = parseFloat(t.width) || 0, r = parseFloat(t.height) || 0, i = K(e), a = i ? e.offsetWidth : n, o = i ? e.offsetHeight : r, s =
|
|
1509
|
+
function Yt(e) {
|
|
1510
|
+
let t = X(e), n = parseFloat(t.width) || 0, r = parseFloat(t.height) || 0, i = K(e), a = i ? e.offsetWidth : n, o = i ? e.offsetHeight : r, s = rt(n) !== a || rt(r) !== o;
|
|
1489
1511
|
return s && (n = a, r = o), {
|
|
1490
1512
|
width: n,
|
|
1491
1513
|
height: r,
|
|
1492
1514
|
$: s
|
|
1493
1515
|
};
|
|
1494
1516
|
}
|
|
1495
|
-
function
|
|
1517
|
+
function Xt(e) {
|
|
1496
1518
|
return G(e) ? e : e.contextElement;
|
|
1497
1519
|
}
|
|
1498
1520
|
function Q(e) {
|
|
1499
|
-
let t =
|
|
1521
|
+
let t = Xt(e);
|
|
1500
1522
|
if (!K(t)) return z(1);
|
|
1501
|
-
let n = t.getBoundingClientRect(), { width: r, height: i, $: a } =
|
|
1523
|
+
let n = t.getBoundingClientRect(), { width: r, height: i, $: a } = Yt(t), o = (a ? rt(n.width) : n.width) / r, s = (a ? rt(n.height) : n.height) / i;
|
|
1502
1524
|
return (!o || !Number.isFinite(o)) && (o = 1), (!s || !Number.isFinite(s)) && (s = 1), {
|
|
1503
1525
|
x: o,
|
|
1504
1526
|
y: s
|
|
1505
1527
|
};
|
|
1506
1528
|
}
|
|
1507
|
-
var
|
|
1508
|
-
function
|
|
1529
|
+
var Zt = /*#__PURE__*/ z(0);
|
|
1530
|
+
function Qt(e) {
|
|
1509
1531
|
let t = U(e);
|
|
1510
|
-
return !
|
|
1532
|
+
return !Wt() || !t.visualViewport ? Zt : {
|
|
1511
1533
|
x: t.visualViewport.offsetLeft,
|
|
1512
1534
|
y: t.visualViewport.offsetTop
|
|
1513
1535
|
};
|
|
1514
1536
|
}
|
|
1515
|
-
function
|
|
1537
|
+
function $t(e, t, n) {
|
|
1516
1538
|
return t === void 0 && (t = !1), !n || t && n !== U(e) ? !1 : t;
|
|
1517
1539
|
}
|
|
1518
1540
|
function $(e, t, n, r) {
|
|
1519
1541
|
t === void 0 && (t = !1), n === void 0 && (n = !1);
|
|
1520
|
-
let i = e.getBoundingClientRect(), a =
|
|
1542
|
+
let i = e.getBoundingClientRect(), a = Xt(e), o = z(1);
|
|
1521
1543
|
t && (r ? G(r) && (o = Q(r)) : o = Q(e));
|
|
1522
|
-
let s =
|
|
1544
|
+
let s = $t(a, n, r) ? Qt(a) : z(0), c = (i.left + s.x) / o.x, l = (i.top + s.y) / o.y, u = i.width / o.x, d = i.height / o.y;
|
|
1523
1545
|
if (a) {
|
|
1524
|
-
let e = U(a), t = r && G(r) ? U(r) : r, n = e, i =
|
|
1546
|
+
let e = U(a), t = r && G(r) ? U(r) : r, n = e, i = Jt(n);
|
|
1525
1547
|
for (; i && r && t !== n;) {
|
|
1526
1548
|
let e = Q(i), t = i.getBoundingClientRect(), r = X(i), a = t.left + (i.clientLeft + parseFloat(r.paddingLeft)) * e.x, o = t.top + (i.clientTop + parseFloat(r.paddingTop)) * e.y;
|
|
1527
|
-
c *= e.x, l *= e.y, u *= e.x, d *= e.y, c += a, l += o, n = U(i), i =
|
|
1549
|
+
c *= e.x, l *= e.y, u *= e.x, d *= e.y, c += a, l += o, n = U(i), i = Jt(n);
|
|
1528
1550
|
}
|
|
1529
1551
|
}
|
|
1530
|
-
return
|
|
1552
|
+
return wt({
|
|
1531
1553
|
width: u,
|
|
1532
1554
|
height: d,
|
|
1533
1555
|
x: c,
|
|
1534
1556
|
y: l
|
|
1535
1557
|
});
|
|
1536
1558
|
}
|
|
1537
|
-
function
|
|
1538
|
-
let n =
|
|
1559
|
+
function en(e, t) {
|
|
1560
|
+
let n = Gt(e).scrollLeft;
|
|
1539
1561
|
return t ? t.left + n : $(W(e)).left + n;
|
|
1540
1562
|
}
|
|
1541
|
-
function
|
|
1563
|
+
function tn(e, t) {
|
|
1542
1564
|
let n = e.getBoundingClientRect();
|
|
1543
1565
|
return {
|
|
1544
|
-
x: n.left + t.scrollLeft -
|
|
1566
|
+
x: n.left + t.scrollLeft - en(e, n),
|
|
1545
1567
|
y: n.top + t.scrollTop
|
|
1546
1568
|
};
|
|
1547
1569
|
}
|
|
1548
|
-
function
|
|
1549
|
-
let { elements: t, rect: n, offsetParent: r, strategy: i } = e, a = i === "fixed", o = W(r), s = t ?
|
|
1570
|
+
function nn(e) {
|
|
1571
|
+
let { elements: t, rect: n, offsetParent: r, strategy: i } = e, a = i === "fixed", o = W(r), s = t ? Rt(t.floating) : !1;
|
|
1550
1572
|
if (r === o || s && a) return n;
|
|
1551
1573
|
let c = {
|
|
1552
1574
|
scrollLeft: 0,
|
|
1553
1575
|
scrollTop: 0
|
|
1554
1576
|
}, l = z(1), u = z(0), d = K(r);
|
|
1555
|
-
if ((d || !d && !a) && ((H(r) !== "body" || q(o)) && (c =
|
|
1577
|
+
if ((d || !d && !a) && ((H(r) !== "body" || q(o)) && (c = Gt(r)), d)) {
|
|
1556
1578
|
let e = $(r);
|
|
1557
1579
|
l = Q(r), u.x = e.x + r.clientLeft, u.y = e.y + r.clientTop;
|
|
1558
1580
|
}
|
|
1559
|
-
let f = o && !d && !a ?
|
|
1581
|
+
let f = o && !d && !a ? tn(o, c) : z(0);
|
|
1560
1582
|
return {
|
|
1561
1583
|
width: n.width * l.x,
|
|
1562
1584
|
height: n.height * l.y,
|
|
@@ -1564,11 +1586,11 @@ function tn(e) {
|
|
|
1564
1586
|
y: n.y * l.y - c.scrollTop * l.y + u.y + f.y
|
|
1565
1587
|
};
|
|
1566
1588
|
}
|
|
1567
|
-
function
|
|
1589
|
+
function rn(e) {
|
|
1568
1590
|
return Array.from(e.getClientRects());
|
|
1569
1591
|
}
|
|
1570
|
-
function
|
|
1571
|
-
let t = W(e), n =
|
|
1592
|
+
function an(e) {
|
|
1593
|
+
let t = W(e), n = Gt(e), r = e.ownerDocument.body, i = R(t.scrollWidth, t.clientWidth, r.scrollWidth, r.clientWidth), a = R(t.scrollHeight, t.clientHeight, r.scrollHeight, r.clientHeight), o = -n.scrollLeft + en(e), s = -n.scrollTop;
|
|
1572
1594
|
return X(r).direction === "rtl" && (o += R(t.clientWidth, r.clientWidth) - i), {
|
|
1573
1595
|
width: i,
|
|
1574
1596
|
height: a,
|
|
@@ -1576,19 +1598,19 @@ function rn(e) {
|
|
|
1576
1598
|
y: s
|
|
1577
1599
|
};
|
|
1578
1600
|
}
|
|
1579
|
-
var
|
|
1580
|
-
function
|
|
1601
|
+
var on = 25;
|
|
1602
|
+
function sn(e, t) {
|
|
1581
1603
|
let n = U(e), r = W(e), i = n.visualViewport, a = r.clientWidth, o = r.clientHeight, s = 0, c = 0;
|
|
1582
1604
|
if (i) {
|
|
1583
1605
|
a = i.width, o = i.height;
|
|
1584
|
-
let e =
|
|
1606
|
+
let e = Wt();
|
|
1585
1607
|
(!e || e && t === "fixed") && (s = i.offsetLeft, c = i.offsetTop);
|
|
1586
1608
|
}
|
|
1587
|
-
let l =
|
|
1609
|
+
let l = en(r);
|
|
1588
1610
|
if (l <= 0) {
|
|
1589
1611
|
let e = r.ownerDocument, t = e.body, n = getComputedStyle(t), i = e.compatMode === "CSS1Compat" && parseFloat(n.marginLeft) + parseFloat(n.marginRight) || 0, o = Math.abs(r.clientWidth - t.clientWidth - i);
|
|
1590
|
-
o <=
|
|
1591
|
-
} else l <=
|
|
1612
|
+
o <= on && (a -= o);
|
|
1613
|
+
} else l <= on && (a += l);
|
|
1592
1614
|
return {
|
|
1593
1615
|
width: a,
|
|
1594
1616
|
height: o,
|
|
@@ -1596,7 +1618,7 @@ function on(e, t) {
|
|
|
1596
1618
|
y: c
|
|
1597
1619
|
};
|
|
1598
1620
|
}
|
|
1599
|
-
function
|
|
1621
|
+
function cn(e, t) {
|
|
1600
1622
|
let n = $(e, !0, t === "fixed"), r = n.top + e.clientTop, i = n.left + e.clientLeft, a = K(e) ? Q(e) : z(1);
|
|
1601
1623
|
return {
|
|
1602
1624
|
width: e.clientWidth * a.x,
|
|
@@ -1605,13 +1627,13 @@ function sn(e, t) {
|
|
|
1605
1627
|
y: r * a.y
|
|
1606
1628
|
};
|
|
1607
1629
|
}
|
|
1608
|
-
function
|
|
1630
|
+
function ln(e, t, n) {
|
|
1609
1631
|
let r;
|
|
1610
|
-
if (t === "viewport") r =
|
|
1611
|
-
else if (t === "document") r =
|
|
1612
|
-
else if (G(t)) r =
|
|
1632
|
+
if (t === "viewport") r = sn(e, n);
|
|
1633
|
+
else if (t === "document") r = an(W(e));
|
|
1634
|
+
else if (G(t)) r = cn(t, n);
|
|
1613
1635
|
else {
|
|
1614
|
-
let n =
|
|
1636
|
+
let n = Qt(e);
|
|
1615
1637
|
r = {
|
|
1616
1638
|
x: t.x - n.x,
|
|
1617
1639
|
y: t.y - n.y,
|
|
@@ -1619,27 +1641,27 @@ function cn(e, t, n) {
|
|
|
1619
1641
|
height: t.height
|
|
1620
1642
|
};
|
|
1621
1643
|
}
|
|
1622
|
-
return
|
|
1644
|
+
return wt(r);
|
|
1623
1645
|
}
|
|
1624
|
-
function
|
|
1646
|
+
function un(e, t) {
|
|
1625
1647
|
let n = Z(e);
|
|
1626
|
-
return n === t || !G(n) || Y(n) ? !1 : X(n).position === "fixed" ||
|
|
1648
|
+
return n === t || !G(n) || Y(n) ? !1 : X(n).position === "fixed" || un(n, t);
|
|
1627
1649
|
}
|
|
1628
|
-
function
|
|
1650
|
+
function dn(e, t) {
|
|
1629
1651
|
let n = t.get(e);
|
|
1630
1652
|
if (n) return n;
|
|
1631
|
-
let r =
|
|
1653
|
+
let r = qt(e, [], !1).filter((e) => G(e) && H(e) !== "body"), i = null, a = X(e).position === "fixed", o = a ? Z(e) : e;
|
|
1632
1654
|
for (; G(o) && !Y(o);) {
|
|
1633
|
-
let t = X(o), n =
|
|
1634
|
-
!n && t.position === "fixed" && (i = null), (a ? !n && !i : !n && t.position === "static" && i && (i.position === "absolute" || i.position === "fixed") || q(o) && !n &&
|
|
1655
|
+
let t = X(o), n = Ht(o);
|
|
1656
|
+
!n && t.position === "fixed" && (i = null), (a ? !n && !i : !n && t.position === "static" && i && (i.position === "absolute" || i.position === "fixed") || q(o) && !n && un(e, o)) ? r = r.filter((e) => e !== o) : i = t, o = Z(o);
|
|
1635
1657
|
}
|
|
1636
1658
|
return t.set(e, r), r;
|
|
1637
1659
|
}
|
|
1638
|
-
function
|
|
1639
|
-
let { element: t, boundary: n, rootBoundary: r, strategy: i } = e, a = [...n === "clippingAncestors" ?
|
|
1660
|
+
function fn(e) {
|
|
1661
|
+
let { element: t, boundary: n, rootBoundary: r, strategy: i } = e, a = [...n === "clippingAncestors" ? Rt(t) ? [] : dn(t, this._c) : [].concat(n), r], o = ln(t, a[0], i), s = o.top, c = o.right, l = o.bottom, u = o.left;
|
|
1640
1662
|
for (let e = 1; e < a.length; e++) {
|
|
1641
|
-
let n =
|
|
1642
|
-
s = R(n.top, s), c =
|
|
1663
|
+
let n = ln(t, a[e], i);
|
|
1664
|
+
s = R(n.top, s), c = nt(n.right, c), l = nt(n.bottom, l), u = R(n.left, u);
|
|
1643
1665
|
}
|
|
1644
1666
|
return {
|
|
1645
1667
|
width: c - u,
|
|
@@ -1648,27 +1670,27 @@ function dn(e) {
|
|
|
1648
1670
|
y: s
|
|
1649
1671
|
};
|
|
1650
1672
|
}
|
|
1651
|
-
function
|
|
1652
|
-
let { width: t, height: n } =
|
|
1673
|
+
function pn(e) {
|
|
1674
|
+
let { width: t, height: n } = Yt(e);
|
|
1653
1675
|
return {
|
|
1654
1676
|
width: t,
|
|
1655
1677
|
height: n
|
|
1656
1678
|
};
|
|
1657
1679
|
}
|
|
1658
|
-
function
|
|
1680
|
+
function mn(e, t, n) {
|
|
1659
1681
|
let r = K(t), i = W(t), a = n === "fixed", o = $(e, !0, a, t), s = {
|
|
1660
1682
|
scrollLeft: 0,
|
|
1661
1683
|
scrollTop: 0
|
|
1662
1684
|
}, c = z(0);
|
|
1663
1685
|
function l() {
|
|
1664
|
-
c.x =
|
|
1686
|
+
c.x = en(i);
|
|
1665
1687
|
}
|
|
1666
|
-
if (r || !r && !a) if ((H(t) !== "body" || q(i)) && (s =
|
|
1688
|
+
if (r || !r && !a) if ((H(t) !== "body" || q(i)) && (s = Gt(t)), r) {
|
|
1667
1689
|
let e = $(t, !0, a, t);
|
|
1668
1690
|
c.x = e.x + t.clientLeft, c.y = e.y + t.clientTop;
|
|
1669
1691
|
} else i && l();
|
|
1670
1692
|
a && !r && i && l();
|
|
1671
|
-
let u = i && !r && !a ?
|
|
1693
|
+
let u = i && !r && !a ? tn(i, s) : z(0);
|
|
1672
1694
|
return {
|
|
1673
1695
|
x: o.left + s.scrollLeft - c.x - u.x,
|
|
1674
1696
|
y: o.top + s.scrollTop - c.y - u.y,
|
|
@@ -1676,34 +1698,34 @@ function pn(e, t, n) {
|
|
|
1676
1698
|
height: o.height
|
|
1677
1699
|
};
|
|
1678
1700
|
}
|
|
1679
|
-
function
|
|
1701
|
+
function hn(e) {
|
|
1680
1702
|
return X(e).position === "static";
|
|
1681
1703
|
}
|
|
1682
|
-
function
|
|
1704
|
+
function gn(e, t) {
|
|
1683
1705
|
if (!K(e) || X(e).position === "fixed") return null;
|
|
1684
1706
|
if (t) return t(e);
|
|
1685
1707
|
let n = e.offsetParent;
|
|
1686
1708
|
return W(e) === n && (n = n.ownerDocument.body), n;
|
|
1687
1709
|
}
|
|
1688
|
-
function
|
|
1710
|
+
function _n(e, t) {
|
|
1689
1711
|
let n = U(e);
|
|
1690
|
-
if (
|
|
1712
|
+
if (Rt(e)) return n;
|
|
1691
1713
|
if (!K(e)) {
|
|
1692
1714
|
let t = Z(e);
|
|
1693
1715
|
for (; t && !Y(t);) {
|
|
1694
|
-
if (G(t) && !
|
|
1716
|
+
if (G(t) && !hn(t)) return t;
|
|
1695
1717
|
t = Z(t);
|
|
1696
1718
|
}
|
|
1697
1719
|
return n;
|
|
1698
1720
|
}
|
|
1699
|
-
let r =
|
|
1700
|
-
for (; r &&
|
|
1701
|
-
return r && Y(r) &&
|
|
1721
|
+
let r = gn(e, t);
|
|
1722
|
+
for (; r && Lt(r) && hn(r);) r = gn(r, t);
|
|
1723
|
+
return r && Y(r) && hn(r) && !Ht(r) ? n : r || Ut(e) || n;
|
|
1702
1724
|
}
|
|
1703
|
-
var
|
|
1704
|
-
let t = this.getOffsetParent ||
|
|
1725
|
+
var vn = async function(e) {
|
|
1726
|
+
let t = this.getOffsetParent || _n, n = this.getDimensions, r = await n(e.floating);
|
|
1705
1727
|
return {
|
|
1706
|
-
reference:
|
|
1728
|
+
reference: mn(e.reference, await t(e.floating), e.strategy),
|
|
1707
1729
|
floating: {
|
|
1708
1730
|
x: 0,
|
|
1709
1731
|
y: 0,
|
|
@@ -1712,25 +1734,25 @@ var _n = async function(e) {
|
|
|
1712
1734
|
}
|
|
1713
1735
|
};
|
|
1714
1736
|
};
|
|
1715
|
-
function
|
|
1737
|
+
function yn(e) {
|
|
1716
1738
|
return X(e).direction === "rtl";
|
|
1717
1739
|
}
|
|
1718
|
-
var
|
|
1719
|
-
convertOffsetParentRelativeRectToViewportRelativeRect:
|
|
1740
|
+
var bn = {
|
|
1741
|
+
convertOffsetParentRelativeRectToViewportRelativeRect: nn,
|
|
1720
1742
|
getDocumentElement: W,
|
|
1721
|
-
getClippingRect:
|
|
1722
|
-
getOffsetParent:
|
|
1723
|
-
getElementRects:
|
|
1724
|
-
getClientRects:
|
|
1725
|
-
getDimensions:
|
|
1743
|
+
getClippingRect: fn,
|
|
1744
|
+
getOffsetParent: _n,
|
|
1745
|
+
getElementRects: vn,
|
|
1746
|
+
getClientRects: rn,
|
|
1747
|
+
getDimensions: pn,
|
|
1726
1748
|
getScale: Q,
|
|
1727
1749
|
isElement: G,
|
|
1728
|
-
isRTL:
|
|
1750
|
+
isRTL: yn
|
|
1729
1751
|
};
|
|
1730
|
-
function
|
|
1752
|
+
function xn(e, t) {
|
|
1731
1753
|
return e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height;
|
|
1732
1754
|
}
|
|
1733
|
-
function
|
|
1755
|
+
function Sn(e, t) {
|
|
1734
1756
|
let n = null, r, i = W(e);
|
|
1735
1757
|
function a() {
|
|
1736
1758
|
var e;
|
|
@@ -1740,9 +1762,9 @@ function xn(e, t) {
|
|
|
1740
1762
|
s === void 0 && (s = !1), c === void 0 && (c = 1), a();
|
|
1741
1763
|
let l = e.getBoundingClientRect(), { left: u, top: d, width: f, height: p } = l;
|
|
1742
1764
|
if (s || t(), !f || !p) return;
|
|
1743
|
-
let m =
|
|
1765
|
+
let m = it(d), h = it(i.clientWidth - (u + f)), g = it(i.clientHeight - (d + p)), _ = it(u), v = {
|
|
1744
1766
|
rootMargin: -m + "px " + -h + "px " + -g + "px " + -_ + "px",
|
|
1745
|
-
threshold: R(0,
|
|
1767
|
+
threshold: R(0, nt(1, c)) || 1
|
|
1746
1768
|
}, y = !0;
|
|
1747
1769
|
function b(t) {
|
|
1748
1770
|
let n = t[0].intersectionRatio;
|
|
@@ -1752,7 +1774,7 @@ function xn(e, t) {
|
|
|
1752
1774
|
o(!1, 1e-7);
|
|
1753
1775
|
}, 1e3);
|
|
1754
1776
|
}
|
|
1755
|
-
n === 1 && !
|
|
1777
|
+
n === 1 && !xn(l, e.getBoundingClientRect()) && o(), y = !1;
|
|
1756
1778
|
}
|
|
1757
1779
|
try {
|
|
1758
1780
|
n = new IntersectionObserver(b, {
|
|
@@ -1766,13 +1788,13 @@ function xn(e, t) {
|
|
|
1766
1788
|
}
|
|
1767
1789
|
return o(!0), a;
|
|
1768
1790
|
}
|
|
1769
|
-
function
|
|
1791
|
+
function Cn(e, t, n, r) {
|
|
1770
1792
|
r === void 0 && (r = {});
|
|
1771
|
-
let { ancestorScroll: i = !0, ancestorResize: a = !0, elementResize: o = typeof ResizeObserver == "function", layoutShift: s = typeof IntersectionObserver == "function", animationFrame: c = !1 } = r, l =
|
|
1793
|
+
let { ancestorScroll: i = !0, ancestorResize: a = !0, elementResize: o = typeof ResizeObserver == "function", layoutShift: s = typeof IntersectionObserver == "function", animationFrame: c = !1 } = r, l = Xt(e), u = i || a ? [...l ? qt(l) : [], ...t ? qt(t) : []] : [];
|
|
1772
1794
|
u.forEach((e) => {
|
|
1773
1795
|
i && e.addEventListener("scroll", n, { passive: !0 }), a && e.addEventListener("resize", n);
|
|
1774
1796
|
});
|
|
1775
|
-
let d = l && s ?
|
|
1797
|
+
let d = l && s ? Sn(l, n) : null, f = -1, p = null;
|
|
1776
1798
|
o && (p = new ResizeObserver((e) => {
|
|
1777
1799
|
let [r] = e;
|
|
1778
1800
|
r && r.target === l && p && t && (p.unobserve(t), cancelAnimationFrame(f), f = requestAnimationFrame(() => {
|
|
@@ -1784,7 +1806,7 @@ function Sn(e, t, n, r) {
|
|
|
1784
1806
|
c && g();
|
|
1785
1807
|
function g() {
|
|
1786
1808
|
let t = $(e);
|
|
1787
|
-
h && !
|
|
1809
|
+
h && !xn(h, t) && n(), h = t, m = requestAnimationFrame(g);
|
|
1788
1810
|
}
|
|
1789
1811
|
return n(), () => {
|
|
1790
1812
|
var e;
|
|
@@ -1793,19 +1815,19 @@ function Sn(e, t, n, r) {
|
|
|
1793
1815
|
}), d?.(), (e = p) == null || e.disconnect(), p = null, c && cancelAnimationFrame(m);
|
|
1794
1816
|
};
|
|
1795
1817
|
}
|
|
1796
|
-
var
|
|
1818
|
+
var wn = Mt, Tn = Nt, En = kt, Dn = (e, t, n) => {
|
|
1797
1819
|
let r = /* @__PURE__ */ new Map(), i = {
|
|
1798
|
-
platform:
|
|
1820
|
+
platform: bn,
|
|
1799
1821
|
...n
|
|
1800
1822
|
}, a = {
|
|
1801
1823
|
...i.platform,
|
|
1802
1824
|
_c: r
|
|
1803
1825
|
};
|
|
1804
|
-
return
|
|
1826
|
+
return Ot(e, t, {
|
|
1805
1827
|
...i,
|
|
1806
1828
|
platform: a
|
|
1807
1829
|
});
|
|
1808
|
-
},
|
|
1830
|
+
}, On = N("\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"), kn = class extends P {
|
|
1809
1831
|
constructor(...e) {
|
|
1810
1832
|
super(...e), this.events = { click: "onClick" }, this._expanded = !1, this._dropdownOpen = !1, this._onOutsideClick = (e) => {
|
|
1811
1833
|
let t = e.composedPath(), n = this.getElement(".comment__dropdown"), r = this.getElement(".comment__menu-trigger");
|
|
@@ -1828,7 +1850,7 @@ var Cn = jt, wn = Mt, Tn = Ot, En = (e, t, n) => {
|
|
|
1828
1850
|
return this.size === "sm" ? "xs" : "sm";
|
|
1829
1851
|
}
|
|
1830
1852
|
get styleSheets() {
|
|
1831
|
-
return [
|
|
1853
|
+
return [On];
|
|
1832
1854
|
}
|
|
1833
1855
|
toggleDropdown() {
|
|
1834
1856
|
this._dropdownOpen ? this.closeDropdown() : this.openDropdown();
|
|
@@ -1839,12 +1861,12 @@ var Cn = jt, wn = Mt, Tn = Ot, En = (e, t, n) => {
|
|
|
1839
1861
|
if (e && t) {
|
|
1840
1862
|
e.classList.add("is-open");
|
|
1841
1863
|
let n = () => {
|
|
1842
|
-
|
|
1864
|
+
Dn(t, e, {
|
|
1843
1865
|
placement: "bottom-end",
|
|
1844
1866
|
middleware: [
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1867
|
+
wn(4),
|
|
1868
|
+
En(),
|
|
1869
|
+
Tn({ padding: 8 })
|
|
1848
1870
|
],
|
|
1849
1871
|
strategy: "fixed"
|
|
1850
1872
|
}).then(({ x: t, y: n }) => {
|
|
@@ -1855,7 +1877,7 @@ var Cn = jt, wn = Mt, Tn = Ot, En = (e, t, n) => {
|
|
|
1855
1877
|
});
|
|
1856
1878
|
});
|
|
1857
1879
|
};
|
|
1858
|
-
this._floatingCleanup =
|
|
1880
|
+
this._floatingCleanup = Cn(t, e, n), document.addEventListener("mousedown", this._onOutsideClick);
|
|
1859
1881
|
}
|
|
1860
1882
|
}
|
|
1861
1883
|
closeDropdown() {
|
|
@@ -1917,7 +1939,7 @@ var Cn = jt, wn = Mt, Tn = Ot, En = (e, t, n) => {
|
|
|
1917
1939
|
if (!t) return;
|
|
1918
1940
|
let n = () => {
|
|
1919
1941
|
let e = this.getElement(".comment__timestamp");
|
|
1920
|
-
e && (e.textContent =
|
|
1942
|
+
e && (e.textContent = tt(t.createdAt));
|
|
1921
1943
|
let r = Date.now() - (typeof t.createdAt == "number" ? t.createdAt : Date.parse(String(t.createdAt))), i = 6e4;
|
|
1922
1944
|
i = r < 6e4 ? 5e3 : r < 36e5 ? 6e4 : 18e5, this._timeUpdateTimer = setTimeout(n, i);
|
|
1923
1945
|
}, r = Date.now() - (typeof t.createdAt == "number" ? t.createdAt : Date.parse(String(t.createdAt))) < 6e4 ? 5e3 : 6e4;
|
|
@@ -2016,7 +2038,7 @@ var Cn = jt, wn = Mt, Tn = Ot, En = (e, t, n) => {
|
|
|
2016
2038
|
<div class="comment__user-name">
|
|
2017
2039
|
${n ? "[Deleted]" : r ? "[Deleted user]" : t.author?.name ?? ""}
|
|
2018
2040
|
</div>
|
|
2019
|
-
<div class="comment__timestamp">${
|
|
2041
|
+
<div class="comment__timestamp">${tt(t.createdAt)}</div>
|
|
2020
2042
|
</div>
|
|
2021
2043
|
${u}
|
|
2022
2044
|
</div>
|
|
@@ -2026,15 +2048,15 @@ var Cn = jt, wn = Mt, Tn = Ot, En = (e, t, n) => {
|
|
|
2026
2048
|
`;
|
|
2027
2049
|
}
|
|
2028
2050
|
};
|
|
2029
|
-
F([O(k)],
|
|
2051
|
+
F([O(k)], kn.prototype, "gridStore", void 0), customElements.get("pop-comment") || customElements.define("pop-comment", kn);
|
|
2030
2052
|
//#endregion
|
|
2031
2053
|
//#region src/components/pop-feed.ts
|
|
2032
|
-
var
|
|
2054
|
+
var An = N("\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"), jn = class extends P {
|
|
2033
2055
|
constructor(...e) {
|
|
2034
2056
|
super(...e), this._footerChild = null, this._wasOpen = !1;
|
|
2035
2057
|
}
|
|
2036
2058
|
get styleSheets() {
|
|
2037
|
-
return [
|
|
2059
|
+
return [An];
|
|
2038
2060
|
}
|
|
2039
2061
|
connectedCallback() {
|
|
2040
2062
|
super.connectedCallback(), document.addEventListener("mousedown", this), document.addEventListener("keydown", this);
|
|
@@ -2088,46 +2110,97 @@ var kn = N("\n :host {\n display: flex;\n background: var(--pop-backgroun
|
|
|
2088
2110
|
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 ";
|
|
2089
2111
|
}
|
|
2090
2112
|
};
|
|
2091
|
-
F([O(k)],
|
|
2113
|
+
F([O(k)], jn.prototype, "gridStore", void 0), customElements.get("pop-feed") || customElements.define("pop-feed", jn);
|
|
2092
2114
|
//#endregion
|
|
2093
2115
|
//#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
|
|
2094
|
-
function jn(e) {
|
|
2095
|
-
return Nn(e);
|
|
2096
|
-
}
|
|
2097
2116
|
function Mn(e) {
|
|
2098
|
-
return e
|
|
2117
|
+
return Pn(e);
|
|
2099
2118
|
}
|
|
2100
2119
|
function Nn(e) {
|
|
2101
|
-
|
|
2102
|
-
|
|
2120
|
+
return e.assignedSlot ? e.assignedSlot : e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode;
|
|
2121
|
+
}
|
|
2122
|
+
function Pn(e) {
|
|
2123
|
+
for (let t = e; t; t = Nn(t)) if (t instanceof Element && getComputedStyle(t).display === "none") return null;
|
|
2124
|
+
for (let t = Nn(e); t; t = Nn(t)) {
|
|
2103
2125
|
if (!(t instanceof Element)) continue;
|
|
2104
2126
|
let e = getComputedStyle(t);
|
|
2105
|
-
if (e.display !== "contents" && (e.position !== "static" ||
|
|
2127
|
+
if (e.display !== "contents" && (e.position !== "static" || Ht(e) || t.tagName === "BODY")) return t;
|
|
2106
2128
|
}
|
|
2107
2129
|
return null;
|
|
2108
2130
|
}
|
|
2109
2131
|
//#endregion
|
|
2110
2132
|
//#region src/components/pop-grid.ts
|
|
2111
|
-
var
|
|
2133
|
+
var Fn = "https://www.popgrids.io", In = new Set([
|
|
2134
|
+
"start",
|
|
2135
|
+
"center",
|
|
2136
|
+
"end"
|
|
2137
|
+
]), Ln = new Set(["sm", "lg"]), Rn = new Set([
|
|
2138
|
+
"auto",
|
|
2139
|
+
"up",
|
|
2140
|
+
"down"
|
|
2141
|
+
]), zn = N("\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"), Bn = class extends P {
|
|
2112
2142
|
constructor(...e) {
|
|
2113
2143
|
super(...e), this._initialized = !1;
|
|
2114
2144
|
}
|
|
2115
2145
|
get styleSheets() {
|
|
2116
|
-
return [
|
|
2146
|
+
return [zn];
|
|
2147
|
+
}
|
|
2148
|
+
static get observedAttributes() {
|
|
2149
|
+
return [
|
|
2150
|
+
"data-align",
|
|
2151
|
+
"data-layout",
|
|
2152
|
+
"data-position",
|
|
2153
|
+
"data-icon",
|
|
2154
|
+
"data-preview-count"
|
|
2155
|
+
];
|
|
2117
2156
|
}
|
|
2118
2157
|
connectedCallback() {
|
|
2119
2158
|
if (this._initialized) return;
|
|
2120
2159
|
this._initialized = !0;
|
|
2121
|
-
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ??
|
|
2160
|
+
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ?? Fn, n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id");
|
|
2122
2161
|
this._store = new k({
|
|
2123
2162
|
apiUrl: t,
|
|
2124
2163
|
publicKey: e,
|
|
2125
2164
|
pageUrl: n,
|
|
2126
2165
|
externalId: r
|
|
2127
|
-
}), _e(this, this._store), super.connectedCallback(), this._store.load().then((n) => {
|
|
2166
|
+
}), _e(this, this._store), super.connectedCallback(), this._store.setOverrides(this._readOverridesFromAttributes()), this._store.load().then((n) => {
|
|
2128
2167
|
n && me(t, e);
|
|
2129
2168
|
});
|
|
2130
2169
|
}
|
|
2170
|
+
_readOverridesFromAttributes() {
|
|
2171
|
+
let e = {}, t = this.getAttribute("data-align");
|
|
2172
|
+
t && In.has(t) && (e.align = t);
|
|
2173
|
+
let n = this.getAttribute("data-layout");
|
|
2174
|
+
n && Ln.has(n) && (e.layout = n);
|
|
2175
|
+
let r = this.getAttribute("data-position");
|
|
2176
|
+
r && Rn.has(r) && (e.position = r);
|
|
2177
|
+
let i = this.getAttribute("data-icon");
|
|
2178
|
+
i && (e.icon = i);
|
|
2179
|
+
let a = this.getAttribute("data-preview-count");
|
|
2180
|
+
if (a !== null) {
|
|
2181
|
+
let t = Number(a);
|
|
2182
|
+
Number.isInteger(t) && t > 0 && (e.previewCount = t);
|
|
2183
|
+
}
|
|
2184
|
+
return e;
|
|
2185
|
+
}
|
|
2186
|
+
_applyOverridesFromAttributes() {
|
|
2187
|
+
this._store && this._store.setOverrides(this._readOverridesFromAttributes());
|
|
2188
|
+
}
|
|
2189
|
+
onDataAlignChanged() {
|
|
2190
|
+
this._applyOverridesFromAttributes();
|
|
2191
|
+
}
|
|
2192
|
+
onDataLayoutChanged() {
|
|
2193
|
+
this._applyOverridesFromAttributes();
|
|
2194
|
+
}
|
|
2195
|
+
onDataPositionChanged() {
|
|
2196
|
+
this._applyOverridesFromAttributes();
|
|
2197
|
+
}
|
|
2198
|
+
onDataIconChanged() {
|
|
2199
|
+
this._applyOverridesFromAttributes();
|
|
2200
|
+
}
|
|
2201
|
+
onDataPreviewCountChanged() {
|
|
2202
|
+
this._applyOverridesFromAttributes();
|
|
2203
|
+
}
|
|
2131
2204
|
disconnectedCallback() {
|
|
2132
2205
|
this._floatingCleanup?.(), this._store.destroy(), ve(this), super.disconnectedCallback();
|
|
2133
2206
|
}
|
|
@@ -2149,21 +2222,21 @@ var Pn = N("\n :host {\n display: block;\n position: relative;\n }\n\n
|
|
|
2149
2222
|
let r = this._store.grid.value;
|
|
2150
2223
|
if (!r) return;
|
|
2151
2224
|
let i = [];
|
|
2152
|
-
i = [
|
|
2225
|
+
i = [wn({
|
|
2153
2226
|
mainAxis: r.position === "down" ? -16 : -54,
|
|
2154
2227
|
crossAxis: -18
|
|
2155
|
-
})], (!r.position || r.position === "auto") && i.push(
|
|
2228
|
+
})], (!r.position || r.position === "auto") && i.push(En({
|
|
2156
2229
|
fallbackPlacements: ["bottom-start", "top-start"],
|
|
2157
2230
|
fallbackStrategy: "bestFit",
|
|
2158
2231
|
padding: 16
|
|
2159
2232
|
}));
|
|
2160
|
-
let a = (e) =>
|
|
2161
|
-
|
|
2233
|
+
let a = (e) => bn.getOffsetParent(e, Mn), o = () => {
|
|
2234
|
+
Dn(t, n, {
|
|
2162
2235
|
placement: r.position === "down" ? "bottom-start" : "top-start",
|
|
2163
2236
|
middleware: i,
|
|
2164
2237
|
strategy: "fixed",
|
|
2165
2238
|
platform: {
|
|
2166
|
-
...
|
|
2239
|
+
...bn,
|
|
2167
2240
|
getOffsetParent: a
|
|
2168
2241
|
}
|
|
2169
2242
|
}).then(({ x: e, y: t, placement: r }) => {
|
|
@@ -2173,22 +2246,22 @@ var Pn = N("\n :host {\n display: block;\n position: relative;\n }\n\n
|
|
|
2173
2246
|
});
|
|
2174
2247
|
});
|
|
2175
2248
|
};
|
|
2176
|
-
this._floatingCleanup =
|
|
2249
|
+
this._floatingCleanup = Cn(t, n, o);
|
|
2177
2250
|
});
|
|
2178
2251
|
}
|
|
2179
2252
|
getTemplate() {
|
|
2180
2253
|
return "\n <div class=\"grid\">\n <pop-widget></pop-widget>\n <pop-feed></pop-feed>\n </div>\n ";
|
|
2181
2254
|
}
|
|
2182
2255
|
};
|
|
2183
|
-
customElements.get("pop-grid") || customElements.define("pop-grid",
|
|
2256
|
+
customElements.get("pop-grid") || customElements.define("pop-grid", Bn);
|
|
2184
2257
|
//#endregion
|
|
2185
2258
|
//#region src/components/pop-widget.ts
|
|
2186
|
-
var
|
|
2259
|
+
var Vn = N("\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"), Hn = class extends P {
|
|
2187
2260
|
constructor(...e) {
|
|
2188
2261
|
super(...e), this.events = { click: "onClick" };
|
|
2189
2262
|
}
|
|
2190
2263
|
get styleSheets() {
|
|
2191
|
-
return [
|
|
2264
|
+
return [Vn];
|
|
2192
2265
|
}
|
|
2193
2266
|
onClick() {
|
|
2194
2267
|
this.gridStore.error.value || (this.gridStore.open.value = !this.gridStore.open.value);
|
|
@@ -2203,14 +2276,14 @@ var In = N("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
2203
2276
|
getTemplate() {
|
|
2204
2277
|
if (this.gridStore.loading.value) return "<div class=\"widget\"><div class=\"skeleton mask mask-squircle\"></div></div>";
|
|
2205
2278
|
if (this.gridStore.error.value) return "<div class=\"error-badge\">Error: there was a problem loading the PopGrid</div>";
|
|
2206
|
-
let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length;
|
|
2279
|
+
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";
|
|
2207
2280
|
return `
|
|
2208
2281
|
<div class="widget">
|
|
2209
2282
|
${e.map((t, n) => {
|
|
2210
|
-
let
|
|
2211
|
-
return t?.image ? `<pop-comment-avatar size="
|
|
2283
|
+
let i = e.length + n, a = t?.id ?? t?.name ?? "";
|
|
2284
|
+
return t?.image ? `<pop-comment-avatar size="${r}" style="z-index: ${i}" data-color-key="${a}">
|
|
2212
2285
|
<img src="${t.image}" alt="${t.name ?? "User"}" />
|
|
2213
|
-
</pop-comment-avatar>` : `<pop-comment-avatar size="
|
|
2286
|
+
</pop-comment-avatar>` : `<pop-comment-avatar size="${r}" style="z-index: ${i}" data-color-key="${a}">
|
|
2214
2287
|
${L(t?.name)}
|
|
2215
2288
|
</pop-comment-avatar>`;
|
|
2216
2289
|
}).join("")}
|
|
@@ -2222,13 +2295,14 @@ var In = N("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
2222
2295
|
</div>
|
|
2223
2296
|
</span>
|
|
2224
2297
|
</div>
|
|
2298
|
+
<pop-comment-icon variant="add" theme="${i}" size="xs"></pop-comment-icon>
|
|
2225
2299
|
</div>
|
|
2226
2300
|
`;
|
|
2227
2301
|
}
|
|
2228
2302
|
};
|
|
2229
2303
|
//#endregion
|
|
2230
2304
|
//#region src/index.ts
|
|
2231
|
-
if (F([O(k)],
|
|
2305
|
+
if (F([O(k)], Hn.prototype, "gridStore", void 0), customElements.get("pop-widget") || customElements.define("pop-widget", Hn), typeof document < "u") {
|
|
2232
2306
|
let e = "https://rsms.me/inter/inter.css";
|
|
2233
2307
|
if (!document.querySelector(`link[href="${e}"]`)) {
|
|
2234
2308
|
let t = document.createElement("link");
|