@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 +2 -2
- package/dist/components/pop-grid.d.ts.map +1 -1
- package/dist/embed.js +7 -7
- package/dist/embed.js.map +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1140,17 +1140,17 @@ function He(e) {
|
|
|
1140
1140
|
}
|
|
1141
1141
|
//#endregion
|
|
1142
1142
|
//#region src/components/pop-grid.ts
|
|
1143
|
-
var Ue = F("\n :host {\n display: block;\n position: relative;\n }\n\n .grid {\n display: flex;\n height: 100%;\n position: relative;\n width: 100%;\n }\n\n .grid--align-start {\n justify-content: flex-start;\n }\n\n .grid--align-center {\n justify-content: center;\n }\n\n .grid--align-end {\n justify-content: flex-end;\n }\n"),
|
|
1143
|
+
var Ue = "https://www.popgrids.io", We = F("\n :host {\n display: block;\n position: relative;\n }\n\n .grid {\n display: flex;\n height: 100%;\n position: relative;\n width: 100%;\n }\n\n .grid--align-start {\n justify-content: flex-start;\n }\n\n .grid--align-center {\n justify-content: center;\n }\n\n .grid--align-end {\n justify-content: flex-end;\n }\n"), Ge = class extends I {
|
|
1144
1144
|
constructor(...e) {
|
|
1145
1145
|
super(...e), this._initialized = !1;
|
|
1146
1146
|
}
|
|
1147
1147
|
get styleSheets() {
|
|
1148
|
-
return [
|
|
1148
|
+
return [We];
|
|
1149
1149
|
}
|
|
1150
1150
|
connectedCallback() {
|
|
1151
1151
|
if (this._initialized) return;
|
|
1152
1152
|
this._initialized = !0;
|
|
1153
|
-
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ??
|
|
1153
|
+
let e = this.getAttribute("data-key") ?? this.getAttribute("public-key") ?? "", t = this.getAttribute("data-api-url") ?? this.getAttribute("api-url") ?? Ue, n = this.getAttribute("data-page-url") ?? this.getAttribute("page-url") ?? location.href, r = this.getAttribute("data-id");
|
|
1154
1154
|
this._store = new D({
|
|
1155
1155
|
apiUrl: t,
|
|
1156
1156
|
publicKey: e,
|
|
@@ -1212,15 +1212,15 @@ var Ue = F("\n :host {\n display: block;\n position: relative;\n }\n\n
|
|
|
1212
1212
|
return "\n <div class=\"grid\">\n <pop-widget></pop-widget>\n <pop-feed></pop-feed>\n </div>\n ";
|
|
1213
1213
|
}
|
|
1214
1214
|
};
|
|
1215
|
-
customElements.get("pop-grid") || customElements.define("pop-grid",
|
|
1215
|
+
customElements.get("pop-grid") || customElements.define("pop-grid", Ge);
|
|
1216
1216
|
//#endregion
|
|
1217
1217
|
//#region src/components/pop-widget.ts
|
|
1218
|
-
var
|
|
1218
|
+
var Ke = F("\n :host {\n --error-badge-bg: #fef2f2;\n --error-badge-text: #991b1b;\n --error-badge-border: #fecaca;\n\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --error-badge-bg: #450a0a;\n --error-badge-text: #fca5a5;\n --error-badge-border: #7f1d1d;\n }\n }\n\n :host(.dark) {\n --error-badge-bg: #450a0a;\n --error-badge-text: #fca5a5;\n --error-badge-border: #7f1d1d;\n }\n\n :host([data-error]) {\n cursor: default;\n }\n\n .error-badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 10px;\n border-radius: var(--pop-radius-full);\n border: 1px solid var(--error-badge-border);\n background: var(--error-badge-bg);\n color: var(--error-badge-text);\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n white-space: nowrap;\n }\n\n .widget {\n display: inline-flex;\n align-items: flex-start;\n }\n\n .widget > :not([hidden]) ~ :not([hidden]) {\n margin-left: -6px;\n }\n\n .skeleton {\n width: 32px;\n height: 32px;\n background: var(--pop-muted);\n animation: pulse 1.5s ease-in-out infinite;\n }\n\n @keyframes pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n }\n\n .count {\n --count-size: calc(32px + var(--count-border-size));\n --count-background: var(--pop-background);\n --count-border-color: rgba(0 0 32 / 16%);\n --count-border-size: 1px;\n --count-color: var(--pop-foreground);\n\n align-items: center;\n background-color: var(--pop-background);\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n padding: calc(var(--count-border-size) / 2);\n position: relative;\n z-index: 10;\n\n width: calc(var(--count-size) + (calc(var(--count-border-size))));\n height: calc(var(--count-size) + (calc(var(--count-border-size))));\n }\n\n .count__background {\n background-color: var(--count-border-color);\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n }\n\n .count__content {\n align-items: center;\n background: var(--count-background);\n display: flex;\n justify-content: center;\n overflow: hidden;\n height: var(--count-size);\n width: var(--count-size);\n }\n\n .count__label {\n color: var(--count-color);\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n letter-spacing: -0.96px;\n line-height: 28px;\n text-align: center;\n user-select: none;\n }\n\n .count__label-container {\n align-items: center;\n background: var(--pop-background);\n display: flex;\n height: calc(100% - calc(var(--count-border-size) * 2));\n justify-content: center;\n position: relative;\n text-indent: calc(calc(var(--count-border-size) * 2) * -1);\n width: calc(100% - calc(var(--count-border-size) * 2));\n z-index: 20;\n }\n"), $ = class extends I {
|
|
1219
1219
|
constructor(...e) {
|
|
1220
1220
|
super(...e), this.events = { click: "onClick" };
|
|
1221
1221
|
}
|
|
1222
1222
|
get styleSheets() {
|
|
1223
|
-
return [
|
|
1223
|
+
return [Ke];
|
|
1224
1224
|
}
|
|
1225
1225
|
onClick() {
|
|
1226
1226
|
this.gridStore.error.value || (this.gridStore.open.value = !this.gridStore.open.value);
|