@saasquatch/squatch-js 2.8.2-20 → 2.8.2-22
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/dist/squatch.cjs.js +346 -76
- package/dist/squatch.cjs.js.map +1 -1
- package/dist/squatch.esm.js +346 -76
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +346 -76
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +1 -1
- package/package.json +1 -1
package/dist/squatch.js
CHANGED
|
@@ -1120,72 +1120,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1120
1120
|
this.container = container;
|
|
1121
1121
|
}
|
|
1122
1122
|
}
|
|
1123
|
-
//Old code for testing
|
|
1124
|
-
// async load() {
|
|
1125
|
-
// const brandingConfig = this.context.widgetConfig?.values?.brandingConfig;
|
|
1126
|
-
// const sizes = brandingConfig?.widgetSize?.embeddedWidgets;
|
|
1127
|
-
// const maxWidth = sizes?.maxWidth ? formatWidth(sizes.maxWidth) : "";
|
|
1128
|
-
// const minWidth = sizes?.minWidth ? formatWidth(sizes.minWidth) : "";
|
|
1129
|
-
// const frame = this._createFrame({ minWidth, maxWidth });
|
|
1130
|
-
// const element = this._findElement();
|
|
1131
|
-
// if (this.context?.container) {
|
|
1132
|
-
// // Custom container is used
|
|
1133
|
-
// element.style.visibility = "hidden";
|
|
1134
|
-
// element.style.height = "0";
|
|
1135
|
-
// element.style["overflow-y"] = "hidden";
|
|
1136
|
-
// }
|
|
1137
|
-
// if (this.container) {
|
|
1138
|
-
// if (element.shadowRoot) {
|
|
1139
|
-
// if (element.shadowRoot.lastChild?.nodeName === "IFRAME") {
|
|
1140
|
-
// element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
|
|
1141
|
-
// } else {
|
|
1142
|
-
// element.shadowRoot.appendChild(frame);
|
|
1143
|
-
// }
|
|
1144
|
-
// }
|
|
1145
|
-
// // Widget reloaded - replace existing element
|
|
1146
|
-
// else if (element.firstChild) {
|
|
1147
|
-
// element.replaceChild(frame, element.firstChild);
|
|
1148
|
-
// // Add iframe for the first time
|
|
1149
|
-
// } else {
|
|
1150
|
-
// element.appendChild(frame);
|
|
1151
|
-
// }
|
|
1152
|
-
// } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
|
|
1153
|
-
// element.appendChild(frame);
|
|
1154
|
-
// }
|
|
1155
|
-
// const { contentWindow } = frame;
|
|
1156
|
-
// if (!contentWindow) {
|
|
1157
|
-
// throw new Error("Frame needs a content window");
|
|
1158
|
-
// }
|
|
1159
|
-
// const frameDoc = contentWindow.document;
|
|
1160
|
-
// frameDoc.open();
|
|
1161
|
-
// frameDoc.write(this.content);
|
|
1162
|
-
// frameDoc.write(
|
|
1163
|
-
// `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
|
|
1164
|
-
// );
|
|
1165
|
-
// frameDoc.close();
|
|
1166
|
-
// domready(frameDoc, async () => {
|
|
1167
|
-
// const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
|
|
1168
|
-
// // @ts-ignore -- number will be cast to string by browsers
|
|
1169
|
-
// frame.height = frameDoc.body.scrollHeight;
|
|
1170
|
-
// // Adjust frame height when size of body changes
|
|
1171
|
-
// /* istanbul ignore next: hard to test */
|
|
1172
|
-
// const ro = new contentWindow["ResizeObserver"]((entries) => {
|
|
1173
|
-
// for (const entry of entries) {
|
|
1174
|
-
// const { height } = entry.contentRect;
|
|
1175
|
-
// // @ts-ignore -- number will be cast to string by browsers
|
|
1176
|
-
// frame.height = height;
|
|
1177
|
-
// }
|
|
1178
|
-
// });
|
|
1179
|
-
// const container = await this._findInnerContainer(frame);
|
|
1180
|
-
// ro.observe(container);
|
|
1181
|
-
// if (this._shouldFireLoadEvent()) {
|
|
1182
|
-
// this._loadEvent(_sqh);
|
|
1183
|
-
// _log("loaded");
|
|
1184
|
-
// } else if (frameDoc) {
|
|
1185
|
-
// this._attachLoadEventListener(frameDoc, _sqh);
|
|
1186
|
-
// }
|
|
1187
|
-
// });
|
|
1188
|
-
// }
|
|
1189
1123
|
async load() {
|
|
1190
1124
|
var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
1191
1125
|
const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
|
|
@@ -1196,11 +1130,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1196
1130
|
const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
|
|
1197
1131
|
const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
|
|
1198
1132
|
const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
|
|
1199
|
-
console.log({
|
|
1200
|
-
brandingConfig,
|
|
1201
|
-
initialHeight,
|
|
1202
|
-
widgetConfig: this.context.widgetConfig
|
|
1203
|
-
});
|
|
1204
1133
|
const frame = this._createFrame({
|
|
1205
1134
|
minWidth,
|
|
1206
1135
|
maxWidth,
|
|
@@ -1935,6 +1864,351 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1935
1864
|
}
|
|
1936
1865
|
};
|
|
1937
1866
|
}
|
|
1867
|
+
const getSkeleton = ({
|
|
1868
|
+
height = "500px",
|
|
1869
|
+
skeletonBackgroundColor = "#e0e0e0",
|
|
1870
|
+
skeletonShimmerColor = "#f5f5f5",
|
|
1871
|
+
borderColor = "#ccc"
|
|
1872
|
+
}) => {
|
|
1873
|
+
return `
|
|
1874
|
+
<style>
|
|
1875
|
+
* {
|
|
1876
|
+
box-sizing: border-box;
|
|
1877
|
+
padding: 0;
|
|
1878
|
+
margin: 0;
|
|
1879
|
+
}
|
|
1880
|
+
|
|
1881
|
+
.widget-container {
|
|
1882
|
+
background: white;
|
|
1883
|
+
width: 100%;
|
|
1884
|
+
max-width: 900px;
|
|
1885
|
+
padding: 40px;
|
|
1886
|
+
border-radius: 12px;
|
|
1887
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
1888
|
+
box-sizing: border-box;
|
|
1889
|
+
}
|
|
1890
|
+
|
|
1891
|
+
@keyframes shimmer {
|
|
1892
|
+
0% {
|
|
1893
|
+
background-position: -100% 0;
|
|
1894
|
+
}
|
|
1895
|
+
100% {
|
|
1896
|
+
background-position: 100% 0;
|
|
1897
|
+
}
|
|
1898
|
+
}
|
|
1899
|
+
|
|
1900
|
+
.skeleton {
|
|
1901
|
+
background: ${skeletonBackgroundColor};
|
|
1902
|
+
background: linear-gradient(
|
|
1903
|
+
90deg,
|
|
1904
|
+
${skeletonBackgroundColor} 25%,
|
|
1905
|
+
${skeletonShimmerColor} 50%,
|
|
1906
|
+
${skeletonBackgroundColor} 75%
|
|
1907
|
+
);
|
|
1908
|
+
background-size: 200% 100%;
|
|
1909
|
+
animation: shimmer 1.5s infinite linear;
|
|
1910
|
+
border-radius: 6px;
|
|
1911
|
+
margin-bottom: 12px;
|
|
1912
|
+
}
|
|
1913
|
+
|
|
1914
|
+
.sk-title-lg {
|
|
1915
|
+
height: 36px;
|
|
1916
|
+
width: 50%;
|
|
1917
|
+
margin-bottom: 16px;
|
|
1918
|
+
}
|
|
1919
|
+
.sk-title-md {
|
|
1920
|
+
height: 28px;
|
|
1921
|
+
width: 30%;
|
|
1922
|
+
margin-bottom: 20px;
|
|
1923
|
+
margin-top: 40px;
|
|
1924
|
+
}
|
|
1925
|
+
.sk-text {
|
|
1926
|
+
height: 16px;
|
|
1927
|
+
width: 80%;
|
|
1928
|
+
margin-bottom: 8px;
|
|
1929
|
+
}
|
|
1930
|
+
.sk-text-short {
|
|
1931
|
+
width: 40%;
|
|
1932
|
+
}
|
|
1933
|
+
.sk-label {
|
|
1934
|
+
height: 14px;
|
|
1935
|
+
width: 25%;
|
|
1936
|
+
margin-bottom: 10px;
|
|
1937
|
+
}
|
|
1938
|
+
|
|
1939
|
+
.hero-section {
|
|
1940
|
+
display: flex;
|
|
1941
|
+
gap: 40px;
|
|
1942
|
+
margin-bottom: 40px;
|
|
1943
|
+
border-bottom: 1px solid ${borderColor};
|
|
1944
|
+
padding-bottom: 40px;
|
|
1945
|
+
flex-direction: row;
|
|
1946
|
+
}
|
|
1947
|
+
.hero-content {
|
|
1948
|
+
flex: 1;
|
|
1949
|
+
display: flex;
|
|
1950
|
+
flex-direction: column;
|
|
1951
|
+
justify-content: center;
|
|
1952
|
+
}
|
|
1953
|
+
.hero-image {
|
|
1954
|
+
flex: 1;
|
|
1955
|
+
height: 300px;
|
|
1956
|
+
border-radius: 12px;
|
|
1957
|
+
}
|
|
1958
|
+
|
|
1959
|
+
.share-section {
|
|
1960
|
+
margin-bottom: 40px;
|
|
1961
|
+
}
|
|
1962
|
+
.sk-input {
|
|
1963
|
+
height: 50px;
|
|
1964
|
+
width: 100%;
|
|
1965
|
+
border-radius: 8px;
|
|
1966
|
+
margin-bottom: 16px;
|
|
1967
|
+
}
|
|
1968
|
+
.social-buttons {
|
|
1969
|
+
display: flex;
|
|
1970
|
+
gap: 12px;
|
|
1971
|
+
}
|
|
1972
|
+
.sk-btn-social {
|
|
1973
|
+
flex: 1;
|
|
1974
|
+
height: 50px;
|
|
1975
|
+
border-radius: 8px;
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
.stats-section {
|
|
1979
|
+
display: flex;
|
|
1980
|
+
gap: 24px;
|
|
1981
|
+
margin-bottom: 40px;
|
|
1982
|
+
padding: 30px 0;
|
|
1983
|
+
border-top: 1px solid ${borderColor};
|
|
1984
|
+
border-bottom: 1px solid ${borderColor};
|
|
1985
|
+
}
|
|
1986
|
+
.stat-card {
|
|
1987
|
+
flex: 1;
|
|
1988
|
+
display: flex;
|
|
1989
|
+
flex-direction: column;
|
|
1990
|
+
align-items: center;
|
|
1991
|
+
}
|
|
1992
|
+
.stat-divider {
|
|
1993
|
+
padding-left: 24px;
|
|
1994
|
+
}
|
|
1995
|
+
|
|
1996
|
+
.sk-stat-num {
|
|
1997
|
+
height: 48px;
|
|
1998
|
+
width: 120px;
|
|
1999
|
+
margin-bottom: 8px;
|
|
2000
|
+
}
|
|
2001
|
+
.sk-stat-label {
|
|
2002
|
+
height: 18px;
|
|
2003
|
+
width: 80px;
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
.table-header {
|
|
2007
|
+
display: flex;
|
|
2008
|
+
gap: 16px;
|
|
2009
|
+
margin-bottom: 16px;
|
|
2010
|
+
}
|
|
2011
|
+
.sk-th {
|
|
2012
|
+
height: 16px;
|
|
2013
|
+
}
|
|
2014
|
+
.table-row {
|
|
2015
|
+
display: flex;
|
|
2016
|
+
align-items: center;
|
|
2017
|
+
gap: 16px;
|
|
2018
|
+
padding: 16px 0;
|
|
2019
|
+
border-bottom: 1px solid ${borderColor};
|
|
2020
|
+
}
|
|
2021
|
+
|
|
2022
|
+
.col-user {
|
|
2023
|
+
flex: 2;
|
|
2024
|
+
}
|
|
2025
|
+
.col-status {
|
|
2026
|
+
flex: 1;
|
|
2027
|
+
}
|
|
2028
|
+
.col-reward {
|
|
2029
|
+
flex: 2;
|
|
2030
|
+
}
|
|
2031
|
+
.col-date {
|
|
2032
|
+
flex: 1;
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
.sk-badge {
|
|
2036
|
+
height: 28px;
|
|
2037
|
+
width: 90px;
|
|
2038
|
+
border-radius: 14px;
|
|
2039
|
+
}
|
|
2040
|
+
.sk-reward-block {
|
|
2041
|
+
height: 36px;
|
|
2042
|
+
width: 100%;
|
|
2043
|
+
border-radius: 6px;
|
|
2044
|
+
}
|
|
2045
|
+
|
|
2046
|
+
.pagination {
|
|
2047
|
+
display: flex;
|
|
2048
|
+
justify-content: flex-end;
|
|
2049
|
+
gap: 8px;
|
|
2050
|
+
margin-top: 24px;
|
|
2051
|
+
}
|
|
2052
|
+
.sk-btn-page {
|
|
2053
|
+
height: 36px;
|
|
2054
|
+
width: 64px;
|
|
2055
|
+
border-radius: 6px;
|
|
2056
|
+
margin-bottom: 0;
|
|
2057
|
+
}
|
|
2058
|
+
|
|
2059
|
+
@media (max-width: 768px) {
|
|
2060
|
+
body {
|
|
2061
|
+
padding: 20px;
|
|
2062
|
+
}
|
|
2063
|
+
.widget-container {
|
|
2064
|
+
padding: 24px;
|
|
2065
|
+
}
|
|
2066
|
+
|
|
2067
|
+
.hero-section {
|
|
2068
|
+
flex-direction: column-reverse;
|
|
2069
|
+
gap: 24px;
|
|
2070
|
+
}
|
|
2071
|
+
.hero-image {
|
|
2072
|
+
height: 220px;
|
|
2073
|
+
width: 100%;
|
|
2074
|
+
}
|
|
2075
|
+
.sk-title-lg {
|
|
2076
|
+
width: 80%;
|
|
2077
|
+
}
|
|
2078
|
+
|
|
2079
|
+
.col-date {
|
|
2080
|
+
display: none;
|
|
2081
|
+
}
|
|
2082
|
+
}
|
|
2083
|
+
|
|
2084
|
+
@media (max-width: 480px) {
|
|
2085
|
+
body {
|
|
2086
|
+
padding: 10px;
|
|
2087
|
+
}
|
|
2088
|
+
.widget-container {
|
|
2089
|
+
padding: 16px;
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
.sk-stat-num {
|
|
2093
|
+
width: 80px;
|
|
2094
|
+
height: 40px;
|
|
2095
|
+
}
|
|
2096
|
+
|
|
2097
|
+
.col-reward {
|
|
2098
|
+
display: none;
|
|
2099
|
+
}
|
|
2100
|
+
|
|
2101
|
+
.col-user {
|
|
2102
|
+
flex: 3;
|
|
2103
|
+
}
|
|
2104
|
+
.col-status {
|
|
2105
|
+
flex: 2;
|
|
2106
|
+
display: flex;
|
|
2107
|
+
justify-content: flex-end;
|
|
2108
|
+
}
|
|
2109
|
+
}
|
|
2110
|
+
</style>
|
|
2111
|
+
|
|
2112
|
+
<div class="widget-container">
|
|
2113
|
+
<div class="hero-section">
|
|
2114
|
+
<div class="hero-content">
|
|
2115
|
+
<div class="skeleton sk-title-lg"></div>
|
|
2116
|
+
<div class="skeleton sk-text"></div>
|
|
2117
|
+
<div class="skeleton sk-text sk-text-short"></div>
|
|
2118
|
+
</div>
|
|
2119
|
+
<div class="skeleton hero-image"></div>
|
|
2120
|
+
</div>
|
|
2121
|
+
|
|
2122
|
+
<div class="share-section">
|
|
2123
|
+
<div class="skeleton sk-label"></div>
|
|
2124
|
+
<div class="skeleton sk-input"></div>
|
|
2125
|
+
<div class="social-buttons">
|
|
2126
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2127
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2128
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2129
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2130
|
+
</div>
|
|
2131
|
+
</div>
|
|
2132
|
+
|
|
2133
|
+
<div
|
|
2134
|
+
class="skeleton sk-title-md"
|
|
2135
|
+
style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
|
|
2136
|
+
></div>
|
|
2137
|
+
<div
|
|
2138
|
+
class="skeleton sk-text"
|
|
2139
|
+
style="width: 60%; margin-left: auto; margin-right: auto"
|
|
2140
|
+
></div>
|
|
2141
|
+
|
|
2142
|
+
<div class="stats-section">
|
|
2143
|
+
<div class="stat-card">
|
|
2144
|
+
<div class="skeleton sk-stat-num"></div>
|
|
2145
|
+
<div class="skeleton sk-stat-label"></div>
|
|
2146
|
+
</div>
|
|
2147
|
+
<div class="stat-card stat-divider">
|
|
2148
|
+
<div class="skeleton sk-stat-num"></div>
|
|
2149
|
+
<div class="skeleton sk-stat-label"></div>
|
|
2150
|
+
</div>
|
|
2151
|
+
</div>
|
|
2152
|
+
|
|
2153
|
+
<div class="skeleton sk-title-md"></div>
|
|
2154
|
+
|
|
2155
|
+
<div class="table-header">
|
|
2156
|
+
<div class="skeleton sk-th col-user"></div>
|
|
2157
|
+
<div class="skeleton sk-th col-status"></div>
|
|
2158
|
+
<div class="skeleton sk-th col-reward"></div>
|
|
2159
|
+
<div class="skeleton sk-th col-date"></div>
|
|
2160
|
+
</div>
|
|
2161
|
+
|
|
2162
|
+
<div class="table-row">
|
|
2163
|
+
<div class="col-user">
|
|
2164
|
+
<div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
|
|
2165
|
+
</div>
|
|
2166
|
+
<div class="col-status">
|
|
2167
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2168
|
+
</div>
|
|
2169
|
+
<div class="col-reward">
|
|
2170
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2171
|
+
</div>
|
|
2172
|
+
<div class="col-date">
|
|
2173
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2174
|
+
</div>
|
|
2175
|
+
</div>
|
|
2176
|
+
<div class="table-row">
|
|
2177
|
+
<div class="col-user">
|
|
2178
|
+
<div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
|
|
2179
|
+
</div>
|
|
2180
|
+
<div class="col-status">
|
|
2181
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2182
|
+
</div>
|
|
2183
|
+
<div class="col-reward">
|
|
2184
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2185
|
+
</div>
|
|
2186
|
+
<div class="col-date">
|
|
2187
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2188
|
+
</div>
|
|
2189
|
+
</div>
|
|
2190
|
+
<div class="table-row">
|
|
2191
|
+
<div class="col-user">
|
|
2192
|
+
<div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
|
|
2193
|
+
</div>
|
|
2194
|
+
<div class="col-status">
|
|
2195
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2196
|
+
</div>
|
|
2197
|
+
<div class="col-reward">
|
|
2198
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2199
|
+
</div>
|
|
2200
|
+
<div class="col-date">
|
|
2201
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2202
|
+
</div>
|
|
2203
|
+
</div>
|
|
2204
|
+
|
|
2205
|
+
<div class="pagination">
|
|
2206
|
+
<div class="skeleton sk-btn-page"></div>
|
|
2207
|
+
<div class="skeleton sk-btn-page"></div>
|
|
2208
|
+
</div>
|
|
2209
|
+
</div>
|
|
2210
|
+
`;
|
|
2211
|
+
};
|
|
1938
2212
|
const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
|
|
1939
2213
|
function decodeUserJwt(tokenStr) {
|
|
1940
2214
|
var _a2;
|
|
@@ -2170,11 +2444,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
2170
2444
|
async connectedCallback() {
|
|
2171
2445
|
this.loaded = true;
|
|
2172
2446
|
this.container = this.getAttribute("container");
|
|
2173
|
-
const skeletonHTML =
|
|
2174
|
-
<div>
|
|
2175
|
-
<h1>Do I see this text ????</h1>
|
|
2176
|
-
</div>
|
|
2177
|
-
`;
|
|
2447
|
+
const skeletonHTML = getSkeleton({});
|
|
2178
2448
|
const skeletonContainer = document.createElement("div");
|
|
2179
2449
|
skeletonContainer.id = "loading-skeleton";
|
|
2180
2450
|
skeletonContainer.innerHTML = skeletonHTML;
|