@popgrids/embed 0.0.2 → 0.0.3

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 CHANGED
@@ -44,7 +44,7 @@ to load:
44
44
  ```html
45
45
  <script type="module" src="https://unpkg.com/@popgrids/embed/dist/embed.js"></script>
46
46
 
47
- <pop-grid data-key="pk_your_public_key" data-api-url="https://api.popgrids.io"></pop-grid>
47
+ <pop-grid data-key="pk_your_public_key"></pop-grid>
48
48
  ```
49
49
 
50
50
  ## `<pop-grid>` attributes
@@ -52,7 +52,7 @@ to load:
52
52
  | Attribute | Required | Description |
53
53
  | -------------- | -------- | ------------------------------------------------------------------------------- |
54
54
  | `data-key` | yes | Your grid's public key (`pk_…`). |
55
- | `data-api-url` | yes | Base URL of the PopGrids API. |
55
+ | `data-api-url` | no | Base URL of the PopGrids API. Defaults to `https://www.popgrids.io`. |
56
56
  | `data-id` | no | Names the thread. Same `data-id` = same discussion across pages. Defaults to the page's canonical URL. |
57
57
 
58
58
  ## License
@@ -1 +1 @@
1
- {"version":3,"file":"pop-grid.d.ts","sourceRoot":"","sources":["../../src/components/pop-grid.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA4B7D,qBAAa,OAAQ,SAAQ,WAAW;IACtC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,MAAM,CAAa;IAE3B,SAAS,KAAK,WAAW,oBAExB;IAED,iBAAiB;IAiCjB,oBAAoB;IAOpB,SAAS,CAAC,YAAY;IAuFtB,SAAS,CAAC,WAAW,IAAI,MAAM;CAQhC"}
1
+ {"version":3,"file":"pop-grid.d.ts","sourceRoot":"","sources":["../../src/components/pop-grid.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA8B7D,qBAAa,OAAQ,SAAQ,WAAW;IACtC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,MAAM,CAAa;IAE3B,SAAS,KAAK,WAAW,oBAExB;IAED,iBAAiB;IAoCjB,oBAAoB;IAOpB,SAAS,CAAC,YAAY;IAuFtB,SAAS,CAAC,WAAW,IAAI,MAAM;CAQhC"}
package/dist/embed.js CHANGED
@@ -2108,17 +2108,17 @@ function Nn(e) {
2108
2108
  }
2109
2109
  //#endregion
2110
2110
  //#region src/components/pop-grid.ts
2111
- var Pn = 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"), Fn = class extends P {
2111
+ var Pn = "https://www.popgrids.io", Fn = 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"), In = class extends P {
2112
2112
  constructor(...e) {
2113
2113
  super(...e), this._initialized = !1;
2114
2114
  }
2115
2115
  get styleSheets() {
2116
- return [Pn];
2116
+ return [Fn];
2117
2117
  }
2118
2118
  connectedCallback() {
2119
2119
  if (this._initialized) return;
2120
2120
  this._initialized = !0;
2121
- let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ?? "", n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id");
2121
+ let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ?? Pn, n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id");
2122
2122
  this._store = new k({
2123
2123
  apiUrl: t,
2124
2124
  publicKey: e,
@@ -2180,15 +2180,15 @@ var Pn = N("\n :host {\n display: block;\n position: relative;\n }\n\n
2180
2180
  return "\n <div class=\"grid\">\n <pop-widget></pop-widget>\n <pop-feed></pop-feed>\n </div>\n ";
2181
2181
  }
2182
2182
  };
2183
- customElements.get("pop-grid") || customElements.define("pop-grid", Fn);
2183
+ customElements.get("pop-grid") || customElements.define("pop-grid", In);
2184
2184
  //#endregion
2185
2185
  //#region src/components/pop-widget.ts
2186
- var In = 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"), Ln = class extends P {
2186
+ var Ln = 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"), Rn = class extends P {
2187
2187
  constructor(...e) {
2188
2188
  super(...e), this.events = { click: "onClick" };
2189
2189
  }
2190
2190
  get styleSheets() {
2191
- return [In];
2191
+ return [Ln];
2192
2192
  }
2193
2193
  onClick() {
2194
2194
  this.gridStore.error.value || (this.gridStore.open.value = !this.gridStore.open.value);
@@ -2228,7 +2228,7 @@ var In = N("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text:
2228
2228
  };
2229
2229
  //#endregion
2230
2230
  //#region src/index.ts
2231
- if (F([O(k)], Ln.prototype, "gridStore", void 0), customElements.get("pop-widget") || customElements.define("pop-widget", Ln), typeof document < "u") {
2231
+ if (F([O(k)], Rn.prototype, "gridStore", void 0), customElements.get("pop-widget") || customElements.define("pop-widget", Rn), typeof document < "u") {
2232
2232
  let e = "https://rsms.me/inter/inter.css";
2233
2233
  if (!document.querySelector(`link[href="${e}"]`)) {
2234
2234
  let t = document.createElement("link");