@popgrids/embed 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +2 -1
- package/dist/components/pop-comment-icon.d.ts +1 -0
- package/dist/components/pop-comment-icon.d.ts.map +1 -1
- package/dist/components/pop-grid.d.ts.map +1 -1
- package/dist/components/pop-widget.d.ts.map +1 -1
- package/dist/embed.js +19 -8
- package/dist/embed.js.map +1 -1
- package/dist/index.cjs +15 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +19 -8
- package/dist/index.js.map +1 -1
- package/dist/loader.js +1 -1
- package/dist/store/grid-store.d.ts +6 -6
- package/dist/store/grid-store.d.ts.map +1 -1
- package/dist/types/models.d.ts +3 -0
- package/dist/types/models.d.ts.map +1 -1
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -142,7 +142,8 @@ through the monorepo's changesets flow; see "Releasing ui and embed" in the root
|
|
|
142
142
|
(0.0.7 or later; older releases have no loader). It uses the `CLOUDFLARE_R2_API_TOKEN` secret, an
|
|
143
143
|
R2 token scoped to the `popgrids` bucket. That token can write anywhere in the bucket, which
|
|
144
144
|
also serves the marketing videos, so the workflow's object keys are fixed: `embed.js` and
|
|
145
|
-
`embed/<version>/`, nothing else.
|
|
145
|
+
`embed/<version>/`, nothing else. R2 accepts a bucket-scoped token only through its S3-compatible
|
|
146
|
+
API, so the workflow uploads with the AWS CLI, using S3 credentials derived from the token.
|
|
146
147
|
- **CORS:** the loader loads the bundle as a cross-origin module, which browsers refuse without
|
|
147
148
|
`Access-Control-Allow-Origin`. A Transform Rule in the `popgrids.io` zone (Rules → Transform
|
|
148
149
|
Rules → Modify Response Header) sets `Access-Control-Allow-Origin: *` on `cdn.popgrids.io`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pop-comment-icon.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"pop-comment-icon.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA0R7D,qBAAa,cAAe,SAAQ,WAAW;IAC7C,SAAS,KAAK,WAAW,oBAExB;IAED,MAAM,KAAK,kBAAkB,aAE5B;IAED,kBAAkB;IAIlB,gBAAgB;IAIhB,gBAAgB;IAIhB,aAAa;IAIb,cAAc;IAId,gBAAgB;IAIhB,aAAa;IAIb,iBAAiB;IAIjB,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,SAAS,CAEhC;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAMpC;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,OAAO,GAAG,SAAS,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAEnC;IAED,IAAI,OAAO,IAAI,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAErE;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,EAEzE;IAED,IAAI,IAAI,IAAI,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAEjD;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,EAErD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1B;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,IAAI,CAE7B;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAMjC;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK;IAS9B,IAAI,IAAI,IAAI,MAAM,CA0FjB;IAED,SAAS,CAAC,MAAM;IAoBhB,SAAS,CAAC,WAAW,IAAI,MAAM;CAoChC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pop-grid.d.ts","sourceRoot":"","sources":["../../src/components/pop-grid.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,QAAQ,EAAsB,MAAM,wBAAwB,CAAC;AAGtF,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAmC7D,qBAAa,OAAQ,SAAQ,WAAW;IACtC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,KAAK,CAAC,CAAW;IAEzB;;;;OAIG;IACH,IAAI,IAAI,IAAI,QAAQ,GAAG,SAAS,CAE/B;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,QAAQ,EAGtB;IAED,iHAAiH;IACjH,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,SAAS,KAAK,WAAW,oBAExB;IAMD,MAAM,KAAK,kBAAkB,aAE5B;IAED,iBAAiB;IAuDjB,OAAO,CAAC,4BAA4B;
|
|
1
|
+
{"version":3,"file":"pop-grid.d.ts","sourceRoot":"","sources":["../../src/components/pop-grid.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,QAAQ,EAAsB,MAAM,wBAAwB,CAAC;AAGtF,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAmC7D,qBAAa,OAAQ,SAAQ,WAAW;IACtC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,KAAK,CAAC,CAAW;IAEzB;;;;OAIG;IACH,IAAI,IAAI,IAAI,QAAQ,GAAG,SAAS,CAE/B;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,QAAQ,EAGtB;IAED,iHAAiH;IACjH,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,SAAS,KAAK,WAAW,oBAExB;IAMD,MAAM,KAAK,kBAAkB,aAE5B;IAED,iBAAiB;IAuDjB,OAAO,CAAC,4BAA4B;IAmCpC,OAAO,CAAC,6BAA6B;IAOrC,kBAAkB;IAIlB,mBAAmB;IAInB,qBAAqB;IAIrB,iBAAiB;IAIjB,yBAAyB;IAIzB,oBAAoB;IAQpB,SAAS,CAAC,YAAY;IA4CtB,SAAS,CAAC,WAAW,IAAI,MAAM;CAQhC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pop-widget.d.ts","sourceRoot":"","sources":["../../src/components/pop-widget.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAkJ7D,qBAAa,SAAU,SAAQ,WAAW;IACpB,SAAS,EAAG,SAAS,CAAC;IAE1C,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO;IAQjB,SAAS,CAAC,YAAY;
|
|
1
|
+
{"version":3,"file":"pop-widget.d.ts","sourceRoot":"","sources":["../../src/components/pop-widget.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAkJ7D,qBAAa,SAAU,SAAQ,WAAW;IACpB,SAAS,EAAG,SAAS,CAAC;IAE1C,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO;IAQjB,SAAS,CAAC,YAAY;IAqBtB,SAAS,CAAC,WAAW,IAAI,MAAM;CA4ChC"}
|
package/dist/embed.js
CHANGED
|
@@ -2373,7 +2373,7 @@ var Rn = 3e4, zn = 3, Bn = 1, Vn = (e) => {
|
|
|
2373
2373
|
Z([K($)], Kn.prototype, "gridStore", void 0), Z([K(G)], Kn.prototype, "authStore", void 0), customElements.get("pop-comment-bar") || customElements.define("pop-comment-bar", Kn);
|
|
2374
2374
|
//#endregion
|
|
2375
2375
|
//#region src/components/pop-comment-icon.ts
|
|
2376
|
-
var qn = J("\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"), Jn = class extends Y {
|
|
2376
|
+
var qn = J("\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 /* Hidden until it loads, so the plus shows while it loads or if it fails. */\n .comment-icon__icon-image {\n display: none;\n width: var(--pop-comment-icon-size);\n height: var(--pop-comment-icon-size);\n object-fit: contain;\n }\n\n .comment-icon__icon-image--loaded {\n display: flex;\n }\n\n .comment-icon__icon {\n display: flex;\n }\n\n .comment-icon__icon-image--loaded + .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--loaded {\n display: none;\n }\n\n .comment-icon:hover .comment-icon__icon-image--loaded + .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"), Jn = class extends Y {
|
|
2377
2377
|
constructor(...e) {
|
|
2378
2378
|
super(...e), this.events = { click: "onClick" };
|
|
2379
2379
|
}
|
|
@@ -2475,13 +2475,24 @@ var qn = J("\n :host {\n /* Mode-level theme colors (defaults for light mode
|
|
|
2475
2475
|
let e = "";
|
|
2476
2476
|
return this.theme === "brand" ? this.variant === "add" ? e = "\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11 4.58331V17.4166M4.58333 11H17.4167\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n " : this.variant === "close" && (e = "\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n ") : this.theme === "neutral" && (this.variant === "add" ? e = "\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.0002 4.58301V17.4163M4.5835 10.9997H17.4168\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n " : this.variant === "close" ? e = "\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.4628 11.4627L20.5373 20.5373M11.4628 20.5373L20.5373 11.4627\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n " : this.variant === "more" ? e = "\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.8335 16.5L7.3335 11L12.8335 5.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n " : this.variant === "send" ? e = "\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.0394 3.68048C18.2139 3.61601 18.3837 3.78583 18.3193 3.96036L12.3858 20.0241C12.314 20.2185 12.0369 20.2123 11.9739 20.0149L9.89172 13.4908C9.86908 13.4199 9.88424 13.3423 9.93191 13.2851L14.4838 7.82287C14.6536 7.61906 14.3807 7.34616 14.1769 7.516L8.71467 12.0678C8.65746 12.1155 8.57987 12.1307 8.50893 12.108L1.98489 10.0259C1.78743 9.96287 1.78121 9.68575 1.97565 9.61393L18.0394 3.68048Z\"\n fill=\"currentColor\"\n />\n </svg>\n " : this.variant === "cancel" && (e = "\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n ")), e;
|
|
2477
2477
|
}
|
|
2478
|
+
render() {
|
|
2479
|
+
super.render();
|
|
2480
|
+
let e = this.getElement(".comment-icon__icon-image");
|
|
2481
|
+
if (!e || !this.iconUrl) return;
|
|
2482
|
+
let t = () => {
|
|
2483
|
+
e.classList.add("comment-icon__icon-image--loaded");
|
|
2484
|
+
let t = this.getElement(".comment-icon");
|
|
2485
|
+
t?.classList.remove(`comment-icon--theme-${this.theme}`), t?.classList.add("comment-icon--theme-brand");
|
|
2486
|
+
};
|
|
2487
|
+
e.addEventListener("load", t, { once: !0 }), e.addEventListener("error", () => e.remove(), { once: !0 }), e.src = this.iconUrl, e.complete && e.naturalWidth > 0 && t();
|
|
2488
|
+
}
|
|
2478
2489
|
getTemplate() {
|
|
2479
2490
|
let e = this.disabled ? "disabled" : "", t = [
|
|
2480
2491
|
"comment-icon",
|
|
2481
2492
|
this.size ? `comment-icon--size-${this.size}` : "",
|
|
2482
2493
|
this.theme ? `comment-icon--theme-${this.theme}` : "",
|
|
2483
2494
|
this.variant ? `comment-icon--variant-${this.variant}` : ""
|
|
2484
|
-
].filter(Boolean).join(" "), n = this.iconUrl ? `<img
|
|
2495
|
+
].filter(Boolean).join(" "), n = this.iconUrl ? `<img alt="" class="comment-icon__icon-image" />
|
|
2485
2496
|
<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}"` : "";
|
|
2486
2497
|
return `
|
|
2487
2498
|
<button
|
|
@@ -2738,7 +2749,7 @@ var tr = J("\n :host {\n display: block;\n width: 100%;\n --pop-commen
|
|
|
2738
2749
|
if (!e) return "";
|
|
2739
2750
|
let t = this.gridStore.comments.value.find((t) => t.id === e);
|
|
2740
2751
|
if (!t) return "";
|
|
2741
|
-
let n = t.status === "deleted", r = t.authorDeleted === !0, i = n || r, a = i ? "" : t.author?.image ? `<img src="${t.author.image}" alt="${t.author.name ?? "User avatar"}" />` : rt(t.author?.name), o = this.gridStore.replyingTo.value, s = e !== null && o === e, c = this.size, l = this.authStore.currentUser.value, u = l && t.author && l.id === t.author.id, d = l && !n ? `<div class="comment__menu">
|
|
2752
|
+
let n = t.status === "deleted", r = t.authorDeleted === !0, i = n || r, a = i ? "" : t.author?.image ? `<img src="${t.author.image}" alt="${t.author.name ?? "User avatar"}" loading="lazy" />` : rt(t.author?.name), o = this.gridStore.replyingTo.value, s = e !== null && o === e, c = this.size, l = this.authStore.currentUser.value, u = l && t.author && l.id === t.author.id, d = l && !n ? `<div class="comment__menu">
|
|
2742
2753
|
<button class="comment__menu-trigger" data-ref="menu-trigger" type="button">
|
|
2743
2754
|
<svg
|
|
2744
2755
|
width="18"
|
|
@@ -3038,7 +3049,7 @@ var dr = "https://www.popgrids.io", fr = /* @__PURE__ */ new Set([
|
|
|
3038
3049
|
let r = this.getAttribute("data-position");
|
|
3039
3050
|
r && mr.has(r) && (e.position = r);
|
|
3040
3051
|
let i = this.getAttribute("data-icon");
|
|
3041
|
-
i && (e.
|
|
3052
|
+
i && (e.iconUrl = i);
|
|
3042
3053
|
let a = this.getAttribute("data-preview-count");
|
|
3043
3054
|
if (a !== null) {
|
|
3044
3055
|
let t = Number(a);
|
|
@@ -3073,7 +3084,7 @@ var dr = "https://www.popgrids.io", fr = /* @__PURE__ */ new Set([
|
|
|
3073
3084
|
if (!t) return;
|
|
3074
3085
|
let n = Array.from(t.classList).filter((e) => e.startsWith("grid--"));
|
|
3075
3086
|
if (n.length > 0 && t.classList.remove(...n), e) {
|
|
3076
|
-
e.align && t.classList.add(`grid--align-${e.align}`), e.appearance && t.classList.add(`grid--appearance-${e.appearance}`), e.
|
|
3087
|
+
e.align && t.classList.add(`grid--align-${e.align}`), e.appearance && t.classList.add(`grid--appearance-${e.appearance}`), e.layout && t.classList.add(`grid--layout-${e.layout}`), e.position && t.classList.add(`grid--position-${e.position}`);
|
|
3077
3088
|
let n = e.previewCount ?? this._store.previewCount;
|
|
3078
3089
|
t.classList.add(`grid--preview-${n}`);
|
|
3079
3090
|
}
|
|
@@ -3107,13 +3118,13 @@ var _r = J("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
3107
3118
|
this.addEffect(() => {
|
|
3108
3119
|
this.gridStore.loading.value, this.gridStore.error.value, this.gridStore.previewAvatars.value, this.gridStore.comments.value, this.gridStore.grid.value;
|
|
3109
3120
|
let e = !!this.gridStore.error.value;
|
|
3110
|
-
this.toggleAttribute("data-error", e), e && this.gridStore.open.value && (this.gridStore.open.value = !1), this.render();
|
|
3121
|
+
this.toggleAttribute("data-error", e), e && this.gridStore.open.value && (this.gridStore.open.value = !1), this.render(), this.setAttr("pop-comment-icon", "icon-url", this.gridStore.grid.value?.iconUrl ?? null);
|
|
3111
3122
|
});
|
|
3112
3123
|
}
|
|
3113
3124
|
getTemplate() {
|
|
3114
3125
|
if (this.gridStore.loading.value) return "<div class=\"widget\"><div class=\"skeleton mask mask-squircle\"></div></div>";
|
|
3115
3126
|
if (this.gridStore.error.value) return "<div class=\"error-badge\">Error: there was a problem loading the PopGrid</div>";
|
|
3116
|
-
let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length
|
|
3127
|
+
let e = this.gridStore.previewAvatars.value, t = this.gridStore.comments.value.length;
|
|
3117
3128
|
return `
|
|
3118
3129
|
<div class="widget">
|
|
3119
3130
|
${e.map((t, n) => {
|
|
@@ -3132,7 +3143,7 @@ var _r = J("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
|
|
|
3132
3143
|
</div>
|
|
3133
3144
|
</span>
|
|
3134
3145
|
</div>
|
|
3135
|
-
<pop-comment-icon variant="add" theme="
|
|
3146
|
+
<pop-comment-icon variant="add" theme="neutral" size="xs"></pop-comment-icon>
|
|
3136
3147
|
</div>
|
|
3137
3148
|
`;
|
|
3138
3149
|
}
|